From 38bec6c326ad7ac02f2db74f189144239fcbc336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cyril=20=C5=A0ebek?= <cyril@cyrilsebek.cz>
Date: Tue, 2 Apr 2024 21:04:11 +0200
Subject: [PATCH] Started work on the Hero section.

---
 src/components/Hero.astro            | 11 +++++++++++
 src/components/Navbar.astro          | 12 ++++++------
 src/components/Navlink.astro         |  9 +++++++--
 src/layouts/MainLayout.astro         |  8 ++++----
 src/pages/[lang]/contact/index.astro | 16 ++++++++++++++++
 src/pages/[lang]/index.astro         |  5 +++--
 src/pages/index.astro                | 10 +++++++---
 src/style/index.css                  |  8 ++++----
 tailwind.config.mjs                  | 19 ++++++++++++++-----
 9 files changed, 72 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Hero.astro
 create mode 100644 src/pages/[lang]/contact/index.astro

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
new file mode 100644
index 0000000..f4fb3ff
--- /dev/null
+++ b/src/components/Hero.astro
@@ -0,0 +1,11 @@
+<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">
+    </div>
+
+    <div class="hidden bg-pink-200 col-start-2 col-end-6 row-start-2 row-end-6 z-40"></div>
+</div> 
\ No newline at end of file
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 72653f2..2eada85 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -3,21 +3,21 @@ import Navlink from "./Navlink.astro";
 const links = [
 	{
 		display: "Home",
-		icon: "H",
 		href: "/"
-	},{
+	}, {
 		display: "Blog",
-		icon: "B",
 		href: "/blog"
 	}, {
 		display: "About",
-		icon: "A",
 		href: "/about"
+	}, {
+		display: "Contact",
+		href: "/contact"
 	}
 ];
 ---
-<nav class="bg-white w-full flex justify-center">
+<nav class="w-full flex justify-center">
 	<div class="justify-around w-full md:w-[767px] flex">
-		{ links.map((item) => (<Navlink href={item.href}, display={item.display}, icon={item.icon} isActive={ (Astro.url.pathname.replace(Astro.currentLocale + "/", "").slice(0,-1) || "/") == item.href}/>)) }
+		{ links.map((item) => (<Navlink href={item.href}, display={item.display}, isActive={ (Astro.url.pathname.replace(Astro.currentLocale + "/", "").slice(0,-1) || "/") == item.href}/>)) }
 	</div>
 </nav>
\ No newline at end of file
diff --git a/src/components/Navlink.astro b/src/components/Navlink.astro
index 00797c8..1d0de62 100644
--- a/src/components/Navlink.astro
+++ b/src/components/Navlink.astro
@@ -1,6 +1,11 @@
 ---
 import { getRelativeLocaleUrl } from "astro:i18n";
 
-const { display, href, icon, isActive } = Astro.props;
+const { display, href, isActive } = Astro.props;
 ---
-<a href={getRelativeLocaleUrl(Astro.currentLocale, href)} class={(isActive ? "bg-yellow-300 " : " ") + "w-full text-center"}><span class="hidden lg:visible">{icon}</span><span>{display}</span></a>
+
+<a
+    href={getRelativeLocaleUrl(Astro.currentLocale, href)}
+    class={(isActive ? "bg-accent " : "bg-content hover:bg-primary ") + " w-full text-center mx-0.5"}
+    ><span>{display}</span></a
+>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index c5c52b8..5778316 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -1,18 +1,18 @@
 ---
-const { title, description, lang } = Astro.props;
+const { title, description, lang, themeOverride } = Astro.props;
 import Navbar from "../components/Navbar.astro";
 import "../style/index.css";
 ---
 <!DOCTYPE html>
-<html lang={lang}>
+<html lang={lang} data-theme={themeOverride ? themeOverride : undefined}>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content={description}>
     <title>{title}</title>
 </head>
-<body class="bg-bkg">
-    <Navbar />
+<body class="bg-bkg h-dvh w-full">
+    <!--<Navbar /> -->
     <slot/>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/pages/[lang]/contact/index.astro b/src/pages/[lang]/contact/index.astro
new file mode 100644
index 0000000..dcb150a
--- /dev/null
+++ b/src/pages/[lang]/contact/index.astro
@@ -0,0 +1,16 @@
+---
+import MainLayout from "../../../layouts/MainLayout.astro";
+
+//@ts-ignore
+import { dictionary } from "../../../i18n/dictionary";
+const { title, description } = dictionary[Astro.currentLocale];
+
+export async function getStaticPaths() {
+  return ["en", "fr", "cs", "de"].map((lang) => {
+    return { params: { lang } };
+  });
+}
+---
+<MainLayout title={title} description={description} lang={Astro.currentLocale}>
+
+</MainLayout>
\ No newline at end of file
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 6aa3ff3..860e250 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -1,5 +1,6 @@
 ---
 import MainLayout from "../../layouts/MainLayout.astro";
+import Hero from "../../components/Hero.astro";
 
 //@ts-ignore
 import { dictionary } from "../../i18n/dictionary";
@@ -11,6 +12,6 @@ export async function getStaticPaths() {
   });
 }
 ---
-<MainLayout title={title} description={description} lang={Astro.currentLocale}>
-
+<MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="">
+  <Hero />
 </MainLayout>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e5916c9..8bf5cd2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,8 +12,12 @@ if (Astro.preferredLocale) {
 <MainLayout title="sitetitle" description="sitedescription" lang="en">
   <h1>Welcome</h1>
   <p>
-    "homeP1"
-    {Astro.url.toString()}
-    {getLocaleByPath("en")}
+    You shouldn't be here. please continue to one of the following:
   </p>
+  <ul>
+    <li><a href="/en">English Version / English</a></li>
+    <li><a href="/cs">Czech Version / Česky</a></li>
+    <li><a href="/de">German Version [WIP] / Deutsch [laufende Arbeiten]</a></li>
+    <li><a href="/fr">French Version [WIP] / Français [travail en cours]</a></li>
+  </ul>
 </MainLayout>
\ No newline at end of file
diff --git a/src/style/index.css b/src/style/index.css
index 33aceed..7bfee8f 100644
--- a/src/style/index.css
+++ b/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-000224-ffe500&fonts=Poppins-Poppins 
+Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-000568-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%, 7ˇ;
+            --color-secondary: 237deg, 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%, 7ˇ;
+        --color-secondary: 237deg, 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%, 93%;
+        --color-secondary: 237deg, 100%, 20%;
         --color-accent: 262deg, 73%, 47%;
     }
 }
\ No newline at end of file
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 49489c7..8793f2a 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,14 +1,23 @@
 /** @type {import('tailwindcss').Config} */
+function withOpacity(variableName) {
+	return ({ opacityValue }) => {
+	  if (opacityValue !== undefined) {
+		return `hsla(var(${variableName}), ${opacityValue})`
+	  }
+	  return `hsl(var(${variableName}))`
+	}
+  }
+
 export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {
 			colors: {
-				bkg: 'hsl(var(--color-bkg))',
-				content: 'hsl(var(--color-content))',
-				primary: 'hsl(var(--color-primary))',
-				secondary: 'hsl(var(--color-secondary))',
-				accent: 'hsl(var(--color-accent))',
+				bkg: withOpacity('--color-bkg'),
+				content: withOpacity('--color-content'),
+				primary: withOpacity('--color-primary'),
+				secondary: withOpacity('--color-secondary'),
+				accent: withOpacity('--color-accent'),
 			},
 		},
 	},