Skip to content

Commit e609d5d

Browse files
JoeMattJoeMatt
committed
Complete redesign: modern landing page with gradient hero, feature grid, clean CTAs, professional footer
1 parent c149020 commit e609d5d

File tree

1 file changed

+124
-23
lines changed

1 file changed

+124
-23
lines changed

‎src/app/page.tsx‎

Lines changed: 124 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,135 @@
1-
import Hero from '@/components/Hero';
2-
import DownloadSection from '@/components/DownloadSection';
3-
import Features from '@/components/Features';
1+
import Link from 'next/link';
42

53
export default function Home() {
64
return (
7-
<div className="min-h-screen bg-white dark:bg-neutral-950">
8-
<Hero />
9-
10-
<section className="w-full max-w-[1200px] mx-auto px-4 py-16">
11-
<div className="text-center">
12-
<h2 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white">Fast, Modern, Accurate</h2>
13-
<p className="mt-3 text-neutral-600 dark:text-neutral-300 max-w-2xl mx-auto">
14-
Built with performance and fidelity in mind, focusing on a simple, great experience.
15-
</p>
16-
</div>
17-
<div className="mt-10">
18-
<Features compact />
5+
<div className="w-full">
6+
{/* Hero Section */}
7+
<section className="w-full bg-gradient-to-b from-neutral-50 to-white dark:from-neutral-900 dark:to-neutral-950">
8+
<div className="max-w-6xl mx-auto px-6 py-20 md:py-28">
9+
<div className="text-center space-y-6">
10+
<div className="inline-block">
11+
<span className="inline-flex items-center rounded-full bg-orange-100 dark:bg-orange-900/30 px-4 py-1.5 text-sm font-medium text-orange-700 dark:text-orange-300">
12+
✨ Now in development
13+
</span>
14+
</div>
15+
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-neutral-900 dark:text-white">
16+
Dreamcast on iOS
17+
</h1>
18+
<p className="text-xl md:text-2xl text-neutral-600 dark:text-neutral-300 max-w-3xl mx-auto">
19+
Experience classic Sega Dreamcast games on your iPhone, iPad, and Apple TV with iFly.
20+
</p>
21+
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
22+
<Link
23+
href="#download"
24+
className="inline-flex items-center justify-center rounded-xl bg-orange-600 px-8 py-4 text-base font-semibold text-white shadow-lg hover:bg-orange-700 transition-all hover:scale-105"
25+
>
26+
Get Started
27+
</Link>
28+
<Link
29+
href="/features"
30+
className="inline-flex items-center justify-center rounded-xl border-2 border-neutral-300 dark:border-neutral-700 px-8 py-4 text-base font-semibold text-neutral-900 dark:text-white hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-all"
31+
>
32+
Learn More
33+
</Link>
34+
</div>
35+
</div>
36+
37+
{/* Hero Image */}
38+
<div className="mt-16">
39+
<div className="relative rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 p-8 shadow-2xl">
40+
<div className="aspect-video rounded-xl bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center">
41+
<div className="text-center space-y-3">
42+
<div className="text-6xl">🎮</div>
43+
<p className="text-neutral-600 dark:text-neutral-400 font-medium">Gameplay preview coming soon</p>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
1948
</div>
20-
<div className="text-center mt-10">
21-
<a href="/features" className="text-base md:text-lg text-orange-600 dark:text-orange-400 hover:text-orange-700 dark:hover:text-orange-300 font-semibold transition-colors">
22-
See all features →
23-
</a>
49+
</section>
50+
51+
{/* Features Grid */}
52+
<section className="w-full py-20 md:py-28">
53+
<div className="max-w-6xl mx-auto px-6">
54+
<div className="text-center space-y-4 mb-16">
55+
<h2 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
56+
Built for Performance
57+
</h2>
58+
<p className="text-lg md:text-xl text-neutral-600 dark:text-neutral-300 max-w-2xl mx-auto">
59+
Fast, accurate emulation with a focus on great user experience.
60+
</p>
61+
</div>
62+
63+
<div className="grid md:grid-cols-3 gap-8">
64+
{[
65+
{ icon: '🎯', title: 'Accurate Emulation', desc: 'High compatibility with your favorite Dreamcast games' },
66+
{ icon: '⚡', title: 'High Performance', desc: 'Optimized for modern iOS devices with smooth gameplay' },
67+
{ icon: '🎮', title: 'Controller Support', desc: 'Full MFi controller and touch control support' },
68+
].map((feature, i) => (
69+
<div key={i} className="group p-8 rounded-2xl border border-neutral-200 dark:border-neutral-800 hover:border-orange-500 dark:hover:border-orange-500 transition-all hover:shadow-xl">
70+
<div className="text-5xl mb-4">{feature.icon}</div>
71+
<h3 className="text-xl font-semibold text-neutral-900 dark:text-white mb-2">{feature.title}</h3>
72+
<p className="text-neutral-600 dark:text-neutral-400">{feature.desc}</p>
73+
</div>
74+
))}
75+
</div>
2476
</div>
2577
</section>
2678

27-
<DownloadSection className="pb-8" showEmbed />
79+
{/* Download CTA */}
80+
<section id="download" className="w-full py-20 md:py-28 bg-neutral-50 dark:bg-neutral-900">
81+
<div className="max-w-4xl mx-auto px-6 text-center space-y-8">
82+
<h2 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
83+
Download iFly
84+
</h2>
85+
<p className="text-lg md:text-xl text-neutral-600 dark:text-neutral-300">
86+
Get iFly for your iOS devices and Apple TV.
87+
</p>
88+
89+
<div className="inline-block w-full max-w-2xl">
90+
<div className="rounded-2xl border-2 border-orange-200 dark:border-orange-900 bg-orange-50 dark:bg-orange-950/30 p-8">
91+
<div className="space-y-4">
92+
<div className="text-2xl font-bold text-orange-900 dark:text-orange-200">Coming Soon</div>
93+
<p className="text-orange-800 dark:text-orange-300">
94+
iFly is currently in development. Check back soon for download links and installation instructions.
95+
</p>
96+
</div>
97+
</div>
98+
</div>
99+
100+
<div className="grid sm:grid-cols-2 gap-4 max-w-md mx-auto pt-4 opacity-50">
101+
<div className="rounded-xl bg-neutral-900 dark:bg-neutral-800 text-white p-6 text-center">
102+
<div className="text-sm mb-1">Download on the</div>
103+
<div className="text-xl font-semibold">App Store</div>
104+
</div>
105+
<div className="rounded-xl bg-neutral-900 dark:bg-neutral-800 text-white p-6 text-center">
106+
<div className="text-sm mb-1">Available on</div>
107+
<div className="text-xl font-semibold">Apple TV</div>
108+
</div>
109+
</div>
110+
</div>
111+
</section>
28112

29-
<footer className="border-t border-neutral-200 dark:border-neutral-800 py-10">
30-
<div className="w-full max-w-[1200px] mx-auto px-4 text-center">
31-
<p className="text-sm text-neutral-500 dark:text-neutral-400"> 2025 Provenance EMU. All rights reserved.</p>
113+
{/* Footer */}
114+
<footer className="w-full border-t border-neutral-200 dark:border-neutral-800 py-12">
115+
<div className="max-w-6xl mx-auto px-6">
116+
<div className="flex flex-col md:flex-row justify-between items-center gap-6">
117+
<div className="text-center md:text-left">
118+
<div className="text-xl font-bold text-neutral-900 dark:text-white mb-2">iFly</div>
119+
<p className="text-sm text-neutral-600 dark:text-neutral-400">
120+
Part of the Provenance EMU project
121+
</p>
122+
</div>
123+
<div className="flex gap-6 text-sm text-neutral-600 dark:text-neutral-400">
124+
<Link href="/about" className="hover:text-neutral-900 dark:hover:text-white transition-colors">About</Link>
125+
<Link href="/features" className="hover:text-neutral-900 dark:hover:text-white transition-colors">Features</Link>
126+
<Link href="/support" className="hover:text-neutral-900 dark:hover:text-white transition-colors">Support</Link>
127+
<Link href="/donate" className="hover:text-neutral-900 dark:hover:text-white transition-colors">Donate</Link>
128+
</div>
129+
</div>
130+
<div className="mt-8 pt-8 border-t border-neutral-200 dark:border-neutral-800 text-center text-sm text-neutral-500 dark:text-neutral-500">
131+
© 2025 Provenance EMU. All rights reserved.
132+
</div>
32133
</div>
33134
</footer>
34135
</div>

0 commit comments

Comments
 (0)