Completed Footer.tsx and Join Commmunity esction: 😪facing issues impl…

src/components/Footer.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+type Props = {};
+interface Icons {
+    href: string;
+    src: string;
+    alt: string;
+}
+
+const socialMediaLinks: Icons[] = [
+    {
+        href: "https://instagram.com/",
+        src: "/assets/icons/instagram.svg",
+        alt: "Instagram Logo",
+    },
+    {
+        href: "https://x.com/",
+        src: "/assets/icons/x.svg",
+        alt: "X(Twitter) Logo",
+    },
+    {
+        href: "https://facebook.com/",
+        src: "/assets/icons/facebook.svg",
+        alt: "Facebook Logo",
+    },
+    {
+        href: "https://t.me/",
+        src: "/assets/icons/telegram.svg",
+        alt: "telegram Logo",
+    },
+
+]
+
+const Footer = (props: Props) => {
+    return (
+        <section className="bg-neutral-white pt-20 p-8 sm:p-20">
+            <div className="flex justify-center mb-10 md:mb-20">
+                <img src="/assets/fusionTechLogo.svg" alt="Fusion Tech Logo" className="w-[800px] max-w-full" />
+            </div>
+            <div className="flex justify-between items-center flex-col-reverse sm:flex-row gap-6">
+                <div>
+                    <p className="text-primary font-helvetica-light font-[400] text-center hidden md:block">© 2024 GenZtechies X Codespace | All rights reserved.</p>
+                    <p className="text-primary font-helvetica-light font-[400] text-center md:hidden block">© 2024 GenZtechies X Codespace <span className="block sm:text-left"> All rights reserved.</span></p>
+                </div>
+                <div className="flex flex-col items-center sm:items-end gap-3">
+                    <ul className="flex gap-4 font-helvetica-compressed text-primary text-[18px]">
+                        <li><a href="">INITIATIVES</a></li>
+                        <li><a href="">DONATE</a></li>
+                        <li><a href="">GALLERY</a></li>
+                        <li><a href="">PRESS</a></li>
+                    </ul>
+                    <ul className="flex gap-2 justify-end">
+
+                        {socialMediaLinks.map((link, i) => (<li className="" key={i}><a href={link.href} className="block bg-secondary rounded-full p-[6.4px] border border-primary"><img src={link.src} alt={link.alt} className="w-4 h-4" /></a></li>))}
+                    </ul>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Footer;

src/components/Gallery.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+type Props = {}
+
+const Gallery = (props: Props) => {
+    return (
+        <section id='gallery'> Gallery</section>
+    )
+}
+
+export default Gallery

src/components/JoinCommunity.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+type Props = {}
+interface Icons {
+    href: string;
+    src: string;
+    alt: string;
+}
+
+const socialMediaLinks: Icons[] = [
+    {
+        href: "https://instagram.com/",
+        src: "/assets/icons/instagram.svg",
+        alt: "Instagram Logo",
+    },
+    {
+        href: "https://x.com/",
+        src: "/assets/icons/x.svg",
+        alt: "X(Twitter) Logo",
+    },
+    {
+        href: "https://facebook.com/",
+        src: "/assets/icons/facebook.svg",
+        alt: "Facebook Logo",
+    },
+    {
+        href: "https://t.me/",
+        src: "/assets/icons/telegram.svg",
+        alt: "telegram Logo",
+    },
+
+]
+
+
+const JoinCommunity = (props: Props) => {
+    return (
+        <section className='bg-neutral-white p-8 sm:p-20 bg-[url("/assets/Switch.png")]'>
+            <div className="bg-primary rounded-lg px-5 py-16 font-helvetica-compressed flex flex-col lg:flex-row gap-4 md:gap-3">
+                <div className='flex flex-col gap-3 lg:w-[60%]'>
+                    <div className="font-[500] "><h2 className="text-white text-4xl md:text-7xl">JOIN THE<span className="text-[#F4B0E9]"> COMMUNITY</span> AND<span className="text-[#F4B0E9]"> NETWORK </span>WITH LIKE MINDS</h2></div>
+                    <div className="justify-between w-[16rem] md:w-[20rem] rounded-[30px] px-[12px] py-[8px] bg-[rgba(255,255,255,0.3)] flex items-center gap-2">
+                        <p className="text-[#f4b0e9] md:text-[18px] whitespace-nowrap">Join Community</p>
+                        <ul className='flex space-x-1'>
+                            {socialMediaLinks.map((link, i) => (
+                                <li key={i} className="inline">
+                                    <a href={link.href} className="bg-[#f4b0e9] block rounded-full p-[6.4px] border border-primary">
+                                        <img src={link.src} alt={link.alt} className="w-4 h-4" />
+                                    </a>
+                                </li>))}
+                        </ul>
+                    </div>
+
+                </div>
+                <div className='md:wd1/2 '><img src="/assets/MemojiGroup.png" alt="Memoji Group" className="w-[648px] max-w-full" /></div></div>
+        </section>)
+}
+
+export default JoinCommunity

src/pages/Home.tsx

@@ -3,6 +3,9 @@ import Header from "../components/Header";
 import Hero from "../components/Hero";
 import Sponsor from "../components/Sponsor";
 import About from "../components/About";
+import Gallery from "../components/Gallery";
+import Footer from "../components/Footer";
+import JoinCommunity from "../components/JoinCommunity";
 
 type Props = {};
 
@@ -13,6 +16,10 @@ const Home = (props: Props) => {
             <Hero />
             <Sponsor />
             <About />
+
+            <Gallery />
+            <JoinCommunity />
+            <Footer />
         </div>
     );
 };