"use client"; import React from 'react'; import { motion } from 'framer-motion'; const companyLinks = [ { text: "About", url: "/about" }, { text: "Careers", url: "/careers" }, { text: "Blog", url: "/blog" }, { text: "Status", url: "/status" }, { text: "Privacy", url: "/privacy" }, { text: "Partner with us", url: "/partner" } ]; const communicationLinks = [ { text: "Book Discovery Call", url: "/book-call" }, { text: "Science Behind Everything", url: "/science" } ]; const communityLinks = [ { text: "Customer Stories", url: "/customer-stories" }, { text: "Community", url: "/community" }, { text: "Support", url: "/support" }, { text: "Reports", url: "/reports" } ]; const learnLinks = [ { text: "Webinars", url: "/webinars" }, { text: "Leadership", url: "/leadership" }, { text: "Demos", url: "/demos" }, { text: "Videos", url: "/videos" }, { text: "Guides", url: "/guides" }, { text: "Articles", url: "/articles" }, { text: "eBooks", url: "/ebooks" }, { text: "Quick Reads", url: "/quick-reads" } ]; const solutionsLinks = [ { text: "Popular Solutions", url: "/solutions/popular" }, { text: "Marketing", url: "/solutions/marketing" }, { text: "Product", url: "/solutions/product" }, { text: "Human Resources", url: "/solutions/hr" }, { text: "Sales", url: "/solutions/sales" }, { text: "Operations", url: "/solutions/operations" }, { text: "Finance", url: "/solutions/finance" }, { text: "Content", url: "/solutions/content" } ]; export default function Footer() { return ( <div> {/* Top Section */} <div className='bg-black text-white px-10 md:px-40 py-10 md:py-20 flex items-center justify-between'> <h1 className='text-5xl'>Let's get Started</h1> <button className='px-6 py-4 rounded-2xl border hover:bg-white hover:text-black'> Get 14 Days Free </button> </div> {/* Middle Section with Lists */} <div className='px-10 md:px-40 pt-20'> <div className='grid grid-cols-1 md:grid-cols-5 gap-10'> {/* Company List */} <div className='space-y-5'> <h3 className='text-lg mb-2 text-white'>Company</h3> <ul className='text-gray-200 space-y-4'> {companyLinks.map((link, index) => ( <li key={index}> <a href={link.url} className="hover:text-violet-500">{link.text}</a> </li> ))} </ul> </div> {/* Communication List */} <div className='space-y-5'> <h3 className='text-lg mb-2 text-white'>Communication</h3> <ul className='text-gray-200 space-y-4'> {communicationLinks.map((link, index) => ( <li key={index}> <a href={link.url} className="hover:text-violet-500">{link.text}</a> </li> ))} </ul> </div> {/* Community List */} <div className='space-y-5'> <h3 className='text-lg mb-2 text-white'>Community</h3> <ul className='text-gray-200 space-y-4'> {communityLinks.map((link, index) => ( <li key={index}> <a href={link.url} className="hover:text-violet-500">{link.text}</a> </li> ))} </ul> </div> {/* Learn List */} <div className='space-y-5'> <h3 className='text-lg mb-2 text-white'>Learn</h3> <ul className='text-gray-200 space-y-4'> {learnLinks.map((link, index) => ( <li key={index}> <a href={link.url} className="hover:text-violet-500">{link.text}</a> </li> ))} </ul> </div> {/* Solutions List */} <div className='space-y-5'> <h3 className='text-lg mb-2 text-white'>Solutions</h3> <ul className='text-gray-200 space-y-4'> {solutionsLinks.map((link, index) => ( <li key={index}> <a href={link.url} className="hover:text-violet-500">{link.text}</a> </li> ))} </ul> </div> </div> </div> {/* Bottom Section with Animated Image */} <div className='text-gray-400 px-10 md:px-40 py-20 pt-5 md:pt-10 flex flex-col md:flex-row items-center justify-between'> {/* Animated Logo Image */} <motion.img className="h-20" src="https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png" alt="Logo" initial={{ y: -400, opacity: 0 }} // Start above view and invisible whileInView={{ y: [-200, 0, -50, 0, -20, 0], // Drop and bounce effect opacity: 1, // Fade in }} transition={{ duration: 1.5, ease: "easeInOut", }} /> {/* Description Text */} <p className='w-full md:w-1/3 text-xs text-center md:text-right'> In the new era of technology, we look to the future with certainty and pride for our company and business. </p> </div> </div> ); }