4d070abf-ca94-44bb-b333-e8a4e6214b03/src/App.tsx

import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
import ContactCta from '@/components/sections/contact/ContactCta';
import FeaturesFlipCards from '@/components/sections/features/FeaturesFlipCards';
import FooterBrandReveal from '@/components/sections/footer/FooterBrandReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import NavbarCentered from '@/components/ui/NavbarCentered';
import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
import TestimonialMetricsCards from '@/components/sections/testimonial/TestimonialMetricsCards';

export default function App() {
  return (
    <>
      <div id="nav" data-section="nav">
        <NavbarCentered
          logo="REDBRAND"
          navItems={[
            { name: "About", href: "#about" },
            { name: "Features", href: "#features" },
            { name: "Pricing", href: "#pricing" },
            { name: "Contact", href: "#contact" },
          ]}
          ctaButton={{
            text: "Get Started",            href: "#contact"}}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          tag="Bold Design"
          title="Redefining Minimalist Impact"
          description="Experience a powerful blend of color and simplicity that elevates your brand identity beyond the ordinary."
          primaryButton={{
            text: "Get Started",            href: "#contact"}}
          secondaryButton={{
            text: "Learn More",            href: "#about"}}
          imageSrc="https://pixabay.com/get/ga9867b7fa936931f472c3e014e1861ff72cd2e6eec0c96e169bc632e2d240e8475da9dd2b90e59a0edba0859556fe163e2ff981d908653c52d29dc0b2c2a8298_1280.jpg"
        />
      </div>

      <div id="about" data-section="about">
        <AboutTextSplit
          title="Designed for Impact"
          descriptions={[
            "Our mission is to create high-energy brand experiences through bold color choices and clean design architecture.",            "Every element is carefully considered to ensure maximum engagement and visual cohesion across all platforms."]}
        />
      </div>

      <div id="features" data-section="features">
        <FeaturesFlipCards
          tag="Capabilities"
          title="Core Strengths"
          description="Powerful features that keep your brand ahead of the curve."
          items={[
            {
              title: "Bold Aesthetic",              descriptions: ["Deep crimson accents", "Minimalist layout"],
              imageSrc: "https://pixabay.com/get/gf6191aebde1a902295f674d29703b93f3804cec5ffef0d82537aab6fcda2cafd54e88477d5845b8fdc4a91787a64ad0b63a6fc15cf983184cb720aa704485805_1280.jpg"},
            {
              title: "High Conversion",              descriptions: ["Optimized CTA placement", "Focused user journey"],
              imageSrc: "https://pixabay.com/get/g4abaf5c3d7d08298235efe37587cacb88b3b427a4f2f33fc8e8684fcab7d2c8a3572b19c3b566f889c02db163e41b618e4da42736457cccb4e681e50f5842078_1280.jpg"},
            {
              title: "Seamless Motion",              descriptions: ["Smooth interaction design", "Responsive grid"],
              imageSrc: "https://pixabay.com/get/g6f9e601bac816b48e165df8adee1cf24cf5f0cd73a842eed70b4ebfda9d0db7d02d77207951d92d35c3298cdd68dd10c9e6a5c51964a4d3f4f86f0069bacc23f_1280.jpg"},
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingHighlightedCards
          tag="Investment"
          title="Choose Your Path"
          description="Flexible plans designed to match your growth objectives."
          plans={[
            {
              tag: "Basic",              price: "$99",              description: "Perfect for starters",              features: ["Feature A", "Feature B"],
              primaryButton: {
                text: "Select",                href: "#"},
            },
            {
              tag: "Pro",              price: "$299",              description: "Ideal for scale",              features: ["All Basic", "Advanced Tech", "Priority"],
              highlight: "Most Popular",              primaryButton: {
                text: "Select",                href: "#"},
            },
            {
              tag: "Custom",              price: "Custom",              description: "Enterprise ready",              features: ["Custom Dev", "Dedicated Support"],
              primaryButton: {
                text: "Contact",                href: "#contact"},
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialMetricsCards
          tag="Proof"
          title="What Clients Say"
          description="Hear directly from those who have transformed their brand identity with us."
          testimonials={[
            { name: "Alice", role: "CEO", company: "Tech Corp", rating: 5, imageSrc: "https://pixabay.com/get/g242825b013bef85ef2c32457dbce7bc0423c3a96a32aa3560731e69ef17ea1de91293f227f5c53c6b137db153d3118842edc9ead8eaed3634f423345d29cb048_1280.jpg" },
            { name: "Bob", role: "Founder", company: "Design Co", rating: 5, imageSrc: "https://pixabay.com/get/gec3022bf52e1a8304949d23757c847f1a2ec234297fb2bbd7304e71aef955822bce160707b8bafd63cbc4ea6fe802f5c9e0fbc303444810c23a335f62f6bfd73_1280.jpg" },
            { name: "Charlie", role: "Creative", company: "Motion Inc", rating: 5, imageSrc: "https://pixabay.com/get/g6a38634b37f5b1fd6ff5ce9fc0021a31c48b6960ecf068393abb42b948daa4a9245441de7265b2a1f768fd0248e55779d029910a92ad03d35373bc05a202870a_1280.jpg" },
            { name: "Diana", role: "Director", company: "Growth Lab", rating: 5, imageSrc: "https://pixabay.com/get/gbaa9ed87da3676373e98fe7bfb5b712ae7d2ca6aede8a8ab67ab3b888b3255385ffb2fd21a8ff3f7e0efc553df6ada0d87950110b320afbb9c286472fd118369_1280.jpg" },
            { name: "Ethan", role: "Manager", company: "Next Level", rating: 5, imageSrc: "https://pixabay.com/get/ge82a1d5c76a1400a8d256504e8ea9f91709cc9740068a6b04ee931a3adf8d6d8e210aeee6904d8c7760761b455928e1d2eed179057e20a8e816f71f2662b17e4_1280.jpg" },
          ]}
          metrics={[
            { value: "100%", label: "Client Satisfaction" },
            { value: "500+", label: "Projects Delivered" },
            { value: "24/7", label: "Dedicated Support" },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCta
          tag="Get in touch"
          text="Ready to bring your bold vision to life?"
          primaryButton={{
            text: "Let's Talk",            href: "mailto:hello@example.com"}}
          secondaryButton={{
            text: "Follow Us",            href: "#"}}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBrandReveal
          brand="REDBRAND"
          columns={[
            {
              items: [
                { label: "About", href: "#about" },
                { label: "Features", href: "#features" },
              ],
            },
            {
              items: [
                { label: "Pricing", href: "#pricing" },
                { label: "Contact", href: "#contact" },
              ],
            },
            {
              items: [
                { label: "Privacy", href: "#" },
                { label: "Terms", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </>
  );
}