// app/page.jsx "use client"; import { useEffect, useState } from "react"; import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, } from "recharts"; export default function Home() { const [coins, setCoins] = useState([]); const [chartData, setChartData] = useState([]); // Fetch top coins useEffect(() => { fetch( "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&per_page=3" ) .then((res) => res.json()) .then((data) => setCoins(data)); }, []); // Fetch chart for Bitcoin (example) useEffect(() => { fetch( "https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=7" ) .then((res) => res.json()) .then((data) => { const formatted = data.prices.map((p) => ({ time: new Date(p[0]).toLocaleDateString("en-US", { month: "short", day: "numeric" }), price: p[1], })); setChartData(formatted); }); }, []); return (

{/* Hero */}

🚀 CryptoAI

Live crypto prices, AI-powered forecasts, and sleek analytics — all in one place.

{/* Market Data */}

📊 Top Coins

{coins.map((coin) => (

{coin.name}

Price: ${coin.current_price.toLocaleString()}

0 ? "text-green-400" : "text-red-400" }`} > {coin.price_change_percentage_24h.toFixed(2)}%

))}

{/* Chart Section */}

📈 Bitcoin (7D Trend)

{/* Features */