Initial commit
This commit is contained in:
kudinDmitriyUp
260
src/pages/HomePage.tsx
Normal file
260
src/pages/HomePage.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesBentoGridCta from '@/components/sections/features/FeaturesBentoGridCta';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplit
|
||||
tag="Welcome to Our Family Kitchen"
|
||||
title="Authentic Vietnamese Phở in Santa Barbara"
|
||||
description="Experience the rich, aromatic flavors of traditional Vietnamese phở, crafted with love and generations of family recipes right here in Santa Barbara. From our family to yours, a taste of home."
|
||||
primaryButton={{
|
||||
text: "View Our Menu",
|
||||
href: "#menu",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Find Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/asian-style-soup-with-noodles-pork-green-onions-closely-bowl-table_1150-22827.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTextSplit
|
||||
title="Our Journey to Santa Barbara"
|
||||
descriptions={[
|
||||
"Born and raised in the vibrant streets of Hanoi, our family brought our culinary heritage and passion for authentic Vietnamese cuisine to the sunny shores of Santa Barbara. Phở Bờ Biển is more than a restaurant; it's a testament to our roots and a dream come true.",
|
||||
"Every bowl of phở tells a story – a story of slow-simmered broth, fresh herbs, tender meats, and the warmth of family tradition. We invite you to be a part of our story and savor the true essence of Vietnamese comfort food.",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<SectionErrorBoundary name="menu">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Our Culinary Delights"
|
||||
title="Signature Phở Bowls & Vietnamese Specialties"
|
||||
description="Explore our exquisite menu, featuring classic phở, bún, gỏi cuốn, and other beloved Vietnamese dishes, all prepared with the freshest local ingredients and time-honored techniques."
|
||||
items={[
|
||||
{
|
||||
title: "Phở Đặc Biệt",
|
||||
description: "Our special combination phở with rare steak, well-done brisket, flank, tendon, and tripe in a rich, aromatic broth.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/thai-style-spicy-food-som-tum-food-concept-props-decoration-garlic-lemon-peanuts-tomatoes-shallots-wood-table_1150-21144.jpg",
|
||||
},
|
||||
{
|
||||
title: "Phở Tái Nạm Gầu",
|
||||
description: "A classic bowl with tender slices of rare steak, flavorful flank, and fatty brisket, served with fresh herbs.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-food-table_23-2150853970.jpg",
|
||||
},
|
||||
{
|
||||
title: "Bún Chả Giò Nướng",
|
||||
description: "Vermicelli noodles topped with crispy imperial rolls, juicy grilled pork, fresh vegetables, and a savory nước chấm.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/noodles-spicy-wooden-tray-with-ingredients-black-cement-surface_1150-19789.jpg",
|
||||
},
|
||||
{
|
||||
title: "Gỏi Cuốn Tôm Thịt",
|
||||
description: "Fresh spring rolls filled with succulent shrimp, sliced pork, vermicelli, and crisp greens, served with peanut sauce.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/thai-spring-rolls-with-spicy-sauce_1150-18507.jpg",
|
||||
},
|
||||
{
|
||||
title: "Cơm Tấm Sườn Bì Chả",
|
||||
description: "Broken rice plate with a tender grilled pork chop, shredded pork skin, and a savory steamed egg meatloaf.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crispy-pork-white-plate-topped-with-sauce_1150-21301.jpg",
|
||||
},
|
||||
{
|
||||
title: "Bánh Mì Kẹp Thịt",
|
||||
description: "Our crispy Vietnamese baguette filled with savory meats, fresh cilantro, pickled carrots, daikon, and jalapeños.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vietnamese_74190-4684.jpg",
|
||||
},
|
||||
{
|
||||
title: "Phở Gà",
|
||||
description: "A comforting bowl of chicken phở, featuring tender chicken slices and a light, flavorful chicken broth.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/noodles-with-chicken-leg-chicken-fillet-blood-with-soup-thai-style-vegetable-boat-noodles-selective-focus_1150-45666.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
<SectionErrorBoundary name="why-us">
|
||||
<FeaturesBentoGridCta
|
||||
tag="More Than Just Phở"
|
||||
title="The Phở Bờ Biển Difference"
|
||||
description="We are committed to delivering an unparalleled dining experience, blending traditional Vietnamese hospitality with the fresh, vibrant spirit of Santa Barbara."
|
||||
features={[
|
||||
{
|
||||
title: "Authentic Family Recipes",
|
||||
description: "Generations of culinary secrets passed down to bring you the true taste of Vietnam.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-recipe-book-still-life-concept_23-2149056055.jpg",
|
||||
},
|
||||
{
|
||||
title: "Fresh, Local Ingredients",
|
||||
description: "Sourcing the best produce from Santa Barbara's local markets for peak flavor and quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-composition-with-healthy-ingredients_23-2147859416.jpg",
|
||||
},
|
||||
{
|
||||
title: "Warm, Welcoming Atmosphere",
|
||||
description: "Step into our cozy space and feel like part of the family, where every meal is a celebration.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-wicker-lamps-ceiling-inside-building_181624-47099.jpg",
|
||||
},
|
||||
{
|
||||
title: "Exceptional Service",
|
||||
description: "Our friendly staff is dedicated to ensuring your dining experience is nothing short of perfect.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/here-take-look-our-menu_637285-7860.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="What Our Guests Say"
|
||||
title="Our Valued Customers Speak"
|
||||
description="Hear from our guests about their unforgettable dining experiences at Phở Bờ Biển, where every meal is a delight."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
role: "Local Foodie",
|
||||
quote: "Phở Bờ Biển is a true gem! The phở broth is incredibly rich and flavorful, just like I remember from my travels in Vietnam. This is my new go-to spot for authentic Vietnamese food in Santa Barbara.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/arm-close-up-woman-with-shopping-bags_1098-2428.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael Chen",
|
||||
role: "Restaurant Critic",
|
||||
quote: "A delightful culinary journey! The fresh spring rolls are impeccably prepared, and the Bánh Mì is a revelation. Phở Bờ Biển brings a genuine taste of Hanoi to our vibrant city.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emily R.",
|
||||
role: "Santa Barbara Resident",
|
||||
quote: "The family story behind Phở Bờ Biển truly shines through in their food. It's not just a meal; it's an experience filled with warmth and incredible flavors. Highly recommend the Phở Đặc Biệt!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-carefree-happy-young-woman-with-curly-hair-dressed-fur-jacket-trousers-dances-with-arms-raised-up-keeps-eyes-closed-isolated-pink-wall_273609-55702.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Kim",
|
||||
role: "Visiting Chef",
|
||||
quote: "As a chef, I appreciate the dedication to authenticity and quality ingredients. The depth of flavor in their broth is outstanding. A must-visit for anyone seeking true Vietnamese cuisine.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-sassy-senior-man-assure-showing-okay-gesture-smiling-pleased_176420-31830.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jessica & Tom",
|
||||
role: "Happy Couple",
|
||||
quote: "We love coming here for date night! The atmosphere is charming, and the food is consistently amazing. The Bún Chả Giò Nướng is our absolute favorite. Thank you for such wonderful evenings!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-young-people-enjoying-dinner-together_23-2148454092.jpg",
|
||||
},
|
||||
{
|
||||
name: "Linh Tran",
|
||||
role: "Family Friend",
|
||||
quote: "It’s like eating at home! The flavors are spot on, bringing back so many cherished memories. Phở Bờ Biển truly honors our heritage. A taste of Vietnam right here in Santa Barbara.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-male-chef-standing-kitchen-shrugging_23-2147863654.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Recognized by Many"
|
||||
title="Loved by the Community"
|
||||
description="Proudly serving Santa Barbara and recognized for our authentic flavors and warm hospitality."
|
||||
names={[
|
||||
"Santa Barbara Foodie Review",
|
||||
"Local Eats Magazine",
|
||||
"Best of SB Awards",
|
||||
"Culinary Coast Dispatch",
|
||||
"Taste of Vietnam Blog",
|
||||
"The Daily Santa Barbara",
|
||||
"Coastline Cuisine Guide",
|
||||
"Gourmet Gazette",
|
||||
"Flavorful Finds SB",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Questions & Answers"
|
||||
title="Your Phở Bờ Biển Queries Answered"
|
||||
description="Find quick answers to our most common questions regarding our menu, ingredients, and services."
|
||||
items={[
|
||||
{
|
||||
question: "What are your opening hours?",
|
||||
answer: "We are open Tuesday to Sunday from 11:00 AM to 9:00 PM. We are closed on Mondays.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer vegetarian or vegan options?",
|
||||
answer: "Yes, we offer a flavorful vegetarian phở and several vegan-friendly dishes. Please ask our staff for recommendations.",
|
||||
},
|
||||
{
|
||||
question: "Can I make a reservation?",
|
||||
answer: "While we primarily operate on a first-come, first-served basis, we do accept reservations for parties of 6 or more. Please call us directly to inquire.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer takeout or delivery?",
|
||||
answer: "Absolutely! You can place an order for takeout directly through our website, and we partner with local delivery services for your convenience.",
|
||||
},
|
||||
{
|
||||
question: "Are your ingredients locally sourced?",
|
||||
answer: "We pride ourselves on using fresh, high-quality ingredients, with many of our vegetables and herbs sourced from local Santa Barbara farmers.",
|
||||
},
|
||||
{
|
||||
question: "Do you cater for events?",
|
||||
answer: "Yes, Phở Bờ Biển offers catering services for various events. Please contact us to discuss your specific needs and menu options.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Visit Us Today"
|
||||
text="Savor the authentic taste of Vietnam right here in Santa Barbara. We can't wait to welcome you!"
|
||||
primaryButton={{
|
||||
text: "Get Directions",
|
||||
href: "https://maps.app.goo.gl/YourRestaurantAddress",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Call Us",
|
||||
href: "tel:+18055551234",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
13
src/pages/blog/BlogPage.tsx
Normal file
13
src/pages/blog/BlogPage.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import BlogSimpleCards from "@/components/sections/blog/BlogSimpleCards";
|
||||
|
||||
const BlogPage = () => {
|
||||
return (
|
||||
<BlogSimpleCards
|
||||
tag="Blog"
|
||||
title="Latest Articles"
|
||||
description="Stay updated with our latest insights and news"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPage;
|
||||
79
src/pages/shop/ProductPage.tsx
Normal file
79
src/pages/shop/ProductPage.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { ReactLenis } from "lenis/react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import ProductDetailCard from "@/components/ecommerce/ProductDetailCard";
|
||||
import ProductCart from "@/components/ecommerce/ProductCart";
|
||||
import useProductDetail from "@/hooks/useProductDetail";
|
||||
import useCart from "@/hooks/useCart";
|
||||
import useCheckout from "@/hooks/useCheckout";
|
||||
|
||||
const ProductPage = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { product, isLoading, images, createCartItem, selectedQuantity } = useProductDetail(id || "");
|
||||
const { items: cartItems, isOpen: cartOpen, setIsOpen: setCartOpen, addItem, updateQuantity, removeItem, total: cartTotal, getCheckoutItems } = useCart();
|
||||
const { buyNow, checkout } = useCheckout();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="w-content-width mx-auto py-20">
|
||||
<div className="flex justify-center">
|
||||
<Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<section className="w-content-width mx-auto py-20 text-center">
|
||||
<p className="text-foreground mb-4">Product not found</p>
|
||||
<button onClick={() => navigate("/shop")} className="primary-button px-6 py-2 rounded-theme text-primary-cta-text">
|
||||
Back to Shop
|
||||
</button>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const handleAddToCart = () => {
|
||||
const item = createCartItem();
|
||||
if (item) addItem(item);
|
||||
};
|
||||
|
||||
const handleBuyNow = () => {
|
||||
buyNow(product, selectedQuantity);
|
||||
};
|
||||
|
||||
const handleCheckout = async () => {
|
||||
if (cartItems.length === 0) return;
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set("success", "true");
|
||||
await checkout(getCheckoutItems(), { successUrl: url.toString() });
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactLenis root>
|
||||
<ProductDetailCard
|
||||
name={product.name}
|
||||
price={product.price}
|
||||
description={product.description}
|
||||
images={images.map((img) => img.src)}
|
||||
rating={product.rating}
|
||||
onAddToCart={handleAddToCart}
|
||||
onBuyNow={handleBuyNow}
|
||||
/>
|
||||
<ProductCart
|
||||
isOpen={cartOpen}
|
||||
onClose={() => setCartOpen(false)}
|
||||
items={cartItems}
|
||||
total={`$${cartTotal}`}
|
||||
onQuantityChange={updateQuantity}
|
||||
onRemove={removeItem}
|
||||
onCheckout={handleCheckout}
|
||||
/>
|
||||
</ReactLenis>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductPage;
|
||||
31
src/pages/shop/ShopPage.tsx
Normal file
31
src/pages/shop/ShopPage.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import ProductCatalog from "@/components/ecommerce/ProductCatalog";
|
||||
import useProductCatalog from "@/hooks/useProductCatalog";
|
||||
|
||||
const ShopPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const { products, isLoading, search, setSearch } = useProductCatalog({
|
||||
onProductClick: (productId) => navigate(`/shop/${productId}`),
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="w-content-width mx-auto py-20">
|
||||
<div className="flex justify-center">
|
||||
<Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ProductCatalog
|
||||
products={products}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShopPage;
|
||||
Reference in New Issue
Block a user