Finished bare-bones Hero section

- Finished bare-bones Hero section without content in both color schemes
- One image in publi/temp.jpg (for hero section, TODO: replace and rename)

TODO:
* jump-scroll
* about sections

src/components/Hero.astro

@@ -1,11 +1,29 @@
-<div class="bg-bkg h-full w-full grid grid-cols-6 grid-rows-6">
+<!--<div class="bg-bkg h-full w-full grid grid-cols-6 grid-rows-6">
     <div class="col-start-1 lg:col-start-2 col-end-5 row-start-2 row-end-4 z-20 bg-bkg/80 p-2 rounded-lg">
         <h1 class="text-4xl text-accent">Lorem Ipsum</h1>
         <h2 class="text-primary">Dolor sit amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio  amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio consequatur aut. </h2>
     </div>
     <div class="bg-teal-200 col-start-1 col-end-7 row-start-1 row-end-7 z-10">
-        <img src="https://loremflickr.com/g/1500/1500/cat,girl/all?lock=132" alt="" class="object-cover h-full w-full">
+        <img src="https://loremflickr.com/g/1500/1500/cat,girl/all?lock=135" alt="" class="object-cover h-full w-full">
     </div>
 
     <div class="hidden bg-pink-200 col-start-2 col-end-6 row-start-2 row-end-6 z-40"></div>
+</div>-->
+<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
+    <div class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6">
+        <!-- Hero Image -->
+        <div class="w-full flex justify-center mt-20">
+            <img src="/temp.jpg" alt="" class="rounded-full"> <!-- https://loremflickr.com/g/200/200/cat,girl/all?lock=135 -->
+        </div>
+        <!-- Hero Text -->
+        <div class="mt-[6rem]">
+            <h1 class="text-accent text-4xl w-full text-center font-extrabold">Lorem Ipsum</h1>
+            <h2 class="text-content text-md w-full text-center mt-[3.2rem]">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A suscipit facilis doloribus, dicta cupiditate sint nisi ad explicabo cumque dolorem quaerat hic aliquid. Iste quia aspernatur nam distinctio, animi dolorum?</h2>
+        </div>
+        <!-- Call action buttons -->
+        <div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
+            <button type="button" class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2">Lorem</button>
+            <button type="button" class="text-xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ">ipsum dolor</button>
+        </div>
+    </div>
 </div>

src/pages/[lang]/index.astro

@@ -12,6 +12,6 @@ export async function getStaticPaths() {
   });
 }
 ---
-<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="">
+<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="dark">
   <Hero />
 </MainLayout>

src/style/index.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 /*
 Light Mode: https://www.realtimecolors.com/dashboard?colors=161618-f0f0f0-FFE500-dbddff-6120cf&fonts=Poppins-Poppins 
-Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-000568-ffe500&fonts=Poppins-Poppins
+Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-390068-ffe500&fonts=Poppins-Poppins
 */
 @layer base {
     :root {
@@ -19,7 +19,7 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
             --color-bkg: 0deg, 0%, 6%;
             --color-content: 240deg, 4%, 91%;
             --color-primary: 262deg, 77%, 44%;
-            --color-secondary: 237deg, 100%, 20%;
+            --color-secondary: 273deg, 100%, 20%;
             --color-accent: 54deg, 100%, 50%;
         }
     }
@@ -28,7 +28,7 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --color-bkg: 0deg, 0%, 6%;
         --color-content: 240deg, 4%, 91%;
         --color-primary: 262deg, 77%, 44%;
-        --color-secondary: 237deg, 100%, 20%;
+        --color-secondary: 273deg, 100%, 20%;
         --color-accent: 54deg, 100%, 50%;
     }
 
@@ -36,7 +36,7 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --color-bkg: 0deg, 0%, 94%;
         --color-content: 240deg, 4%, 9%;
         --color-primary: 54deg, 100%, 50%;
-        --color-secondary: 237deg, 100%, 20%;
+        --color-secondary: 237deg, 100%, 93%;
         --color-accent: 262deg, 73%, 47%;
     }
 }