App.tsx

import React, { useState } from 'react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import Features from './components/Features';
import TechStack from './components/TechStack';
import FAQ from './components/FAQ';
import TerminalSection from './components/TerminalSection';
import InteractiveConsole from './components/InteractiveConsole';
import DocsSection from './components/DocsSection';
import Footer from './components/Footer';
import SEO from './components/SEO';

const App: React.FC = () => {
  return (
    <div className="min-h-screen bg-dark-900 text-white overflow-x-hidden selection:bg-brand selection:text-white">
      <SEO />
      <Navbar />
      <main>
        <Hero />
        <Features />
        <div id="docs">
          <DocsSection />
        </div>
        <TerminalSection />
        <InteractiveConsole />
        <TechStack />
        <FAQ />
        {/* CTA Section */}
        <section className="py-24 relative overflow-hidden border-t border-white/5 bg-gradient-to-b from-dark-900 to-brand-dark/20">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,20,112,0.1),transparent_70%)]"></div>
          <div className="max-w-4xl mx-auto px-6 text-center relative z-10">
            <h2 className="text-4xl md:text-5xl font-bold mb-6">Ready to Ship with BEE2BEE?</h2>
            <p className="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
              Join the decentralized network today. Deploy your first node in minutes.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <a href="#docs" className="w-full sm:w-auto px-8 py-4 rounded-full font-medium transition-all duration-300 flex items-center justify-center gap-2 shadow-[0_0_40px_-10px_rgba(255,255,255,0.3)] hover:shadow-[0_0_50px_-5px_rgba(255,20,112,0.4)] bg-white text-black hover:bg-gray-200">
                Get Started
              </a>
              <a href="#docs" className="w-full sm:w-auto px-8 py-4 bg-white/5 backdrop-blur-sm border border-white/10 rounded-full font-medium hover:bg-white/10 transition-all duration-300 text-white flex items-center justify-center">
                Documentation
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default App;