diff --git a/src/app/globals.css b/src/app/globals.css index 286fc98..742ce56 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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, diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 06724a2..005d919 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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"], diff --git a/src/app/page.tsx b/src/app/page.tsx index 7b7ea52..7b7aa37 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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 ( +
+
+
+ + + + + + + +
+
+ ); } diff --git a/src/components/benefits/index.tsx b/src/components/benefits/index.tsx new file mode 100644 index 0000000..bffbe7b --- /dev/null +++ b/src/components/benefits/index.tsx @@ -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 ( +
+
+
+

+ Why Choose Craft & Harvest? +

+

+ More than just suppliesβ€”we're your partner in candle making + success +

+
+ +
+ {benefits.map((benefit, index) => ( +
+
{benefit.icon}
+

+ {benefit.title} +

+

+ {benefit.description} +

+
+ ))} +
+
+
+ ); +} diff --git a/src/components/cta/index.tsx b/src/components/cta/index.tsx new file mode 100644 index 0000000..105f3ba --- /dev/null +++ b/src/components/cta/index.tsx @@ -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 ( +
+
+

+ Ready to Start Saving? +

+

+ Join Colorado's candle makers who are saving hundreds on supplies +

+ +
+ + Shop Products + + + Contact Us + +
+ +
+

+ Or sign up for updates and special offers +

+
+ 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", + }} + /> + +
+
+
+
+ ); +} diff --git a/src/components/featured-products/index.tsx b/src/components/featured-products/index.tsx new file mode 100644 index 0000000..e091928 --- /dev/null +++ b/src/components/featured-products/index.tsx @@ -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 ( +
+
+
+

+ Featured Products +

+

+ Premium wax and supplies for professional candle makers +

+
+ +
+ {products.map((product) => ( +
+
+

+ {product.name} +

+

+ {product.description} +

+
+ + {product.price} + + + {product.unit} + +
+ + Shop Now + +
+ ))} +
+
+
+ ); +} diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx new file mode 100644 index 0000000..ceb7f41 --- /dev/null +++ b/src/components/footer/index.tsx @@ -0,0 +1,197 @@ +"use client"; + +import Link from "next/link"; +import ThemeToggleSwitch from "@/components/theme-toggle-switch"; + +export default function Footer() { + return ( + + ); +} diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx new file mode 100644 index 0000000..d415c1b --- /dev/null +++ b/src/components/header/index.tsx @@ -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 ( + <> +
+
+
+ {/* Logo */} + + + Craft & Harvest + + + + {/* Desktop Navigation */} + + + {/* Desktop Auth Buttons & Theme Toggle */} +
+ + + Sign In + + + Sign Up + +
+ + {/* Mobile Menu Button */} + +
+
+
+ + {/* Mobile Menu Overlay */} + {isMenuOpen && ( +
+
+ {/* Navigation Links */} + +
+ + {/* Auth Buttons - Fixed at bottom */} +
+ + Sign In + + + Sign Up + +
+
+ )} + + ); +} diff --git a/src/components/hero/index.tsx b/src/components/hero/index.tsx new file mode 100644 index 0000000..391b5f5 --- /dev/null +++ b/src/components/hero/index.tsx @@ -0,0 +1,92 @@ +"use client"; + +import Link from "next/link"; + +export default function Hero() { + return ( +
+
+
+

+ Premium Candle Making Supplies +

+

+ Save hundreds on shipping with Colorado's only local supplier + of USA-grown soy wax +

+
+ + Shop Products + + + Contact Us + +
+ + {/* Key Benefits */} +
+
+
πŸ’°
+

+ Save on Shipping +

+

+ Save $150-$200+ per order with free local pickup +

+
+
+
⚑
+

+ Fast Delivery +

+

+ 1-2 day turnaround vs. week-long shipping waits +

+
+
+
🌱
+

+ USA-Grown Wax +

+

+ Premium Golden Brands soy wax and luxury blends +

+
+
+
+
+
+ ); +} diff --git a/src/components/how-it-works/index.tsx b/src/components/how-it-works/index.tsx new file mode 100644 index 0000000..0550fa3 --- /dev/null +++ b/src/components/how-it-works/index.tsx @@ -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 ( +
+
+
+

+ How It Works +

+

+ Getting your candle supplies is easy +

+
+ +
+ {steps.map((step, index) => ( +
+
+
+ {step.number} +
+

+ {step.title} +

+

+ {step.description} +

+
+ {index < steps.length - 1 && ( +
+ )} +
+ ))} +
+
+
+ ); +} diff --git a/src/components/stats/index.tsx b/src/components/stats/index.tsx new file mode 100644 index 0000000..24606db --- /dev/null +++ b/src/components/stats/index.tsx @@ -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 ( +
+
+
+ {stats.map((stat, index) => ( +
+
+ {stat.value} +
+
+ {stat.label} +
+
+ ))} +
+
+
+ ); +} diff --git a/src/components/testimonials/index.tsx b/src/components/testimonials/index.tsx new file mode 100644 index 0000000..3cb4b7f --- /dev/null +++ b/src/components/testimonials/index.tsx @@ -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 ( +
+
+
+

+ What Our Customers Say +

+

+ Real feedback from real candle makers +

+
+ +
+ {testimonials.map((testimonial, index) => ( +
+
+ " +
+

+ {testimonial.quote} +

+
+

+ {testimonial.author} +

+

+ {testimonial.savings} +

+
+
+ ))} +
+
+
+ ); +} diff --git a/src/components/ThemeProvider/index.tsx b/src/components/theme-provider/index.tsx similarity index 100% rename from src/components/ThemeProvider/index.tsx rename to src/components/theme-provider/index.tsx diff --git a/src/components/ThemeProvider/ThemeToggle.tsx b/src/components/theme-provider/theme-toggle.tsx similarity index 100% rename from src/components/ThemeProvider/ThemeToggle.tsx rename to src/components/theme-provider/theme-toggle.tsx diff --git a/src/components/theme-toggle-switch/index.tsx b/src/components/theme-toggle-switch/index.tsx new file mode 100644 index 0000000..65074e4 --- /dev/null +++ b/src/components/theme-toggle-switch/index.tsx @@ -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 ( + + ); +}