Feature/UI hanzla

package.json

@@ -25,6 +25,7 @@
     "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.36.4",
+    "embla-carousel-react": "^8.5.1",
     "lucide-react": "^0.462.0",
     "next": "14.2.16",
     "react": "^18",

src/app/(dashboard)/profile/page.tsx

@@ -4,7 +4,7 @@ import { useState } from "react"
 import { Calendar } from "@/src/components/ui/calendar"
 import { Avatar, AvatarFallback, AvatarImage } from "@/src/components/ui/avatar"
 import { Badge } from "@/src/components/ui/badge"
-import { Button } from "@/src/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/src/components/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/src/components/ui/tabs"
 import { CalendarIcon, StarIcon, TrophyIcon, UserIcon } from 'lucide-react'

src/app/(home)/home.css

@@ -3,11 +3,22 @@
     background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
 }
 .content{
-    @apply w-5/12 flex flex-col gap-8
+    @apply w-full sm:w-5/12 flex flex-col gap-8
 }
 .Main-Heading{
     @apply text-[44px] font-bold
 }
 .avatars{
     @apply w-1/2 relative
+}
+.Mentors{
+    @apply text-3xl font-bold mt-10 mb-5 mx-8
+}
+
+.statment{
+    @apply mt-10 pt-10 pb-8 text-center;
+    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+}
+.session-cards{
+    @apply flex flex-row justify-between mx-8 gap-8
 }

src/app/(home)/layout.tsx

@@ -1,57 +1,14 @@
-import Link from 'next/link'
 import React, { ReactNode } from 'react'
-import './home-layout.css'
-import { LinkAsButton } from '@/src/components/LinkAsButton/LinkAsButton'
-import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
+import Header from '@/src/components/HomeLayoutComponents/header'
+import Footer from '@/src/components/HomeLayoutComponents/footer'
+
 
 const PublicLayout = ({ children }: { children: ReactNode }) => {
   return (
     <>
-      <div className="header">
-
-
-        <div className='header-nav'>
-
-          <Link className='nav-brand' href="#">Spark</Link>
-
-          <ul className='nav'>
-            <li className='nav-items'>
-              <Link className='nav-link' href="/dashboard">
-                Dashboard</Link>
-            </li>
-            <li className='nav-items'>
-              <Link className='nav-link' href="#">
-                Find a Mentor</Link>
-            </li>
-            <li className='nav-items'>
-              <Link className='nav-link' href="#">
-                About Us</Link>
-            </li>
-            <li className='nav-items'>
-              <Link className='nav-link' href="#">
-                Pricing</Link>
-            </li>
-            <li className='nav-items'>
-              <Link className='nav-link' href="#">
-                Become a Member</Link>
-            </li>
-          </ul>
-        </div>
-
-        <div className="button-wrapper">
-          <SignedIn>
-            <UserButton userProfileUrl='/profile'/>
-          </SignedIn>
-          <SignedOut>
-            <LinkAsButton href='/sign-up' className='button' variant={'ghost'}>Sign Up</LinkAsButton>
-            <LinkAsButton href='/sign-in' variant={'default'}>Log In</LinkAsButton>
-          </SignedOut>
-        </div>
-
-      </div>
-
+      <Header />
       {children}
-      <div>footer</div>
+      <Footer />
     </>
   )
 }

src/app/(home)/page.tsx

@@ -1,7 +1,12 @@
-import Image from "next/image";
 import './home.css'
 import { Button } from "@/src/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/src/components/ui/avatar";
+import { Carousel, CarouselContent, CarouselItem } from "@/src/components/ui/carousel";
+import LogoCards from "@/src/components/logocards";
+import MentorCard from "@/src/components/mentorcard";
+import SessionCard from '@/src/components/sessioncard';
+
+
 export default function Home() {
   return (
     <>
@@ -14,42 +19,42 @@ export default function Home() {
         </div>
 
         <div className="avatars relative">
-          <div className="absolute top-[-220px] left-[140px] ">
+          <div className="absolute md:top-[-260px] md:left-[20px] top-[-220px] left-[140px] ">
             <Avatar className="w-20 h-20">
               <AvatarImage src="/avatar1.jpg" />
               <AvatarFallback>avatar-1</AvatarFallback>
             </Avatar>
           </div>
 
-          <div className="absolute top-[-250px] left-[510px]">
+          <div className="absolute md:top-[-240px] left-[310px] lg:top-[-250px] lg:left-[510px]">
             <Avatar className="w-20 h-20">
               <AvatarImage src="/avatar2.jpg" />
               <AvatarFallback>avatar-1</AvatarFallback>
             </Avatar>
           </div>
 
-          <div className="absolute top-[-110px] left-[280px]">
+          <div className="absolute md:top-[-145px] md:left-[140px] lg:top-[-110px] lg:left-[280px]">
             <Avatar className="w-20 h-20">
               <AvatarImage src="/avatar3.jpg" />
               <AvatarFallback>avatar-1</AvatarFallback>
             </Avatar>
           </div>
 
-          <div className="absolute top-[140px] left-[180px]">
+          <div className="absolute md:top-[70px] left-[40px] lg:top-[140px] lg:left-[180px]">
             <Avatar className="w-20 h-20">
               <AvatarImage src="/avatar4.jpg" />
               <AvatarFallback>avatar-1</AvatarFallback>
             </Avatar>
           </div>
 
-          <div className="absolute top-[180px] left-[380px]">
+          <div className="absolute md:top-[140px] left-[250px] lg:top-[180px] lg:left-[380px]">
             <Avatar className="w-20 h-20">
               <AvatarImage src="/avatar5.jpg" />
               <AvatarFallback>avatar-1</AvatarFallback>
             </Avatar>
           </div>
 
-          <div className="absolute top-[20px] left-[600px]">
+          <div className="absolute md:top-[-25px] left-[280px] lg:top-[20px] lg:left-[600px]">
             <Avatar className="w-20 h-20">
               <AvatarImage src="/avatar6.jpg" />
               <AvatarFallback>avatar-1</AvatarFallback>
@@ -58,6 +63,92 @@ export default function Home() {
 
         </div>
       </div>
+
+      <h1 className="Mentors">
+        Featured Mentors
+      </h1>
+
+      <Carousel>
+        <CarouselContent className='lg:gap-8 ml-4'>
+          <CarouselItem>
+            <MentorCard imgURL="mentor-image1.jpg" Tittle="Tom Jones" Duration="200+ hrs" />
+          </CarouselItem>
+
+          <CarouselItem>
+            <MentorCard imgURL="mentor-image2.jpg" Tittle="Holly Fax" Duration="100+ hrs" />
+          </CarouselItem>
+
+          <CarouselItem>
+            <MentorCard imgURL="mentor-image3.jpg" Tittle="Valerie" Duration="400+ hrs" />
+          </CarouselItem>
+
+          <CarouselItem>
+            <MentorCard imgURL="mentor-image4.jpg" Tittle="James Dean" Duration="200+ hrs" />
+          </CarouselItem>
+
+          <CarouselItem>
+            <MentorCard imgURL="mentor-image1.jpg" Tittle="Tom Jones" Duration="200+ hrs" />
+          </CarouselItem>
+
+          <CarouselItem>
+            <MentorCard imgURL="mentor-image2.jpg" Tittle="Tom Jones" Duration="200+ hrs" />
+          </CarouselItem>
+
+          <CarouselItem>
+            <MentorCard imgURL="mentor-image3.jpg" Tittle="Tom Jones" Duration="200+ hrs" />
+          </CarouselItem>
+
+          <CarouselItem>
+            <MentorCard imgURL="mentor-image4.jpg" Tittle="Tom Jones" Duration="200+ hrs" />
+          </CarouselItem>
+
+        </CarouselContent>
+      </Carousel>
+
+      <div className="statment">
+        <h1 className="font-bold text-3xl">Helping the world one mentor at a time</h1>
+        <p className="pt-4 pb-4">sifting through the overwhelming content on the internet will slow you down.break through the <br /> noise abd get specific advice directly from the experts.</p>
+        <Button variant={'outline'}>Let's Find a Mentor</Button>
+      </div>
+
+
+      <h1 className="font-bold text-xl text-center mt-6 mb-6">In Demand Skills</h1>
+
+      <div className="flex flex-row justify-between mx-8">
+        <LogoCards imgURL="next.png" imgALT="next" Tittle="react"></LogoCards>
+        <LogoCards imgURL="node.png" imgALT="Nodejs" Tittle="Nodejs"></LogoCards>
+        <LogoCards imgURL="graphic.png" imgALT="graphic" Tittle="Graphic Design"></LogoCards>
+      </div>
+
+      <div className=" mt-8 flex flex-row justify-around">
+        <LogoCards imgURL="java.jpg" imgALT="javascript" Tittle="JavaScript"></LogoCards>
+        <LogoCards imgURL="ux.svg" imgALT="ux" Tittle="Ux Design"></LogoCards>
+      </div>
+
+      <div className="mt-8 flex flex-row justify-between mx-8">
+        <LogoCards imgURL="next.png" imgALT="next" Tittle="react"></LogoCards>
+        <LogoCards imgURL="node.png" imgALT="Nodejs" Tittle="Nodejs"></LogoCards>
+        <LogoCards imgURL="graphic.png" imgALT="graphic" Tittle="Graphic Design"></LogoCards>
+      </div>
+
+      <div className="text-center mt-20 mb-8">
+        <h1 className='font-bold text-xl mb-4'>Upcoming Sessions</h1>
+        <p>Sign Up to one of our session and start your journey</p>
+      </div>
+
+      <div className='session-cards'>
+        <SessionCard imgURL='session-image1.jpg' Tittle='Everthing Design' />
+
+        <SessionCard imgURL='session-image2.jpg' Tittle='Coding Newbies' />
+
+        <SessionCard imgURL='session-image3.jpg' Tittle='Project planning' />
+
+        <SessionCard imgURL='session-image4.jpg' Tittle='Quality Assurence' />
+      </div>
+      <div className='text-center mt-8 mb-10'>
+        <Button variant={'secondary'}>Learn more</Button>
+      </div>
+
     </>
   );
 }

src/components/HomeLayoutComponents/footer.css

@@ -0,0 +1,15 @@
+.nav-brand{
+    @apply font-bold bg-gray-100 flex items-center py-2 px-8 text-xl text-black
+}
+.nav{
+    @apply flex  items-center
+}
+.nav-items{
+    @apply mx-2     
+}
+.nav-link{
+    @apply hover:bg-gray-100 py-2 px-5 hover:text-black duration-100
+}
+.social-icons{
+    @apply flex flex-row gap-3
+}