Merge pull request #8 from ETLOnline/feature/ui-hanzla

Feature/UI hanzla
ETLOnline · Dec 7, 2024 · 5f5c744 · 5f5c744
2 parents bf4a90c + bea5efd
commit 5f5c744
Show file tree

Hide file tree

Showing 29 changed files with 69 additions and 90 deletions.
diff --git a/public/Mentor-image1.jpg → public/images/home/Mentor-image1.jpg b/public/Mentor-image1.jpg → public/images/home/Mentor-image1.jpg
diff --git a/public/Mentor-image2.jpg → public/images/home/Mentor-image2.jpg b/public/Mentor-image2.jpg → public/images/home/Mentor-image2.jpg
diff --git a/public/Mentor-image3.jpg → public/images/home/Mentor-image3.jpg b/public/Mentor-image3.jpg → public/images/home/Mentor-image3.jpg
diff --git a/public/avatar1.jpg → public/images/home/avatar1.jpg b/public/avatar1.jpg → public/images/home/avatar1.jpg
diff --git a/public/avatar2.jpg → public/images/home/avatar2.jpg b/public/avatar2.jpg → public/images/home/avatar2.jpg
diff --git a/public/avatar3.jpg → public/images/home/avatar3.jpg b/public/avatar3.jpg → public/images/home/avatar3.jpg
diff --git a/public/avatar4.jpg → public/images/home/avatar4.jpg b/public/avatar4.jpg → public/images/home/avatar4.jpg
diff --git a/public/avatar5.jpg → public/images/home/avatar5.jpg b/public/avatar5.jpg → public/images/home/avatar5.jpg
diff --git a/public/avatar6.jpg → public/images/home/avatar6.jpg b/public/avatar6.jpg → public/images/home/avatar6.jpg
diff --git a/public/graphic.png → public/images/home/graphic.png b/public/graphic.png → public/images/home/graphic.png
diff --git a/public/hearticon.jpg → public/images/home/hearticon.jpg b/public/hearticon.jpg → public/images/home/hearticon.jpg
diff --git a/public/image.jpg → public/images/home/image.jpg b/public/image.jpg → public/images/home/image.jpg
diff --git a/public/java.jpg → public/images/home/java.jpg b/public/java.jpg → public/images/home/java.jpg
diff --git a/public/js.jpg → public/images/home/js.jpg b/public/js.jpg → public/images/home/js.jpg
diff --git a/public/js1.jpg → public/images/home/js1.jpg b/public/js1.jpg → public/images/home/js1.jpg
diff --git a/public/mentor-image4.jpg → public/images/home/mentor-image4.jpg b/public/mentor-image4.jpg → public/images/home/mentor-image4.jpg
diff --git a/public/next.logo.png → public/images/home/next.logo.png b/public/next.logo.png → public/images/home/next.logo.png
diff --git a/public/next.png → public/images/home/next.png b/public/next.png → public/images/home/next.png
diff --git a/public/node.png → public/images/home/node.png b/public/node.png → public/images/home/node.png
diff --git a/public/session-image1.jpg → public/images/home/session-image1.jpg b/public/session-image1.jpg → public/images/home/session-image1.jpg
diff --git a/public/session-image2.jpg → public/images/home/session-image2.jpg b/public/session-image2.jpg → public/images/home/session-image2.jpg
diff --git a/public/session-image3.jpg → public/images/home/session-image3.jpg b/public/session-image3.jpg → public/images/home/session-image3.jpg
diff --git a/public/session-image4.jpg → public/images/home/session-image4.jpg b/public/session-image4.jpg → public/images/home/session-image4.jpg
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
@@ -23,42 +23,42 @@ export default function Home() {
             <div className="avatars relative">
               <div className="absolute md:top-[-260px] md:left-[20px] top-[-220px] left-[140px]">
                 <Avatar className="w-16 h-16">
-                  <AvatarImage src="/avatar1.jpg" />
+                  <AvatarImage src="/images/home/avatar1.jpg" />
                   <AvatarFallback>avatar-1</AvatarFallback>
                 </Avatar>
               </div>
 
               <div className="absolute md:top-[-240px] md:left-[330px] lg:top-[-250px] lg:left-[500px]">
                 <Avatar className="w-16 h-16">
-                  <AvatarImage src="/avatar2.jpg" />
+                  <AvatarImage src="/images/home/avatar2.jpg" />
                   <AvatarFallback>avatar-1</AvatarFallback>
                 </Avatar>
               </div>
 
               <div className="absolute md:top-[-145px] md:left-[140px] lg:top-[-110px] lg:left-[280px]">
                 <Avatar className="w-16 h-16">
-                  <AvatarImage src="/avatar3.jpg" />
+                  <AvatarImage src="/images/home/avatar3.jpg" />
                   <AvatarFallback>avatar-1</AvatarFallback>
                 </Avatar>
               </div>
 
               <div className="absolute md:top-[70px] left-[40px] lg:top-[140px] lg:left-[180px]">
                 <Avatar className="w-16 h-16">
-                  <AvatarImage src="/avatar4.jpg" />
+                  <AvatarImage src="/images/home/avatar4.jpg" />
                   <AvatarFallback>avatar-1</AvatarFallback>
                 </Avatar>
               </div>
 
               <div className="absolute md:top-[140px] left-[250px] lg:top-[180px] lg:left-[380px]">
                 <Avatar className="w-16 h-16">
-                  <AvatarImage src="/avatar5.jpg" />
+                  <AvatarImage src="/images/home/avatar5.jpg" />
                   <AvatarFallback>avatar-1</AvatarFallback>
                 </Avatar>
               </div>
 
               <div className="absolute md:top-[-25px] left-[365px] lg:top-[20px] lg:left-[507px]">
                 <Avatar className="w-16 h-16">
-                  <AvatarImage src="/avatar6.jpg" />
+                  <AvatarImage src="/images/home/avatar6.jpg" />
                   <AvatarFallback>avatar-1</AvatarFallback>
                 </Avatar>
               </div>
@@ -79,35 +79,35 @@ export default function Home() {
           <Carousel>
             <CarouselContent className="carousel-content">
               <CarouselItem>
-                <MentorCard imgURL="mentor-image1.jpg" title="Tom Jones" duration="200+ hrs" />
+                <MentorCard imgURL="/images/home/mentor-image1.jpg" title="Tom Jones" duration="200+ hrs" />
               </CarouselItem>
 
               <CarouselItem>
-                <MentorCard imgURL="mentor-image2.jpg" title="Holly Fax" duration="100+ hrs" />
+                <MentorCard imgURL="/images/home/mentor-image2.jpg" title="Holly Fax" duration="100+ hrs" />
               </CarouselItem>
 
               <CarouselItem>
-                <MentorCard imgURL="mentor-image3.jpg" title="Valerie" duration="400+ hrs" />
+                <MentorCard imgURL="/images/home/mentor-image3.jpg" title="Valerie" duration="400+ hrs" />
               </CarouselItem>
 
               <CarouselItem>
-                <MentorCard imgURL="mentor-image4.jpg" title="James Dean" duration="200+ hrs" />
+                <MentorCard imgURL="/images/home/mentor-image4.jpg" title="James Dean" duration="200+ hrs" />
               </CarouselItem>
 
               <CarouselItem>
-                <MentorCard imgURL="mentor-image1.jpg" title="Tom Jones" duration="200+ hrs" />
+                <MentorCard imgURL="/images/home/mentor-image1.jpg" title="Tom Jones" duration="200+ hrs" />
               </CarouselItem>
 
               <CarouselItem>
-                <MentorCard imgURL="mentor-image2.jpg" title="Tom Jones" duration="200+ hrs" />
+                <MentorCard imgURL="/images/home/mentor-image2.jpg" title="Tom Jones" duration="200+ hrs" />
               </CarouselItem>
 
               <CarouselItem>
-                <MentorCard imgURL="mentor-image3.jpg" title="Tom Jones" duration="200+ hrs" />
+                <MentorCard imgURL="/images/home/mentor-image3.jpg" title="Tom Jones" duration="200+ hrs" />
               </CarouselItem>
 
               <CarouselItem>
-                <MentorCard imgURL="mentor-image4.jpg" title="Tom Jones" duration="200+ hrs" />
+                <MentorCard imgURL="/images/home/mentor-image4.jpg" title="Tom Jones" duration="200+ hrs" />
               </CarouselItem>
 
             </CarouselContent>
@@ -134,20 +134,20 @@ export default function Home() {
           <div className="section-content">
 
             <div className="section-content-wrapper justify-around md:justify-between">
-              <SkillTag imgURL="next.png" imgALT="next" title="react" />
-              <SkillTag imgURL="node.png" imgALT="Nodejs" title="Nodejs" />
-              <SkillTag imgURL="graphic.png" imgALT="graphic" title="Graphic Design" />
+              <SkillTag imgURL="/images/home/next.png" imgALT="next" title="react" />
+              <SkillTag imgURL="/images/home/node.png" imgALT="Nodejs" title="Nodejs" />
+              <SkillTag imgURL="/images/home/graphic.png" imgALT="graphic" title="Graphic Design" />
             </div>
 
             <div className="section-content-wrapper justify-around">
-              <SkillTag imgURL="java.jpg" imgALT="javascript" title="JavaScript" />
-              <SkillTag imgURL="ux.svg" imgALT="ux" title="Ux Design" />
+              <SkillTag imgURL="/images/home/java.jpg" imgALT="javascript" title="JavaScript" />
+              <SkillTag imgURL="/images/home/ux.svg" imgALT="ux" title="Ux Design" />
             </div>
 
             <div className="section-content-wrapper justify-around md:justify-between ">
-              <SkillTag imgURL="next.png" imgALT="next" title="react" />
-              <SkillTag imgURL="node.png" imgALT="Nodejs" title="Nodejs" />
-              <SkillTag imgURL="graphic.png" imgALT="graphic" title="Graphic Design" />
+              <SkillTag imgURL="/images/home/next.png" imgALT="next" title="react" />
+              <SkillTag imgURL="/images/home/node.png" imgALT="Nodejs" title="Nodejs" />
+              <SkillTag imgURL="/images/home/graphic.png" imgALT="graphic" title="Graphic Design" />
             </div>
 
           </div>
@@ -169,13 +169,13 @@ export default function Home() {
 
 
           <div className="section-card">
-            <SessionCard imgURL='session-image1.jpg' title='Everthing Design' />
+            <SessionCard imgURL='/images/home/session-image1.jpg' title='Everthing Design' />
 
-            <SessionCard imgURL='session-image2.jpg' title='Coding Newbies' />
+            <SessionCard imgURL='/images/home/session-image2.jpg' title='Coding Newbies' />
 
-            <SessionCard imgURL='session-image3.jpg' title='Project planning' />
+            <SessionCard imgURL='/images/home/session-image3.jpg' title='Project planning' />
 
-            <SessionCard imgURL='session-image4.jpg' title='Quality Assurence' />
+            <SessionCard imgURL='/images/home/session-image4.jpg' title='Quality Assurence' />
           </div>
           <div className='section-button'>
             <Button variant={'secondary'}>Learn more</Button>

diff --git a/src/components/HomeLayoutComponents/FooterComponent.tsx b/src/components/HomeLayoutComponents/FooterComponent.tsx
@@ -3,40 +3,15 @@ import './footer.css'
 import Link from 'next/link'
 import { Facebook, Instagram, Linkedin, Twitter } from 'lucide-react'
 import { Separator } from '@/src/components/ui/separator'
+import Navbaritems from '../NavBar/NAvbarItems'
 
 
 function Footer() {
     return (
         <div className='footer'>
             <div className='footer-navigation'>
 
-                <div className='navbar'>
-
-                    <Link className='nav-brand' href="#">Spark</Link>
-
-                    <ul className='nav'>
-                        <li className='nav-item'>
-                            <Link className='nav-link' href="/dashboard">
-                                Dashboard</Link>
-                        </li>
-                        <li className='nav-item'>
-                            <Link className='nav-link' href="#">
-                                Find a Mentor</Link>
-                        </li>
-                        <li className='nav-item'>
-                            <Link className='nav-link' href="#">
-                                About Us</Link>
-                        </li>
-                        <li className='nav-item'>
-                            <Link className='nav-link' href="#">
-                                Pricing</Link>
-                        </li>
-                        <li className='nav-item'>
-                            <Link className='nav-link' href="#">
-                                Become a Member</Link>
-                        </li>
-                    </ul>
-                </div>
+                <Navbaritems />
                 <div className="social-icons justify-center mt-4">
                     <Link href={'#'}><Linkedin /></Link>
                     <Link href={'#'}><Facebook /></Link>

diff --git a/src/components/HomeLayoutComponents/HeaderComponent.tsx b/src/components/HomeLayoutComponents/HeaderComponent.tsx
@@ -8,7 +8,7 @@ import Navbar from '../NavBar/NavbarComponent'
 function Header() {
     return (
         <div className="header">
-           <Navbar />
+            <Navbar />
             <div className="button-wrapper">
                 <SignedIn>
                     <UserButton userProfileUrl='/profile' />

diff --git a/src/components/HomePageComponents/SessionCard/SessionCard.tsx b/src/components/HomePageComponents/SessionCard/SessionCard.tsx
@@ -17,7 +17,7 @@ const SessionCard = ({ imgURL, title}: sessioncardprops) => {
         </div>
         <h1 className="text-base md:text-lg">{title}</h1>
         <div className="flex flex-wrap gap-2">
-          <img src="/mentor-image4.jpg" className='w-8 h-8 rounded-full object-cover ' alt="" />
+          <img src="/images/home/mentor-image4.jpg" className='w-8 h-8 rounded-full object-cover ' alt="" />
           <p className="mt-1 session-card-text">James Dean</p>
         </div>
       </div>

diff --git a/src/components/NavBar/NavbarComponent.tsx b/src/components/NavBar/NavbarComponent.tsx
@@ -4,54 +4,22 @@ import './navbar.css'
 import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'
 import { Button } from '../ui/button'
 import { HamIcon, Menu } from 'lucide-react'
+import Navbaritems from './NAvbarItems'
 
 function Navbar() {
 
-    const NavbarItems = () => {
-        return (
-            <div className='navbar'>
-
-                <Link className='nav-brand' href="#">Spark</Link>
-
-                <ul className='nav'>
-                    <li className='nav-item'>
-                        <Link className='nav-link' href="/dashboard">
-                            Dashboard</Link>
-                    </li>
-                    <li className='nav-item'>
-                        <Link className='nav-link' href="#">
-                            Find a Mentor</Link>
-                    </li>
-                    <li className='nav-item'>
-                        <Link className='nav-link' href="#">
-                            About Us</Link>
-                    </li>
-                    <li className='nav-item'>
-                        <Link className='nav-link' href="#">
-                            Pricing</Link>
-                    </li>
-                    <li className='nav-item'>
-                        <Link className='nav-link' href="#">
-                            Become a Member</Link>
-                    </li>
-                </ul>
-            </div>
-
-        )
-    }
-
     return (
         <>
             <div className="hidden md:hidden lg:block">
-                {NavbarItems()}
+                <Navbaritems />
             </div>
 
             <Sheet>
                 <SheetTrigger className='block lg:hidden'>
                     <Menu />
                 </SheetTrigger>
                 <SheetContent side={'left'}>
-                    {NavbarItems()}
+                    <Navbaritems />
                 </SheetContent>
             </Sheet>
         </>

diff --git a/src/components/NavBar/NavbarItems.tsx b/src/components/NavBar/NavbarItems.tsx
@@ -0,0 +1,36 @@
+import Link from 'next/link'
+import React from 'react'
+
+function Navbaritems() {
+    return (
+        <div className='navbar'>
+
+            <Link className='nav-brand' href="#">Spark</Link>
+
+            <ul className='nav'>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="/dashboard">
+                        Dashboard</Link>
+                </li>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="#">
+                        Find a Mentor</Link>
+                </li>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="#">
+                        About Us</Link>
+                </li>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="#">
+                        Pricing</Link>
+                </li>
+                <li className='nav-item'>
+                    <Link className='nav-link' href="#">
+                        Become a Member</Link>
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default Navbaritems