feat: expand landing page and move Header to layout
Add Features and Built for Groups sections. Move Header from page.tsx to layout.tsx for all sub-routes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
6f62d8133a
commit
572f9feea3
|
|
@ -2,6 +2,7 @@ import type { Metadata } from 'next'
|
|||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import { AuthProvider } from '@/components/AuthProvider'
|
||||
import { Header } from '@/components/Header'
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ['latin'],
|
||||
|
|
@ -34,6 +35,7 @@ export default function RootLayout({
|
|||
</head>
|
||||
<body className={`${inter.variable} font-sans antialiased`}>
|
||||
<AuthProvider>
|
||||
<Header current="trips" />
|
||||
{children}
|
||||
</AuthProvider>
|
||||
</body>
|
||||
|
|
|
|||
162
src/app/page.tsx
162
src/app/page.tsx
|
|
@ -1,21 +1,9 @@
|
|||
import Link from 'next/link'
|
||||
import { Header } from '@/components/Header'
|
||||
import { EcosystemFooter } from '@/components/EcosystemFooter'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
|
||||
{/* Nav */}
|
||||
<Header
|
||||
current="trips"
|
||||
actions={
|
||||
<>
|
||||
<Link href="/demo" className="text-sm text-slate-300 hover:text-white transition-colors">Demo</Link>
|
||||
<Link href="/trips/new" className="text-sm px-4 py-2 bg-teal-600 hover:bg-teal-500 rounded-lg transition-colors font-medium">Plan a Trip</Link>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Hero */}
|
||||
<section className="max-w-6xl mx-auto px-6 pt-20 pb-16">
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
|
|
@ -95,6 +83,156 @@ export default function Home() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="max-w-6xl mx-auto px-6 py-16">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4">Everything You Need to Travel Together</h2>
|
||||
<p className="text-slate-400 max-w-2xl mx-auto">
|
||||
rTrips brings every piece of trip planning into one place — so your group
|
||||
spends less time coordinating and more time exploring.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Collaborative Itineraries */}
|
||||
<div className="border border-slate-700/50 bg-slate-800/30 rounded-xl p-5 hover:border-emerald-500/40 transition-colors">
|
||||
<div className="w-11 h-11 bg-emerald-500/15 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Collaborative Itineraries</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Build day-by-day plans together in real-time. Everyone can add destinations,
|
||||
suggest activities, and rearrange the schedule — changes sync instantly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Smart Suggestions */}
|
||||
<div className="border border-slate-700/50 bg-slate-800/30 rounded-xl p-5 hover:border-emerald-500/40 transition-colors">
|
||||
<div className="w-11 h-11 bg-emerald-500/15 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Smart Suggestions</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
AI-powered recommendations for destinations, restaurants, and activities based
|
||||
on your group's interests, budget, and travel dates.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Budget Tracking */}
|
||||
<div className="border border-slate-700/50 bg-slate-800/30 rounded-xl p-5 hover:border-emerald-500/40 transition-colors">
|
||||
<div className="w-11 h-11 bg-emerald-500/15 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Budget Tracking</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Split costs, track expenses across the group, and keep a running total so
|
||||
everyone knows exactly where the money goes. No more messy spreadsheets.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Map Integration */}
|
||||
<div className="border border-slate-700/50 bg-slate-800/30 rounded-xl p-5 hover:border-emerald-500/40 transition-colors">
|
||||
<div className="w-11 h-11 bg-emerald-500/15 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Map Integration</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Visualize your entire trip on rMaps. See routes between destinations,
|
||||
nearby points of interest, and real-time location sharing during travel days.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Packing Lists */}
|
||||
<div className="border border-slate-700/50 bg-slate-800/30 rounded-xl p-5 hover:border-emerald-500/40 transition-colors">
|
||||
<div className="w-11 h-11 bg-emerald-500/15 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15a2.25 2.25 0 012.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Packing Lists</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Shared checklists so nothing gets forgotten. Assign items to people, mark
|
||||
off as you pack, and see at a glance what the group still needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Offline Access */}
|
||||
<div className="border border-slate-700/50 bg-slate-800/30 rounded-xl p-5 hover:border-emerald-500/40 transition-colors">
|
||||
<div className="w-11 h-11 bg-emerald-500/15 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Offline Access</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Download your full itinerary, maps, and booking confirmations for travel
|
||||
without connectivity. Everything you need, even without a signal.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Built for Groups */}
|
||||
<section className="max-w-6xl mx-auto px-6 py-16">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold mb-4">Built for Groups</h2>
|
||||
<p className="text-slate-400 max-w-2xl mx-auto">
|
||||
Solo trip planners are everywhere. rTrips is purpose-built for the messy, beautiful
|
||||
reality of traveling with other people.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{/* Friends & Family */}
|
||||
<div className="border border-slate-700/50 bg-slate-800/30 rounded-xl p-6 text-center">
|
||||
<div className="w-14 h-14 mx-auto mb-4 bg-emerald-500/10 rounded-xl flex items-center justify-center">
|
||||
<svg className="w-7 h-7 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Friends & Family</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Family reunions, friend getaways, multi-generational trips. Everyone contributes
|
||||
ideas, votes on restaurants, and stays in sync without endless group chats.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Teams & Offsites */}
|
||||
<div className="border border-slate-700/50 bg-slate-800/30 rounded-xl p-6 text-center">
|
||||
<div className="w-14 h-14 mx-auto mb-4 bg-emerald-500/10 rounded-xl flex items-center justify-center">
|
||||
<svg className="w-7 h-7 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Teams & Offsites</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Company retreats, conference travel, team offsites. Coordinate logistics,
|
||||
share flight details, and manage group bookings from a single shared workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Retreats & Events */}
|
||||
<div className="border border-slate-700/50 bg-slate-800/30 rounded-xl p-6 text-center">
|
||||
<div className="w-14 h-14 mx-auto mb-4 bg-emerald-500/10 rounded-xl flex items-center justify-center">
|
||||
<svg className="w-7 h-7 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 01-1.652.928l-.679-.906a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 00-8.862 12.872M12.75 3.031a9 9 0 016.69 14.036m0 0l-.177-.529A2.25 2.25 0 0017.128 15H16.5l-.324-.324a1.453 1.453 0 00-2.328.377l-.036.073a1.586 1.586 0 01-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438a2.25 2.25 0 01-1.228 2.446L10.5 21l-.652-.174M12.75 3.031l.176.53" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold mb-2">Retreats & Events</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
Yoga retreats, wedding trips, festival crews. Organize large groups with
|
||||
sub-itineraries, optional activities, and shared costs that stay transparent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="max-w-6xl mx-auto px-6 py-16 text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">Ready to plan your next adventure?</h2>
|
||||
|
|
|
|||
Loading…
Reference in New Issue