Spaces:
Sleeping
Sleeping
File size: 2,144 Bytes
534cddd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 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>
</>
);
} |