feat: Create Hero Section

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "gsap": "^3.12.5",
     "lucide-react": "^0.460.0",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",

src/app/components/HeroSection.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useRef, useCallback } from "react";
+import { gsap } from "gsap";
+import Image from "next/image";
+import ChatBot from "../../../public/chat-bot.png";
+import { ArrowUpRight } from "lucide-react";
+
+export function HeroSection() {
+    const animateContainer = useRef<HTMLDivElement[]>([]);
+
+    const animateContainerRef = useCallback((el: HTMLDivElement | null) => {
+        if (el) {
+            animateContainer.current = [...animateContainer.current, el];
+        }
+    }, []);
+
+    useEffect(() => {
+        let containerDelay = 0;
+        animateContainer.current.forEach((container) => {
+            gsap.from(container, {
+                opacity: 0,
+                y: -50,
+                duration: 1,
+                delay: containerDelay,
+                ease: "expo.out",
+            });
+            containerDelay += 0.4;
+        });
+    }, []);
+
+    return (
+        <>
+            <div className="relative flex flex-col items-center justify-center w-screen lg:h-screen py-24 px-8 z-10">
+                <div className="flex flex-col max-w-screen-lg text-center gap-8 lg:gap-12  lg:mt-8" >
+                    <div ref={animateContainerRef}>
+                        <h1 className="text-[clamp(2.7rem,5cqw,5rem)] font-bold leading-tight" > Znajdź swojego{" "} <span className="text-[var(--color-primary)]">promotora!</span></h1>
+                        <p className="text-[clamp(1.2rem,2cqw,1.75rem)] max-w-screen-md mx-auto pt-8" >  Nasz system rekomendacyjny dopasuje go do tytułu lub opisu twojej pracy dyplomowej. </p>
+                    </div>
+                    <div className="flex flex-col md:flex-row justify-center gap-4 text-[1.125rem]" ref={animateContainerRef}>
+                        <button className="px-5 py-4  bg-[var(--color-white)] text-[#010840] rounded-xl">
+                            <a className="flex justify-center items-center gap-2" href="">Wypróbuj <ArrowUpRight size={32} color="#010840" /></a>
+                        </button>
+                        <button className="px-4 py-3 border border-white rounded-xl">
+                            <a href="">Dowiedz się więcej</a>
+                        </button>
+                    </div>
+                    <div className="flex  items-center flex-col justify-center lg:flex-row-reverse lg:items-start lg:gap-5 max-w-screen-lg text-lg text-left leading-snug" >
+                        <div className="bg-[#34386A] max-w-xs max-h-[8.25rem] rounded-3xl px-5 py-4 mt-4" ref={animateContainerRef} >
+                            <p> Wpływ modernistycznego stylu w projektowaniu stron internetowychna percepcję i doświadczenia użytkownika.</p>
+                        </div>
+                        <div className="flex lg:flex-row lg:items-start items-center flex-col-reverse justify-center" ref={animateContainerRef}>
+                            <div className="relative lg:mt-6 " >
+                                <div className="relative container bg-[#1D2150] max-w-xs h-auto rounded-3xl  px-5 py-4 mt-4">
+                                    <div className="absolute left-1/2 top-[-1.25rem] lg:left-[96%] lg:top-1/3 w-0 h-0 border-l-[1.25rem] border-r-[1.25rem] border-b-[1.25rem] border-transparent border-b-[#1D2150] lg:transform lg:rotate-90"></div>
+                                    <p>Oto{" "} <span className="text-[var(--color-primary)] font-semibold"> promotorzy  </span>, którzy mogą Ci pomóc w realizacji tego tematu:</p>
+                                    <h3 className="text-[1.375rem] font-semibold pt-2">Dr hab. Anna Nowak</h3>
+                                    <p>Specjalistka w dziedzinie UX Design i Psychologii Internetu</p>
+                                    <h3 className="text-[1.375rem] font-semibold pt-2"> Dr Jan Kowalski</h3>
+                                    <p>Specjalistka w dziedzinie UX Design</p>
+                                </div>
+                            </div>
+                            <Image src={ChatBot} alt="ChatBot-image" className="max-w-xs" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

src/app/components/Navbar.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import Image from "next/image";
+import SolvroLogo from "../../../public/assets/logo/solvro-dark.png";
+import PromochatorLogo from "../../../public/assets/logo/promochator_logo.png";
+
+import { useState } from "react";
+
+export function Navbar() {
+    const [showSidebar, setShowSidebar] = useState<boolean>(false);
+    return (
+        <>
+            <div className="w-full flex flex-row justify-between items-center gap-12">
+                <div className="flex flex-row gap-2 items-center mr-auto">
+                    <Image src={PromochatorLogo} alt="Promochator Logo" className="w-6" />
+                    <p className="text-lg font-semibold">
+                        Promo<span className="text-[#5f7ecd]">CHAT</span>or
+                    </p>
+                </div>
+                <div className="hidden lg:flex flex-row gap-12 whitespace-nowrap">
+                    <p>Jak to działa?</p>
+                    <p>Jak ci pomożemy?</p>
+                    <p>Regulamin</p>
+                </div>
+                <Image
+                    src={SolvroLogo}
+                    alt="Solvro Logo"
+                    className="hidden lg:flex w-40 ml-auto"
+                />
+                {/* Mobile icon */}
+                <button
+                    title="Otwórz menu"
+                    onClick={() => setShowSidebar(true)}
+                    className="w-6 h-6 flex lg:hidden flex-col gap-2 items-center justify-center"
+                >
+                    <span className="block bg-white w-6 h-0.5" />
+                    <span className="block bg-white w-6 h-0.5" />
+                </button>
+            </div>
+            {showSidebar && (
+                <div className="absolute flex lg:hidden bg-[#040314E5] p-6 top-0 right-0 max-w-sm flex-col gap-12 items-right justify-start w-full h-full">
+                    <div className="flex flex-row items-center justify-between w-full gap-6 h-min">
+                        <Image src={SolvroLogo} alt="Solvro Logo" className="w-40" />
+                        <button
+                            title="Zamknij menu"
+                            onClick={() => setShowSidebar(false)}
+                            className="overflow-hidden aspect-square"
+                        >
+                            <div className="rotate-45">
+                                <span className="absolute block bg-white w-6 h-0.5 rotate-90" />
+                                <span className="block bg-white w-6 h-0.5" />
+                            </div>
+                        </button>
+                    </div>
+                    <div className="flex flex-col w-full text-right gap-6 text-xl">
+                        <p>Jak to działa?</p>
+                        <p>Jak ci pomożemy?</p>
+                        <p>Regulamin</p>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

src/app/globals.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -27,8 +28,11 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem
+    --radius: 0.5rem;
+    --color-white: #E7EAFB;
+    --color-primary: #5F7ECD;
   }
+
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
@@ -56,11 +60,13 @@
     --chart-5: 340 75% 55%
   }
 }
+
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
-}
+}

src/app/page.tsx

@@ -1,3 +1,20 @@
+import { HeroSection } from "./components/HeroSection";
+import { Navbar } from "./components/Navbar";
+import Image from "next/image"
+import BackgroundLines from "../../public/background_lines.png";
+
 export default function Home() {
-  return <div>Goodbye world</div>;
+  return <>
+    <div className="flex flex-col text-background bg-gradient-to-b  from-[#040314] to-[#040A2E] ">
+      <div className="absolute top-0 left-0  flex justify-center w-full bg-gradient-to-b from-[#040314] to-[#030413]">
+        <div className="container w-full p-6">
+          <Navbar />
+        </div>
+      </div>
+      <HeroSection />
+      <Image src={BackgroundLines} alt="Background lines" className="fixed mt-[20rem] w-full" />
+
+    </div>
+
+  </>
 }

tailwind.config.ts

@@ -10,6 +10,9 @@ export default {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['Poppins', 'sans-serif'],  
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",