Merge pull request #98 from 202306-NEA-DZ-FEW/dev

Dev
202306-NEA-DZ-FEW · Nov 20, 2023 · be8d3e6 · be8d3e6 · vercel · Nov 20, 2023
2 parents d4f9e0a + 25ba180
commit be8d3e6
Show file tree

Hide file tree

Showing 26 changed files with 438 additions and 67 deletions.
diff --git a/public/images/home-page/browse-1.avif b/public/images/home-page/browse-1.avif
diff --git a/public/images/home-page/browse-2.avif b/public/images/home-page/browse-2.avif
diff --git a/public/images/home-page/browse-3.avif b/public/images/home-page/browse-3.avif
diff --git a/public/images/home-page/focus-group.png b/public/images/home-page/focus-group.png
diff --git a/public/images/home-page/hands.png b/public/images/home-page/hands.png
diff --git a/public/images/home-page/help.png b/public/images/home-page/help.png
diff --git a/public/images/home-page/herosectionImg.jpeg b/public/images/home-page/herosectionImg.jpeg
diff --git a/public/images/home-page/icon1.svg b/public/images/home-page/icon1.svg
diff --git a/public/images/home-page/icon2.svg b/public/images/home-page/icon2.svg
diff --git a/public/images/home-page/icon3.svg b/public/images/home-page/icon3.svg
diff --git a/public/images/home-page/icon4.svg b/public/images/home-page/icon4.svg
diff --git a/public/images/home-page/recoded-logo.png b/public/images/home-page/recoded-logo.png
diff --git a/public/images/home-page/teamwork.jpeg b/public/images/home-page/teamwork.jpeg
diff --git a/public/itemcard/itemcard.png b/public/itemcard/itemcard.png
diff --git a/public/partners/logo1.png b/public/partners/logo1.png
diff --git a/src/components/articlecard/ArticleCard.jsx b/src/components/articlecard/ArticleCard.jsx
@@ -16,7 +16,7 @@ const ArticleCard = ({
     textOnleft = false,
 }) => {
     return (
-        <div className='my-8 h-fit  flex flex-col w-full  px-8 py-5 gap-4 md:flex-row md:gap-10 md:my-16  md:items-center  lg:w-[90%] mx-auto'>
+        <div className='my-8 h-fit flex flex-col w-full  px-8 py-5 gap-4 md:flex-row md:gap-10 md:my-16  md:items-center  lg:w-[90%] mx-auto'>
             <div className='w-full md:w-1/2 h-[20rem]'>
                 <Image
                     src={imageUrl}

diff --git a/src/components/herosection/HeroSection.jsx b/src/components/herosection/HeroSection.jsx
diff --git a/src/components/homepage/BrowseSection.jsx b/src/components/homepage/BrowseSection.jsx
@@ -0,0 +1,92 @@
+import React from "react";
+
+import Button from "../button/Button";
+
+function BrowseSection() {
+    return (
+        <section className='py-10'>
+            <div className='container mx-auto'>
+                <div className='-mx-4 flex flex-wrap'>
+                    <div className='w-full px-4 lg:w-8/12'>
+                        <div className='relative mb-8 h-[370px] md:h-[480px]'>
+                            <img
+                                src='images/home-page/browse-1.avif'
+                                alt='product'
+                                className='h-full w-full object-cover object-center rounded-lg'
+                            />
+
+                            <div className='absolute top-0 left-0 flex h-full w-full items-center px-8 md:px-12'>
+                                <div className='max-w-[420px]'>
+                                    <h3 className='mb-4 text-6xl font-semibold text-black'>
+                                        Elevate Your Space !
+                                    </h3>
+                                    <p className='mb-10 text-base font-light text-black'>
+                                        Lorem ipsum dolor sit amet, consectetur
+                                        adipiscing elit. Vestibulum ornare
+                                        vestibulum mollis. Nam vitae augue
+                                        purus. Integer ac accumsan nunc.
+                                    </p>
+                                    <Button href='/products/?category='>
+                                        browse products
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='w-full px-4 lg:w-4/12'>
+                        <div className='-mx-4 flex flex-wrap'>
+                            <div className='w-full px-4 md:w-1/2 lg:w-full rounded-lg'>
+                                <div className='relative mb-8 h-[223px]'>
+                                    <img
+                                        src='images/home-page/browse-2.avif'
+                                        alt='product'
+                                        className='h-full w-full object-cover object-center rounded-lg'
+                                    />
+
+                                    <div className='absolute top-0 left-0 flex h-full w-full items-end justify-end p-6 sm:p-9 bg-black/40'>
+                                        <div className='max-w-[180px] text-right flex flex-col justify-end items-end'>
+                                            <h3 className='mb-3 block text-lg font-bold text-white  xs:text-xl sm:text-2xl lg:text-xl xl:text-2xl'>
+                                                Student Electronic Collection
+                                            </h3>
+                                            <Button
+                                                href='/products/?category='
+                                                className='bg-transparent text-white  border border-white '
+                                            >
+                                                Discover Now
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className='w-full px-4 md:w-1/2 lg:w-full rounded-lg'>
+                                <div className='relative mb-8 h-[223px]'>
+                                    <img
+                                        src='images/home-page/browse-3.avif'
+                                        alt='product'
+                                        className='h-full w-full object-cover object-center rounded-lg'
+                                    />
+
+                                    <div className='absolute top-0 left-0 flex h-full w-full items-end justify-end p-6 sm:p-9 bg-black/10'>
+                                        <div className='max-w-[180px] text-right flex flex-col justify-end items-end'>
+                                            <h3 className='mb-3 block text-lg font-bold text-white  xs:text-xl sm:text-2xl lg:text-xl xl:text-2xl'>
+                                                Summer Travel Collection
+                                            </h3>
+                                            <Button
+                                                href='/products/?category='
+                                                className=' text-white  border border-white bg-black/40 '
+                                            >
+                                                Discover Now
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export default BrowseSection;
diff --git a/src/components/homepage/CompaniesSection.jsx b/src/components/homepage/CompaniesSection.jsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+function CompaniesSection() {
+    return (
+        <div className='flex flex-col justify-center my-40'>
+            <div className='text-xl text-center text-black/80 '>
+                Trusted by <span className='text-green'>6+</span> customers
+                worldwide
+            </div>
+
+            <div className='flex flex-wrap justify-center gap-5 mt-10 md:justify-around'>
+                <img
+                    src='/images/home-page/recoded-logo.png'
+                    alt='Recoded logo'
+                    className='w-40'
+                />
+                <img
+                    src='/images/home-page/recoded-logo.png'
+                    alt='Recoded logo'
+                    className='w-40'
+                />
+
+                <img
+                    src='/images/home-page/recoded-logo.png'
+                    alt='Recoded logo'
+                    className='w-40'
+                />
+
+                <img
+                    src='/images/home-page/recoded-logo.png'
+                    alt='Recoded logo'
+                    className='w-40'
+                />
+
+                <img
+                    src='/images/home-page/recoded-logo.png'
+                    alt='Recoded logo'
+                    className='w-40'
+                />
+            </div>
+        </div>
+    );
+}
+
+export default CompaniesSection;