import { useState, useEffect, useRef } from "react"; const NAV_LINKS = ["About Us", "Products", "Bulk Orders", "Contact"]; const US_STATES = [ "Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut", "Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa", "Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan", "Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire", "New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio", "Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota", "Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia", "Wisconsin","Wyoming" ]; const PRODUCTS = [ { id: 1, name: "Kaolin Vessel", material: "Recycled Clay · Cork Base", desc: "Hand-thrown from reclaimed ceramic clay, each vessel carries a subtly unique surface. Zero synthetic coatings — glazed with mineral oxides only.", tag: "Zero Waste Glaze", emoji: "🏺", moq: "50 units", }, { id: 2, name: "Linen Carry", material: "Organic Linen · Vegetable-Dyed", desc: "Woven in small batches using undyed organic linen, then hand-dipped in plant-based pigment baths. Each tote bears its own tonal story.", tag: "GOTS Certified", emoji: "🛍️", moq: "100 units", }, { id: 3, name: "Forest Pen Set", material: "FSC Oak · Soy Ink", desc: "Turned from sustainably harvested oak offcuts. Refillable cartridges use soy-based ink. Presented in a seed-paper box you can plant afterward.", tag: "Carbon Neutral", emoji: "✒️", moq: "200 units", }, ]; function useInView(threshold = 0.15) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { const obs = new IntersectionObserver( ([e]) => { if (e.isIntersecting) setInView(true); }, { threshold } ); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, []); return [ref, inView]; } function Navbar() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const fn = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", fn); return () => window.removeEventListener("scroll", fn); }, []); return ( {/* Logo wordmark /} 灃 FENG YI {/ Desktop nav /} {NAV_LINKS.map((l) => ( {l} ))} Get a Quote {/ Mobile hamburger /} setOpen(!open)}> {[0,1,2].map(i => ( ))} {/ Mobile drawer /} {open && ( {NAV_LINKS.map(l => ( setOpen(false)} style={{ display: "block", padding: "10px 0", fontFamily: "'Cormorant Garamond', serif", fontSize: 17, color: "#6b5040", borderBottom: "1px solid rgba(194,145,110,0.1)" }}>{l} ))} )} ); } function Hero() { const [loaded, setLoaded] = useState(false); useEffect(() => { setTimeout(() => setLoaded(true), 80); }, []); return ( {/ Decorative arcs /} {/ Logo placeholder /} 灃 {/ Brand name /} FENG YI · 灃依 {/ Hero headline /} Where Fashion
Meets Sustainability {/ Subline /} Premium eco-conscious corporate gifts crafted for brands that believe doing good and looking good are the same thing. {/ CTA buttons /} Explore Products Request a Quote {/ Scroll cue /} SCROLL ); } function ProductCard({ product, delay }) { const [ref, inView] = useInView(); const [hovered, setHovered] = useState(false); return ( setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: hovered ? "#fff" : "#FDFBF7", border: "1px solid", borderColor: hovered ? "rgba(194,145,110,0.45)" : "rgba(194,145,110,0.18)", borderRadius: 20, padding: "0 0 32px", overflow: "hidden", opacity: inView ? 1 : 0, transform: inView ? "translateY(0)" : "translateY(32px)", transition: opacity 0.7s ease ${delay}s, transform 0.7s ease ${delay}s, border-color 0.3s, background 0.3s, box-shadow 0.3s, boxShadow: hovered ? "0 16px 48px rgba(194,145,110,0.14)" : "0 2px 12px rgba(0,0,0,0.04)", cursor: "default", }} > {/ Image area /} {product.emoji} {product.tag} {product.material} {product.name} {product.desc} MOQ · {product.moq} Inquire → ); } function Products() { const [ref, inView] = useInView(); return ( {/ Section header /} OUR COLLECTION Gifts That Carry a Story {/ Grid */} {PRODUCTS.map((p, i) => ( ))} ); } function BulkOrders() { const [ref, inView] = useInView(); const perks = [ { icon: "✦", label: "Custom Branding", desc: "Logo embossing, debossing, and full-print options on all items." }, { icon: "✦", label: "Low MOQ", desc: "Start from 50 units — ideal for boutique campaigns or large rollouts." }, { icon: "✦", label: "ESG Documentation", desc: "Full carbon footprint reports and material certifications included." }, { icon: "✦", label: "US Fulfillment", desc: "Consolidated shipping to any US state with real-time tracking." }, ]; return ( CORPORATE PROGRAM Bulk Orders, Beautifully Done {perks.map((p, i) => ( {p.icon} {p.label} {p.desc} ))} ); } function ContactForm() { const [ref, inView] = useInView(); const [form, setForm] = useState({ company: "", quantity: "", state: "", message: "" }); const [sent, setSent] = useState(false); const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value }); const handleSubmit = (e) => { e.preventDefault(); setSent(true); }; const inputStyle = { width: "100%", background: "#FDFBF7", border: "1px solid rgba(194,145,110,0.3)", borderRadius: 10, padding: "12px 16px", fontFamily: "'Cormorant Garamond', serif", fontSize: 15, color: "#3a2d24", outline: "none", boxSizing: "border-box", }; const labelStyle = { fontFamily: "'Cormorant Garamond', serif", fontSize: 12, letterSpacing: "0.18em", color: "#C2916E", display: "block", marginBottom: 6, }; return ( GET IN TOUCH Request a Wholesale Quote {sent ? ( ✓ Thank you! Our team will respond within 1–2 business days. ) : ( COMPANY NAME * ORDER QUANTITY * DELIVERY STATE (US) * Select a state… {US_STATES.map(s => {s})} MESSAGE (OPTIONAL) SEND INQUIRY By submitting, you agree to our privacy policy. We never share your data. )} ); } function Footer() { return ( 灃依 FENG YI © 2026 Feng Yi. All rights reserved. · Sustainable by design. ); } export default function FengYi() { return ( { @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: #FDFBF7; } input:focus, textarea:focus, select:focus { border-color: rgba(194,145,110,0.6) !important; box-shadow: 0 0 0 3px rgba(194,145,110,0.08); } } ); }