Shop integration
This commit is contained in:
50
Pottery-website/pages/Success.tsx
Normal file
50
Pottery-website/pages/Success.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Success: React.FC = () => {
|
||||
return (
|
||||
<div className="min-h-screen pt-48 pb-24 px-6 flex flex-col items-center text-center">
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="w-24 h-24 bg-stone-100 dark:bg-stone-900 rounded-full flex items-center justify-center mb-12"
|
||||
>
|
||||
<span className="material-symbols-outlined text-4xl text-text-main dark:text-white">check_circle</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="font-display text-5xl md:text-7xl font-light text-text-main dark:text-white mb-8"
|
||||
>
|
||||
Thank You
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="font-body text-lg font-light text-stone-500 max-w-md mb-16 leading-relaxed"
|
||||
>
|
||||
Your order has been placed successfully. We've sent a confirmation email with all the details of your purchase.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<Link
|
||||
to="/"
|
||||
className="bg-black dark:bg-white text-white dark:text-black px-12 py-5 uppercase tracking-[0.3em] text-xs font-bold hover:opacity-90 transition-opacity inline-block shadow-xl"
|
||||
>
|
||||
Back to Home
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Success;
|
||||
Reference in New Issue
Block a user