g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fk it

Browse Source
This commit is contained in:
NotII
2025-04-10 00:28:44 +01:00
parent 3deeda4075
commit 2221c39df9
2 changed files with 160 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/dashboard/storefront/page.tsx
View File

@@ -159,13 +159,14 @@ export default function StorefrontPage() {
return ( return (
<Layout> <Layout>
<div> <div>
<div className="flex items-center justify-between border-b border-zinc-800 px-4 py-4"> <div className="flex items-center justify-between border-b border-zinc-800 h-14 px-4">
<h1 className="text-xl font-medium">Storefront Settings</h1> <h1 className="text-xl font-medium">Storefront Settings</h1>
<div className="flex gap-3"> <div className="flex gap-2">
<Button <Button
variant="outline" variant="outline"
onClick={() => setBroadcastOpen(true)} onClick={() => setBroadcastOpen(true)}
className="gap-2" className="gap-2"
size="sm"
> >
<Send className="h-4 w-4" /> <Send className="h-4 w-4" />
Broadcast Broadcast
@@ -174,6 +175,7 @@ export default function StorefrontPage() {
onClick={saveStorefront} onClick={saveStorefront}
disabled={saving} disabled={saving}
className="gap-2" className="gap-2"
size="sm"
> >
<Save className="h-4 w-4" /> <Save className="h-4 w-4" />
{saving ? "Saving..." : "Save Changes"} {saving ? "Saving..." : "Save Changes"}
@@ -181,58 +183,58 @@ export default function StorefrontPage() {
</div> </div>
</div> </div>
<div className="p-4"> <div className="p-3">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
{/* Security Settings */} {/* Security Settings */}
<div className="space-y-4"> <div className="space-y-3">
<div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800"> <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-2 mb-3">
<Shield className="h-5 w-5 text-purple-400" /> <Shield className="h-4 w-4 text-purple-400" />
<h2 className="text-lg font-medium text-zinc-100"> <h2 className="text-base font-medium text-zinc-100">
Security Security
</h2> </h2>
</div> </div>
<div className="space-y-4"> <div className="space-y-3">
<div> <div>
<label className="text-sm font-medium mb-2 block text-zinc-400">PGP Public Key</label> <label className="text-xs font-medium mb-1 block text-zinc-400">PGP Public Key</label>
<Textarea <Textarea
value={storefront.pgpKey} value={storefront.pgpKey}
onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))} onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
placeholder="Enter your PGP public key" placeholder="Enter your PGP public key"
className="font-mono text-sm h-32 bg-[#1C1C1C] border-zinc-800" className="font-mono text-sm h-24 bg-[#1C1C1C] border-zinc-800 resize-none"
/> />
</div> </div>
<div> <div>
<label className="text-sm font-medium mb-2 block text-zinc-400">Telegram Bot Token</label> <label className="text-xs font-medium mb-1 block text-zinc-400">Telegram Bot Token</label>
<Input <Input
type="password" type="password"
value={storefront.telegramToken} value={storefront.telegramToken}
onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))} onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
placeholder="Enter your Telegram bot token" placeholder="Enter your Telegram bot token"
className="bg-[#1C1C1C] border-zinc-800" className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm"
/> />
</div> </div>
</div> </div>
</div> </div>
{/* Shipping Settings */} {/* Shipping Settings */}
<div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800"> <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-2 mb-3">
<Globe className="h-5 w-5 text-blue-400" /> <Globe className="h-4 w-4 text-blue-400" />
<h2 className="text-lg font-medium text-zinc-100"> <h2 className="text-base font-medium text-zinc-100">
Shipping Shipping
</h2> </h2>
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-3">
<div> <div>
<label className="text-sm font-medium mb-2 block text-zinc-400">Ships From</label> <label className="text-xs font-medium mb-1 block text-zinc-400">Ships From</label>
<Select <Select
value={storefront.shipsFrom} value={storefront.shipsFrom}
onValueChange={(value) => onValueChange={(value) =>
setStorefront((prev) => ({ ...prev, shipsFrom: value as any })) setStorefront((prev) => ({ ...prev, shipsFrom: value as any }))
} }
> >
<SelectTrigger className="bg-[#1C1C1C] border-zinc-800"> <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -245,14 +247,14 @@ export default function StorefrontPage() {
</Select> </Select>
</div> </div>
<div> <div>
<label className="text-sm font-medium mb-2 block text-zinc-400">Ships To</label> <label className="text-xs font-medium mb-1 block text-zinc-400">Ships To</label>
<Select <Select
value={storefront.shipsTo} value={storefront.shipsTo}
onValueChange={(value) => onValueChange={(value) =>
setStorefront((prev) => ({ ...prev, shipsTo: value as any })) setStorefront((prev) => ({ ...prev, shipsTo: value as any }))
} }
> >
<SelectTrigger className="bg-[#1C1C1C] border-zinc-800"> <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -269,11 +271,11 @@ export default function StorefrontPage() {
</div> </div>
{/* Messaging and Payments */} {/* Messaging and Payments */}
<div className="space-y-4"> <div className="space-y-3">
<div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800"> <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-2 mb-3">
<MessageSquare className="h-5 w-5 text-emerald-400" /> <MessageSquare className="h-4 w-4 text-emerald-400" />
<h2 className="text-lg font-medium text-zinc-100"> <h2 className="text-base font-medium text-zinc-100">
Welcome Message Welcome Message
</h2> </h2>
</div> </div>
@@ -281,26 +283,26 @@ export default function StorefrontPage() {
value={storefront.welcomeMessage} value={storefront.welcomeMessage}
onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))} onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
placeholder="Enter the welcome message for new customers" placeholder="Enter the welcome message for new customers"
className="h-32 bg-[#1C1C1C] border-zinc-800" className="h-24 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
/> />
</div> </div>
<div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800"> <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-2 mb-3">
<Wallet className="h-5 w-5 text-yellow-400" /> <Wallet className="h-4 w-4 text-yellow-400" />
<h2 className="text-lg font-medium text-zinc-100"> <h2 className="text-base font-medium text-zinc-100">
Payment Methods Payment Methods
</h2> </h2>
</div> </div>
<div className="space-y-4"> <div className="space-y-2">
{WALLET_OPTIONS.map((wallet) => ( {WALLET_OPTIONS.map((wallet) => (
<div key={wallet.id} className="space-y-2"> <div key={wallet.id} className="space-y-1.5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<label className="text-sm font-medium flex items-center gap-2 text-zinc-400"> <label className="text-xs font-medium flex items-center gap-2 text-zinc-400">
<span>{wallet.emoji}</span> <span>{wallet.emoji}</span>
{wallet.name} {wallet.name}
{wallet.comingSoon && ( {wallet.comingSoon && (
<span className="text-xs bg-purple-900/50 text-purple-400 px-2 py-0.5 rounded"> <span className="text-[10px] bg-purple-900/50 text-purple-400 px-1.5 py-0.5 rounded">
Coming Soon Coming Soon
</span> </span>
)} )}
@@ -345,7 +347,7 @@ export default function StorefrontPage() {
})) }))
} }
placeholder={wallet.placeholder} placeholder={wallet.placeholder}
className="font-mono text-sm bg-[#1C1C1C] border-zinc-800" className="font-mono text-sm h-8 bg-[#1C1C1C] border-zinc-800"
/> />
)} )}
</div> </div>

203
app/page.tsx
View File

@@ -1,7 +1,7 @@
import { getPlatformStatsServer } from "@/lib/server-api"; import { getPlatformStatsServer } from "@/lib/server-api";
import { HomeNavbar } from "@/components/home-navbar"; import { HomeNavbar } from "@/components/home-navbar";
import { Suspense } from "react"; import { Suspense } from "react";
import { Shield, LineChart, Zap, ArrowRight } from "lucide-react"; import { Shield, LineChart, Zap, ArrowRight, CheckCircle2, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import Link from "next/link"; import Link from "next/link";
import { AnimatedStatsSection } from "@/components/animated-stats-section"; import { AnimatedStatsSection } from "@/components/animated-stats-section";
@@ -36,142 +36,145 @@ export default async function Home() {
return ( return (
<div className="flex flex-col min-h-screen bg-black text-white"> <div className="flex flex-col min-h-screen bg-black text-white">
<div className="absolute inset-0 bg-gradient-to-br from-[#D53F8C]/10 via-transparent to-transparent pointer-events-none" />
<HomeNavbar /> <HomeNavbar />
{/* Hero Section */} {/* 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 bg-black"> <section className="relative overflow-hidden">
<div className="space-y-4 max-w-3xl"> <div className="relative flex flex-col items-center px-4 py-20 md:py-32 mx-auto max-w-7xl">
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter"> <div className="flex flex-col items-center text-center space-y-6 max-w-3xl">
Streamlined E-commerce <span className="text-[#D53F8C]">Management</span> <div className="inline-flex items-center px-4 py-2 rounded-full bg-[#D53F8C]/10 border border-[#D53F8C]/20 mb-4">
</h1> <Sparkles className="h-4 w-4 text-[#D53F8C] mr-2" />
<p className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto"> <span className="text-sm font-medium text-[#D53F8C]">Secure Crypto Payments</span>
Ember provides everything you need to manage your e-commerce business efficiently in one place, with secure cryptocurrency payments.
</p>
</div> </div>
<h1 className="text-4xl md:text-6xl font-bold tracking-tight">
<div className="flex flex-col sm:flex-row gap-4 mt-8"> The Future of <span className="text-[#D53F8C]">E-commerce</span> Management
</h1>
<p className="text-lg md:text-xl text-zinc-400 max-w-2xl">
Streamline your online business with our all-in-one platform. Secure payments, order tracking, and analytics in one place.
</p>
<div className="flex flex-col sm:flex-row gap-4 mt-4">
<Link href="/dashboard"> <Link href="/dashboard">
<Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0"> <Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0 h-12 px-8">
Go to Dashboard Get Started
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
</Button> </Button>
</Link> </Link>
<Link href="/auth/register"> <Link href="/auth/register">
<Button size="lg" variant="outline" className="border-gray-800 text-white hover:bg-gray-900"> <Button size="lg" variant="outline" className="border-zinc-800 text-white hover:bg-zinc-900 h-12 px-8">
Create Account Create Account
</Button> </Button>
</Link> </Link>
</div> </div>
</section> </div>
{/* Statistics Section */}
<section className="py-16 px-6 md:px-10 bg-black">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-10 text-white">Platform Statistics</h2>
<AnimatedStatsSection stats={stats as any} />
</div> </div>
</section> </section>
{/* Features Section */} {/* Features Grid */}
<section id="features" className="py-20 px-6 md:px-10 bg-black"> <section className="relative py-20 px-4">
<div className="max-w-6xl mx-auto space-y-10"> <div className="max-w-7xl mx-auto space-y-20">
<div className="text-center space-y-4">
<h2 className="text-3xl md:text-4xl font-bold text-white">Powerful Features</h2>
<p className="text-gray-400 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"> <div className="grid md:grid-cols-3 gap-6">
<div className="p-6 rounded-md bg-[#1C1C1C] border-0"> {[
<div className="mb-4"> {
<div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]"> icon: Shield,
<Shield className="h-6 w-6 text-[#D53F8C]" /> title: "Secure Payments",
description: "Built-in cryptocurrency support with maximum privacy and security for your transactions."
},
{
icon: LineChart,
title: "Real-time Analytics",
description: "Track your business performance with detailed insights and reporting tools."
},
{
icon: Zap,
title: "Lightning Fast",
description: "Optimized for speed with real-time updates and instant notifications."
}
].map((feature, i) => (
<div key={i} className="group relative overflow-hidden rounded-xl bg-gradient-to-b from-zinc-800/30 to-transparent p-6 border border-zinc-800">
<div className="absolute inset-0 bg-gradient-to-b from-[#D53F8C]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="relative">
<div className="h-12 w-12 flex items-center justify-center rounded-lg bg-[#D53F8C]/10 mb-4">
<feature.icon className="h-6 w-6 text-[#D53F8C]" />
</div> </div>
<h3 className="mt-4 text-xl font-semibold text-white">Cryptocurrency Payments</h3> <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
<p className="text-sm text-zinc-400">{feature.description}</p>
</div> </div>
<p className="text-gray-400 text-sm">
Accept payments in various cryptocurrencies with our secure, integrated payment system designed for maximum privacy and security.
</p>
</div> </div>
<div className="p-6 rounded-md bg-[#1C1C1C] border-0"> ))}
<div className="mb-4">
<div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
<LineChart className="h-6 w-6 text-[#D53F8C]" />
</div>
<h3 className="mt-4 text-xl font-semibold text-white">Order Tracking</h3>
</div>
<p className="text-gray-400 text-sm">
Manage and track orders from receipt to delivery with our intuitive order management system.
</p>
</div>
<div className="p-6 rounded-md bg-[#1C1C1C] border-0">
<div className="mb-4">
<div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
<Zap className="h-6 w-6 text-[#D53F8C]" />
</div>
<h3 className="mt-4 text-xl font-semibold text-white">Fast Performance</h3>
</div>
<p className="text-gray-400 text-sm">
Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
</p>
</div> </div>
{/* Stats Section */}
<div className="relative">
<AnimatedStatsSection stats={stats as any} />
</div> </div>
</div> </div>
</section> </section>
{/* Benefits Section */} {/* Benefits Section */}
<section id="benefits" className="py-20 px-6 md:px-10 bg-black"> <section className="relative py-24 px-4">
<div className="max-w-6xl mx-auto space-y-10"> <div className="max-w-7xl mx-auto">
<div className="text-center space-y-4"> <div className="grid md:grid-cols-2 gap-8">
<h2 className="text-3xl md:text-4xl font-bold text-white">Why Choose Ember</h2> {[
<p className="text-gray-400 max-w-2xl mx-auto"> {
Our platform is designed to make e-commerce management simple and efficient. title: "Centralized Dashboard",
</p> description: "Manage your entire e-commerce operation from a single, intuitive interface."
},
{
title: "Customer Insights",
description: "Understand your customers better with detailed purchase history and behavior analytics."
},
{
title: "Inventory Management",
description: "Keep track of your stock levels and get alerts when it's time to reorder."
},
{
title: "Automated Reports",
description: "Get detailed reports and insights delivered automatically to your inbox."
}
].map((benefit, i) => (
<div key={i} className="flex items-start space-x-4 p-6 rounded-lg bg-zinc-900/50 border border-zinc-800">
<div className="flex-shrink-0">
<CheckCircle2 className="h-6 w-6 text-[#D53F8C]" />
</div> </div>
<div className="grid md:grid-cols-2 gap-10"> <div>
<div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0"> <h3 className="text-lg font-medium text-white mb-2">{benefit.title}</h3>
<h3 className="text-xl font-semibold text-white">Centralized Management</h3> <p className="text-sm text-zinc-400">{benefit.description}</p>
<p className="text-gray-400">
Manage all aspects of your e-commerce business from a single dashboard.
</p>
</div>
<div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
<h3 className="text-xl font-semibold text-white">Advanced Analytics</h3>
<p className="text-gray-400">
Gain insights into your business with detailed analytics and reporting tools.
</p>
</div>
<div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
<h3 className="text-xl font-semibold text-white">Customer Management</h3>
<p className="text-gray-400">
Keep track of customer information and purchase history to provide better service.
</p>
</div>
<div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
<h3 className="text-xl font-semibold text-white">Inventory Control</h3>
<p className="text-gray-400">
Manage your inventory with precision to avoid stock-outs and overstocking.
</p>
</div> </div>
</div> </div>
<div className="flex justify-center mt-10"> ))}
<Link href="/dashboard">
<Button size="lg" className="bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">Start Now</Button>
</Link>
</div> </div>
</div> </div>
</section> </section>
{/* CTA Section */}
<section className="relative py-24 px-4">
<div className="relative max-w-3xl mx-auto text-center">
<h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Get Started?</h2>
<p className="text-lg text-zinc-400 mb-8">
Join thousands of businesses already using Ember to manage their e-commerce operations.
</p>
<Link href="/dashboard">
<Button size="lg" className="bg-[#D53F8C] hover:bg-[#B83280] text-white border-0 h-12 px-8">
Start Now
</Button>
</Link>
</div>
</section>
{/* Footer */} {/* Footer */}
<footer className="py-10 px-6 md:px-10 border-t border-gray-800 bg-black"> <footer className="relative py-12 px-4 mt-auto">
<div className="max-w-6xl mx-auto text-center"> <div className="max-w-7xl mx-auto flex flex-col items-center">
<h3 className="font-bold text-lg mb-2 text-white">Ember</h3> <div className="flex items-center gap-2 mb-4">
<p className="text-sm text-gray-400"> <h3 className="font-bold text-xl text-white">Ember</h3>
<div className="h-1.5 w-1.5 rounded-full bg-[#D53F8C]" />
</div>
<p className="text-sm text-zinc-400 text-center max-w-md mb-6">
The complete e-commerce management solution for modern businesses. The complete e-commerce management solution for modern businesses.
</p> </p>
<div className="text-sm text-zinc-500">
© {new Date().getFullYear()} Ember. All rights reserved.
</div> </div>
<div className="mt-10 text-center text-sm text-gray-500">
<p>© {new Date().getFullYear()} Ember. All rights reserved.</p>
</div> </div>
</footer> </footer>
</div> </div>