Need Refining Website for SI.yk

app.tsx

import React, { useState, useEffect, useRef } from 'react';
import { ChevronDown, Twitter, Linkedin, Instagram, Facebook } from 'lucide-react';

// Use this to ensure icons work.
// For the purpose of this self-contained immersive, we'll assume 'lucide-react' is available.

// =============================================================================
// Helper Components (to keep the main App component clean)
// =============================================================================

const IconWrapper = ({ children, className = '' }) => (
  <div className={`p-2 rounded-full bg-purple-700/50 text-white ${className}`}>
    {children}
  </div>
);

const SectionTitle = ({ title, subtitle, className = '' }) => (
  <div className={`text-center mb-16 ${className}`}>
    <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">{title}</h2>
    <p className="text-gray-400 max-w-2xl mx-auto">{subtitle}</p>
  </div>
);

// AnimatedSection component to handle scroll-based animations
const AnimatedSection = ({ children, className = '', id = '' }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      {
        root: null,
        rootMargin: '0px',
        threshold: 0.2,
      }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, []);

  return (
    <div
      ref={ref}
      id={id} // The id is now correctly applied to the root div of the component
      className={`${className} transition-all duration-1000 ease-in-out ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}
    >
      {children}
    </div>
  );
};

// =============================================================================
// Particle Background Component
// =============================================================================

const ParticleBackground = () => {
  const particleCount = 100;
  const particles = Array.from({ length: particleCount });

  return (
    <>
      <style>{`
        .particle-container {
          position: fixed;
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          background-color: #000000; /* Pitch black background */
          z-index: -1; /* This ensures it stays behind all content */
        }

        .circle-container {
          position: absolute;
          transform: translateY(-10vh);
          animation-iteration-count: infinite;
          animation-timing-function: linear;
          animation-duration: 10s; /* Generic duration, randomized with delays */
        }

        .circle {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          mix-blend-mode: screen;
          background-image: radial-gradient(
            hsl(180, 100%, 80%),
            hsl(180, 100%, 80%) 10%,
            hsla(180, 100%, 80%, 0) 56%
          );
          animation: fade-frames 2s infinite, scale-frames 4s infinite;
        }

        @keyframes fade-frames {
          0% { opacity: 1; }
          50% { opacity: 0.7; }
          100% { opacity: 1; }
        }

        @keyframes scale-frames {
          0% { transform: scale3d(0.4, 0.4, 1); }
          50% { transform: scale3d(2.2, 2.2, 1); }
          100% { transform: scale3d(0.4, 0.4, 1); }
        }

        @keyframes move-frames {
          from {
            transform: translate3d(var(--x-from), var(--y-from), 0);
          }
          to {
            transform: translate3d(var(--x-to), var(--y-to), 0);
          }
        }
      `}</style>
      <div className="particle-container">
        {particles.map((_, i) => {
          const size = Math.random() * 10 + 5; // size between 5px and 15px
          const moveDuration = 7000 + Math.random() * 4000;
          const moveDelay = Math.random() * 11000;
          const fadeDelay = Math.random() * 4000;

          // Randomized start and end positions for the move animation
          const xFrom = `${Math.random() * 100}vw`;
          const yFrom = `${100 + Math.random() * 10}vh`;
          const xTo = `${Math.random() * 100}vw`;
          const yTo = `${-100 - Math.random() * 30}vh`;

          return (
            <div
              key={i}
              className="circle-container"
              style={{
                width: `${size}px`,
                height: `${size}px`,
                animation: `move-frames ${moveDuration}ms linear infinite`,
                animationDelay: `${moveDelay}ms`,
                '--x-from': xFrom,
                '--y-from': yFrom,
                '--x-to': xTo,
                '--y-to': yTo,
              }}
            >
              <div
                className="circle"
                style={{
                  animationDelay: `${fadeDelay}ms`,
                }}
              ></div>
            </div>
          );
        })}
      </div>
    </>
  );
};

// =============================================================================
// Main App Component
// =============================================================================

function App() {
  const [activeFaq, setActiveFaq] = useState<number | null>(null);

  const toggleFaq = (index: number) => {
    setActiveFaq(activeFaq === index ? null : index);
  };

  const faqs = [
    {
      question: "What is AI Business Growth?",
      answer: "AI Business Growth refers to the strategic application of artificial intelligence technologies to various business processes, such as data analysis, marketing automation, customer service, and operational efficiency, to achieve sustainable growth."
    },
    {
      question: "How can your AI solutions benefit my business?",
      answer: "Our AI solutions can help you analyze customer data to personalize experiences, automate repetitive tasks to free up your team, and provide predictive insights to make smarter business decisions, ultimately boosting your revenue and efficiency."
    },
    {
      question: "What type of support do you offer for your solutions?",
      answer: "We offer comprehensive support including onboarding assistance, technical support, and regular performance reviews to ensure you get the most out of our AI solutions. Our team is available 24/7 to assist you."
    },
    {
      question: "Can I customize my plan based on my business needs?",
      answer: "Yes, absolutely! We understand that every business is unique. We offer customizable plans that can be tailored to your specific goals, budget, and industry requirements. Contact our sales team to discuss a personalized solution."
    },
  ];

  const features = [
    { title: "AI-Driven Marketing", desc: "Craft hyper-personalized marketing campaigns using AI. Predict customer behavior and optimize your ad spend for maximum ROI." },
    { title: "Automated Sales Management", desc: "Automate lead nurturing and follow-ups. Our AI solutions help you identify high-potential leads and close deals faster." },
    { title: "Data Analytics & Business", desc: "Transform raw data into actionable insights. Our AI-powered analytics tools provide a clear picture of your business health." },
    { title: "Advanced Financial Forecasting", desc: "Leverage AI to predict financial trends, manage risks, and create accurate budgets. Say goodbye to guesswork." },
    { title: "Operational Efficiency & Automation", desc: "Streamline your business operations. Our AI solutions automate repetitive tasks, reduce errors, and improve productivity." },
    { title: "AI-Powered Customer Service", desc: "Provide instant, 24/7 support with our AI chatbots and virtual assistants. Improve customer satisfaction and reduce support costs." },
  ];

  const pricingPlans = [
    {
      name: "Individual",
      price: "$49",
      features: [
        "Automated Forecasting",
        "Basic Customer Support",
        "Limited Documentation",
        "Limited Performance Analytics",
      ],
      isPopular: false,
    },
    {
      name: "Professional",
      price: "$99",
      features: [
        "Advanced Forecasting Engine",
        "Priority Customer Support",
        "Full API Documentation",
        "Custom Performance Dashboards",
        "Latest Forecasting Tools",
        "Live Chat Support",
      ],
      isPopular: true,
    },
    {
      name: "Business",
      price: "$199",
      features: [
        "Automated Marketing & Business",
        "Dedicated Account Manager",
        "Full API Documentation",
        "Custom Performance Dashboards",
        "Latest Forecasting Tools",
        "Enterprise-level Security",
      ],
      isPopular: false,
    },
  ];
  
  // Custom SVG for the arrow
  const arrowSVG = (
    <svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M109.999 220V0M109.999 0L178.583 68.5834M109.999 0L41.4159 68.5834" stroke="url(#paint0_linear_0_1)" strokeWidth="8"/>
      <defs>
        <linearGradient id="paint0_linear_0_1" x1="110.003" y1="0" x2="110.003" y2="220" gradientUnits="userSpaceOnUse">
          <stop stopColor="#F98188"/>
          <stop offset="1" stopColor="#A237EA"/>
        </linearGradient>
      </defs>
    </svg>
  );

  return (
    <div className="relative min-h-screen text-white font-sans overflow-x-hidden" style={{ scrollBehavior: 'smooth' }}>
      <ParticleBackground />
      
      <div className="relative z-10">
        {/* Header */}
        <header className="sticky top-0 z-50 bg-black border-b border-gray-800">
          <nav className="container mx-auto px-4 py-4 flex items-center justify-between">
            <div className="flex items-center">
              <h1 className="text-xl font-bold text-white">Basecom</h1>
            </div>
            <div className="hidden lg:flex items-center space-x-6 text-gray-400">
              <a href="#home" className="hover:text-white transition-colors duration-300">Home</a>
              <a href="#features" className="hover:text-white transition-colors duration-300">Features</a>
              <a href="#how-we-work" className="hover:text-white transition-colors duration-300">How we work</a>
              <a href="#pricing" className="hover:text-white transition-colors duration-300">Pricing</a>
              <a href="#faqs" className="hover:text-white transition-colors duration-300">FAQs</a>
            </div>
            <a href="#pricing" className="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-semibold py-2 px-6 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 hidden sm:block">
              Join Waitlist
            </a>
          </nav>
        </header>

        <main>
          
          {/* Hero Section */}
          <section id="home" className="container mx-auto px-4 py-24 sm:py-32 text-center">
            <h2 className="text-4xl sm:text-6xl lg:text-7xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400 leading-tight animate-fade-in-up">
              How AI is Redefining <br className="hidden md:inline"/> Business Success
            </h2>
            <p className="mt-6 text-lg sm:text-xl text-gray-400 max-w-3xl mx-auto animate-fade-in-up delay-200">
              Harness the power of AI to optimize every facet of your business. Our suite of services is designed to help you achieve new levels of efficiency and growth.
            </p>
            <div className="mt-10 flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 animate-fade-in-up delay-400">
              <a href="#pricing" className="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105">
                Join Waitlist
              </a>
              <a href="#" className="text-gray-400 border border-gray-700 py-3 px-8 rounded-full hover:bg-gray-800 transition-colors duration-300">
                <span className="flex items-center">
                  <svg className="h-6 w-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                  Watch a demo
                </span>
              </a>
            </div>
          </section>

          {/* Stats Section */}
          <AnimatedSection className="container mx-auto px-4 py-16">
            <div className="bg-black rounded-3xl p-8 sm:p-12 shadow-2xl border border-gray-800">
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 text-center">
                <div className="border-r border-gray-800 last:border-r-0 sm:last:border-r-0 lg:last:border-r-0">
                  <h3 className="text-4xl sm:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">4.9k+</h3>
                  <p className="mt-2 text-gray-400">Happy Customers</p>
                </div>
                <div className="border-r border-gray-800 last:border-r-0 sm:last:border-r-0 lg:last:border-r-0">
                  <h3 className="text-4xl sm:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">20k+</h3>
                  <p className="mt-2 text-gray-400">Successful Projects</p>
                </div>
                <div className="">
                  <h3 className="text-4xl sm:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">100k+</h3>
                  <p className="mt-2 text-gray-400">Total Hours Saved</p>
                </div>
              </div>
            </div>
          </AnimatedSection>

          {/* Features Section */}
          <AnimatedSection id="features" className="container mx-auto px-4 py-24">
            <SectionTitle 
              title="Solutions for Accelerated Business Growth"
              subtitle="Harness the power of AI to optimize every facet of your business. Our suite of services is designed to help you achieve new levels of efficiency and growth."
            />
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {features.map((feature, index) => (
                <div key={index} className="bg-black rounded-xl p-6 shadow-xl border border-gray-800 hover:border-purple-600 transition-all duration-300 transform hover:-translate-y-2">
                  <IconWrapper className="mb-4">
                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                  </IconWrapper>
                  <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
                  <p className="text-sm text-gray-400">{feature.desc}</p>
                </div>
              ))}
            </div>
          </AnimatedSection>

          {/* CTA Section */}
          <AnimatedSection className="container mx-auto px-4 py-24">
            <div className="bg-black rounded-3xl p-8 sm:p-16 text-center shadow-2xl border border-gray-800">
              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
                Start Growing Smarter & Faster with Our All-in-One AI-Powered Solutions
              </h2>
              <p className="text-gray-400 mb-8 max-w-2xl mx-auto">
                All-in-one platform for your business. From data analytics to marketing, we've got you covered.
              </p>
              <a href="#" className="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105">
                Learn more
              </a>
            </div>
          </AnimatedSection>

          {/* Winter Deal Section */}
          <AnimatedSection className="container mx-auto px-4 py-24">
            <div className="relative bg-black rounded-3xl p-8 sm:p-16 flex flex-col md:flex-row items-center justify-between shadow-2xl border border-gray-800">
              <div className="md:w-1/2 text-center md:text-left">
                <span className="bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase">
                  Winter Deal Days
                </span>
                <h3 className="mt-4 text-3xl sm:text-4xl font-bold text-white leading-tight">
                  Unlock Exclusive Bonus on AI Growing Trends
                </h3>
                <p className="mt-4 text-gray-400">
                  Unlock Exclusive Bonus on AI Growing Trends and discover the latest in AI-powered growth. Our exclusive bonus provides actionable insights, tools, and strategies for success.
                </p>
              </div>
              <div className="md:w-1/2 flex justify-center md:justify-end mt-8 md:mt-0">
                {arrowSVG}
              </div>
            </div>
          </AnimatedSection>

          {/* Pricing Section */}
          <AnimatedSection id="pricing" className="container mx-auto px-4 py-24">
            <SectionTitle 
              title="Start growing your business with flexible plans"
              subtitle="Pick a plan that suits your business needs and start growing with our AI solutions today. All plans include access to our cutting-edge AI technologies and expert support."
            />
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {pricingPlans.map((plan, index) => (
                <div key={index} className={`bg-black rounded-3xl p-8 shadow-xl hover:shadow-[0_0_40px_rgba(139,92,246,0.3)] transition-all duration-300 transform hover:-translate-y-2 border border-gray-800 hover:border-purple-600`}>
                  <div className="flex justify-between items-center mb-6">
                    <h3 className="text-xl font-bold text-white">{plan.name}</h3>
                    {plan.isPopular && (
                      <span className="bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-full">
                        Most Popular
                      </span>
                    )}
                  </div>
                  <div className="flex items-baseline">
                    <span className="text-4xl font-bold text-white">{plan.price}</span>
                    <span className="text-gray-400">/mo</span>
                  </div>
                  <ul className="mt-6 space-y-4 text-gray-400">
                    {plan.features.map((feature, i) => (
                      <li key={i} className="flex items-center">
                        <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                        {feature}
                      </li>
                    ))}
                  </ul>
                  <button className="mt-8 w-full bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105">
                    Get Started
                  </button>
                </div>
              ))}
            </div>
          </AnimatedSection>

          {/* Our Commitment Section */}
          <AnimatedSection id="how-we-work" className="relative container mx-auto px-4 py-24">
            <div className="relative rounded-3xl overflow-hidden h-[400px] sm:h-[500px]">
              {/* Using a placeholder image with similar aspect ratio. In a real-world app, you would use a proper image */}
              <img src="https://placehold.co/1200x500/1e293b/4a5568?text=Team" alt="Our Team" className="absolute inset-0 w-full h-full object-cover"/>
              <div className="absolute inset-0 bg-black/50 flex items-end p-8 sm:p-12">
                <div className="max-w-2xl text-white">
                  <h3 className="text-sm sm:text-lg font-semibold text-purple-400 mb-2">Our Commitment to Customers</h3>
                  <p className="text-lg sm:text-xl font-light">We are dedicated to helping our clients succeed. Our team of experts works tirelessly to deliver solutions that drive real results. We believe in building long-term relationships based on trust and mutual growth.</p>
                </div>
              </div>
            </div>
          </AnimatedSection>

          {/* Our Mission/Vision Section */}
          <AnimatedSection className="container mx-auto px-4 py-24">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-black rounded-3xl p-8 sm:p-12 border border-gray-800">
                <h3 className="text-sm font-semibold text-purple-400 mb-2">Our Vision</h3>
                <h4 className="text-2xl font-bold text-white mb-4">Revolutionizing Business Growth with AI-Driven Solutions</h4>
                <p className="text-gray-400">Our vision is to empower businesses of all sizes with intelligent AI solutions that optimize operations, enhance customer experiences, and unlock new opportunities for growth.</p>
              </div>
              <div className="bg-black rounded-3xl p-8 sm:p-12 border border-gray-800">
                <h3 className="text-sm font-semibold text-purple-400 mb-2">Our Mission</h3>
                <h4 className="text-2xl font-bold text-white mb-4">Delivering Scalable, Intelligent and Impactful AI Solutions</h4>
                <p className="text-gray-400">Our mission is to provide cutting-edge, scalable, and impactful AI solutions that help our clients stay ahead in a competitive market. We are committed to excellence, innovation, and client success.</p>
              </div>
            </div>
          </AnimatedSection>

          {/* Testimonials Section */}
          <AnimatedSection className="container mx-auto px-4 py-24">
            <SectionTitle 
              title="What Our Clients Are Saying"
              subtitle="Hear from our happy customers and see how we've helped them grow their businesses with our AI solutions."
            />
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              <div className="bg-black rounded-3xl p-8 border border-gray-800 shadow-xl">
                <p className="text-gray-300 italic mb-6">
                  "The AI-powered solutions from Basecom have completely transformed our marketing strategy. We've seen a massive increase in lead conversion and a significant reduction in ad spend. The team is fantastic to work with!"
                </p>
                <div className="flex items-center">
                  <img src="https://placehold.co/60x60/4a5568/ffffff?text=C" alt="Client 1" className="rounded-full mr-4 border-2 border-purple-600"/>
                  <div>
                    <p className="text-white font-semibold">Jane Doe</p>
                    <p className="text-sm text-gray-500">CEO, Tech Innovators</p>
                  </div>
                </div>
              </div>
              <div className="bg-black rounded-3xl p-8 border border-gray-800 shadow-xl">
                <p className="text-gray-300 italic mb-6">
                  "We were struggling with data analysis until we partnered with Basecom. Their platform is intuitive and provides us with deep insights we never had before. It's been a game-changer for our decision-making process."
                </p>
                <div className="flex items-center">
                  <img src="https://placehold.co/60x60/4a5568/ffffff?text=C" alt="Client 2" className="rounded-full mr-4 border-2 border-purple-600"/>
                  <div>
                    <p className="text-white font-semibold">John Smith</p>
                    <p className="text-sm text-gray-500">CTO, Data Solutions Inc.</p>
                  </div>
                </div>
              </div>
            </div>
          </AnimatedSection>

          {/* FAQ Section */}
          <AnimatedSection id="faqs" className="container mx-auto px-4 py-24">
            <SectionTitle 
              title="Frequently asked questions"
              subtitle="Find quick answers to common questions about our services and solutions."
            />
            <div className="max-w-3xl mx-auto">
              {faqs.map((faq, index) => (
                <div key={index} className="mb-4 rounded-xl border border-gray-800 bg-black">
                  <button
                    className="flex justify-between items-center w-full p-6 text-left"
                    onClick={() => toggleFaq(index)}
                  >
                    <span className="text-lg font-semibold text-white">{faq.question}</span>
                    <ChevronDown className={`w-6 h-6 transition-transform duration-300 ${activeFaq === index ? 'rotate-180' : ''}`} />
                  </button>
                  {activeFaq === index && (
                    <div className="p-6 pt-0 text-gray-400">
                      <p>{faq.answer}</p>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </AnimatedSection>
        </main>

        {/* Footer */}
        <footer className="bg-black py-16">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
              <div>
                <h3 className="text-2xl font-bold text-white mb-4">Basecom</h3>
                <p className="text-gray-400 mb-6">
                  Harness the power of AI to transform your business and stay ahead of the curve.
                </p>
                <div className="flex space-x-4">
                  <a href="#" aria-label="Twitter" className="text-gray-400 hover:text-purple-500 transition-colors duration-300">
                    <Twitter className="w-6 h-6" />
                  </a>
                  <a href="#" aria-label="LinkedIn" className="text-gray-400 hover:text-purple-500 transition-colors duration-300">
                    <Linkedin className="w-6 h-6" />
                  </a>
                  <a href="#" aria-label="Instagram" className="text-gray-400 hover:text-purple-500 transition-colors duration-300">
                    <Instagram className="w-6 h-6" />
                  </a>
                  <a href="#" aria-label="Facebook" className="text-gray-400 hover:text-purple-500 transition-colors duration-300">
                    <Facebook className="w-6 h-6" />
                  </a>
                </div>
              </div>

              {/* Empty columns for layout matching the image */}
              <div className="hidden md:block"></div>
              <div className="hidden md:block"></div>

              <div className="md:col-span-1">
                <h3 className="text-lg font-semibold text-white mb-4">Stay Connected w/ me.</h3>
                <form className="flex">
                  <input
                    type="email"
                    placeholder="Enter your email"
                    className="w-full bg-gray-800 text-white placeholder-gray-500 px-4 py-2 rounded-l-full focus:outline-none focus:ring-2 focus:ring-purple-600"
                  />
                  <button
                    type="submit"
                    className="bg-purple-600 hover:bg-purple-700 text-white px-4 rounded-r-full font-semibold transition-colors duration-300"
                  >
                    →
                  </button>
                </form>
              </div>
            </div>
            <div className="mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
              <p className="mb-4">&copy; 2024 All Rights Reserved by <a href="#" className="text-purple-400 hover:underline">Boostid</a></p>
              <div className="flex justify-center space-x-4">
                <a href="#" className="hover:text-white">Terms of Service</a>
                <a href="#" className="hover:text-white">Privacy Policy</a>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
  );
}

export default App;