Spaces:
Sleeping
Sleeping
| import Head from 'next/head'; | |
| import { useState } from 'react'; | |
| import Header from '../components/Header'; | |
| import Hero from '../components/Hero'; | |
| import FeatureCard from '../components/FeatureCard'; | |
| import DataFetcher from '../components/DataFetcher'; | |
| export default function Home() { | |
| return ( | |
| <> | |
| <Head> | |
| <title>Modern Next.js App</title> | |
| <meta name="description" content="A modern Next.js application built with Tailwind CSS" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="icon" href="/favicon.ico" /> | |
| </Head> | |
| <main className="min-h-screen flex flex-col"> | |
| <Header /> | |
| <div className="flex-grow container mx-auto px-4 py-8"> | |
| <Hero /> | |
| <section className="mt-16"> | |
| <h2 className="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-gray-100"> | |
| Key Features | |
| </h2> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <FeatureCard | |
| title="Fast Performance" | |
| description="Optimized for speed with Next.js static generation and server-side rendering." | |
| icon="Zap" | |
| /> | |
| <FeatureCard | |
| title="Responsive Design" | |
| description="Fully responsive layout built with Tailwind CSS to look great on any device." | |
| icon="Smartphone" | |
| /> | |
| <FeatureCard | |
| title="Modern Stack" | |
| description="Built using the latest React patterns and best practices for scalable applications." | |
| icon="Layers" | |
| /> | |
| </div> | |
| </section> | |
| <section className="mt-16 max-w-2xl mx-auto"> | |
| <DataFetcher /> | |
| </section> | |
| </div> | |
| <footer className="bg-gray-800 text-gray-300 py-6 mt-12"> | |
| <div className="container mx-auto px-4 text-center"> | |
| <p>© {new Date().getFullYear()} Modern Next.js App. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| </main> | |
| </> | |
| ); | |
| } |