File: /var/www/html/tmpr/../tmpr/..//tmpr/../tmpr/..//tmpr/../tmpr/..//index/App.tsx
import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import FeatureCard from './components/FeatureCard';
import { FEATURES_PRIMARY, FEATURES_SECONDARY, FEATURES_TERTIARY, PROBLEM_CARDS, TARGET_MARKETS } from './constants';
import InteractiveTemplates from './components/InteractiveTemplates';
const App: React.FC = () => {
return (
<div className="bg-white text-gray-800 font-sans">
<Header />
<main>
{/* Hero Section */}
<section className="relative text-white overflow-hidden bg-brand-midnight">
{/* Stylish Background */}
<div aria-hidden="true" className="absolute inset-0 z-0 opacity-50">
<div className="absolute top-[-30%] left-[-30%] w-4/5 h-4/5 rounded-full bg-gradient-to-br from-brand-cyan to-transparent filter blur-3xl"></div>
<div className="absolute bottom-[-30%] right-[-30%] w-4/5 h-4/5 rounded-full bg-gradient-to-tl from-brand-cyan to-transparent filter blur-3xl"></div>
</div>
<div className="relative z-10 flex flex-col items-center justify-center min-h-[70vh] md:min-h-[80vh] px-4 text-center">
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold mb-4 tracking-tight">
Your entire marketing team, in one AI.
</h1>
<p className="text-lg md:text-2xl max-w-3xl mb-8">
Imagine the creative firepower of a design agency, the strategic insight of a consultant, and the brilliance of a top-tier marketing team—all at your fingertips. That's Brand AI.
</p>
<div className="flex flex-wrap justify-center gap-4">
<a
href="https://www.thebrand.ai/brandcreator/index"
className="bg-white text-brand-midnight font-bold py-3 px-8 rounded-lg text-lg hover:bg-gray-200 transition-all duration-300 transform hover:scale-105"
>
Start creating for free
</a>
<a
href="https://www.thebrand.ai/insights/"
className="bg-white/10 backdrop-blur-sm text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-white/20 transition-all duration-300 transform hover:scale-105"
>
Explore AI Features
</a>
</div>
</div>
</section>
{/* The Problem Section */}
<section className="py-20 md:py-28 bg-gray-50">
<div className="container mx-auto px-6 text-center">
<h2 className="text-4xl md:text-5xl font-bold mb-4">The old way is broken.</h2>
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-12">
Did you know 90% of businesses struggle to stand out? They spend months and thousands on solutions that don’t deliver.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
{PROBLEM_CARDS.map((card, index) => (
<div key={index} className="bg-white p-8 rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-2 transition-all duration-300">
<div className="text-brand-cyan mb-4">{card.icon}</div>
<h3 className="text-xl font-bold mb-2">{card.title}</h3>
<p className="text-gray-600">{card.description}</p>
</div>
))}
</div>
</div>
</section>
{/* Tools Section */}
<section className="py-20 md:py-28">
<div className="container mx-auto px-6">
<h2 className="text-4xl md:text-5xl font-bold text-center mb-12">
An entire toolkit, powered by AI.
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{FEATURES_PRIMARY.map((feature, index) => (
<FeatureCard key={index} {...feature} />
))}
</div>
</div>
</section>
{/* Traction Section */}
<section className="py-20 md:py-24 bg-brand-midnight text-white">
<div className="container mx-auto px-6 text-center">
<h2 className="text-5xl md:text-6xl font-extrabold mb-4 tracking-tight">
34,000+ users and growing.
</h2>
<p className="text-lg md:text-xl opacity-80 max-w-3xl mx-auto">
Trusted by governments, SMEs, and startups worldwide. All achieved through organic growth fueled by user trust and referrals.
</p>
</div>
</section>
{/* All in one place Section */}
<section className="py-20 md:py-28 bg-gray-50">
<div className="container mx-auto px-6">
<h2 className="text-4xl md:text-5xl font-bold text-center mb-12">
All the tools. All in one place.
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{FEATURES_SECONDARY.map((feature, index) => (
<FeatureCard key={index} {...feature} />
))}
</div>
</div>
</section>
{/* Target Market Section */}
<section className="py-20 md:py-28">
<div className="container mx-auto px-6 text-center">
<h2 className="text-4xl md:text-5xl font-bold mb-12">
Hyper-contextual solutions for everyone.
</h2>
<div className="flex flex-wrap justify-center gap-8 md:gap-12">
{TARGET_MARKETS.map((market, index) => (
<div key={index} className="flex flex-col items-center text-center w-32">
<div className="bg-cyan-100 text-brand-cyan rounded-full p-5 mb-4 transition-all duration-300 transform hover:scale-110 hover:bg-cyan-200">
{market.icon}
</div>
<h3 className="font-semibold text-gray-700">{market.name}</h3>
</div>
))}
</div>
</div>
</section>
{/* Templates Section */}
<section className="py-20 md:py-28 bg-gray-50">
<InteractiveTemplates />
</section>
{/* Ecosystem Section */}
<section className="py-20 md:py-28">
<div className="container mx-auto px-6">
<h2 className="text-4xl md:text-5xl font-bold text-center mb-12">
Your brand's entire ecosystem, connected.
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{FEATURES_TERTIARY.map((feature, index) => (
<FeatureCard key={index} {...feature} />
))}
</div>
</div>
</section>
</main>
<Footer />
</div>
);
};
export default App;