Update page.tsx
This commit is contained in:
NotII
251
app/page.tsx
251
app/page.tsx
@@ -1,5 +1,252 @@
|
||||
import { redirect } from "next/navigation"
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ArrowRight, Shield, Globe, Zap, LineChart, LogIn } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
export default function Home() {
|
||||
redirect("/dashboard")
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
{/* Header Navigation */}
|
||||
<header className="py-4 px-6 md:px-10 flex items-center justify-between border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-bold text-2xl">Ember</span>
|
||||
</div>
|
||||
<nav className="hidden md:flex gap-6 items-center">
|
||||
<Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Features
|
||||
</Link>
|
||||
<Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Benefits
|
||||
</Link>
|
||||
<Link href="/auth/login" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
<Button variant="ghost">
|
||||
<LogIn className="h-4 w-4 mr-2" />
|
||||
Log In
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/auth/login">
|
||||
<Button>Get Started</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="md:hidden">
|
||||
<Button variant="ghost" size="icon">
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="4" x2="20" y1="12" y2="12" />
|
||||
<line x1="4" x2="20" y1="6" y2="6" />
|
||||
<line x1="4" x2="20" y1="18" y2="18" />
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10">
|
||||
<div className="space-y-4 max-w-3xl">
|
||||
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
|
||||
Streamlined E-commerce <span className="text-orange-500">Management</span>
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Ember provides everything you need to manage your e-commerce business efficiently in one place.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/dashboard">
|
||||
<Button size="lg" className="gap-2">
|
||||
Go to Dashboard
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/auth/register">
|
||||
<Button size="lg" variant="outline">
|
||||
Create Account
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20 px-6 md:px-10 bg-muted/40">
|
||||
<div className="max-w-6xl mx-auto space-y-10">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-3xl md:text-4xl font-bold">Powerful Features</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
Everything you need to manage orders, track metrics, and grow your business.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="p-2 w-fit rounded-md bg-primary/10">
|
||||
<Shield className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="mt-4">Secure Transactions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription>
|
||||
Process payments securely with built-in encryption and fraud detection measures to protect your business and customers.
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="p-2 w-fit rounded-md bg-primary/10">
|
||||
<LineChart className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="mt-4">Order Tracking</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription>
|
||||
Manage and track orders from receipt to delivery with our intuitive order management system.
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="p-2 w-fit rounded-md bg-primary/10">
|
||||
<Zap className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="mt-4">Fast Performance</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription>
|
||||
Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section id="benefits" className="py-20 px-6 md:px-10">
|
||||
<div className="max-w-6xl mx-auto space-y-10">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-3xl md:text-4xl font-bold">Why Choose Ember</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
Our platform is designed to make e-commerce management simple and efficient.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-10">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold">Centralized Management</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Manage all aspects of your e-commerce business from a single dashboard.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold">Advanced Analytics</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Gain insights into your business with detailed analytics and reporting tools.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold">Customer Management</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Keep track of customer information and purchase history to provide better service.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold">Inventory Control</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your inventory with precision to avoid stock-outs and overstocking.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center mt-10">
|
||||
<Link href="/dashboard">
|
||||
<Button size="lg">Start Now</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-10 px-6 md:px-10 border-t">
|
||||
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-bold text-lg">Ember</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The complete e-commerce management solution for modern businesses.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-bold text-lg">Navigation</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#features" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
Features
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
Benefits
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-bold text-lg">Resources</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
Documentation
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
API
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
Support
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-bold text-lg">Legal</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
Terms
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
Privacy
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
|
||||
Cookies
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10 text-center text-sm text-muted-foreground">
|
||||
<p>© {new Date().getFullYear()} Ember. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user