File: /var/www/html/tmpr/..//tmpr/..//tmpr/../tmpr/..//tmpr/../tmpr/../index/final.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brand AI | Your Entire Marketing Team, In One AI</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Brand AI delivers bespoke designs, insightful content, and tailored strategies—all powered by cutting-edge AI. Get the creative firepower of an entire marketing team at your fingertips." />
<meta name="keywords" content="Brand AI, AI marketing, brand creator, AI design, business branding, strategic insights, content creation, brand identity" />
<link rel="canonical" href="https://www.thebrand.ai/" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.thebrand.ai/" />
<meta property="og:title" content="Brand AI | Your Entire Marketing Team, In One AI" />
<meta property="og:description" content="Brand AI delivers bespoke designs, insightful content, and tailored strategies—all powered by cutting-edge AI. Get the creative firepower of an entire marketing team at your fingertips." />
<meta property="og:image" content="https://picsum.photos/seed/brandai-og/1200/630" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://www.thebrand.ai/" />
<meta property="twitter:title" content="Brand AI | Your Entire Marketing Team, In One AI" />
<meta property="twitter:description" content="Brand AI delivers bespoke designs, insightful content, and tailored strategies—all powered by cutting-edge AI. Get the creative firepower of an entire marketing team at your fingertips." />
<meta property="twitter:image" content="https://picsum.photos/seed/brandai-og/1200/630" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
'brand-cyan': '#03bef3',
'brand-midnight': '#0b0f29',
'brand-magenta': '#ff00a8',
},
},
},
}
</script>
<style>
html {
scroll-behavior: smooth;
}
#root:empty {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Inter', sans-serif;
color: #4a5568;
font-size: 1.25rem;
}
#root:empty::after {
content: "Loading Brand AI...";
animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
</style>
<script type="importmap">
{
"imports": {
"react": "https://aistudiocdn.com/react@^19.2.0",
"react/": "https://aistudiocdn.com/react@^19.2.0/",
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/"
}
}
</script>
<!-- Babel for in-browser JSX transpilation -->
<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-type="module">
import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
// --- START OF constants.tsx ---
const FEATURES_PRIMARY = [
{
title: 'Bring Your Brand to Life with Brand Creator',
description: 'Quickly and effortlessly create a powerful, professional brand identity and logos that stand out and drive business growth.',
link: 'https://www.thebrand.ai/brandcreator/index',
buttonText: 'Explore Brand Creator',
imageUrl: 'https://picsum.photos/seed/design-assets/800/600',
bgColor: '#1E003B', // Deep Purple/Indigo
},
{
title: 'Revolutionize Your Brand with AI Insights',
description: 'Supercharge your brand with intelligent solutions, design, and big data to drive growth, engagement, and measurable success.',
link: 'https://www.thebrand.ai/insights/',
buttonText: 'Explore Insights',
imageUrl: 'https://picsum.photos/seed/data-viz/800/600',
bgColor: '#003D5B', // Dark Cyan/Blue
},
{
title: 'Build a Website Easily with Brand Sites',
description: 'Choose from over 100 amazing templates to build a stunning website that empowers your brand to stand out.',
link: 'https://www.thebrand.ai/sites/index',
buttonText: 'Explore Brand Sites',
imageUrl: 'https://picsum.photos/seed/web-design/800/600',
bgColor: '#004C4C', // Dark Teal
},
];
const FEATURES_SECONDARY = [
{
title: 'Meet the Visual Suite',
description: 'Your entire workflow in one place. From bespoke designs and insightful blogs to tailored strategies—all powered by AI.',
link: 'https://www.thebrand.ai/insights/dashboard?feature=brandtoolkit',
buttonText: 'Explore Visual Suite',
imageUrl: 'https://picsum.photos/seed/brand-suite/1200/800',
bgColor: '#3D004F', // Dark Magenta/Purple
size: 'large',
},
{
title: 'Present with impact',
description: 'Reimagine presentations with cinematic visuals, smart collaboration, and AI-powered tools.',
link: 'https://www.thebrand.ai/i/designs',
buttonText: 'Try Presentations',
imageUrl: 'https://picsum.photos/seed/impact-pres/1200/800',
bgColor: '#005F58', // Deep Teal/Green
size: 'large',
},
];
const FEATURES_TERTIARY = [
{
title: 'Define your Brand Identity',
description: 'A central hub to build, manage, and evolve your unique brand identity as you scale.',
link: 'https://www.thebrand.ai/i/account/build_brand',
buttonText: 'Build My Brand',
imageUrl: 'https://picsum.photos/seed/brand-guide/800/600',
bgColor: '#1A237E', // Dark Indigo
},
{
title: 'End-to-end platform for large organizations',
description: 'Scale brand consistency with enterprise-grade tools, security, and support for large organizations.',
link: '#',
buttonText: 'Explore Enterprise',
imageUrl: 'https://picsum.photos/seed/corporate-dash/800/600',
bgColor: '#00263E', // Very Dark Blue
},
{
title: 'Unlock Growth with Insight Journeys',
description: "Explore expert-led journeys to transform your startup's growth, overcome challenges, and achieve success.",
link: 'https://www.thebrand.ai/insights/dashboard?feature=browsejourneys',
buttonText: 'Discover Your Path',
imageUrl: 'https://picsum.photos/seed/growth-path/800/600',
bgColor: '#01579B', // Light Blue
},
];
const CostIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 10v-1m-5.293-6.293l-.707.707M17.293 7.707l.707-.707M5.707 16.293l.707.707M16.586 17H19a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2.414" />
</svg>
);
const TimeIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
);
const ToolsIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
</svg>
);
const PROBLEM_CARDS = [
{
icon: <CostIcon />,
title: 'Agency-Level Budgets',
description: 'SMEs and governments need top-tier strategy but lack the budget for expensive agencies.'
},
{
icon: <TimeIcon />,
title: 'Months of Guesswork',
description: 'Founders and marketers waste precious time guessing their next move instead of acting on clear insights.'
},
{
icon: <ToolsIcon />,
title: 'Juggling a Dozen Tools',
description: 'Creatives juggle multiple, disconnected tools to create a single campaign, with none of them talking to each other.'
}
];
const SmeIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0v-4m0 4h5m0 0v-4m0 4h5m-5-4v-5h5v5h-5z" />
</svg>
);
const GovernmentIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21l-2-2m2 2l2-2m2 2l2-2M5 15l-2-2m2 2l2-2m2 2l2-2m2 2l2-2M5 21v-6a2 2 0 012-2h10a2 2 0 012 2v6" /> <path strokeLinecap="round" strokeLinejoin="round" d="M3 21h18M5 10l7-7 7 7" />
</svg>
);
const StartupIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
);
const MarketerIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
);
const CorporateIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0v-4m0 4h5m0 0v-4m0 4h5m-5-4V5h5v7h-5z" />
</svg>
);
const TARGET_MARKETS = [
{ icon: <SmeIcon />, name: 'SMEs' },
{ icon: <GovernmentIcon />, name: 'Governments' },
{ icon: <StartupIcon />, name: 'Startups' },
{ icon: <MarketerIcon />, name: 'Marketers' },
{ icon: <CorporateIcon />, name: 'Corporations' },
];
const FacebookIcon = () => (
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
</svg>
);
const TwitterIcon = () => (
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.71v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
);
const InstagramIcon = () => (
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fillRule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.024.06 1.378.06 3.808s-.012 2.784-.06 3.808c-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.024.048-1.378.06-3.808.06s-2.784-.012-3.808-.06c-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.024-.06-1.378-.06-3.808s.012-2.784.06-3.808c.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 016.08 2.525c.636-.247 1.363-.416 2.427-.465C9.53 2.013 9.884 2 12.315 2zM12 7.044c-2.583 0-4.666 2.083-4.666 4.666s2.083 4.666 4.666 4.666 4.666-2.083 4.666-4.666S14.583 7.044 12 7.044zm0 7.666c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zm4.917-7.916a1.146 1.146 0 100-2.292 1.146 1.146 0 000 2.292z" clipRule="evenodd" />
</svg>
);
const LinkedInIcon = () => (
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
</svg>
);
const TEMPLATE_CATEGORIES = [
{
category: 'Social Media',
templates: [
{ title: "Facebook Post", url: "https://www.thebrand.ai/i/social-media/facebook-post" },
{ title: "Instagram Post", url: "https://www.thebrand.ai/i/social-media/instagram-posts" },
{ title: "Instagram Story", url: "https://www.thebrand.ai/i/social-media/instagram-story" },
{ title: "LinkedIn Post", url: "https://www.thebrand.ai/i/social-media/linkedin-post" },
{ title: "Twitter Post", url: "https://www.thebrand.ai/i/social-media/twitter" },
{ title: "Pinterest Pin", url: "https://www.thebrand.ai/i/social-media/pinterest-pin-graphic-templates" },
{ title: "IGTV Cover", url: "https://www.thebrand.ai/i/social-media/igtv-cover" },
{ title: "Highlight Cover", url: "https://www.thebrand.ai/i/social-media/instagram-highlight-cover" },
{ title: "YouTube Graphics", url: "https://www.thebrand.ai/i/social-media/youtube-graphic-templates" },
{ title: "Twitch Graphics", url: "https://www.thebrand.ai/i/social-media/online-streaming" },
]
},
{
category: 'Invites & Cards',
templates: [
{ title: "Business Card", url: "https://www.thebrand.ai/i/invites-and-cards/business-card-85x55mm" },
{ title: "US Business Card", url: "https://www.thebrand.ai/i/invites-and-cards/business-card-us" },
{ title: "Greeting Card", url: "https://www.thebrand.ai/i/invites-and-cards/card" },
{ title: "Invitation", url: "https://www.thebrand.ai/i/invites-and-cards/invitation-13.9x10.7cm" },
]
},
{
category: 'Documents',
templates: [
{ title: "Presentation 16:9", url: "https://www.thebrand.ai/i/documents/presentation-16-9" },
{ title: "Resume", url: "https://www.thebrand.ai/i/documents/resume" },
{ title: "Letterhead A4", url: "https://www.thebrand.ai/i/documents/letterhead-a4" },
{ title: "Proposal A4", url: "https://www.thebrand.ai/i/documents/proposal-a4" },
{ title: "Flyer A4", url: "https://www.thebrand.ai/i/documents/flyer-a4" },
{ title: "Newsletter", url: "https://www.thebrand.ai/i/documents/newsletter" },
{ title: "Invoice A4", url: "https://www.thebrand.ai/i/documents/invoice-a4" },
{ title: "Report A4", url: "https://www.thebrand.ai/i/documents/report-a4" },
{ title: "Certificate", url: "https://www.thebrand.ai/i/documents/certificate" },
{ title: "Menu A4", url: "https://www.thebrand.ai/i/documents/menu-a4" },
{ title: "Checklist", url: "https://www.thebrand.ai/i/documents/checklist" },
{ title: "Schedule", url: "https://www.thebrand.ai/i/documents/schedule" },
{ title: "Workbook", url: "https://www.thebrand.ai/i/documents/workbook" },
{ title: "eBook", url: "https://www.thebrand.ai/i/documents/ebook" },
{ title: "Whitepaper", url: "https://www.thebrand.ai/i/documents/whitepaper" },
]
},
{
category: 'Advertising',
templates: [
{ title: "Poster", url: "https://www.thebrand.ai/i/advertising/poster-a3" },
{ title: "Banner", url: "https://www.thebrand.ai/i/advertising/banner-2x6ft" },
{ title: "Billboard", url: "https://www.thebrand.ai/i/advertising/billboard" },
{ title: "Flyer", url: "https://www.thebrand.ai/i/advertising/flyer-us" },
{ title: "Yard Sign", url: "https://www.thebrand.ai/i/advertising/yard-sign" },
{ title: "Roll-up Banner", url: "https://www.thebrand.ai/i/advertising/roll-up-banner" },
{ title: "Brochure", url: "https://www.thebrand.ai/i/advertising/brochure" },
]
},
{
category: 'Covers',
templates: [
{ title: "Book Cover", url: "https://www.thebrand.ai/i/covers/book-cover" },
{ title: "Magazine Cover", url: "https://www.thebrand.ai/i/covers/magazine-cover" },
{ title: "Report Cover", url: "https://www.thebrand.ai/i/covers/report-cover" },
{ title: "Planner Cover", url: "https://www.thebrand.ai/i/covers/planner-cover" },
{ title: "eBook Cover", url: "https://www.thebrand.ai/i/covers/ebook-cover" },
]
},
];
// --- END OF constants.tsx ---
// --- START OF components/Logo.tsx ---
const Logo = ({ className, theme = 'light' }) => {
const theColor = theme === 'dark' ? '#9CA3AF' : '#808080';
const brandColor = theme === 'dark' ? '#FFFFFF' : '#333333';
return (
<svg
width="110"
height="30"
viewBox="0 0 110 30"
className={className}
xmlns="http://www.w3.org/2000/svg"
aria-label="The Brand Logo"
>
<g>
<g transform="translate(0, -2) rotate(-5, 15, 15)">
<path d="M0,3.993C0,1.788,1.788,0,3.993,0h22.013C28.212,0,30,1.788,30,3.993v22.013 c0,2.205-1.788,3.993-3.993,3.993H3.993C1.788,30,0,28.212,0,26.007V3.993z" fill="#29B6F6"/>
<text x="15" y="21" textAnchor="middle" fontSize="20" fontWeight="bold" fill="white" style={{fontFamily: 'inherit'}}>B</text>
</g>
<text x="40" y="12" fontSize="9" fill={theColor} fontWeight="600" style={{fontFamily: 'inherit'}}>THE</text>
<text x="40" y="27" fontSize="16" fill={brandColor} fontWeight="bold" style={{fontFamily: 'inherit'}}>Brand</text>
</g>
</svg>
);
};
// --- END OF components/Logo.tsx ---
// --- START OF components/Header.tsx ---
const Header = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const navLinks = [
{ name: 'Brand Creator', href: 'https://www.thebrand.ai/brandcreator/index' },
{ name: 'Templates', href: 'https://www.thebrand.ai/i/designs' },
{ name: 'Insights', href: 'https://www.thebrand.ai/insights/' },
{ name: 'Pricing', href: 'https://www.thebrand.ai/brandpay/choose' },
{ name: 'Blogs', href: 'https://www.thebrand.ai/blogs' },
];
return (
<header className="bg-white/80 backdrop-blur-sm sticky top-0 z-50 shadow-sm">
<div className="container mx-auto px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-8">
<a href="/" aria-label="Brand AI Homepage">
<Logo />
</a>
<nav className="hidden md:flex items-center space-x-6">
{navLinks.map((link) => (
<a key={link.name} href={link.href} className="text-gray-600 hover:text-brand-cyan font-medium transition-colors">
{link.name}
</a>
))}
</nav>
</div>
<div className="hidden md:flex items-center space-x-4">
<a href="https://bit.ly/2LpQJmO" target="_blank" rel="noopener noreferrer" className="font-semibold text-gray-600 hover:text-brand-cyan transition-colors border border-gray-300 rounded-lg py-2 px-4 text-sm hover:border-brand-cyan">Download App</a>
<a href="#" className="font-bold text-gray-600 hover:text-brand-cyan transition-colors">Log in</a>
<a href="#" className="bg-brand-cyan text-white font-bold py-2 px-4 rounded-lg hover:opacity-90 transition-opacity">Sign up for free</a>
</div>
<div className="md:hidden">
<button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-gray-800 focus:outline-none" aria-label="Toggle menu">
<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={isMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}></path>
</svg>
</button>
</div>
</div>
{isMenuOpen && (
<div className="md:hidden mt-4">
<nav className="flex flex-col space-y-4">
{navLinks.map((link) => (
<a key={link.name} href={link.href} className="text-gray-600 hover:text-brand-cyan font-medium transition-colors">
{link.name}
</a>
))}
<div className="flex flex-col space-y-3 pt-4 border-t">
<a href="https://bit.ly/2LpQJmO" target="_blank" rel="noopener noreferrer" className="w-full text-center border border-gray-300 text-gray-600 font-bold py-2 px-4 rounded-lg hover:border-brand-cyan hover:text-brand-cyan transition-colors">Download App</a>
<a href="#" className="font-bold text-gray-600 hover:text-brand-cyan transition-colors">Log in</a>
<a href="#" className="w-full text-center bg-brand-cyan text-white font-bold py-2 px-4 rounded-lg hover:opacity-90 transition-opacity">Sign up for free</a>
</div>
</nav>
</div>
)}
</div>
</header>
);
};
// --- END OF components/Header.tsx ---
// --- START OF components/Footer.tsx ---
const Footer = () => {
const socialLinks = [
{ name: 'Facebook', href: 'https://facebook.com/TheBrandApp', icon: <FacebookIcon /> },
{ name: 'Twitter', href: 'https://twitter.com/thebrandhq', icon: <TwitterIcon /> },
{ name: 'Instagram', href: 'https://www.instagram.com/thebrandapp', icon: <InstagramIcon /> },
{ name: 'LinkedIn', href: 'https://www.linkedin.com/company/the-brand-app', icon: <LinkedInIcon /> },
];
const footerSections = [
{
title: 'Features',
links: [
{ name: 'Brand Creator', href: 'https://www.thebrand.ai/brandcreator/index' },
{ name: 'My Designs', href: 'https://www.thebrand.ai/i/account/designs' },
{ name: 'Templates', href: 'https://www.thebrand.ai/i/designs' },
{ name: 'Brand Toolkit', href: 'https://www.thebrand.ai/insights/dashboard?feature=brandtoolkit' },
],
},
{
title: 'Resources',
links: [
{ name: 'Insights', href: 'https://www.thebrand.ai/insights/' },
{ name: 'Blogs', href: 'https://www.thebrand.ai/blogs' },
{ name: 'Brand Journeys', href: 'https://www.thebrand.ai/insights/dashboard?feature=browsejourneys' },
{ name: 'Sites', href: 'https://www.thebrand.ai/sites/index' },
],
},
{
title: 'Account',
links: [
{ name: 'My Brand Identity', href: 'https://www.thebrand.ai/i/account/build_brand' },
{ name: 'Update Brand Details', href: '#' },
{ name: 'Onboarding', href: 'https://www.thebrand.ai/insights/auth-onboard' },
],
},
{
title: 'Company',
links: [
{ name: 'About Us', href: '#' },
{ name: 'Contact Us', href: 'https://www.thebrand.ai/i/contact' },
{ name: 'Careers', href: '#' },
],
},
];
return (
<footer className="bg-brand-midnight text-white">
<div className="container mx-auto px-6 py-12">
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8">
<div className="col-span-2 lg:col-span-1">
<a href="/" aria-label="Brand AI Homepage">
<Logo theme="dark" />
</a>
<p className="mt-4 text-gray-400">Your vision, amplified.</p>
</div>
{footerSections.map((section) => (
<div key={section.title}>
<h3 className="font-bold uppercase text-gray-400">{section.title}</h3>
<ul className="mt-4 space-y-2">
{section.links.map((link) => (
<li key={link.name}>
<a href={link.href} className="text-gray-300 hover:text-brand-cyan transition-colors">
{link.name}
</a>
</li>
))}
</ul>
</div>
))}
</div>
<div className="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p className="text-gray-400">© {new Date().getFullYear()} Brand AI. All rights reserved.</p>
<div className="flex space-x-4 mt-4 md:mt-0">
{socialLinks.map((social) => (
<a key={social.name} href={social.href} className="text-gray-400 hover:text-brand-cyan transition-colors" aria-label={social.name}>
<span className="sr-only">{social.name}</span>
{social.icon}
</a>
))}
</div>
</div>
</div>
</footer>
);
};
// --- END OF components/Footer.tsx ---
// --- START OF components/FeatureCard.tsx ---
const FeatureCard = ({
title,
description,
link,
buttonText,
imageUrl,
bgColor,
size = 'normal'
}) => {
const sizeClasses = {
normal: 'min-h-[480px] md:min-h-[520px]',
large: 'min-h-[520px] md:col-span-2 lg:col-span-1', // Special classes can be added here
};
return (
<div
className={`relative rounded-3xl overflow-hidden shadow-lg group text-white p-8 flex flex-col justify-between transition-all duration-500 ease-in-out transform hover:-translate-y-2 ${sizeClasses[size]}`}
style={{ backgroundColor: bgColor }}
>
<div className="z-10 relative">
<h3 className="text-3xl md:text-4xl font-bold mb-4">{title}</h3>
{description && <p className="text-lg opacity-90 mb-6">{description}</p>}
<a
href={link}
className="bg-white text-gray-800 font-bold py-2 px-6 rounded-lg text-md hover:bg-gray-200 transition-all duration-300 ease-in-out transform group-hover:-translate-y-1 inline-block"
>
{buttonText}
</a>
</div>
<div className="absolute inset-0 z-0">
<img src={imageUrl} alt={title} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500 ease-in-out" loading="lazy" decoding="async" />
<div className="absolute inset-0 bg-black bg-opacity-20 group-hover:bg-opacity-10 transition-all duration-500 ease-in-out"></div>
</div>
</div>
);
};
// --- END OF components/FeatureCard.tsx ---
// --- START OF components/TemplateCard.tsx ---
const TemplateCard = ({ title, url }) => {
const imageSeed = title.replace(/\s+/g, '-').toLowerCase();
return (
<a
href={url}
className="block group rounded-lg overflow-hidden bg-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
>
<div className="relative aspect-[4/3] overflow-hidden">
<img
src={`https://picsum.photos/seed/${imageSeed}/400/300`}
alt={title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
loading="lazy"
decoding="async"
/>
<div className="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors duration-300"></div>
</div>
<div className="p-3">
<h4 className="text-sm font-semibold text-gray-800 truncate group-hover:text-brand-cyan transition-colors duration-300">
{title}
</h4>
</div>
</a>
);
};
// --- END OF components/TemplateCard.tsx ---
// --- START OF components/InteractiveTemplates.tsx ---
const InteractiveTemplates = () => {
const [activeTab, setActiveTab] = useState(TEMPLATE_CATEGORIES[0].category);
const activeCategory = TEMPLATE_CATEGORIES.find(cat => cat.category === activeTab);
return (
<div className="container mx-auto px-6">
<div className="text-center mb-12">
<h2 className="text-4xl md:text-5xl font-bold mb-4">Templates for absolutely anything</h2>
<p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
Jumpstart your next project with thousands of professional templates for any occasion.
</p>
<a href="https://www.thebrand.ai/brandcreator/index" className="mt-8 inline-block bg-brand-cyan text-white font-bold py-3 px-8 rounded-lg text-lg hover:opacity-90 transition-opacity">
Create Your Brand Now
</a>
</div>
<div className="flex flex-wrap justify-center gap-2 md:gap-4 mb-10">
{TEMPLATE_CATEGORIES.map(cat => (
<button
key={cat.category}
onClick={() => setActiveTab(cat.category)}
className={`py-2 px-5 rounded-full font-semibold transition-all duration-300 text-sm md:text-base ${
activeTab === cat.category
? 'bg-brand-cyan text-white shadow-lg transform scale-105'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
{cat.category}
</button>
))}
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6 md:gap-8">
{activeCategory?.templates.map(template => (
<TemplateCard
key={template.title}
title={template.title}
url={template.url}
/>
))}
</div>
</div>
);
};
// --- END OF components/InteractiveTemplates.tsx ---
// --- START OF App.tsx ---
const App = () => {
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>
);
};
// --- END OF App.tsx ---
// --- START OF index.tsx ---
const rootElement = document.getElementById('root');
if (!rootElement) {
throw new Error("Could not find root element to mount to");
}
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// --- END OF index.tsx ---
</script>
</body>
</html>