TheVine/itsthevine
Archived
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Rebrand to Sage & Cream identity, working contact form, drop Firebase

Browse Source 
- New sage/cream palette and stacked logo lockup (The Vine over Coffeehouse
  + Bakery) driven by currentColor; logo SVGs now colorable
- Reuse the logo component for the hero and section marks
- Rewrite site copy: real founding (Morissa Bennett, 2024), real story from
  the product range, remove invented claims and AI phrasing
- Contact form now sends over SMTP via /api/contact (nodemailer) with real
  send/error states, server-side validation, and reply-to the customer;
  delivers to CONTACT_TO. Add .env.example and a test-email script
- Fix mobile: unmount the off-screen menu (killed sideways scroll), cap logo
  width, responsive heroes and type
- Remove Firebase (config, tracked build output, placeholder pages, nix
  firebase-tools) now that hosting has moved
- Delete dead code: LoyaltyCardForm, ProductModal, LoadingSpinner, card-flip
  CSS, unused Playfair font
- Serve dev/start on port 2024
This commit is contained in:
Austin
2026-07-14 17:48:00 -05:00
parent f4ce93965b
commit 5c81b65e51
170 changed files with 980 additions and 1399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomePage.tsx
+82 -69
View File
@@ -1,69 +1,77 @@
'use client'
import Link from 'next/link';
// import { useState } from 'react';
import Image from 'next/image';
import Logo from './Logo';
const HomePage = () => {
// const [showLoyaltyForm, setShowLoyaltyForm] = useState(false);
return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative py-16 bg-bakery-600 text-white">
{/* Background Image */}
{/* <Image
<div>
{/* Hero — centred lockup on a sage wash. */}
<section className="relative flex items-center min-h-[78svh] py-20 md:py-28 bg-bakery-900 text-white overflow-hidden">
{/* Softened on purpose: the storefront's own painted sign sits right behind
the logo, so a sharp photo makes you read the name twice. scale-110 hides
the blur's feathered edges. */}
<Image
src="/images/gallery/Outside.jpg"
alt="The Vine Coffeehouse & Bakery"
alt=""
fill
priority
className="object-cover"
quality={90}
/> */}
{/* Overlay */}
<div className="absolute inset-0"/>
{/* Content */}
<div className="relative container mx-auto px-4 h-full flex items-center">
<div className="text-white max-w-2xl">
<div className="w-full">
<img
src="/images/vine_logo/linen_mist.png"
alt="The Vine Coffeehouse & Bakery"
className="object-cover"
/>
</div>
<p className="text-xl mb-8">
Discover our homemade treats and cakes made with passion.
</p>
<Link
href="/products"
className="bg-bakery-50 hover:bg-bakery-100 text-bakery-800 px-8 py-3 rounded-md inline-block transition"
className="object-cover object-bottom blur-[3px] scale-110"
/>
{/* Sage wash rather than a neutral black scrim — the tint is the identity. */}
<div className="absolute inset-0 bg-bakery-900/80" />
<div className="absolute inset-0 bg-gradient-to-t from-bakery-900 via-bakery-800/60 to-bakery-900/80" />
{/* w-full/min-w-0 keep this flex item from sizing to its max-content
width and blowing out the page on narrow screens. */}
<div className="relative container mx-auto px-4 w-full min-w-0">
<div className="max-w-3xl mx-auto text-center">
<Logo size="lg" linked={false} className="text-bakery-50 mb-10 justify-center" />
<p className="text-lg sm:text-xl text-bakery-100 mb-10 text-balance leading-relaxed">
A coffeehouse and bakery in downtown Princeville, Illinois.
</p>
<div className="flex flex-col sm:flex-row gap-3 justify-center">
<Link
href="/products"
className="bg-bakery-50 hover:bg-white text-bakery-900 px-8 py-3.5 rounded-full font-medium tracking-wide inline-block transition shadow-lg"
>
See Our Products
See the menu
</Link>
<a
href="#visit"
className="border border-bakery-200/60 hover:bg-bakery-50/10 text-bakery-50 px-8 py-3.5 rounded-full font-medium tracking-wide inline-block transition"
>
Visit us
</a>
</div>
</div>
</div>
</section>
{/* Our Specialties */}
<section className="py-16 bg-white">
<section className="py-16 md:py-24 bg-bakery-50">
<div className="container mx-auto px-4">
<h2 className="font-adbhashitha text-4xl text-center mb-12">Our Specialties</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{['Cinnamon Rolls', 'Sugar Cookies', 'Cakes'].map((item, index) => (
<div key={index} className="text-center p-6 bg-bakery-50 rounded-lg">
<h3 className="font-sans text-2xl mb-6">{item}</h3>
<div className="flex justify-center items-center mb-4">
<img
<h2 className="font-adbhashitha text-3xl md:text-4xl text-center text-bakery-900 mb-12">What people come in for</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
{['Cinnamon Rolls', 'Sugar Cookies', 'Cakes'].map((item) => (
<div
key={item}
className="group text-center bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-lg hover:-translate-y-1 transition duration-300"
>
<div className="overflow-hidden">
<Image
src={`/images/gallery/${item}.png`}
alt={item}
width={300}
height={200}
className="object-cover rounded-[20px] border border-black/20 shadow-lg"
width={600}
height={400}
sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
className="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-105"
/>
</div>
{/* <p className="text-bakery-700">Discover our selection of {item.toLowerCase()} prepared daily with love.</p> */}
<h3 className="font-adbhashitha text-xl md:text-2xl text-bakery-800 py-6 tracking-wide">{item}</h3>
</div>
))}
</div>
@@ -71,48 +79,53 @@ const HomePage = () => {
</section>
{/* About Us */}
<section className="py-16 bg-bakery-600 text-white">
<section className="py-16 md:py-24 bg-bakery-800 text-white">
<div className="container mx-auto px-4">
<div className="max-w-3xl mx-auto text-center">
<h2 className="font-adbhashitha text-4xl mb-8" style={{ letterSpacing: '0.01em' }}>About Us</h2>
<p className="text-lg mb-6">
Welcome to The Vine Bakery, where the warmth of home meets the heart of Princeville, IL. We are passionate about baking delicious, fresh goods that bring people together. Our cozy space invites you to gather with friends and family, sharing in the simple joy of homemade treats made with love and the finest ingredients. Come join us at The Vine and feel right at home.
<h2 className="font-adbhashitha text-3xl md:text-4xl mb-8" style={{ letterSpacing: '0.01em' }}>Our story</h2>
<p className="text-base md:text-lg text-bakery-100 mb-8 leading-relaxed">
Morissa Bennett opened The Vine in 2024. We bake in our own kitchen on Main Street:
cinnamon rolls, cookies, custom cakes, sandwiches, paninis, and coffee.
</p>
<Link href="/notre-histoire" className="text-white hover:text-bakery-700 font-semibold">
Learn More →
<Link href="/history" className="text-white hover:text-bakery-200 font-semibold underline underline-offset-4">
Read our story
</Link>
</div>
</div>
</section>
{/* Hours & Contact */}
<section className="py-16 bg-white">
<section id="visit" className="py-16 md:py-24 bg-bakery-50 scroll-mt-24">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<h2 className="font-adbhashitha text-3xl mb-6">Our Hours</h2>
<ul className="space-y-3">
<li className="flex justify-between">
<span>Tuesday - Friday</span>
<span>7:00am - 2:00pm</span>
<h2 className="font-adbhashitha text-3xl md:text-4xl text-center text-bakery-900 mb-12">Visit us</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 max-w-4xl mx-auto">
<div className="bg-white rounded-3xl p-6 md:p-8">
<h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-6">Our hours</h2>
<ul className="space-y-3 text-bakery-800">
<li className="flex justify-between gap-4">
<span>Tuesday – Friday</span>
<span className="font-medium whitespace-nowrap">7:00am – 2:00pm</span>
</li>
<li className="flex justify-between">
<li className="flex justify-between gap-4">
<span>Saturday</span>
<span>7:00am - 12:00pm</span>
<span className="font-medium whitespace-nowrap">7:00am – 12:00pm</span>
</li>
<li className="flex justify-between">
<span>Sunday - Monday</span>
<span>Closed</span>
<li className="flex justify-between gap-4">
<span>Sunday – Monday</span>
<span className="font-medium">Closed</span>
</li>
</ul>
</div>
<div>
<h2 className="font-adbhashitha text-3xl mb-6">Contact</h2>
<address className="not-italic">
<p className="mb-2">215 E Main Street</p>
<p className="mb-2">61559 Princeville, IL</p>
<p className="mb-2">Phone: (309) 701-0660</p>
<p>Email: contact@itsthevine.com</p>
<div className="bg-white rounded-3xl p-6 md:p-8">
<h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-6">Find us</h2>
<address className="not-italic space-y-3 text-bakery-800">
<p>215 E Main Street<br />Princeville, IL 61559</p>
<p>
<a href="tel:+13097010660" className="hover:text-bakery-600 underline underline-offset-4">(309) 701-0660</a>
</p>
<p className="break-words">
<a href="mailto:[email protected]" className="hover:text-bakery-600 underline underline-offset-4">contact@itsthevine.com</a>
</p>
</address>
</div>
</div>