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);
|
background: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Poppins, JetBrains_Mono } from "next/font/google";
|
import { Poppins, JetBrains_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ThemeProvider } from "@/components/ThemeProvider";
|
import { ThemeProvider } from "@/components/theme-provider";
|
||||||
import ThemeToggle from "@/components/ThemeProvider/ThemeToggle";
|
import ThemeToggle from "@/components/theme-provider/theme-toggle";
|
||||||
|
|
||||||
const poppins = Poppins({
|
const poppins = Poppins({
|
||||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
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() {
|
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