feat(homepage): updated homepage copy

Author: Jonnx

package.json

@@ -31,6 +31,7 @@
         "@semantic-release/npm": "^9.0.1",
         "@semantic-release/release-notes-generator": "semantic-release/release-notes-generator",
         "@tailwindcss/typography": "^0.5.2",
+        "@xpd/tailwind-3dtransforms": "^1.0.3",
         "autoprefixer": "^10.4.7",
         "axios": "^0.25",
         "commitizen": "^4.2.4",

public/css/app.css

@@ -1,5 +1,6 @@
 {
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css",
-    "/images/map.jpg": "/images/map.jpg"
+    "/images/map.jpg": "/images/map.jpg",
+    "/images/map.png": "/images/map.png"
 }

public/images/map.png

@@ -6,13 +6,28 @@
         <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
             <div class="col-span-1 md:col-span-3">
                 <div>
-                    <div class="rounded-lg lg:text-center p-6 lg:py-24 bg-animated">
-                        <h1 class="text-3xl lg:text-5xl font-bold">
-                            Generate complex map markers on the fly.
-                        </h1>
-                        <p class="text-xl mt-6">
-                            Simplify building complex map-based experiences for modern applications.
-                        </p>
+                    <div class="rounded-lg text-center bg-animated overflow-hidden">
+                        <div class="py-6 lg:pt-24 lg:pb-12 px-6 lg:px-24">
+                            <h1 class="text-3xl lg:text-5xl font-bold">
+                                Custom map markers for your app
+                            </h1>
+                            <p class="text-xl mt-6">
+                                Simplify map-based experiences with better icons.
+                            </p>
+                        </div>
+
+                        {{-- MAP --}}
+                        <div class="perspective-800 h-[300px] overflow-hidden relative">
+                            <img src="{{ asset('/images/map.png') }}" class="w-full transform rotate-x-45 drop-shadow-xl mx-auto opacity-20 absolute left-0 -top-[20vw]">
+
+                            <img src="/api/v3/font-awesome/v6/pin?text=A1&background=CE86F5&size=50" class="absolute left-1/4 top-2/3" alt="Stop #1 Icon" />
+                            <img src="/api/v3/font-awesome/v6/pin?text=A2&background=CE86F5&size=50" class="absolute left-3/4 top-1/3"  alt="Stop #2 Icon" />
+                            <img src="/api/v3/font-awesome/v6/pin?text=A3&background=CE86F5&size=50" class="absolute left-1/2 top-[30px]" alt="Stop #3 Icon" />
+                            <img src="/api/v3/font-awesome/v6/icon?icon=fa-solid+fa-truck&color=FFF&size=50" class="absolute left-1/3 top-1/3" alt="Truck #1 Icon" />
+                            <img src="/api/v3/font-awesome/v6/icon?icon=fa-solid+fa-box&color=FFF&size=50&label=!" class="absolute left-[60%] top-2/3" alt="Truck #1 Icon" />
+                            <img src="/api/v3/font-awesome/v6/icon?icon=fa-solid+fa-house&color=FFF&size=50" class="absolute left-[15%] top-1/4" alt="Home" />
+                        </div>
+
                     </div>
                 </div>
             </div>
@@ -21,7 +36,7 @@
                 <div class="rounded-lg">
                     <div class="rounded-lg text-right p-6" style="background: linear-gradient(0deg, #0f0f10, #131314);">
                         <h1 class="text-3xl lg:text-5xl font-bold">
-                           250,000
+                           200,000
                         </h1>
                         <p class="text-sm mt-2">
                             People see one of our markers every month
@@ -34,7 +49,7 @@
                 <div class="rounded-lg">
                     <div class="rounded-lg text-right p-6" style="background: linear-gradient(0deg, #0f0f10, #131314);">
                         <h1 class="text-3xl lg:text-5xl font-bold">
-                            2,840,000
+                            2,000,000
                         </h1>
                         <p class="text-sm mt-2">
                             Markers are used to improve maps every month
@@ -56,6 +71,65 @@
                 </div>
             </div>
 
+            <div class="md:col-span-3 py-12">
+                <div class="font-black text-3xl uppercase">
+                    Developers trust MapMarker.io
+                </div>
+                <div class="">
+                    We believe trust is earned. All changes are driven by a commitment to end-user performance, reliability, and long-term support (LTS).
+                </div>
+            </div>
+
+            {{-- COMPANIES --}}
+            <div class="col-span-1 lg:xl-span-1 xl:col-span-1 prose prose-invert text-left p-10 rounded-lg" style="background: linear-gradient(145deg, #0f0f10, #171719, #171719, #171719);">
+                <div class="text-2xl font-black mb-4">Petronas</div>
+                <div>
+                    <span class="bg-gray-500 text-white text-xs px-2 py-1 rounded-full uppercase">Logistics</span>
+                </div>
+                <p>
+                    Petronas is a global energy group with presence in over 100 countries. They produce and deliver energy and solutions that power society’s progress.
+                </p>
+                <p>
+                    Petronas leverages MapMarker.io in the ride-hailing app for employees in one of the largest integrated petrochemical facilities in Malaysia.
+                </p>
+            </div>
+
+            <div class="col-span-1 lg:xl-span-1 xl:col-span-1 prose prose-invert text-left p-10 rounded-lg" style="background: linear-gradient(145deg, #0f0f10, #171719, #171719, #171719);">
+                <div class="text-2xl font-black mb-4">Anheuser-Bush</div>
+                <div>
+                    <span class="bg-gray-500 text-white text-xs px-2 py-1 rounded-full uppercase">Retail</span>
+                </div>
+                <p>
+                    When Anheuser-Busch was founded in the 1850s, it started as a small neighborhood brewery. Today, they employ thousands of people across the USA.
+                </p>
+                <p>
+                    Anheuser-Bush uses MapMarker.io to power the store locator tools on their websites to make it easier for customers to find their products in stores nearby.
+                </p>
+            </div>
+
+            <div class="col-span-1 lg:xl-span-1 xl:col-span-1 prose prose-invert text-left p-10 rounded-lg" style="background: linear-gradient(145deg, #0f0f10, #171719, #171719, #171719);">
+                <div class="text-2xl font-black mb-4">Tafel.de</div>
+                <div>
+                    <span class="bg-gray-500 text-white text-xs px-2 py-1 rounded-full uppercase">Logistics</span>
+                </div>
+                <p>
+                    The Tafel supports 1.6 to 2 million people in need of food throughout the country of Germany – nearly one third of them are children and youth.
+                </p>
+                <p>
+                    The Tafel leverages MapMarker.io as part of their digitization efforts to simplify the coordination across teams running food collection amd distibution routes.
+                </p>
+            </div>
+
+            <div class="md:col-span-3 py-12">
+                <div class="font-black text-3xl uppercase">
+                    Get Started
+                </div>
+                <div class="">
+                    Start building better maps in minutes.
+                </div>
+            </div>
+
+
             {{-- PINS --}}
             <div class="col-span-1 lg:xl-span-1 xl:col-span-1 prose prose-invert text-left p-10 rounded-lg" style="background: linear-gradient(145deg, #0f0f10, #171719, #171719, #171719);">
                 <div class="-mb-4">

public/js/app.js

@@ -10,5 +10,6 @@ module.exports = {
     plugins: [
         require('@tailwindcss/typography'),
         require('@tailwindcss/forms'),
+        require("@xpd/tailwind-3dtransforms"),
     ],
-}
+}

public/mix-manifest.json

@@ -1566,11 +1566,11 @@
   resolved "https://codeload.github.com/semantic-release/github/tar.gz/1482296e2c755783115818bf234b0c51d9ada071"
   dependencies:
     "@octokit/core" "^5.0.0"
-    "@octokit/plugin-paginate-rest" "^9.0.0"
+    "@octokit/plugin-paginate-rest" "^8.0.0"
     "@octokit/plugin-retry" "^6.0.0"
-    "@octokit/plugin-throttling" "^8.0.0"
+    "@octokit/plugin-throttling" "^7.0.0"
     "@semantic-release/error" "^4.0.0"
-    aggregate-error "^5.0.0"
+    aggregate-error "^4.0.1"
     debug "^4.3.4"
     dir-glob "^3.0.1"
     globby "^13.1.4"
@@ -1621,16 +1621,16 @@
   version "0.0.0-development"
   resolved "https://codeload.github.com/semantic-release/release-notes-generator/tar.gz/8c47240552f6a7886624cc42702f0aef8022ca96"
   dependencies:
-    conventional-changelog-angular "^7.0.0"
-    conventional-changelog-writer "^7.0.0"
-    conventional-commits-filter "^4.0.0"
-    conventional-commits-parser "^5.0.0"
+    conventional-changelog-angular "^6.0.0"
+    conventional-changelog-writer "^6.0.0"
+    conventional-commits-filter "^3.0.0"
+    conventional-commits-parser "^4.0.0"
     debug "^4.0.0"
     get-stream "^7.0.0"
-    import-from-esm "^1.0.3"
+    import-from "^4.0.0"
     into-stream "^7.0.0"
     lodash-es "^4.17.21"
-    read-pkg-up "^11.0.0"
+    read-pkg-up "^10.0.0"
 
 "@tailwindcss/forms@^0.5.2":
   version "0.5.6"
@@ -2091,6 +2091,11 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.7.0.tgz#e1993689ac42d2b16e9194376cfb6753f6254db1"
   integrity sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==
 
+"@xpd/tailwind-3dtransforms@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@xpd/tailwind-3dtransforms/-/tailwind-3dtransforms-1.0.3.tgz#71871c860943f81333473006b2af88ac49d19233"
+  integrity sha512-LEKfNj57djZAucQ1itu/zinRkYnkhzNjAMhz8DkbguTyBcTDHF1R6CuXO536BFE/YGyHDCYd7tDF5ghSrViUgQ==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"