From c63ee04783566695d779b7857685912eb8e5c871 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cyril=20=C5=A0ebek?= <cyril@cyrilsebek.cz>
Date: Thu, 4 Apr 2024 21:33:47 +0200
Subject: [PATCH] sync

---
 src/components/About.astro       | 13 ++++++++
 src/components/AboutModule.astro | 29 ++++++++++++++++++
 src/components/Hero.astro        | 52 +++++++++++++++++++++-----------
 src/layouts/SinglePage.astro     | 12 ++++++--
 src/pages/[lang]/index.astro     |  3 +-
 5 files changed, 87 insertions(+), 22 deletions(-)
 create mode 100644 src/components/About.astro
 create mode 100644 src/components/AboutModule.astro

diff --git a/src/components/About.astro b/src/components/About.astro
new file mode 100644
index 0000000..54d867c
--- /dev/null
+++ b/src/components/About.astro
@@ -0,0 +1,13 @@
+---
+import SinglePage from "../layouts/SinglePage.astro"
+
+import { dictionary } from "../i18n/dictionary";
+import AboutModule from "./AboutModule.astro";
+const { title, description } = dictionary[Astro.currentLocale];
+---
+<SinglePage>
+   <div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4">
+     <AboutModule row="0" image="/temp.jpg"/>
+     <AboutModule row="1" image="/temp.jpg" flipped />
+     <AboutModule row="2" image="/temp.jpg" alt="image"/>
+</SinglePage>
diff --git a/src/components/AboutModule.astro b/src/components/AboutModule.astro
new file mode 100644
index 0000000..bc9fecf
--- /dev/null
+++ b/src/components/AboutModule.astro
@@ -0,0 +1,29 @@
+---
+const { row, flipped, image, alt } = Astro.props;
+---
+
+<div class={`rows-start-${row} row-span-1 h-full w-full`}>
+    <div class="grid grid-cols-3 h-full w-full gap-4">
+        {
+            flipped ? (
+                <>
+                    <div class="bg-red-500 rounded-lg col-start-0 col-span-2 ">
+                        <slot />
+                    </div>
+                    <div class="bg-yellow-500 h-full rounded-lg col-start-3 pb-50">
+                        <img src={image} alt={alt} class="object-cover h-full w-full rounded-lg"/>
+                    </div>
+                </>
+            ) : (
+                <>
+                    <div class="h-full rounded-lg col-start-0">
+                        <img src={image} alt={alt} class="object-cover  rounded-lg"/>
+                    </div>
+                    <div class="bg-red-500 rounded-lg col-start-2 col-span-2">
+                        <slot />
+                    </div>
+                </>
+            )
+        }
+    </div>
+</div>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 1b47079..b25d628 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,23 +1,39 @@
 ---
-import SinglePage from "../layouts/SinglePage.astro"
+import SinglePage from "../layouts/SinglePage.astro";
+
+import { dictionary } from "../i18n/dictionary";
+const { title, description } = dictionary[Astro.currentLocale];
 ---
+
 <SinglePage>
-<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 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-lg 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-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ">ipsum dolor</button>
-        </div>
+    <!-- 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-lg 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-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content"
+            >ipsum dolor</button
+        >
     </div>
-</div>
 </SinglePage>
diff --git a/src/layouts/SinglePage.astro b/src/layouts/SinglePage.astro
index e5259c2..2021dba 100644
--- a/src/layouts/SinglePage.astro
+++ b/src/layouts/SinglePage.astro
@@ -1,3 +1,9 @@
-<div class="snap-start w-screen h-screen">
-	<slot />
-</div>
\ No newline at end of file
+<div class="snap-start w-screen h-screen overflow-clip">
+	<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 h-full p-2 sm:p-6"
+		>
+			<slot />
+		</div>
+	</div>
+</div>
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 6c1a13e..ffd06ee 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -1,6 +1,7 @@
 ---
 import MainLayout from "../../layouts/MainLayout.astro";
 import Hero from "../../components/Hero.astro";
+import About from "../../components/About.astro";
 
 //@ts-ignore
 import { dictionary } from "../../i18n/dictionary";
@@ -14,6 +15,6 @@ export async function getStaticPaths() {
 ---
 <MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="dark">
   <Hero />
-  <Hero />
+  <About />
   <Hero />
 </MainLayout>
\ No newline at end of file