Lots of new content added to the landing page.
This commit is contained in:
parent
d24f484bb2
commit
6f8b660d3c
|
|
@ -85,6 +85,11 @@ body {
|
|||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
code,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Poppins, JetBrains_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ThemeProvider } from "@/components/ThemeProvider";
|
||||
import ThemeToggle from "@/components/ThemeProvider/ThemeToggle";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
import ThemeToggle from "@/components/theme-provider/theme-toggle";
|
||||
|
||||
const poppins = Poppins({
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,27 @@
|
|||
import { redirect } from "next/navigation";
|
||||
import Header from "@/components/header";
|
||||
import Footer from "@/components/footer";
|
||||
import Hero from "@/components/hero";
|
||||
import FeaturedProducts from "@/components/featured-products";
|
||||
import Benefits from "@/components/benefits";
|
||||
import HowItWorks from "@/components/how-it-works";
|
||||
import Testimonials from "@/components/testimonials";
|
||||
import Stats from "@/components/stats";
|
||||
import CTA from "@/components/cta";
|
||||
|
||||
export default function Home() {
|
||||
redirect("/login");
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col overflow-x-hidden pt-16">
|
||||
<Header />
|
||||
<main className="flex-1">
|
||||
<Hero />
|
||||
<FeaturedProducts />
|
||||
<Benefits />
|
||||
<HowItWorks />
|
||||
<Stats />
|
||||
<Testimonials />
|
||||
<CTA />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
"use client";
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
icon: "💰",
|
||||
title: "Significant Cost Savings",
|
||||
description:
|
||||
"Save $150-$200 per order on shipping costs. That adds up to $2,000-$2,400 in savings per year for regular customers.",
|
||||
},
|
||||
{
|
||||
icon: "📦",
|
||||
title: "Free Local Pickup",
|
||||
description:
|
||||
"Convenient pickup at your schedule. No waiting for shipments or tracking packages.",
|
||||
},
|
||||
{
|
||||
icon: "⚡",
|
||||
title: "Lightning Fast Turnaround",
|
||||
description:
|
||||
"1-2 day fulfillment vs. week-long shipping waits. Get your supplies when you need them.",
|
||||
},
|
||||
{
|
||||
icon: "🌱",
|
||||
title: "Premium Quality",
|
||||
description:
|
||||
"USA-grown soy wax from trusted brands like Golden Brands. We only stock the best.",
|
||||
},
|
||||
{
|
||||
icon: "🤝",
|
||||
title: "Reliable & Dependable",
|
||||
description:
|
||||
"We show up when we say we will. Count on us for consistent service and availability.",
|
||||
},
|
||||
{
|
||||
icon: "🏔️",
|
||||
title: "Support Local Business",
|
||||
description:
|
||||
"Keep your money in Colorado and support a local, family-owned supplier.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Benefits() {
|
||||
return (
|
||||
<section
|
||||
className="w-full py-20 px-4"
|
||||
style={{ backgroundColor: "var(--tan-05)" }}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2
|
||||
className="text-4xl font-bold mb-4"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Why Choose Craft & Harvest?
|
||||
</h2>
|
||||
<p className="text-lg" style={{ color: "var(--foreground)" }}>
|
||||
More than just supplies—we're your partner in candle making
|
||||
success
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-6 rounded-lg"
|
||||
style={{ backgroundColor: "var(--background)" }}
|
||||
>
|
||||
<div className="text-4xl mb-4">{benefit.icon}</div>
|
||||
<h3
|
||||
className="text-xl font-semibold mb-3"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||
{benefit.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function CTA() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// TODO: Connect to email service
|
||||
setSubmitted(true);
|
||||
setTimeout(() => {
|
||||
setSubmitted(false);
|
||||
setEmail("");
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
className="w-full py-20 px-4"
|
||||
style={{ backgroundColor: "var(--teal-90)" }}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2
|
||||
className="text-4xl md:text-5xl font-bold mb-6"
|
||||
style={{ color: "white" }}
|
||||
>
|
||||
Ready to Start Saving?
|
||||
</h2>
|
||||
<p className="text-xl mb-8" style={{ color: "white" }}>
|
||||
Join Colorado's candle makers who are saving hundreds on supplies
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
|
||||
<Link
|
||||
href="/products"
|
||||
className="px-8 py-4 rounded-lg text-lg font-semibold transition-all hover:opacity-90 w-full sm:w-auto text-center"
|
||||
style={{
|
||||
backgroundColor: "var(--brown)",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Shop Products
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="px-8 py-4 rounded-lg text-lg font-semibold transition-all hover:opacity-90 w-full sm:w-auto text-center border-2"
|
||||
style={{
|
||||
borderColor: "white",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="max-w-md mx-auto">
|
||||
<p className="text-sm mb-4" style={{ color: "white" }}>
|
||||
Or sign up for updates and special offers
|
||||
</p>
|
||||
<form onSubmit={handleSubmit} className="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="your.email@example.com"
|
||||
required
|
||||
className="flex-1 px-4 py-3 rounded placeholder:text-gray-500"
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
color: "#1a1a1a",
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-3 rounded font-semibold transition-all hover:opacity-90"
|
||||
style={{
|
||||
backgroundColor: "var(--brown)",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{submitted ? "✓ Sent!" : "Subscribe"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
const products = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Golden Brands 464",
|
||||
description:
|
||||
"Premium USA-grown soy wax. Perfect for container candles with excellent scent throw.",
|
||||
price: "$103",
|
||||
unit: "per box",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Golden Brands 454",
|
||||
description:
|
||||
"Coconut soy blend for a smooth, creamy finish. Great for luxury candles.",
|
||||
price: "$103",
|
||||
unit: "per box",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Ceda Serica",
|
||||
description:
|
||||
"Luxury coconut and apricot blend. Sustainable and beautifully smooth.",
|
||||
price: "Contact",
|
||||
unit: "for pricing",
|
||||
},
|
||||
];
|
||||
|
||||
export default function FeaturedProducts() {
|
||||
return (
|
||||
<section className="w-full py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2
|
||||
className="text-4xl font-bold mb-4"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Featured Products
|
||||
</h2>
|
||||
<p className="text-lg" style={{ color: "var(--foreground)" }}>
|
||||
Premium wax and supplies for professional candle makers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{products.map((product) => (
|
||||
<div
|
||||
key={product.id}
|
||||
className="rounded-lg p-6 border-2 transition-all hover:shadow-lg"
|
||||
style={{
|
||||
backgroundColor: "var(--tan-05)",
|
||||
borderColor: "var(--tan-30)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="aspect-square bg-gradient-to-br rounded-lg mb-4"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(135deg, var(--tan-20), var(--tan-40))",
|
||||
}}
|
||||
/>
|
||||
<h3
|
||||
className="text-xl font-semibold mb-2"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
{product.name}
|
||||
</h3>
|
||||
<p
|
||||
className="text-sm mb-4"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
{product.description}
|
||||
</p>
|
||||
<div className="flex items-baseline gap-2 mb-4">
|
||||
<span
|
||||
className="text-2xl font-bold"
|
||||
style={{ color: "var(--brown)" }}
|
||||
>
|
||||
{product.price}
|
||||
</span>
|
||||
<span
|
||||
className="text-sm"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
{product.unit}
|
||||
</span>
|
||||
</div>
|
||||
<Link
|
||||
href="/products"
|
||||
className="block w-full py-3 rounded text-center font-medium transition-all hover:opacity-90"
|
||||
style={{
|
||||
backgroundColor: "var(--brown)",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Shop Now
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import ThemeToggleSwitch from "@/components/theme-toggle-switch";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer
|
||||
className="w-full border-t mt-auto"
|
||||
style={{ borderColor: "var(--tan-30)" }}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{/* Company Info */}
|
||||
<div>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-4"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Craft & Harvest
|
||||
</h3>
|
||||
<p className="text-sm mb-4" style={{ color: "var(--foreground)" }}>
|
||||
Your local source for premium candle making supplies in Colorado.
|
||||
</p>
|
||||
<p className="text-sm mb-2" style={{ color: "var(--foreground)" }}>
|
||||
📍 Greater Denver Area, CO
|
||||
</p>
|
||||
<p className="text-sm mb-2" style={{ color: "var(--foreground)" }}>
|
||||
📧 info@craftandharvest.com
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||
📞 720-443-1720
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Shop */}
|
||||
<div>
|
||||
<h4
|
||||
className="text-sm font-semibold mb-4"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Shop
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="/products"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
All Products
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/products/wax"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Wax
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/products/jars"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Jars
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/products/wicks"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Wicks
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Company */}
|
||||
<div>
|
||||
<h4
|
||||
className="text-sm font-semibold mb-4"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Company
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="/about"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
About Us
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/delivery"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Delivery & Pickup
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/faq"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
FAQ
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Account */}
|
||||
<div>
|
||||
<h4
|
||||
className="text-sm font-semibold mb-4"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Account
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/sign-up"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<ThemeToggleSwitch showLabel={true} />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div
|
||||
className="mt-12 pt-8 border-t"
|
||||
style={{ borderColor: "var(--tan-30)" }}
|
||||
>
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||
© {new Date().getFullYear()} Craft & Harvest LLC. All rights
|
||||
reserved.
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
<Link
|
||||
href="/privacy"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link
|
||||
href="/terms"
|
||||
className="text-sm hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Terms of Service
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import ThemeToggleSwitch from "@/components/theme-toggle-switch";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export default function Header() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
const toggleMenu = () => {
|
||||
setIsMenuOpen(!isMenuOpen);
|
||||
};
|
||||
|
||||
const closeMenu = () => {
|
||||
setIsMenuOpen(false);
|
||||
};
|
||||
|
||||
// Prevent body scroll when menu is open
|
||||
useEffect(() => {
|
||||
if (isMenuOpen) {
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = "unset";
|
||||
}
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
document.body.style.overflow = "unset";
|
||||
};
|
||||
}, [isMenuOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header
|
||||
className="w-full border-b fixed top-0 left-0 right-0 z-50"
|
||||
style={{
|
||||
borderColor: "var(--tan-30)",
|
||||
backgroundColor: "var(--background)",
|
||||
}}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center" onClick={closeMenu}>
|
||||
<span
|
||||
className="text-2xl font-semibold"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Craft & Harvest
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<Link
|
||||
href="/products"
|
||||
className="text-sm font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Products
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className="text-sm font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="text-sm font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Desktop Auth Buttons & Theme Toggle */}
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
<ThemeToggleSwitch />
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-sm font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/sign-up"
|
||||
className="px-4 py-2 rounded text-sm font-medium transition-all hover:opacity-90"
|
||||
style={{
|
||||
backgroundColor: "var(--brown)",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={toggleMenu}
|
||||
className="md:hidden p-2 rounded"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{isMenuOpen ? (
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
{isMenuOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 md:hidden flex flex-col"
|
||||
style={{
|
||||
backgroundColor: "var(--background)",
|
||||
paddingTop: "64px", // Account for header height
|
||||
}}
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 py-8">
|
||||
{/* Navigation Links */}
|
||||
<nav className="space-y-6">
|
||||
<Link
|
||||
href="/products"
|
||||
onClick={closeMenu}
|
||||
className="block text-2xl font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Products
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
onClick={closeMenu}
|
||||
className="block text-2xl font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
onClick={closeMenu}
|
||||
className="block text-2xl font-medium hover:opacity-80 transition-opacity"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<div className="flex items-center justify-between h-[2rem]">
|
||||
<span
|
||||
className="text-2xl font-medium leading-none"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Theme
|
||||
</span>
|
||||
<ThemeToggleSwitch showLabel={false} />
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Auth Buttons - Fixed at bottom */}
|
||||
<div
|
||||
className="px-6 py-6 border-t space-y-4"
|
||||
style={{ borderColor: "var(--tan-30)" }}
|
||||
>
|
||||
<Link
|
||||
href="/login"
|
||||
onClick={closeMenu}
|
||||
className="block w-full py-4 text-center text-lg font-medium rounded border-2 transition-all hover:opacity-80"
|
||||
style={{
|
||||
borderColor: "var(--brown)",
|
||||
color: "var(--brown)",
|
||||
}}
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/sign-up"
|
||||
onClick={closeMenu}
|
||||
className="block w-full py-4 text-center text-lg font-medium rounded transition-all hover:opacity-90"
|
||||
style={{
|
||||
backgroundColor: "var(--brown)",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section
|
||||
className="w-full py-20 px-4"
|
||||
style={{ backgroundColor: "var(--tan-10)" }}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center max-w-3xl mx-auto">
|
||||
<h1
|
||||
className="text-5xl md:text-6xl font-bold mb-6"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Premium Candle Making Supplies
|
||||
</h1>
|
||||
<p
|
||||
className="text-xl md:text-2xl mb-8"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
Save hundreds on shipping with Colorado's only local supplier
|
||||
of USA-grown soy wax
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<Link
|
||||
href="/products"
|
||||
className="px-8 py-4 rounded-lg text-lg font-semibold transition-all hover:opacity-90 w-full sm:w-auto text-center"
|
||||
style={{
|
||||
backgroundColor: "var(--brown)",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Shop Products
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="px-8 py-4 rounded-lg text-lg font-semibold transition-all hover:opacity-90 w-full sm:w-auto text-center border-2"
|
||||
style={{
|
||||
borderColor: "var(--brown)",
|
||||
color: "var(--brown)",
|
||||
}}
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Key Benefits */}
|
||||
<div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl mb-3">💰</div>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-2"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Save on Shipping
|
||||
</h3>
|
||||
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||
Save $150-$200+ per order with free local pickup
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl mb-3">⚡</div>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-2"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
Fast Delivery
|
||||
</h3>
|
||||
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||
1-2 day turnaround vs. week-long shipping waits
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl mb-3">🌱</div>
|
||||
<h3
|
||||
className="text-lg font-semibold mb-2"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
USA-Grown Wax
|
||||
</h3>
|
||||
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||
Premium Golden Brands soy wax and luxury blends
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
"use client";
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: "01",
|
||||
title: "Browse Products",
|
||||
description:
|
||||
"Explore our selection of premium wax, jars, and wicks online.",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
title: "Place Your Order",
|
||||
description:
|
||||
"Choose free local pickup or affordable delivery to your location.",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
title: "Get Notified",
|
||||
description:
|
||||
"We'll confirm your order and coordinate pickup or delivery time.",
|
||||
},
|
||||
{
|
||||
number: "04",
|
||||
title: "Start Creating",
|
||||
description:
|
||||
"Pick up your supplies or receive delivery and start making candles!",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HowItWorks() {
|
||||
return (
|
||||
<section className="w-full py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2
|
||||
className="text-4xl font-bold mb-4"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
How It Works
|
||||
</h2>
|
||||
<p className="text-lg" style={{ color: "var(--foreground)" }}>
|
||||
Getting your candle supplies is easy
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{steps.map((step, index) => (
|
||||
<div key={index} className="relative">
|
||||
<div className="text-center">
|
||||
<div
|
||||
className="w-20 h-20 mx-auto rounded-full flex items-center justify-center text-3xl font-bold mb-4"
|
||||
style={{
|
||||
backgroundColor: "var(--tan-20)",
|
||||
color: "var(--teal)",
|
||||
}}
|
||||
>
|
||||
{step.number}
|
||||
</div>
|
||||
<h3
|
||||
className="text-xl font-semibold mb-3"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
{index < steps.length - 1 && (
|
||||
<div
|
||||
className="hidden lg:block absolute top-10 left-[60%] w-[80%] h-0.5"
|
||||
style={{ backgroundColor: "var(--tan-30)" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
"use client";
|
||||
|
||||
const stats = [
|
||||
{
|
||||
value: "$150-200",
|
||||
label: "Average Savings Per Order",
|
||||
},
|
||||
{
|
||||
value: "1-2 Days",
|
||||
label: "Delivery Turnaround",
|
||||
},
|
||||
{
|
||||
value: "Since 2018",
|
||||
label: "Serving Colorado",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
label: "Customer Satisfaction",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Stats() {
|
||||
return (
|
||||
<section className="w-full py-20 px-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div
|
||||
className="text-4xl md:text-5xl font-bold mb-2"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
{stat.value}
|
||||
</div>
|
||||
<div
|
||||
className="text-sm md:text-base"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
"use client";
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
quote:
|
||||
"You definitely helped make my business a success over the years, we appreciate you! Thanks so much.",
|
||||
author: "Denver Candle Maker",
|
||||
savings: "$2,000-$2,400/year in shipping savings",
|
||||
},
|
||||
{
|
||||
quote:
|
||||
"What would we do without a local supplier! You've helped us grow and saved us a ton of money.",
|
||||
author: "Colorado Artisan",
|
||||
savings: "$150-$200 per order saved",
|
||||
},
|
||||
{
|
||||
quote:
|
||||
"Thank you for saving us money on our shipping costs! We also really like working with a local supplier.",
|
||||
author: "Local Business Owner",
|
||||
savings: "Hundreds saved annually",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Testimonials() {
|
||||
return (
|
||||
<section
|
||||
className="w-full py-20 px-4"
|
||||
style={{ backgroundColor: "var(--tan-05)" }}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2
|
||||
className="text-4xl font-bold mb-4"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
What Our Customers Say
|
||||
</h2>
|
||||
<p className="text-lg" style={{ color: "var(--foreground)" }}>
|
||||
Real feedback from real candle makers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-6 rounded-lg border-2"
|
||||
style={{
|
||||
backgroundColor: "var(--background)",
|
||||
borderColor: "var(--tan-30)",
|
||||
}}
|
||||
>
|
||||
<div className="text-4xl mb-4" style={{ color: "var(--tan)" }}>
|
||||
"
|
||||
</div>
|
||||
<p
|
||||
className="text-base mb-6 italic"
|
||||
style={{ color: "var(--foreground)" }}
|
||||
>
|
||||
{testimonial.quote}
|
||||
</p>
|
||||
<div
|
||||
className="pt-4 border-t"
|
||||
style={{ borderColor: "var(--tan-30)" }}
|
||||
>
|
||||
<p
|
||||
className="font-semibold mb-1"
|
||||
style={{ color: "var(--teal)" }}
|
||||
>
|
||||
{testimonial.author}
|
||||
</p>
|
||||
<p
|
||||
className="text-sm font-medium"
|
||||
style={{ color: "var(--brown)" }}
|
||||
>
|
||||
{testimonial.savings}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
"use client";
|
||||
|
||||
import { useTheme } from "@/components/theme-provider";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface ThemeToggleSwitchProps {
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
export default function ThemeToggleSwitch({
|
||||
showLabel = false,
|
||||
}: ThemeToggleSwitchProps) {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme === "light" ? "dark" : "light");
|
||||
};
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isLight = theme === "light";
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="flex items-center gap-3 group"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
{showLabel && (
|
||||
<span className="text-sm" style={{ color: "var(--foreground)" }}>
|
||||
{isLight ? "Light Mode" : "Dark Mode"}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Toggle Switch */}
|
||||
<div
|
||||
className="relative w-14 h-7 rounded-full transition-all duration-300 ease-in-out"
|
||||
style={{
|
||||
backgroundColor: isLight ? "var(--tan-40)" : "var(--teal-60)",
|
||||
}}
|
||||
>
|
||||
{/* Slider */}
|
||||
<div
|
||||
className="absolute top-0.5 left-0.5 w-6 h-6 rounded-full transition-all duration-300 ease-in-out flex items-center justify-center text-xs"
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
transform: isLight ? "translateX(0)" : "translateX(28px)",
|
||||
}}
|
||||
>
|
||||
{isLight ? "☀️" : "🌙"}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue