Feature/UI hanzla

package.json

@@ -26,6 +26,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/(home)/home.css

@@ -1,13 +1,24 @@
 .hero{
-    @apply  w-full flex  h-screen items-center justify-center;
-    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+    @apply  w-full   h-screen  bg-home-secondary
 }
 .content{
-    @apply w-5/12 flex flex-col gap-8
+    @apply w-full text-center md:text-left md:w-5/12 flex flex-col gap-8
 }
 .Main-Heading{
-    @apply text-[44px] font-bold
+    @apply  text-4xl  md:text-[44px] font-bold
 }
 .avatars{
-    @apply w-1/2 relative
+    @apply w-1/2  hidden md:block
+}    
+.section-content-wrapper{
+    @apply flex flex-wrap mt-10
+}
+.section-button{
+    @apply  text-center mt-8
+}
+.carousel-content{
+    @apply lg:gap-8 pl-8
+}
+.section-card{
+    @apply  flex flex-wrap mt-10 justify-around md:justify-between gap-4
 }

src/app/(home)/layout.tsx

@@ -1,57 +1,17 @@
-import Link from 'next/link'
+import Footer from '@/src/components/HomeLayoutComponents/FooterComponent'
+import Header from '@/src/components/HomeLayoutComponents/HeaderComponent'
 import React, { ReactNode } from 'react'
-import './home-layout.css'
-import { LinkAsButton } from '@/src/components/LinkAsButton/LinkAsButton'
-import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
 
-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>
-
+const PublicLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+     <Header />
       {children}
-      <div>footer</div>
+      <Footer />
+
     </>
   )
 }