132 lines
6.7 KiB
TypeScript
132 lines
6.7 KiB
TypeScript
import React from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { motion } from 'framer-motion';
|
||
|
||
const Shipping: React.FC = () => {
|
||
const shippingDetails = [
|
||
{
|
||
title: "Order Processing",
|
||
description: "Each item is handcrafted and inspected with care. Please allow up to 3 business days for us to prepare and pack your order.",
|
||
icon: "📦"
|
||
},
|
||
{
|
||
title: "Shipping Methods",
|
||
description: "We offer standard USPS shipping for most orders. For faster delivery, expedited shipping (such as USPS Priority or UPS) is available at checkout. Some oversized or multiple-item orders may ship via UPS Ground.",
|
||
icon: "🚚"
|
||
},
|
||
{
|
||
title: "Delivery Time",
|
||
description: "After processing, expect 3–5 business days transit time for standard domestic delivery. Expedited options can arrive in 1–2 days. Your order confirmation email will include a tracking number.",
|
||
icon: "⏱️"
|
||
},
|
||
{
|
||
title: "Free Shipping",
|
||
description: "We offer flat-rate shipping on orders under $75. Free standard shipping is available on all orders over $75. These promotions are subject to change, so check the cart for current offers.",
|
||
icon: "✨"
|
||
},
|
||
{
|
||
title: "Packaging",
|
||
description: "We reuse packing materials and eco-friendly fillers whenever possible to protect your ceramics and reduce waste. Every package is insured for its full value during transit.",
|
||
icon: "♻️"
|
||
},
|
||
{
|
||
title: "Shipping Restrictions",
|
||
description: "We do not ship to P.O. boxes. Unfortunately, we cannot ship internationally at this time (U.S. addresses only). If you need a rush order, please contact us – we'll do our best to accommodate.",
|
||
icon: "🇺🇸"
|
||
}
|
||
];
|
||
|
||
return (
|
||
<div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
|
||
<div className="max-w-[1400px] mx-auto px-6 md:px-12">
|
||
{/* Header */}
|
||
<div className="mb-24 max-w-3xl">
|
||
<motion.span
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 1 }}
|
||
className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
|
||
>
|
||
Delivery Information
|
||
</motion.span>
|
||
<motion.h1
|
||
initial={{ y: 30, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ delay: 0.2, duration: 0.8 }}
|
||
className="font-display text-5xl md:text-7xl lg:text-8xl leading-none text-text-main dark:text-white mb-8"
|
||
>
|
||
Shipping<br />Policy
|
||
</motion.h1>
|
||
<motion.p
|
||
initial={{ y: 30, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ delay: 0.4, duration: 0.8 }}
|
||
className="font-body text-lg font-light text-stone-500 leading-relaxed"
|
||
>
|
||
KNUTH Ceramics proudly ships nationwide from our Texas studio. We strive to make delivery smooth and transparent for you.
|
||
</motion.p>
|
||
</div>
|
||
|
||
{/* Shipping Details Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-24">
|
||
{shippingDetails.map((detail, index) => (
|
||
<motion.div
|
||
key={detail.title}
|
||
initial={{ y: 20, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ delay: index * 0.1, duration: 0.6 }}
|
||
className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 hover:border-stone-400 dark:hover:border-stone-600 transition-colors"
|
||
>
|
||
<div className="text-4xl mb-6">{detail.icon}</div>
|
||
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
|
||
{detail.title}
|
||
</h3>
|
||
<p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
|
||
{detail.description}
|
||
</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Important Notice */}
|
||
<motion.div
|
||
initial={{ y: 30, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ delay: 0.8, duration: 0.8 }}
|
||
className="p-8 md:p-12 bg-amber-50 dark:bg-amber-900/10 border-l-4 border-amber-500"
|
||
>
|
||
<h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
|
||
Peak Season Notice
|
||
</h3>
|
||
<p className="font-body font-light text-stone-700 dark:text-stone-300 leading-relaxed">
|
||
Peak seasons and holidays may add 1–2 extra days to processing. We'll notify you of any anticipated delays. By having a clear, upfront shipping policy, we aim to boost your confidence and reduce checkout surprises.
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* CTA Section */}
|
||
<motion.div
|
||
initial={{ y: 30, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ delay: 1, duration: 0.8 }}
|
||
className="mt-24 text-center"
|
||
>
|
||
<h2 className="font-display text-3xl md:text-4xl mb-6 text-text-main dark:text-white">
|
||
Questions about shipping?
|
||
</h2>
|
||
<p className="font-body font-light text-stone-500 mb-8 max-w-xl mx-auto">
|
||
Contact our team for specific shipping inquiries or rush orders.
|
||
</p>
|
||
<Link
|
||
to="/contact"
|
||
className="inline-block bg-primary dark:bg-white text-white dark:text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-800 dark:hover:bg-stone-200 transition-colors"
|
||
>
|
||
Get in Touch
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Shipping;
|