so i want you to do 3 things, without spoiling my work, i want you to add framer motion, if the component already has one, allow it, but add to other places, 2 arrange the tailwindcss in the right way, do not alter it just arrange, 3rd. arrnage the code in the right way, do not alter it (import Section from "@/components/layout/Section"; import { AboutImage, AboutImage2 } from "@/public/Images"; // import { AboutImage } from "@/public/images"; import Image from "next/image"; export default function About() { return ( <Section id="about" className=" flex flex-col gap-y-4 md:gap-y-8 relative text-white" > <h2 className="text-2xl sm:text-4xl xl:text-5xl font-extrabold font-pp-neue sm:text-center md:text-left"> About StreamFi </h2> <div className="flex flex-col h-fit md:flex-row items-start gap-10"> <div className="w-full md:w-1/2 h-auto "> <Image src={AboutImage2} alt="Content creator using StreamFi" className="w-full h-full object-cover shadow-lg" layout="responsive" /> </div> <div className="hidden lg:block w-full lg:w-1/2 font-normal text-center h-fit md:text-left text-sm sm:text-xl text-white/80"> <p className="mb-4"> StreamFi is a Web3-powered streaming platform built to give content creators and gamers full control over their earnings. Unlike traditional platforms that take large cuts and delay payouts, StreamFi uses blockchain technology to enable instant crypto tipping, NFT-based memberships, and DeFi staking rewards—all without middlemen. </p> <p> Our mission is to redefine content monetization by offering a transparent, decentralized, and community-driven ecosystem. With smart contracts ensuring secure transactions and DAO governance giving users a say in platform decisions, StreamFi is creating a future where creators earn more, engage directly with their audience, and thrive without restrictions. </p> </div> <p className="text-start block lg:hidden text-sm sm:text-base text-white/80 flex-1"> StreamFi is a Web3 streaming platform that empowers creators and gamers with full control over their earnings through instant crypto tipping, NFT memberships, and DeFi staking rewards. By eliminating middlemen, smart contracts ensure secure transactions, while DAO governance gives users a voice in platform decisions. <br /> Our mission is to create a transparent, decentralized ecosystem where creators earn more, engage directly with their audience, and thrive without restrictions. </p> </div> </Section> ); } ) (import Link from "next/link"; import Image from "next/image"; import { Mail } from "lucide-react"; import Logo from "@/public/Images/streamFiLogo.svg"; import Section from "../layout/Section"; export default function Footer() { return ( <footer className=" bg-background-2 "> <Section id="footer" className="flex flex-col md:flex-row justify-between items-center"> <div className="mb-4 md:mb-0"> <Link href="/" className="flex items-center"> <Image src={Logo || "/placeholder.svg"} alt="Streamfi logo" width={128} height={50} /> </Link> </div> <div className="flex flex-col items-center justify-center text-center mb-4 md:mb-0"> <div className="flex items-center gap-2 text-white text-sm"> <Link href="/terms" className="hover:text-gray-300 transition-colors" > Terms of Service </Link> <span className="text-white">|</span> <Link href="/privacy" className="hover:text-gray-300 transition-colors" > Privacy Policy </Link> </div> <div className="text-xs text-gray-400 mt-1"> Copyright © 2025. All Rights Reserved. </div> </div> <div> <Link href="/contact" className="flex items-center gap-2 text-white hover:text-gray-300 transition-colors" > <Mail size={18} /> <span>Contact Us</span> </Link> </div> </Section> </footer> ); } ) ("use client"; import { motion, AnimatePresence } from "framer-motion"; import { Plus, Minus } from "lucide-react"; import { useState } from "react"; import { frequentlyAskedQuestions } from "@/data/landing-page/frequentlyAskedQuestions"; import Section from "../layout/Section"; export default function FrequentlyAskedQuestions() { const [activeTab, setActiveTab] = useState<number | string | null>(null); const toggleTab = (id: number | string) => { setActiveTab(activeTab === id ? null : id); }; return ( <Section id="frequently-asked-questions" className="flex flex-col gap-6 md:gap-10 items-center" > <div className="text-center space-y-2.5"> <h1 className="text-2xl sm:text-4xl xl:text-5xl font-extrabold font-pp-neue text-white"> FAQs </h1> <p className="text-sm sm:text-base text-white/80 max-w-lg mx-auto"> Find everything you need to know about StreamFi, from getting started to maximizing your earnings. </p> </div> <div className="space-y-5 w-full"> {frequentlyAskedQuestions.map((faq) => ( <div key={faq.id} className="rounded-xl overflow-hidden shadow-lg border border-gray-700 backdrop-blur-sm" > <button onClick={() => toggleTab(faq.id)} className="flex items-center justify-between w-full p-4 text-left text-white font-bold text-lg backdrop-blur-sm hover:bg-gray-500/30 transition-all duration-200 ease-in-out" aria-expanded={activeTab === faq.id} aria-controls={`content-${faq.id}`} > {faq.title} <motion.div initial={false} animate={{ rotate: activeTab === faq.id ? 180 : 0 }} transition={{ type: "spring", stiffness: 400, damping: 25 }} > {activeTab === faq.id ? ( <Minus className="h-5 w-5 text-gray-300" /> ) : ( <Plus className="h-5 w-5 text-gray-300" /> )} </motion.div> </button> <AnimatePresence initial={false}> {activeTab === faq.id && ( <motion.div id={`content-${faq.id}`} initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.2, ease: "easeInOut" }} className="overflow-hidden min-h-[50px]" > <motion.div className="p-4 backdrop-blur text-gray-300 text-sm leading-relaxed"> {faq.content} </motion.div> </motion.div> )} </AnimatePresence> </div> ))} </div> </Section> ); } )("use client"; import Image from "next/image"; import React from "react"; import "@fontsource/inter"; import { CoinbaseLogo, StripeLogo, YoutubeLogo } from "@/public/Images"; import LogoDesktop from "@/public/Images/hero-image-streamfi.png"; import Hero2 from "@/public/Images/hero2.svg"; import Button from "../ui/Button"; import Section from "../layout/Section"; const HeroSection: React.FC = () => { return ( <Section id="hero" wrapperClassName="bg-gradient-to-b from-transparent via-transparent to-background-2" > <div className="overflow-hidden relative text-white"> <div className="w-full relative"> <div className="flex items-start flex-col lg:flex-row "> <div className="flex flex-col w-full"> <div className="w-full h-full md:pr-8 lg:pr-1 xl:w-[35.8em] space-y-2.5 px-[1em] lg:px-0"> <h1 className="text-3xl sm:text-4xl text-center lg:text-left lg:text-4xl text-white font-extrabold leading-tight mb-4 sm:mb-6 lg:pt-10 " style={{ fontFamily: "PP Neue Machina" }} > Own Your Stream. Own Your Earnings </h1> <p className="text-white/80 text-base sm:mb-4 max-w-xl hidden lg:block" style={{ fontFamily: "Inter" }} > Stream without limits, engage your community, and earn instantly with a blockchain-powered ecosystem that ensures true ownership, decentralized rewards, and frictionless transactions. Built for creators, powered by Web3, and designed for the future of streaming. </p> <p className="text-center text-white text-[19px] font-medium lg:hidden "> Stream, engage, and earn instantly with blockchain-powered ownership and decentralized rewards. </p> <div className="flex flex-col justify-center lg:justify-start pt-4 sm:flex-row space-y-4 sm:space-y-0 sm:space-x-3 "> <Button className="bg-primary text-base hover:bg-primary/60 duration-300 text-white px-[20px] py-[12px] rounded-lg font-medium w-full sm:w-auto" isLink href="/explore" > Explore Streams </Button> <button className="text-white px-4 py-3 rounded-lg font-medium bg-white/10 hover:bg-gray-800 duration-300" style={{ fontFamily: "Inter" }} > Launch Your Stream </button> </div> </div> {/* Logos */} <div className="flex justify-center lg:justify-start items-center gap-8 md:space-x-8 pb-10 xl:pb-20 mt-[4em] px-[2em]"> <Image src={StripeLogo} alt="Stripe" className="opacity-100 md:h-auto lg:w-13 md:w-auto" /> <Image src={YoutubeLogo} alt="YouTube" className="opacity-100 h-6 md:h-auto w-[4.5em] lg:w-13 md:w-suto" /> <Image src={CoinbaseLogo} alt="Coinbase" className="opacity-100 h-6 md:h-auto w-[4.5em] lg:w-13 md:w-suto" /> </div> </div> <div className="relative w-full xl:w-[180em] lg:w-[120em] lg:mr-[-15em] xl:mr-[-20em] h-full lg:mt-2 mt-9"> <Image src={LogoDesktop} alt="Streaming App Interface" width={900} height={1000} className="h-full w-full block " /> </div> </div> </div> </div> </Section> ); }; export default HeroSection; ) ("use client"; import { useState } from "react"; import { usePathname } from "next/navigation"; import Link from "next/link"; import { Menu, X } from "lucide-react"; import Image from "next/image"; import { motion, AnimatePresence } from "framer-motion"; import Button from "../ui/Button"; import Section from "../layout/Section"; const Navbar = () => { const [isOpen, setIsOpen] = useState(false); const pathname = usePathname(); const navLinks = [ { name: "Home", href: "/" }, { name: "Earn", href: "#earn" }, { name: "For Creators", href: "#creators" }, { name: "Community", href: "#community" }, { name: "About Us", href: "#about" }, ]; const menuVariants = { closed: { opacity: 0, height: 0, transition: { duration: 0.2, when: "afterChildren", staggerChildren: 0.05, staggerDirection: -1, }, }, open: { opacity: 1, height: "auto", transition: { duration: 0.2, when: "beforeChildren", staggerChildren: 0.1, staggerDirection: 1, }, }, }; const itemVariants = { closed: { opacity: 0, y: -10 }, open: { opacity: 1, y: 0 }, }; return ( <Section wrapperClassName="z-50 sticky top-10 !py-0 " className="md:!px-20 "> <nav className="bg-white/5 backdrop-blur-lg rounded-3xl p-4 w-full text-white"> <div className="w-full flex items-center justify-between"> <div className="text-xl font-bold flex items-center space-x-2"> <Image src={"/images/streamFiLogo.svg"} alt="StreamFi Logo" width={120} height={120} /> </div> {/* Desktop Menu */} <ul className="hidden lg:flex space-x-3 text-xs lg:text-sm"> {navLinks.map((link, index) => ( <li key={index}> <Link href={link.href} className={`transition-colors duration-500 ${ pathname === link.href ? "text-white font-medium " : "text-white/60 hover:text-white/80 font-normal" }`} > {link.name} {index < navLinks.length - 1 && ( <span className="text-gray-400 ml-3"> / </span> )} </Link> </li> ))} </ul> {/* Get Started Button */} <Button isLink href="/explore" className="hidden lg:block bg-white hover:text-white text-[#1E1E1E] px-4 py-2 rounded-lg font-medium" > Get started </Button> {/* Mobile Menu Button */} <motion.button className="lg:hidden bg-[#B8B8B82E] backdrop-blur-lg rounded-lg px-3 py-1" onClick={() => setIsOpen(!isOpen)} whileTap={{ scale: 0.95 }} > <AnimatePresence mode="wait"> {isOpen ? ( <motion.div key="close" initial={{ rotate: -90, opacity: 0 }} animate={{ rotate: 0, opacity: 1 }} exit={{ rotate: 90, opacity: 0 }} transition={{ duration: 0.2 }} > <X className="w-6 h-6" /> </motion.div> ) : ( <motion.div key="menu" initial={{ rotate: 90, opacity: 0 }} animate={{ rotate: 0, opacity: 1 }} exit={{ rotate: -90, opacity: 0 }} transition={{ duration: 0.2 }} > <Menu className="w-6 h-6" /> </motion.div> )} </AnimatePresence> </motion.button> </div> {/* Mobile Menu */} <AnimatePresence> {isOpen && ( <motion.div className="lg:hidden w-full overflow-hidden" initial="closed" animate="open" exit="closed" variants={menuVariants} > <motion.ul className="flex flex-col items-center justify-center w-full mt-4 py-4"> {navLinks.map((link, index) => ( <motion.li key={index} className="h-16 flex justify-center items-center w-full " variants={itemVariants} whileHover={{ scale: 1.05, x: 5 }} > <Link href={link.href} className={`transition-colors duration-500 w-full h-full hover:text-white/80 text-center ${ pathname === link.href ? "text-white/80" : "text-white" }`} onClick={() => setIsOpen(false)} > {link.name} </Link> </motion.li> ))} <motion.li className="w-full mt-2" variants={itemVariants} whileHover={{ scale: 1.03 }} > <motion.button className="bg-white text-black px-4 py-5 rounded-lg font-medium w-full" onClick={() => setIsOpen(false)} whileTap={{ scale: 0.95 }} > <Link href={"/explore"}>Get started</Link> </motion.button> </motion.li> </motion.ul> </motion.div> )} </AnimatePresence> </nav> </Section> ); }; export default Navbar; )("use client"; import Image from "next/image"; import { motion } from "framer-motion"; import { tokenUtilityData } from "@/data/landing-page/streamTokenUtility"; import Section from "../layout/Section"; const vpnKey = "/Images/vpn_key.svg"; const token1 = "/Images/tokens/token1.svg"; const token2 = "/Images/tokens/token2.svg"; const token3 = "/Images/tokens/token3.svg"; const token4 = "/Images/tokens/token4.svg"; const token5 = "/Images/tokens/token4.svg"; export default function StreamTokenUtility() { // Animation variants const fadeInUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 }, }; const staggerChildren = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2, }, }, }; const floatAnimation = { initial: { y: 0 }, animate: { y: [0, -10, 0], transition: { duration: 3, repeat: Infinity, repeatType: "reverse" as const, ease: "easeInOut", }, }, }; return ( <Section id="stream-token-utility" className="relative grid grid-cols-1 md:grid-cols-2 gap-2.5 sm:gap-8 bg-transparent overflow-hidden" > {/* Content Container */} <div className="col-span-1 md:col-span-2 flex flex-col items-center gap-6 relative z-40"> <motion.h1 className="text-2xl sm:text-4xl xl:text-5xl font-extrabold font-pp-neue text-white text-center" initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeInUp} transition={{ duration: 0.5 }} > $Stream Token Utility </motion.h1> <motion.p className=" text-sm sm:text-base text-white/80 font-normal sm:text-center max-w-[844px]" initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeInUp} transition={{ duration: 0.5, delay: 0.1 }} > Lorem ipsum dolor sit amet consectetur. Dictum elementum malesuada sed a. Cursus sem pellentesque porttitor fringilla consectetur egestas </motion.p> </div> {/* Cards Container */} {/* Token images with animations - responsive positioning */} <motion.div> <motion.div className="absolute top-[60%] left-[5%] md:left-[14%] hidden md:flex items-center justify-center w-[150px] h-[120px] md:w-[449.8px] md:h-[304.2px] z-0" variants={floatAnimation} initial="initial" animate="animate" > <Image src={token1} alt="token1" height={100} width={100} className="object-cover h-[304px] w-[340px]" /> </motion.div> <motion.div className="absolute top-[45%] left-[2%] md:left-[7%] hidden md:flex items-center justify-center w-[100px] h-[80px] md:w-[306px] md:h-[206px] blur-[2px]" variants={floatAnimation} initial="initial" animate="animate" transition={{ delay: 0.5 }} > <Image src={token2} alt="token2" height={100} width={100} className="object-cover h-full w-full" /> </motion.div> <motion.div className="absolute top-[30%] left-[15%] md:left-[28%] hidden md:flex items-center justify-center w-[80px] h-[60px] md:w-[204px] md:h-[138px] blur-[3px]" variants={floatAnimation} initial="initial" animate="animate" transition={{ delay: 1 }} > <Image src={token3} alt="token3" height={100} width={100} className="object-cover h-full w-full" /> </motion.div> <motion.div className="absolute top-[25%] left-[0%] md:left-[3%] hidden md:flex items-center justify-center w-[90px] h-[70px] md:w-[204px] md:h-[138px] blur-[2px]" variants={floatAnimation} initial="initial" animate="animate" transition={{ delay: 1.5 }} > <Image src={token4} alt="token4" height={100} width={100} className="object-cover h-full w-full" /> </motion.div> <motion.div className="absolute top-[10%] left-[8%] md:left-[13%] hidden md:flex items-center justify-center w-[90px] h-[70px] md:w-[204px] md:h-[138px] blur-[2px]" variants={floatAnimation} initial="initial" animate="animate" transition={{ delay: 2 }} > <Image src={token5} alt="token5" height={100} width={100} className="object-cover h-full w-full" /> </motion.div> </motion.div> <motion.div className="col-span-1 flex flex-col gap-4" initial="hidden" whileInView="visible" viewport={{ once: true }} variants={staggerChildren} > {tokenUtilityData.map((item, index) => ( <motion.div key={index} className="flex items-start gap-4 p-6 bg-[#FFFFFF0D] border border-[#FFFFFF1A] rounded-lg hover:translate-y-[-8px] transition-transform duration-300 cursor-pointer" variants={fadeInUp} transition={{ duration: 0.3, delay: index * 0.1 }} whileHover={{ scale: 1.02 }} > <div className="flex items-center justify-center p-3 rounded bg-[#007BFF1A]"> <Image src={vpnKey} alt={item.title} width={24} height={24} /> </div> <div className="flex flex-col gap-2"> <h2 className="font-bold text-[#FFFFFF] text-lg md:text-2xl"> {item.title} </h2> <p className="text-[#FFFFFF99] text-sm md:text-base"> {item.description} </p> </div> </motion.div> ))} </motion.div> </Section> ); } )("use client"; import { Autoplay } from "swiper/modules"; import { Swiper, SwiperSlide } from "swiper/react"; import { testimonial_content } from "@/data/landing-page/testimonial"; import Image from "next/image"; import "swiper/css"; import Section from "../layout/Section"; export default function Testimonials() { return ( <Section id="testimonials" className="flex flex-col gap-8 text-white"> <header className="w-full flex flex-col gap-3 items-center justify-center"> <h1 className="text-2xl sm:text-4xl xl:text-5xl font-extrabold font-pp-neue"> Don&apos;t just take our word for it </h1> <p className="text-white/80"> Hear from some of StreamFi amazing users{" "} </p> </header> <Swiper modules={[Autoplay]} slidesPerView={1} centeredSlides spaceBetween={60} freeMode speed={1200} autoplay={{ pauseOnMouseEnter: true, disableOnInteraction: false, delay: 2000, }} loop breakpoints={{ 768: { slidesPerView: 3, }, }} className="w-full" > {testimonial_content.map((item, idx) => ( <SwiperSlide key={idx}> <Image src={item.image} width={0} height={0} alt="" className="w-full h-full" style={{ objectFit: "cover" }} /> </SwiperSlide> ))} </Swiper> </Section> ); } )("use client"; import React, { useState } from "react"; import { motion } from "framer-motion"; import Image from "next/image"; import Section from "../layout/Section"; interface WaitlistProps { initialCount?: number; onSubmit?: (email: string) => Promise<void>; } const Waitlist: React.FC<WaitlistProps> = ({ initialCount = 3000, onSubmit, }) => { const [email, setEmail] = useState<string>(""); const [isSubmitting, setIsSubmitting] = useState<boolean>(false); const [isSubmitted, setIsSubmitted] = useState<boolean>(false); const avatars: string[] = [ "/Images/waitlist1.png", "/Images/waitlist2.png", "/Images/waitlist3.png", "/Images/waitlist4.png", ]; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!email || !email.includes("@")) return; setIsSubmitting(true); try { if (onSubmit) { await onSubmit(email); } else { await new Promise((resolve) => setTimeout(resolve, 1000)); } setIsSubmitted(true); setEmail(""); setTimeout(() => { setIsSubmitted(false); }, 3000); } catch (error) { console.error("Error submitting email:", error); } finally { setIsSubmitting(false); } }; return ( <Section id="waitlist" className="text-white relative flex flex-col items-center justify-center" wrapperClassName="bg-gradient-to-b from-transparent to-background-2" > <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} className="text-center mb-8" > <h1 className="text-2xl sm:text-4xl xl:text-5xl font-extrabold font-pp-neue max-w-5xl text-white mb-4"> Join the Revolution: Own Your Stream, Own Your Earnings </h1> <p className="text-white/80 max-w-2xl font-normal mx-auto"> Sign up for early access and be among the first to explore StreamFi&apos;s decentralized streaming platform. Get exclusive perks, early feature access, and shape the future of streaming! </p> </motion.div> <motion.form initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.2 }} onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-4 items-center relative z-20 justify-center w-full max-w-2xl mx-auto mb-6" > <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter your email" className=" py-3 px-4 bg-[#272526] rounded-lg w-full md:max-w-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300" required /> <motion.button whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} type="submit" disabled={isSubmitting} className={`py-3 px-6 bg-[#5A189A] hover:bg-purple-700 rounded-lg w-full sm:w-fit text-white font-medium transition-colors duration-300 ${ isSubmitting ? "opacity-70 cursor-not-allowed" : "" }`} > {isSubmitting ? "Joining..." : isSubmitted ? "Joined!" : "Join the Waitlist"} </motion.button> </motion.form> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.4 }} className="flex flex-col sm:flex-row items-center justify-center gap-2 text-gray-300" > <div className="flex -space-x-2"> {avatars.map((avatar, index) => ( <motion.div key={index} initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.6 + index * 0.1 }} > <Image src={avatar} alt={`User ${index + 1}`} width={32} height={32} className="w-8 h-8 md:text-base text-[8px] rounded-full border-2 border-gray-800" /> </motion.div> ))} </div> <span>{initialCount}+ creators and viewers Joined!</span> </motion.div> <div className=" flex opacity-20 justify-center pointer-events-none overflow-hidden"> <p className="text-[4rem] md:text-[12rem] font-extrabold p-0 m-0" style={{ color: "rgba(255, 255, 255, 0.1)", WebkitTextStroke: "0.8px #f1f1f1", textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)", }} > Waitlist </p> </div> <div className="absolute bottom-0 inset-0 bg-[url('/Images/waitlist.png')] bg-cover bg-center opacity-20 pointer-events-none" style={{ bottom: "-24px" }} ></div> </Section> ); }; export default Waitlist; )