Seed: ecommerce template (24 files)

2026-07-23 22:09:25 +00:00
parent b9a472fb92
commit 38ca6b43b8
1 changed files with 74 additions and 0 deletions
@@ -0,0 +1,74 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { CheckCircle, Package, ArrowRight } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+export default function OrderConfirmationPage() {
+  const orderNumber = "ORD-2024-" + Math.floor(1000 + Math.random() * 9000);
+
+  return (
+    <div className="min-h-screen bg-stone-50 text-stone-900 antialiased">
+      <Header />
+
+      <div className="mx-auto max-w-xl px-6 pt-28 pb-20 text-center">
+        <div className="h-20 w-20 mx-auto rounded-full bg-green-100 flex items-center justify-center mb-6 animate-scale-in">
+          <CheckCircle className="h-10 w-10 text-green-600" />
+        </div>
+
+        <h1 className="text-3xl font-bold mb-2 animate-fade-up">Order Confirmed!</h1>
+        <p className="text-stone-500 mb-2">Order number: <span className="font-mono font-semibold text-stone-900">{orderNumber}</span></p>
+        <p className="text-stone-500 mb-10">Thank you for your purchase. You will receive a confirmation email shortly.</p>
+
+        <Card className="text-left">
+          <CardContent className="p-6">
+            <h2 className="font-bold mb-4">Order Summary</h2>
+            <div className="space-y-3">
+              <div className="flex justify-between text-sm">
+                <span className="text-stone-600">Classic Leather Jacket x1</span>
+                <span className="font-medium">$189.00</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-stone-600">Silk Evening Dress x1</span>
+                <span className="font-medium">$245.00</span>
+              </div>
+            </div>
+            <Separator className="my-4" />
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-stone-500">Subtotal</span>
+                <span>$434.00</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-stone-500">Shipping</span>
+                <span className="text-green-600">Free</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-stone-500">Tax</span>
+                <span>$34.72</span>
+              </div>
+            </div>
+            <Separator className="my-4" />
+            <div className="flex justify-between font-bold text-lg">
+              <span>Total</span>
+              <span>$468.72</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <div className="flex flex-col sm:flex-row gap-3 mt-8 justify-center">
+          <Button asChild className="bg-stone-900 hover:bg-stone-800 rounded-full px-8 active:scale-[0.98] transition-all">
+            <Link to="/products">Continue Shopping <ArrowRight className="ml-2 h-4 w-4" /></Link>
+          </Button>
+          <Button asChild variant="outline" className="rounded-full px-8 active:scale-[0.98] transition-all">
+            <Link to="/account"><Package className="mr-2 h-4 w-4" /> Track Order</Link>
+          </Button>
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  );
+}