<![CDATA[
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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>AroundMetro.com</title>
<script src="https://cdn.tailwindcss.com"></script>
<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;700;900&family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.font-heading {
font-family: 'Montserrat', sans-serif;
letter-spacing: -0.05em;
}
</style>
<script type="importmap">
{
"imports": {
"react": "https://aistudiocdn.com/react@^19.2.0",
"react-dom/client": "https://aistudiocdn.com/react-dom@^19.2.0/client",
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
"react/": "https://aistudiocdn.com/react@^19.2.0/"
}
}
</script>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div id="root"></div>
<script type="module">
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import ReactDOM from 'react-dom/client';
// --- Data from types.ts ---
const CATEGORIES = [
'Metro News', 'Lifestyle', 'Entrepreneurship', 'Fitness & Health', 'Finance', 'Tech', 'Food & Drink', 'Automotive', 'Travel', 'Global'
];
const MOCK_ARTICLES = [
{
id: 1,
title: "The Shard to light up with falling poppy petals for Remembrance Sunday tribute",
category: "Metro News",
author: "LDN Collaborator",
publishDate: "2024-11-10",
imageUrl: "https://picsum.photos/seed/shard/800/600",
content: "In a moving tribute for Remembrance Sunday, The Shard will be illuminated with cascading red poppies. The display honors the sacrifices made by servicemen and women. The iconic city landmark will serve as a beacon of remembrance, visible across the city skyline, reminding residents of the importance of this solemn day.",
trending: true,
hero: true,
},
{
id: 2,
title: "From sleepless nights to sustainable success: How motherhood redefined my work",
category: "Entrepreneurship",
author: "Jane Doe",
publishDate: "2024-11-09",
imageUrl: "https://picsum.photos/seed/motherhood/800/600",
content: "Becoming a mother was the catalyst for a complete overhaul of my career. This is the story of how postnatal depression led to a groundbreaking sustainable business model that prioritizes well-being over burnout.",
trending: false,
hero: false,
},
{
id: 3,
title: "How compassionate funerals help families begin the healing process",
category: "Lifestyle",
author: "LDN Editor",
publishDate: "2024-11-08",
imageUrl: "https://picsum.photos/seed/funeral/800/600",
content: "Grief is a profound journey, and the first step is often the farewell. We explore how modern funeral services are shifting focus to compassionate, personalized experiences that truly celebrate life and support families in their time of need.",
trending: true,
hero: false,
},
{
id: 4,
title: "Beyond the scissors: The unseen skills of a master stylist",
category: "Lifestyle",
author: "Style Weekly",
publishDate: "2024-11-07",
imageUrl: "https://picsum.photos/seed/stylist/800/600",
content: "A great haircut is more than just technical skill. It's about psychology, artistry, and building trust. We go behind the chair to uncover the hidden talents that separate a good hairdresser from a true master stylist.",
trending: false,
hero: false,
},
{
id: 5,
title: "How Osteopaths work alongside other healthcare professionals",
category: "Fitness & Health",
author: "HealthHub",
publishDate: "2024-11-06",
imageUrl: "https://picsum.photos/seed/osteo/800/600",
content: "Osteopathy is a key component of holistic healthcare. Discover how these specialists collaborate with GPs, surgeons, and physiotherapists to provide comprehensive patient care and improve recovery outcomes.",
trending: false,
hero: false,
},
{
id: 6,
title: "Local cyclists to take on “Ride Morocco”: A 400km cycling challenge for humanity",
category: "Fitness & Health",
author: "LDN Collaborator",
publishDate: "2024-11-05",
imageUrl: "https://picsum.photos/seed/morocco/800/600",
content: "A group of intrepid cyclists are preparing for the ultimate endurance test: a 400km ride through the challenging terrain of Morocco. The event aims to raise funds for global humanitarian aid projects.",
trending: true,
hero: false,
},
{
id: 7,
title: "Why airspace development could be the future of city living",
category: "Finance",
author: "LDN Editor",
publishDate: "2024-11-04",
imageUrl: "https://picsum.photos/seed/airspace/800/600",
content: "As cities continue to grow, developers are looking up. Airspace development—building new homes on top of existing buildings—is emerging as an innovative solution to the city's housing crisis.",
trending: true,
hero: false,
},
{
id: 8,
title: "City councils launch AI pilot to support unpaid carers",
category: "Metro News",
author: "Local Gov UK",
publishDate: "2024-11-03",
imageUrl: "https://picsum.photos/seed/richmond/800/600",
content: "A new AI-powered platform is being trialed in the city to provide vital support and resources to thousands of unpaid carers, aiming to reduce burnout and improve access to services.",
trending: false,
hero: false,
},
{
id: 9,
title: "City spends £11 million fighting wildfires and floods as climate crisis intensifies",
category: "Metro News",
author: "City Hall Reporter",
publishDate: "2024-11-02",
imageUrl: "https://picsum.photos/seed/climate/800/600",
content: "With extreme weather events on the rise, the Mayor has allocated a significant new fund to bolster the city's defenses against wildfires and flash flooding, marking a major step in climate adaptation.",
trending: false,
hero: false,
},
{
id: 10,
title: "UK accounting firms to pour £100k into AI as profession redefines expertise",
category: "Tech",
author: "LDN Collaborator",
publishDate: "2024-11-01",
imageUrl: "https://picsum.photos/seed/tech/800/600",
content: "Artificial intelligence is set to revolutionize the accounting industry. We look at how UK firms are investing heavily in AI tools to automate tasks, enhance analysis, and redefine the role of the modern accountant.",
trending: true,
hero: false,
},
{
id: 11,
title: "The ultimate guide to the city's best artisan bakeries",
category: "Food & Drink",
author: "Foodie Finds",
publishDate: "2024-10-31",
imageUrl: "https://picsum.photos/seed/bakery/800/600",
content: "From sourdough to croissants, we've scoured the city to find the most delicious and authentic artisan bakeries. Here's where to get your daily bread and pastry fix.",
trending: false,
hero: false,
},
{
id: 12,
title: "Electric dreams: The new EV that promises a 500-mile range",
category: "Automotive",
author: "Auto Express",
publishDate: "2024-10-30",
imageUrl: "https://picsum.photos/seed/auto/800/600",
content: "A new player in the electric vehicle market has unveiled a sedan with a groundbreaking battery technology, promising a range that could eliminate range anxiety for good.",
trending: true,
hero: false,
},
{
id: 13,
title: "Weekend escape: A serene getaway to the countryside",
category: "Travel",
author: "Wanderlust Weekly",
publishDate: "2024-10-29",
imageUrl: "https://picsum.photos/seed/travel/800/600",
content: "Need a break from the city buzz? We map out the perfect weekend itinerary for a peaceful and rejuvenating trip to charming villages and rolling hills.",
trending: false,
hero: false,
},
{
id: 14,
title: "Global markets react to surprising new inflation data",
category: "Global",
author: "Market Watch",
publishDate: "2024-10-28",
imageUrl: "https://picsum.photos/seed/global/800/600",
content: "Unexpected inflation figures from the US have sent ripples through global stock markets. We analyze the data and what it means for investors and economies worldwide.",
trending: true,
hero: false,
},
{
id: 15,
title: "Local teen is honoured to use the letters BCyA after his name",
category: "Lifestyle",
author: "LDN Editor",
publishDate: "2024-10-27",
imageUrl: "https://picsum.photos/seed/hackney/800/600",
content: "A young community leader has been awarded the British Citizen Youth Award in recognition of his exceptional contribution to local youth projects and outreach programs.",
trending: false,
hero: false,
},
{
id: 16,
title: "Claudio De Giovanni and his journey of global innovation",
category: "Entrepreneurship",
author: "LDN Editor",
publishDate: "2024-11-11",
imageUrl: "https://picsum.photos/seed/claudio/800/600",
content: "An in-depth look at the career of tech entrepreneur Claudio De Giovanni, from his humble beginnings to building a multinational tech empire focused on disruptive innovation.",
trending: false,
hero: false,
},
{
id: 17,
title: "Breaking the silence on the loneliness economy",
category: "Entrepreneurship",
author: "LDN Editor",
publishDate: "2024-11-12",
imageUrl: "https://picsum.photos/seed/loneliness/800/600",
content: "Leona Burton launches MIB CONNEX LIVE, a new initiative aimed at connecting entrepreneurs and combating the growing issue of loneliness among business owners.",
trending: false,
hero: false,
}
];
// --- Components from components/Icons.tsx ---
const SearchIcon = ({ className }) => (
React.createElement('svg', { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
React.createElement('path', { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
)
);
const MenuIcon = ({ className }) => (
React.createElement('svg', { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
React.createElement('path', { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 6h16M4 12h16M4 18h16" })
)
);
const CloseIcon = ({ className }) => (
React.createElement('svg', { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
React.createElement('path', { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
)
);
const CloudIcon = ({ className }) => (
React.createElement('svg', { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5 },
React.createElement('path', { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.5 4.5 0 002.25 15z" })
)
);
const ChatIcon = ({ className }) => (
React.createElement('svg', { className: className, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
React.createElement('path', { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.455.09-.934.09-1.425v-2.909A9 9 0 0121 12z" })
)
);
const UserIcon = ({ className }) => (
React.createElement('svg', { className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" },
React.createElement('path', { fillRule: "evenodd", d: "M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z", clipRule: "evenodd" })
)
);
const SocialIcons = () => (
React.createElement('div', { className: "flex space-x-4" },
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), 'aria-label': "Facebook", className: "hover:opacity-75 transition-opacity" }, React.createElement('svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, React.createElement('path', { d: "M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v2.385z" }))),
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), 'aria-label': "Instagram", className: "hover:opacity-75 transition-opacity" }, React.createElement('svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, React.createElement('path', { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.584-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.584-.012-4.85-.07c-3.252-.149-4.771-1.664-4.919-4.919-.058-1.265-.07-1.644-.07-4.85s.012-3.584.07-4.85c.149-3.225 1.664-4.771 4.919-4.919.058-1.265.07-1.644.07-4.85zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948s.014 3.667.072 4.947c.2 4.359 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072s3.667-.014 4.947-.072c4.359-.2 6.78-2.618 6.98-6.98.058-1.281.072-1.689.072-4.947s-.014-3.667-.072-4.947c-.2-4.359-2.618-6.78-6.98-6.98-1.281-.059-1.689-.073-4.948-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4s1.791-4 4-4 4 1.79 4 4-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.441 1.441 1.441 1.441-.645 1.441-1.441-.645-1.44-1.441-1.44z" }))),
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), 'aria-label': "X", className: "hover:opacity-75 transition-opacity" }, React.createElement('svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, React.createElement('path', { d: "M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616v.064c0 2.298 1.634 4.212 3.791 4.649-.69.188-1.432.233-2.193.084.606 1.884 2.364 3.256 4.453 3.3-1.621 1.274-3.666 2.031-5.88 2.031-.383 0-.761-.022-1.135-.067 2.099 1.353 4.604 2.145 7.29 2.145 8.748 0 13.529-7.249 13.529-13.53 0-.206-.005-.412-.013-.617.93-.672 1.728-1.513 2.368-2.454z" }))),
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), 'aria-label': "LinkedIn", className: "hover:opacity-75 transition-opacity" }, React.createElement('svg', { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, React.createElement('path', { d: "M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" })))
)
);
// --- Components from App.tsx ---
const ArticleCard = ({ article, onClick, large = false }) => (
React.createElement('div', { onClick: onClick, className: "cursor-pointer group" },
React.createElement('div', { className: "overflow-hidden" },
React.createElement('img', {
loading: "lazy",
src: article.imageUrl,
alt: article.title,
className: `w-full ${large ? 'aspect-video' : 'aspect-[4/3]'} object-cover transform transition-transform duration-300 group-hover:scale-105`
})
),
React.createElement('div', { className: "bg-[#FFEB00] p-4" },
React.createElement('h3', { className: `font-heading font-bold ${large ? 'text-2xl md:text-4xl' : 'text-xl'} text-black` }, article.title)
)
)
);
const TrendingArticleItem = ({ article, onClick }) => (
React.createElement('div', { onClick: onClick, className: "flex items-center space-x-4 cursor-pointer group py-4 border-b border-gray-200" },
React.createElement('img', { loading: "lazy", src: article.imageUrl, alt: article.title, className: "w-24 h-16 object-cover flex-shrink-0" }),
React.createElement('div', null,
React.createElement('h3', { className: "font-heading font-bold text-lg text-black group-hover:text-gray-700 transition-colors" }, article.title),
React.createElement('p', { className: "text-sm mt-1" },
React.createElement('span', { className: "bg-[#FFEB00] px-2 py-1 text-xs font-bold text-black" }, "By ", article.author)
)
)
)
);
const App = () => {
const [view, setView] = useState('home');
const [currentArticleId, setCurrentArticleId] = useState(null);
const [currentCategory, setCurrentCategory] = useState(null);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isSearchOpen, setIsSearchOpen] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
const [showCookieBanner, setShowCookieBanner] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 50);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
useEffect(() => {
const consent = localStorage.getItem('cookie_consent');
if (!consent) {
setShowCookieBanner(true);
}
}, []);
const handleAcceptCookies = () => {
localStorage.setItem('cookie_consent', 'true');
setShowCookieBanner(false);
}
const navigateToHome = () => {
setView('home');
setCurrentArticleId(null);
setCurrentCategory(null);
setIsMenuOpen(false);
window.scrollTo(0, 0);
};
const navigateToCategory = (category) => {
setView('category');
setCurrentCategory(category);
setCurrentArticleId(null);
setIsMenuOpen(false);
window.scrollTo(0, 0);
};
const navigateToArticle = (id) => {
setView('article');
setCurrentArticleId(id);
setCurrentCategory(null);
setIsMenuOpen(false);
window.scrollTo(0, 0);
};
const currentArticle = useMemo(() => MOCK_ARTICLES.find(a => a.id === currentArticleId), [currentArticleId]);
const heroArticle = useMemo(() => MOCK_ARTICLES.find(a => a.hero), []);
const renderContent = () => {
switch (view) {
case 'article':
return currentArticle ? React.createElement(ArticlePage, { article: currentArticle, navigateToArticle: navigateToArticle }) : React.createElement(HomePage, { navigateToCategory: navigateToCategory, navigateToArticle: navigateToArticle, heroArticle: heroArticle });
case 'category':
return currentCategory ? React.createElement(CategoryPage, { category: currentCategory, navigateToArticle: navigateToArticle }) : React.createElement(HomePage, { navigateToCategory: navigateToCategory, navigateToArticle: navigateToArticle, heroArticle: heroArticle });
case 'home':
default:
return React.createElement(HomePage, { navigateToCategory: navigateToCategory, navigateToArticle: navigateToArticle, heroArticle: heroArticle });
}
};
return (
React.createElement('div', { className: "bg-white text-black min-h-screen" },
React.createElement(Header, {
isScrolled: isScrolled,
onLogoClick: navigateToHome,
onMenuClick: () => setIsMenuOpen(true),
onSearchClick: () => setIsSearchOpen(true)
}),
React.createElement(MobileMenu, {
isOpen: isMenuOpen,
onClose: () => setIsMenuOpen(false),
navigateToCategory: navigateToCategory
}),
React.createElement(SearchOverlay, {
isOpen: isSearchOpen,
onClose: () => setIsSearchOpen(false),
navigateToArticle: navigateToArticle
}),
React.createElement('main', { className: "pt-20" },
renderContent()
),
React.createElement(Footer, null),
React.createElement(ChatBubble, null),
showCookieBanner && React.createElement(CookieBanner, { onAccept: handleAcceptCookies })
)
);
};
const Header = ({ isScrolled, onLogoClick, onMenuClick, onSearchClick }) => {
return (
React.createElement('header', { className: `fixed top-0 left-0 right-0 z-40 bg-white transition-all duration-300 shadow-md ${isScrolled ? 'py-2' : 'py-4'}` },
React.createElement('div', { className: "container mx-auto px-4 flex justify-between items-center" },
React.createElement('div', { className: "text-3xl font-black font-heading cursor-pointer", onClick: onLogoClick },
"Around", React.createElement('span', { className: "bg-[#FFEB00] px-1" }, "Metro"), ".com"
),
React.createElement('div', { className: "hidden md:flex items-center space-x-6 text-sm font-bold" },
React.createElement('div', { className: "flex items-center space-x-2" },
React.createElement(CloudIcon, { className: "w-6 h-6" }),
React.createElement('span', null, "11°C")
),
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "hover:text-gray-600" }, "TFL UPDATES")
),
React.createElement('div', { className: "flex items-center space-x-4" },
React.createElement('button', { onClick: onSearchClick, 'aria-label': "Search" },
React.createElement(SearchIcon, { className: "w-6 h-6 cursor-pointer hover:text-gray-600" })
),
React.createElement('button', { onClick: onMenuClick, 'aria-label': "Open menu" },
React.createElement(MenuIcon, { className: "w-7 h-7 cursor-pointer hover:text-gray-600" })
)
)
)
)
);
};
const MobileMenu = ({ isOpen, onClose, navigateToCategory }) => {
return (
React.createElement('div', { className: `fixed inset-0 bg-black bg-opacity-50 z-50 transition-opacity ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`, onClick: onClose },
React.createElement('div', { className: `fixed top-0 right-0 h-full w-full max-w-sm bg-[#FFEB00] text-black transform transition-transform duration-300 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`, onClick: e => e.stopPropagation() },
React.createElement('div', { className: "p-6" },
React.createElement('div', { className: "flex justify-between items-center mb-8" },
React.createElement('div', { className: "text-2xl font-black font-heading" },
"Around", React.createElement('span', { className: "bg-black text-[#FFEB00] px-1" }, "Metro"), ".com"
),
React.createElement('button', { onClick: onClose }, React.createElement(CloseIcon, { className: "w-8 h-8" }))
),
React.createElement('nav', null,
React.createElement('ul', null,
CATEGORIES.map(category => (
React.createElement('li', { key: category, className: "mb-4" },
React.createElement('a', { href: "#", onClick: (e) => { e.preventDefault(); navigateToCategory(category); }, className: "text-2xl font-bold font-heading hover:bg-black hover:text-[#FFEB00] p-2 transition-colors block" },
category
)
)
))
)
),
React.createElement('div', { className: "mt-8 border-t border-black pt-4" },
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "bg-black text-[#FFEB00] font-bold py-2 px-4 w-full block text-center mb-4" }, "WRITE FOR US"),
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "bg-black text-[#FFEB00] font-bold py-2 px-4 w-full block text-center" }, "LOGIN")
)
)
)
)
);
};
const SearchOverlay = ({ isOpen, onClose, navigateToArticle }) => {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
useEffect(() => {
if (query.length > 2) {
const filtered = MOCK_ARTICLES.filter(article =>
article.title.toLowerCase().includes(query.toLowerCase()) ||
article.content.toLowerCase().includes(query.toLowerCase())
);
setResults(filtered);
} else {
setResults([]);
}
}, [query]);
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
setQuery('');
}
return () => { document.body.style.overflow = 'auto'; };
}, [isOpen]);
if (!isOpen) return null;
return (
React.createElement('div', { className: "fixed inset-0 bg-white z-50 p-4 sm:p-8 overflow-y-auto" },
React.createElement('div', { className: "max-w-4xl mx-auto" },
React.createElement('div', { className: "flex justify-between items-center mb-8" },
React.createElement('h2', { className: "text-3xl sm:text-5xl font-heading font-black" }, "Search"),
React.createElement('button', { onClick: onClose }, React.createElement(CloseIcon, { className: "w-8 h-8" }))
),
React.createElement('div', { className: "relative mb-8" },
React.createElement('input', {
type: "text",
value: query,
onChange: (e) => setQuery(e.target.value),
placeholder: "Type to search...",
className: "w-full text-xl sm:text-3xl font-bold p-4 border-b-2 border-black focus:outline-none focus:border-[#FFEB00]",
autoFocus: true
}),
React.createElement(SearchIcon, { className: "absolute right-4 top-1/2 -translate-y-1/2 w-8 h-8 text-gray-400" })
),
React.createElement('div', null,
query.length > 2 && results.length === 0 && React.createElement('p', null, "No results found."),
React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
results.map(article => (
React.createElement('div', { key: article.id, onClick: () => { navigateToArticle(article.id); onClose(); }, className: "cursor-pointer group" },
React.createElement('div', { className: "overflow-hidden" },
React.createElement('img', { loading: "lazy", src: article.imageUrl, alt: article.title, className: "w-full aspect-video object-cover transition-transform duration-300 group-hover:scale-105" })
),
React.createElement('div', { className: "p-4 bg-gray-100 group-hover:bg-[#FFEB00] transition-colors" },
React.createElement('p', { className: "text-xs font-bold text-gray-600" }, `${article.category} - ${new Date(article.publishDate).toLocaleDateString()}`),
React.createElement('h3', { className: "font-heading font-bold text-lg mt-1" }, article.title)
)
)
))
)
)
)
)
);
};
const HomePage = ({ navigateToCategory, navigateToArticle, heroArticle }) => (
React.createElement('div', { className: "container mx-auto px-4 space-y-12" },
heroArticle && (
React.createElement('section', null,
React.createElement(ArticleCard, { article: heroArticle, onClick: () => navigateToArticle(heroArticle.id), large: true })
)
),
CATEGORIES.slice(0, 4).map(category => {
const articles = MOCK_ARTICLES.filter(a => a.category === category).slice(0, 3);
if (articles.length === 0) return null;
return (
React.createElement('section', { key: category },
React.createElement('div', { className: "flex justify-between items-baseline mb-4" },
React.createElement('h2', { className: "text-3xl md:text-4xl font-heading font-black" },
"Latest ", React.createElement('span', { className: "bg-[#FFEB00] px-2" }, category)
),
React.createElement('a', { href: "#", onClick: (e) => { e.preventDefault(); navigateToCategory(category); }, className: "font-bold text-sm hover:underline" }, "View All")
),
React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
articles.map(article => (
React.createElement(ArticleCard, { key: article.id, article: article, onClick: () => navigateToArticle(article.id) })
))
)
)
)
}),
React.createElement('section', null,
React.createElement('h2', { className: "text-3xl md:text-4xl font-heading font-black mb-4" },
React.createElement('span', { className: "bg-[#FFEB00] px-2" }, "Trending")
),
React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 gap-x-12" },
MOCK_ARTICLES.filter(a => a.trending).slice(0, 8).map(article => (
React.createElement(TrendingArticleItem, { key: article.id, article: article, onClick: () => navigateToArticle(article.id) })
))
)
)
)
);
const CategoryPage = ({ category, navigateToArticle }) => {
const [sortBy, setSortBy] = useState('Newest');
const articles = useMemo(() => {
const filtered = MOCK_ARTICLES.filter(a => a.category === category);
if (sortBy === 'Popular') {
return filtered.sort((a, b) => (b.trending ? 1 : -1) - (a.trending ? 1 : -1));
}
return filtered.sort((a, b) => new Date(b.publishDate).getTime() - new Date(a.publishDate).getTime());
}, [category, sortBy]);
return (
React.createElement('div', { className: "container mx-auto px-4" },
React.createElement('h1', { className: "text-4xl md:text-6xl font-heading font-black mb-4" },
"Latest ", React.createElement('span', { className: "bg-[#FFEB00] px-2" }, category)
),
React.createElement('div', { className: "flex justify-end items-center mb-8 space-x-2" },
React.createElement('span', { className: "text-sm font-bold" }, "Sort by:"),
React.createElement('select', { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "font-bold p-2 bg-gray-100 rounded" },
React.createElement('option', null, "Newest"),
React.createElement('option', null, "Popular")
)
),
React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
articles.map(article => (
React.createElement(ArticleCard, { key: article.id, article: article, onClick: () => navigateToArticle(article.id) })
))
)
)
);
};
const ArticlePage = ({ article, navigateToArticle }) => {
const relatedArticles = MOCK_ARTICLES.filter(a => a.category === article.category && a.id !== article.id).slice(0, 3);
return (
React.createElement('div', { className: "container mx-auto px-4 max-w-4xl" },
React.createElement('header', { className: "mb-8" },
React.createElement('p', { className: "font-bold mb-4" },
React.createElement('span', { className: "bg-[#FFEB00] px-2 py-1 text-black" }, article.category)
),
React.createElement('h1', { className: "text-4xl md:text-6xl font-heading font-black leading-tight mb-4" }, article.title),
React.createElement('div', { className: "flex items-center space-x-2 text-gray-600" },
React.createElement(UserIcon, { className: "w-8 h-8 bg-[#FFEB00] rounded-full p-1" }),
React.createElement('p', null, "By ", React.createElement('strong', null, article.author), " on ", new Date(article.publishDate).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }))
)
),
React.createElement('img', { src: article.imageUrl, alt: article.title, className: "w-full aspect-video object-cover mb-8" }),
React.createElement('article', { className: "prose lg:prose-xl max-w-none" },
React.createElement('p', null, article.content),
React.createElement('p', null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
React.createElement('blockquote', null, "\"This is an inspiring pull quote that breaks up the text and adds visual interest to the article layout.\""),
React.createElement('p', null, "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.")
),
React.createElement('div', { className: "my-12 border-t pt-8" },
React.createElement('h3', { className: "font-bold mb-4" }, "Share this article:"),
React.createElement('div', { className: "flex space-x-4" },
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "bg-blue-800 text-white px-4 py-2 font-bold rounded hover:bg-blue-900 transition-colors" }, "Facebook"),
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "bg-black text-white px-4 py-2 font-bold rounded hover:bg-gray-800 transition-colors" }, "X"),
React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "bg-blue-600 text-white px-4 py-2 font-bold rounded hover:bg-blue-700 transition-colors" }, "LinkedIn")
)
),
relatedArticles.length > 0 && (
React.createElement('section', { className: "my-12 border-t pt-8" },
React.createElement('h2', { className: "text-3xl font-heading font-black mb-4" }, "Related Stories"),
React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" },
relatedArticles.map(relArticle => (
React.createElement(ArticleCard, { key: relArticle.id, article: relArticle, onClick: () => navigateToArticle(relArticle.id) })
))
)
)
),
React.createElement('section', { className: "my-12 border-t pt-8" },
React.createElement('h2', { className: "text-3xl font-heading font-black mb-4" }, "Comments"),
React.createElement('form', { className: "space-y-4" },
React.createElement('textarea', { className: "w-full border p-2 rounded", rows: 4, placeholder: "Write your comment..." }),
React.createElement('input', { type: "text", className: "w-full border p-2 rounded", placeholder: "Your Name" }),
React.createElement('button', { type: "submit", className: "bg-black text-[#FFEB00] font-bold px-6 py-2" }, "Post Comment")
)
)
)
);
};
const Footer = () => (
React.createElement('footer', { className: "bg-[#FFEB00] text-black mt-12 py-12" },
React.createElement('div', { className: "container mx-auto px-4" },
React.createElement('div', { className: "grid grid-cols-1 md:grid-cols-3 gap-8" },
React.createElement('div', null,
React.createElement('div', { className: "text-3xl font-black font-heading mb-4" },
"Around", React.createElement('span', { className: "bg-black text-[#FFEB00] px-1" }, "Metro"), ".com"
),
React.createElement(SocialIcons, null)
),
React.createElement('div', { className: "grid grid-cols-2 gap-8 md:col-span-2" },
React.createElement('div', null,
React.createElement('h4', { className: "font-bold mb-2" }, "INFO"),
React.createElement('ul', { className: "space-y-1 text-sm" },
React.createElement('li', null, React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "hover:underline" }, "FAQS")),
React.createElement('li', null, React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "hover:underline" }, "ADVERTISE ON AROUNDMETRO")),
React.createElement('li', null, React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "hover:underline" }, "MEDIA PACK")),
React.createElement('li', null, React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "hover:underline" }, "COOKIE SETTINGS"))
)
),
React.createElement('div', null,
React.createElement('h4', { className: "font-bold mb-2" }, "LEGAL"),
React.createElement('ul', { className: "space-y-1 text-sm" },
React.createElement('li', null, React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "hover:underline" }, "CONTRIBUTOR AGREEMENT")),
React.createElement('li', null, React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "hover:underline" }, "T&CS")),
React.createElement('li', null, React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "hover:underline" }, "PRIVACY POLICY")),
React.createElement('li', null, React.createElement('a', { href: "#", onClick: (e) => e.preventDefault(), className: "hover:underline" }, "COOKIE POLICY"))
)
)
)
),
React.createElement('div', { className: "border-t border-black mt-8 pt-4 text-center text-sm" },
React.createElement('p', null, "Website Content © 2025 AroundMetro.com")
)
)
)
);
const ChatBubble = () => (
React.createElement('div', { className: "fixed bottom-4 right-4 z-30 flex items-center group cursor-pointer" },
React.createElement('div', { className: "bg-white rounded-lg px-4 py-2 shadow-lg text-sm mr-4 opacity-0 group-hover:opacity-100 transition-opacity" },
React.createElement('p', { className: "font-bold" }, "Welcome to AroundMetro.com."),
React.createElement('p', null, "Got any questions? I'm happy to help.")
),
React.createElement('button', { className: "bg-black text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg hover:bg-gray-800 transition-colors" },
React.createElement(ChatIcon, { className: "w-8 h-8" })
)
)
);
const CookieBanner = ({ onAccept }) => (
React.createElement('div', { className: "fixed bottom-0 left-0 right-0 bg-black text-white p-4 z-50 flex flex-col md:flex-row justify-between items-center" },
React.createElement('p', { className: "text-sm mb-4 md:mb-0" }, "We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies."),
React.createElement('button', { onClick: onAccept, className: "bg-[#FFEB00] text-black font-bold px-6 py-2 flex-shrink-0" }, "Accept")
)
);
// --- Root rendering logic from 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.createElement(React.StrictMode, null,
React.createElement(App, null)
)
);
</script>
<script type="module" src="/index.tsx"></script>
</body>
</html>
preview this code ]]>