“use client”
import { useState } from “react”
import { SiteHeader } from “@/components/site-header”
import { HeroSection } from “@/components/hero-section”
import { ArticleCard } from “@/components/article-card”
import { NewsSidebar } from “@/components/news-sidebar”
import { SiteFooter } from “@/components/site-footer”
import { TagPill } from “@/components/tag-pill”
const categories = [“All”, “World”, “Politics”, “Business”, “Technology”, “Science”, “Health”, “Sports”]
const articles = [
{
title: “Global Leaders Convene for Economic Summit”,
slug: “global-leaders-convene-for-economic-summit”,
excerpt:
“World leaders gather to discuss international trade policies and sustainable development goals for the next decade.”,
category: “World”,
author: “Sarah Mitchell”,
time: “3 hours ago”,
image: “/international-summit-with-world-leaders-and-flags.jpg”,
comments: 24,
likes: 156,
},
{
title: “Breakthrough in Renewable Energy Storage”,
slug: “breakthrough-in-renewable-energy-storage”,
excerpt:
“Scientists develop new battery technology that could revolutionize solar and wind power storage capabilities.”,
category: “Science”,
author: “Dr. James Chen”,
time: “5 hours ago”,
image: “/modern-renewable-energy-solar-panels-and-batteries.jpg”,
comments: 18,
likes: 203,
},
{
title: “Markets React to Federal Reserve Decision”,
slug: “markets-react-to-federal-reserve-decision”,
excerpt: “Wall Street responds to latest interest rate announcement as investors weigh economic growth prospects.”,
category: “Business”,
author: “Michael Torres”,
time: “6 hours ago”,
image: “/stock-market-trading-floor-with-financial-data.jpg”,
comments: 31,
likes: 89,
},
{
title: “New Study Links Diet to Longevity”,
slug: “new-study-links-diet-to-longevity”,
excerpt: “Researchers discover key dietary factors that contribute to increased lifespan and healthier aging.”,
category: “Health”,
author: “Dr. Emily Zhang”,
time: “8 hours ago”,
image: “/healthy-fresh-organic-vegetables-and-fruits.jpg”,
comments: 42,
likes: 267,
},
{
title: “Tech Industry Unveils AI Ethics Guidelines”,
slug: “tech-industry-unveils-ai-ethics-guidelines”,
excerpt:
“Major technology companies collaborate on new framework for responsible artificial intelligence development.”,
category: “Technology”,
author: “Alex Kumar”,
time: “10 hours ago”,
image: “/futuristic-ai-technology-digital-brain-neural-netw.jpg”,
comments: 56,
likes: 421,
},
{
title: “Historic Peace Agreement Reached”,
slug: “historic-peace-agreement-reached”,
excerpt: “Diplomatic breakthrough brings hope for lasting peace in region after decades of conflict.”,
category: “World”,
author: “Rachel Thompson”,
time: “12 hours ago”,
image: “/diplomatic-handshake-peace-agreement-signing.jpg”,
comments: 78,
likes: 534,
},
]
export default function HomePage() {
const [activeCategory, setActiveCategory] = useState(“All”)
const filteredArticles =
activeCategory === “All” ? articles : articles.filter((article) => article.category === activeCategory)
return (
<div className=”min-h-screen flex flex-col”>
<SiteHeader />
<main className=”flex-1″>
<HeroSection />
{/* Center container with max width and auto margins */}
<div className=”container mx-auto max-w-7xl px-4 py-8 md:px-6 md:py-12″>
{/* Categories filter pills */}
<div className=”flex flex-wrap justify-center gap-2 mb-8″>
{categories.map((cat) => (
<TagPill key={cat} label={cat} active={activeCategory === cat} onClick={() => setActiveCategory(cat)} />
))}
</div>
{/* Main content grid: articles + sidebar */}
<div className=”grid gap-8 lg:grid-cols-[1fr_320px]”>
{/* Article cards grid, centered with max width */}
<div className=”grid gap-6 sm:grid-cols-2″>
{filteredArticles.map((article, i) => (
<ArticleCard key={i} {…article} slug={article.slug} />
))}
</div>
<NewsSidebar />
</div>
</div>
</main>
<SiteFooter />
</div>
)
}
Leave a Reply