Merge pull request #7 from oliv3340:feat-add-herosection

feat: add hersection and video

messages/en.json

@@ -17,6 +17,9 @@
             "link": "#contact"
         }
     },
+    "Hero": {
+        "text": "freelance devops engineer"
+    },
     "Footer": {
         "title": "Let's keep contact"
     }

messages/fr.json

@@ -17,6 +17,9 @@
             "link": "#contact"
         }
     },
+    "Hero": {
+        "text": "ingenieur devops freelance"
+    },
     "Footer": {
         "title": "Gardons contact"
     }

src/app/[locale]/page.tsx

@@ -1,4 +1,5 @@
 import Footer from "@/components/Footer";
+import HeroSection from "@/components/HeroSection";
 import NavBar from "@/components/navigation/NavBar";
 import { useTranslations } from "next-intl";
 
@@ -7,6 +8,7 @@ export default function Home() {
   return (
     <main className="min-w-screen min-h-screen">
       <NavBar />
+      <HeroSection />
       <Footer />
     </main>
   );

src/components/HeroSection.tsx

@@ -0,0 +1,23 @@
+import { useTranslations } from "next-intl";
+import React from "react";
+
+export default function HeroSection() {
+    const t = useTranslations("Hero")
+    return (
+        <>
+            <div className="min-w-screen h-620 md:h-820 text-white">
+                <div className="w-full absolute -z-40">
+                    <video
+                        autoPlay={true} playsInline={true} muted={true}
+                        className="object-cover brightness-75 h-620 md:h-820"
+                        src="videos/video.mp4" width="100%" height="100%"
+                    />
+                </div>
+                <div className="flex flex-col justify-center items-center h-full align-middle z-40">
+                    <div className="text-5xl md:text-7xl font-title pb-10 md:pb-20 justify-evenly text-center">Olivier Graciannette</div>
+                    <div className="text-xl md:text-4xl uppercase text-center max-w-60 md:max-w-full">{t('text')}</div>
+                </div>
+            </div>
+        </>
+    )
+}

tailwind.config.ts

@@ -29,6 +29,8 @@ const config: Config = {
       },
       height: {
         "hrHeight": "1px",
+        "620": "620px",
+        "820": "820px",
       },
     },
   },