import Head from 'next/head';
import { NextPage } from 'next';
import { useState, useEffect, useCallback } from 'react';
import { ArrowLeft, ShoppingCart, Info, ExternalLink } from 'lucide-react';
interface Brand {
id: string;
name: string;
tagline: string;
logoText: string; // Text for placeholder logo
productImageText: string; // Text for placeholder product image
ctaText: string;
description: string;
affiliateLinks: { label: string; url: string }[];
}
const brandsData: Brand[] = [
{
id: 'fanatec',
name: 'Fanatec',
tagline: 'Premium Sim Racing Hardware',
logoText: 'FNTC',
productImageText: 'Fanatec Wheel',
ctaText: 'See Fanatec Deals',
description: 'Fanatec is a leading brand for sim racing hardware, including high-quality steering wheels, pedals, and cockpits designed for enthusiasts and professionals.',
affiliateLinks: [
{ label: 'Fanatec Official Store', url: '#' },
{ label: 'Sim Racing Pros - Fanatec Gear', url: '#' },
],
},
{
id: 'logitech',
name: 'Logitech G',
tagline: 'Play to Win',
logoText: 'LOGI',
productImageText: 'Logitech G29',
ctaText: 'Explore Logitech G',
description: 'Logitech G offers a wide range of gaming peripherals, including popular racing wheels like the G29 and G923, known for their reliability and value.',
affiliateLinks: [
{ label: 'Logitech G Store', url: '#' },
],
},
{
id: 'thrustmaster',
name: 'Thrustmaster',
tagline: 'Passion. Quality. Innovation.',
logoText: 'TM',
productImageText: 'Thrustmaster T300RS',
ctaText: 'Discover Thrustmaster',
description: 'Thrustmaster creates immersive and realistic gaming accessories, specializing in flight simulation and racing hardware for PC and consoles.',
affiliateLinks: [
{ label: 'Thrustmaster Official', url: '#' },
],
},
{
id: 'simucube',
name: 'Simucube',
tagline: 'The Ultimate Direct Drive',
logoText: 'SC',
productImageText: 'Simucube 2 Pro',
ctaText: 'View Simucube Bases',
description: 'Simucube is renowned for its high-end direct drive wheelbase systems, offering unparalleled force feedback and precision for serious sim racers.',
affiliateLinks: [
{ label: 'Simucube Store', url: '#' },
],
},
{
id: 'moza',
name: 'Moza Racing',
tagline: 'Drive to a New Reality',
logoText: 'MOZA',
productImageText: 'Moza R9 Wheelbase',
ctaText: 'Check Moza Hardware',
description: 'Moza Racing is an emerging force in sim racing, providing innovative direct drive systems, steering wheels, and pedals with a focus on performance and ecosystem.',
affiliateLinks: [
{ label: 'Moza Racing Official', url: '#' },
],
},
{
id: 'asetek',
name: 'Asetek SimSports',
tagline: 'Realism Redefined',
logoText: 'ASTK',
productImageText: 'Asetek Pedals',
ctaText: 'See Asetek Gear',
description: 'Asetek SimSports brings its expertise in cooling solutions to the sim racing market, producing high-performance pedals, wheelbases, and wheels.',
affiliateLinks: [
{ label: 'Asetek SimSports Store', url: '#' },
],
},
{
id: 'heusinkveld',
name: 'Heusinkveld',
tagline: 'Engineering Excellence',
logoText: 'HNKVD',
productImageText: 'Heusinkveld Sprints',
ctaText: 'Explore Heusinkveld',
description: 'Heusinkveld specializes in high-end sim racing pedals and handbrakes, known for their precision engineering and realistic feel.',
affiliateLinks: [
{ label: 'Heusinkveld Official Store', url: '#' },
],
},
{
id: 'simlab',
name: 'Sim-Lab',
tagline: 'Modular Sim Racing Cockpits',
logoText: 'S-LAB',
productImageText: 'Sim-Lab P1-X Cockpit',
ctaText: 'View Sim-Lab Rigs',
description: 'Sim-Lab is a leading manufacturer of aluminum profile sim racing cockpits and accessories, offering robust and highly customizable solutions.',
affiliateLinks: [
{ label: 'Sim-Lab Store', url: '#' },
],
},
{
id: 'nextlevel',
name: 'Next Level Racing',
tagline: 'Driving Simulation Forward',
logoText: 'NLR',
productImageText: 'NLR F-GT Elite',
ctaText: 'Discover NLR Cockpits',
description: 'Next Level Racing offers a wide range of sim racing cockpits, wheel stands, and motion platforms for all levels of sim racers.',
affiliateLinks: [
{ label: 'Next Level Racing Official', url: '#' },
],
},
{
id: 'trakracer',
name: 'Trak Racer',
tagline: 'Premium Sim Rigs',
logoText: 'TRKRCR',
productImageText: 'Trak Racer TR160',
ctaText: 'See Trak Racer Products',
description: 'Trak Racer designs and manufactures premium sim racing cockpits, monitor stands, and accessories for serious enthusiasts and professionals.',
affiliateLinks: [
{ label: 'Trak Racer Store', url: '#' },
],
},
{
id: 'cubecontrols',
name: 'Cube Controls',
tagline: 'Handcrafted Sim Wheels',
logoText: 'CUBE',
productImageText: 'Cube Controls F-PRO',
ctaText: 'Explore Cube Wheels',
description: 'Cube Controls is an Italian brand known for its high-quality, handcrafted sim racing steering wheels with advanced features and premium materials.',
affiliateLinks: [
{ label: 'Cube Controls Official', url: '#' },
],
},
{
id: 'simagic',
name: 'Simagic',
tagline: 'Direct Drive Innovation',
logoText: 'SMGC',
productImageText: 'Simagic Alpha Mini',
ctaText: 'Check Simagic Gear',
description: 'Simagic offers a growing ecosystem of direct drive wheelbases, steering wheels, and pedals, focusing on performance and quality for sim racers.',
affiliateLinks: [
{ label: 'Simagic Official Store', url: '#' },
],
},
];
interface PlaceholderImageProps {
text: string;
className?: string;
}
const PlaceholderImage: React.FC = ({ text, className = '' }) => (
= ({ brand, isFlipped, onFlip, onViewDeals, isVisible, animationDelay }) => {
return (
);
};
interface BrandDetailViewProps {
brand: Brand;
onBack: () => void;
}
const BrandDetailView: React.FC = ({ brand, onBack }) => {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const timer = setTimeout(() => setIsVisible(true), 50); // Short delay for transition to kick in
return () => clearTimeout(timer);
}, []);
return (
>(new Set());
const [currentView, setCurrentView] = useState<'grid' | 'brandDetail'>('grid');
const [selectedBrand, setSelectedBrand] = useState(null);
const [initialAnimationComplete, setInitialAnimationComplete] = useState(false);
useEffect(() => {
const timer = setTimeout(() => setInitialAnimationComplete(true), 100);
return () => clearTimeout(timer);
}, []);
const handleFlipCard = useCallback((brandId: string) => {
setFlippedCardIds(prev => {
const newSet = new Set(prev);
if (newSet.has(brandId)) {
newSet.delete(brandId);
} else {
newSet.add(brandId);
}
return newSet;
});
}, []);
const handleViewDeals = useCallback((brand: Brand) => {
setSelectedBrand(brand);
setCurrentView('brandDetail');
window.scrollTo(0, 0);
}, []);
const handleBackToGrid = useCallback(() => {
setCurrentView('grid');
setSelectedBrand(null);
}, []);
return (
<>
Sim Racing Brand Showcase
{currentView === 'grid' ? (
) : selectedBrand ? (
);
};
export default HomePage;
{text}
);
interface BrandCardProps {
brand: Brand;
isFlipped: boolean;
onFlip: () => void;
onViewDeals: (brand: Brand) => void;
isVisible: boolean;
animationDelay: string;
}
const BrandCard: React.FC{brand.name}
{brand.tagline}
About {brand.name}
{brand.description}
Product Highlights
{[1, 2].map((item) => (
Featured Product {item}
Affiliate Links
-
{brand.affiliateLinks.map((link, index) => (
-
{link.label}
))}
Sim Racing Brand Central
Click on a card to flip it, then explore deals for your favorite brands.
{brandsData.map((brand, index) => (
handleFlipCard(brand.id)}
onViewDeals={handleViewDeals}
isVisible={initialAnimationComplete}
animationDelay={`${index * 75}ms`}
/>
))}