Merge pull request #66 from 63-hero-2-section

feat: create second hero section
202306-NEA-DZ-FEW · Nov 6, 2023 · acdef55 · acdef55
2 parents 60d494a + 064200e
commit acdef55
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 0 deletions.
diff --git a/public/images/Shop.png b/public/images/Shop.png
diff --git a/public/secondherosec-icons/sec4.png b/public/secondherosec-icons/sec4.png
diff --git a/public/secondherosec-icons/sec5.png b/public/secondherosec-icons/sec5.png
diff --git a/public/secondherosec-icons/sec6.png b/public/secondherosec-icons/sec6.png
diff --git a/public/secondherosec-icons/sec7.png b/public/secondherosec-icons/sec7.png
diff --git a/src/components/secondherosection/SecondHeroSec.jsx b/src/components/secondherosection/SecondHeroSec.jsx
@@ -0,0 +1,28 @@
+import Image from "next/image";
+
+const SecondHeroSection = ({ children }) => {
+    return (
+        <section className='relative justify-center h-full mb-10  '>
+            {/* Main Content */}
+            <div className='lg:grid border border-black h-[25rem] bg-green justify-center'>
+                {/* Hero Image */}
+                <Image
+                    className='opacity-50 h-[20rem] w-auto mt-10'
+                    src='/images/Shop.png'
+                    width={600}
+                    height={400}
+                    alt='hero image'
+                />
+
+                {/* Card Section */}
+                <div className='absolute top-1/2 w-full'>
+                    <div className='flex flex-wrap justify-center'>
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default SecondHeroSection;
diff --git a/src/constants/index.js b/src/constants/index.js
@@ -0,0 +1,97 @@
+import Image from "next/image";
+
+export const marketingCardData1 = [
+    {
+        icon: (
+            <Image
+                src={"/marketing-icons/sec1.png"}
+                alt='Icon 1'
+                width={80}
+                height={100}
+            />
+        ),
+        title: "Card 1 Title",
+        content:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        icon: (
+            <Image
+                src={"/marketing-icons/sec2.png"}
+                alt='Icon 1'
+                width={80}
+                height={100}
+            />
+        ),
+        title: "Card 2 Title",
+        content:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        icon: (
+            <Image
+                src={"/marketing-icons/sec3.png"}
+                alt='Icon 1'
+                width={80}
+                height={100}
+            />
+        ),
+        title: "Card 3 Title",
+        content:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+];
+export const marketingCardData2 = [
+    {
+        icon: (
+            <Image
+                src={"/secondherosec-icons/sec4.png"}
+                alt='Icon 1'
+                width={80}
+                height={80}
+            />
+        ),
+        title: "Card 1 Title",
+        content:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        icon: (
+            <Image
+                src={"/secondherosec-icons/sec5.png"}
+                alt='Icon 1'
+                width={80}
+                height={80}
+            />
+        ),
+        title: "Card 2 Title",
+        content:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        icon: (
+            <Image
+                src={"/secondherosec-icons/sec6.png"}
+                alt='Icon 1'
+                width={80}
+                height={80}
+            />
+        ),
+        title: "Card 3 Title",
+        content:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        icon: (
+            <Image
+                src={"/secondherosec-icons/sec7.png"}
+                alt='Icon 1'
+                width={80}
+                height={80}
+            />
+        ),
+        title: "Card 4 Title",
+        content:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+];