feat(homepage): added homepage with latest release

mapmarker · Jun 25, 2022 · 2bcc2a1 · 2bcc2a1
1 parent 9e70cae
commit 2bcc2a1
Show file tree

Hide file tree

Showing 11 changed files with 202 additions and 58 deletions.
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class HomeController extends Controller
+{
+    public function index()
+    {
+        $versionEntry = $this->getLatestVersionEntryFromChangelog();
+        return view('welcome', compact('versionEntry'));
+    }
+
+    protected function getLatestVersionEntryFromChangelog()
+    {
+        $changelogContent = file_get_contents(base_path('CHANGELOG.md'));
+        $pieces = explode("# [", $changelogContent);
+        return trim("# [Release " . $pieces[1]);
+    }
+}
diff --git a/public/css/app.css b/public/css/app.css
@@ -573,6 +573,9 @@ video {
 .right-0 {
   right: 0px;
 }
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -583,9 +586,21 @@ video {
 .mt-12 {
   margin-top: 3rem;
 }
+.mt-6 {
+  margin-top: 1.5rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
 .block {
   display: block;
 }
@@ -595,6 +610,9 @@ video {
 .inline-flex {
   display: inline-flex;
 }
+.table {
+  display: table;
+}
 .hidden {
   display: none;
 }
@@ -616,6 +634,9 @@ video {
 .w-auto {
   width: auto;
 }
+.w-full {
+  width: 100%;
+}
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -625,6 +646,9 @@ video {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 .items-center {
   align-items: center;
 }
@@ -634,6 +658,9 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.gap-8 {
+  gap: 2rem;
+}
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -644,21 +671,33 @@ video {
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-md {
   border-radius: 0.375rem;
 }
-.bg-gray-900 {
+.bg-indigo-700\/80 {
+  background-color: rgb(67 56 202 / 0.8);
+}
+.bg-slate-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
-.bg-gray-700 {
+.bg-gray-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 .bg-zinc-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(24 24 27 / var(--tw-bg-opacity));
 }
+.p-6 {
+  padding: 1.5rem;
+}
+.p-8 {
+  padding: 2rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -670,9 +709,9 @@ video {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 .px-3 {
   padding-left: 0.75rem;
@@ -682,19 +721,11 @@ video {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
 .pt-4 {
   padding-top: 1rem;
 }
-.pt-16 {
-  padding-top: 4rem;
+.pb-24 {
+  padding-bottom: 6rem;
 }
 .pr-2 {
   padding-right: 0.5rem;
@@ -705,10 +736,20 @@ video {
 .pb-3 {
   padding-bottom: 0.75rem;
 }
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+.text-right {
+  text-align: right;
+}
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
 }
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -721,16 +762,27 @@ video {
   font-size: 1rem;
   line-height: 1.5rem;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .font-bold {
   font-weight: 700;
 }
+.font-black {
+  font-weight: 900;
+}
 .font-medium {
   font-weight: 500;
 }
 .text-gray-100 {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -747,6 +799,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -756,18 +812,31 @@ video {
     display: none !important;
 }
 
+.hero {
+    background-image: url('/images/map.jpg');
+    background-size: cover;
+    background-position: center center;
+}
+
 .changelog {
-  padding-bottom: 6rem;
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
 .changelog h1, 
-h2 {
+.changelog h2 {
   margin-top: 2rem;
   font-size: 1.5rem;
   line-height: 2rem;
-  font-weight: 700;
+  font-weight: 900;
+}
+
+.changelog.changelog-slim h1, 
+.changelog.changelog-slim h2 {
+  margin-top: 0px;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 900;
 }
 
 .changelog h3 {
@@ -794,11 +863,6 @@ h2 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.hover\:underline:hover {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -859,12 +923,41 @@ h2 {
 
 @media (min-width: 768px) {
 
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
   .md\:inline-block {
     display: inline-block;
   }
 
+  .md\:grid {
+    display: grid;
+  }
+
   .md\:py-10 {
     padding-top: 2.5rem;
     padding-bottom: 2.5rem;
   }
 }
+
+@media (min-width: 1024px) {
+
+  .lg\:p-36 {
+    padding: 9rem;
+  }
+
+  .lg\:py-36 {
+    padding-top: 9rem;
+    padding-bottom: 9rem;
+  }
+
+  .lg\:text-center {
+    text-align: center;
+  }
+
+  .lg\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+}
diff --git a/public/images/map.jpg b/public/images/map.jpg
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,6 @@
 {
     "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/images/hero-3d.jpg": "/images/hero-3d.jpg",
+    "/images/map.jpg": "/images/map.jpg"
 }
diff --git a/resources/assets/images/map.jpg b/resources/assets/images/map.jpg
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -6,13 +6,24 @@
     display: none !important;
 }
 
+.hero {
+    background-image: url('/images/map.jpg');
+    background-size: cover;
+    background-position: center center;
+}
+
 .changelog {
-    @apply text-gray-200 pb-24
+    @apply text-gray-200
 }
 
 .changelog h1,
-h2 {
-    @apply text-2xl mt-8 font-bold
+.changelog h2 {
+    @apply text-2xl mt-8 font-black
+}
+
+.changelog.changelog-slim h1,
+.changelog.changelog-slim h2 {
+    @apply text-2xl mt-0 font-black
 }
 
 .changelog h3 {

diff --git a/resources/views/changelog.blade.php b/resources/views/changelog.blade.php
@@ -7,7 +7,7 @@
             <p class="max-w-3xl">Here is the list of latest changes to the MapMarker.io platform. These notes are compiled
                 automatically with every release so these will be up-to-date with the latest changes available. You can find
                 the source file in our Github repo.</p>
-            <div class="changelog mt-12">
+            <div class="changelog changelog-slim mt-12 pb-24">
                 <x-markdown>{{ $changelogContent }}</x-markdown>
             </div>
         </div>