Merge version_1 into main #2
295
src/app/page.tsx
295
src/app/page.tsx
@@ -2,16 +2,16 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
|
||||
export default function HomePage() {
|
||||
const navItems = [
|
||||
@@ -40,7 +40,7 @@ export default function HomePage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
@@ -56,9 +56,7 @@ export default function HomePage() {
|
||||
{ name: "Visit", id: "visit" },
|
||||
]}
|
||||
button={{
|
||||
text: "Visit Nero Tonight",
|
||||
href: "#visit",
|
||||
}}
|
||||
text: "Visit Nero Tonight", href: "#visit"}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
@@ -68,38 +66,24 @@ export default function HomePage() {
|
||||
title="Warning: This Website May Cause Intense Dessert Cravings."
|
||||
description="Coffee. Crepes. Chocolate. Welcome to Edmonton's favorite late-night dessert café."
|
||||
tag="⭐ 4.9 Rating | Loved by hundreds of dessert lovers in Edmonton"
|
||||
background={{ variant: "aurora" }}
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{
|
||||
text: "View The Menu",
|
||||
href: "/menu",
|
||||
},
|
||||
text: "View The Menu", href: "/menu"},
|
||||
{
|
||||
text: "Visit Nero Tonight",
|
||||
href: "#visit",
|
||||
},
|
||||
text: "Visit Nero Tonight", href: "#visit"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8qmcze",
|
||||
imageAlt: "Chocolate crepes",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8qmcze", imageAlt: "Chocolate crepes"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u66fii&_wi=1",
|
||||
imageAlt: "Dubai chocolate crepe",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u66fii", imageAlt: "Dubai chocolate crepe"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9w3621&_wi=1",
|
||||
imageAlt: "Loaded mini pancakes",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9w3621", imageAlt: "Loaded mini pancakes"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=recdfi&_wi=1",
|
||||
imageAlt: "Nero cup dessert",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=recdfi", imageAlt: "Nero cup dessert"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=12jthw&_wi=1",
|
||||
imageAlt: "Pistachio latte",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=12jthw", imageAlt: "Pistachio latte"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
buttonAnimation="opacity"
|
||||
@@ -111,41 +95,17 @@ export default function HomePage() {
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4q2ytd&_wi=1",
|
||||
imageAlt: "Sarah Johnson",
|
||||
},
|
||||
id: "1", name: "Sarah Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4q2ytd", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l2s41f&_wi=1",
|
||||
imageAlt: "Michael Chen",
|
||||
},
|
||||
id: "2", name: "Michael Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l2s41f", imageAlt: "Michael Chen"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Davis",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kfaam8&_wi=1",
|
||||
imageAlt: "Emma Davis",
|
||||
},
|
||||
id: "3", name: "Emma Davis", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kfaam8", imageAlt: "Emma Davis"},
|
||||
{
|
||||
id: "4",
|
||||
name: "James Wilson",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bph4r2&_wi=1",
|
||||
imageAlt: "James Wilson",
|
||||
},
|
||||
id: "4", name: "James Wilson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bph4r2", imageAlt: "James Wilson"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Lisa Rodriguez",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4q2ytd&_wi=2",
|
||||
imageAlt: "Lisa Rodriguez",
|
||||
},
|
||||
id: "5", name: "Lisa Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4q2ytd", imageAlt: "Lisa Rodriguez"},
|
||||
{
|
||||
id: "6",
|
||||
name: "David Kim",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l2s41f&_wi=2",
|
||||
imageAlt: "David Kim",
|
||||
},
|
||||
id: "6", name: "David Kim", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=l2s41f", imageAlt: "David Kim"},
|
||||
]}
|
||||
cardTitle="Best dessert café in Edmonton. Mini pancakes were insane. Pistachio latte is amazing. Hidden gem on Whyte Ave. The owner is incredibly welcoming."
|
||||
cardTag="Loved by Hundreds"
|
||||
@@ -160,37 +120,13 @@ export default function HomePage() {
|
||||
description="Our signature creations that keep customers coming back for more."
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Dubai Chocolate Crepe",
|
||||
price: "$14.99",
|
||||
variant: "Rich chocolate, pistachio & happiness",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u66fii&_wi=2",
|
||||
imageAlt: "Dubai Chocolate Crepe",
|
||||
},
|
||||
id: "1", name: "Dubai Chocolate Crepe", price: "$14.99", variant: "Rich chocolate, pistachio & happiness", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u66fii", imageAlt: "Dubai Chocolate Crepe"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Fully Loaded Mini Pancakes",
|
||||
price: "$12.99",
|
||||
variant: "Fluffy, shareable & dangerously good",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9w3621&_wi=2",
|
||||
imageAlt: "Fully Loaded Mini Pancakes",
|
||||
},
|
||||
id: "2", name: "Fully Loaded Mini Pancakes", price: "$12.99", variant: "Fluffy, shareable & dangerously good", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9w3621", imageAlt: "Fully Loaded Mini Pancakes"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Nero Cup",
|
||||
price: "$9.99",
|
||||
variant: "Layers of chocolate, cream & heaven",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=recdfi&_wi=2",
|
||||
imageAlt: "Nero Cup Dessert",
|
||||
},
|
||||
id: "3", name: "Nero Cup", price: "$9.99", variant: "Layers of chocolate, cream & heaven", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=recdfi", imageAlt: "Nero Cup Dessert"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Pistachio Latte",
|
||||
price: "$6.99",
|
||||
variant: "The drink customers can't stop talking about",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=12jthw&_wi=2",
|
||||
imageAlt: "Pistachio Latte",
|
||||
},
|
||||
id: "4", name: "Pistachio Latte", price: "$6.99", variant: "The drink customers can't stop talking about", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=12jthw", imageAlt: "Pistachio Latte"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
@@ -198,9 +134,7 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore the Menu",
|
||||
href: "/menu",
|
||||
},
|
||||
text: "Explore the Menu", href: "/menu"},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
/>
|
||||
@@ -212,48 +146,20 @@ export default function HomePage() {
|
||||
description="Why people love Nero Cafe"
|
||||
features={[
|
||||
{
|
||||
id: "coffee",
|
||||
label: "Coffee",
|
||||
title: "Real Coffee That Matters",
|
||||
items: [
|
||||
"Turkish coffee brewed to perfection",
|
||||
"Pistachio lattes that steal the show",
|
||||
"Rich hot chocolate experience",
|
||||
"Specialty drinks crafted with care",
|
||||
],
|
||||
id: "coffee", label: "Coffee", title: "Real Coffee That Matters", items: [
|
||||
"Turkish coffee brewed to perfection", "Pistachio lattes that steal the show", "Rich hot chocolate experience", "Specialty drinks crafted with care"],
|
||||
},
|
||||
{
|
||||
id: "desserts",
|
||||
label: "Desserts",
|
||||
title: "Fresh Creations Daily",
|
||||
items: [
|
||||
"Crepes made fresh to order",
|
||||
"Waffles and bubble waffles",
|
||||
"Pancakes that melt in your mouth",
|
||||
"Cheesecakes and baklava",
|
||||
],
|
||||
id: "desserts", label: "Desserts", title: "Fresh Creations Daily", items: [
|
||||
"Crepes made fresh to order", "Waffles and bubble waffles", "Pancakes that melt in your mouth", "Cheesecakes and baklava"],
|
||||
},
|
||||
{
|
||||
id: "vibes",
|
||||
label: "Vibes",
|
||||
title: "Open Late for Late Nights",
|
||||
items: [
|
||||
"Perfect for dessert runs at 11 PM",
|
||||
"Coffee dates with friends",
|
||||
"Late-night study sessions",
|
||||
"Cozy atmosphere all night",
|
||||
],
|
||||
id: "vibes", label: "Vibes", title: "Open Late for Late Nights", items: [
|
||||
"Perfect for dessert runs at 11 PM", "Coffee dates with friends", "Late-night study sessions", "Cozy atmosphere all night"],
|
||||
},
|
||||
{
|
||||
id: "hospitality",
|
||||
label: "Hospitality",
|
||||
title: "Family-Friendly Service",
|
||||
items: [
|
||||
"Everyone feels welcome here",
|
||||
"Friendly smiles and genuine care",
|
||||
"Personal touch on every visit",
|
||||
"Small cafe, big heart",
|
||||
],
|
||||
id: "hospitality", label: "Hospitality", title: "Family-Friendly Service", items: [
|
||||
"Everyone feels welcome here", "Friendly smiles and genuine care", "Personal touch on every visit", "Small cafe, big heart"],
|
||||
},
|
||||
]}
|
||||
animationType="opacity"
|
||||
@@ -269,9 +175,7 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
text: "Learn Our Story", href: "#about"},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
/>
|
||||
@@ -283,35 +187,17 @@ export default function HomePage() {
|
||||
sideDescription="Everything you need to know about Nero Cafe."
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What are your hours?",
|
||||
content: "Monday-Thursday: 8:30 AM – 11 PM | Friday-Saturday: 9 AM – 1 AM | Sunday: 8:30 AM – 11 PM. We're open late for all your dessert needs!",
|
||||
},
|
||||
id: "1", title: "What are your hours?", content: "Monday-Thursday: 8:30 AM – 11 PM | Friday-Saturday: 9 AM – 1 AM | Sunday: 8:30 AM – 11 PM. We're open late for all your dessert needs!"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you offer dietary options?",
|
||||
content: "Yes! We have dairy-free alternatives, vegan desserts, and can accommodate most dietary restrictions. Please ask our friendly staff for details.",
|
||||
},
|
||||
id: "2", title: "Do you offer dietary options?", content: "Yes! We have dairy-free alternatives, vegan desserts, and can accommodate most dietary restrictions. Please ask our friendly staff for details."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can I order online?",
|
||||
content: "We primarily operate as a walk-in cafe, but you can call ahead to pre-order your favorites and pick them up fresh!",
|
||||
},
|
||||
id: "3", title: "Can I order online?", content: "We primarily operate as a walk-in cafe, but you can call ahead to pre-order your favorites and pick them up fresh!"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Are your desserts made fresh daily?",
|
||||
content: "Absolutely! All our crepes, pancakes, and desserts are made to order with the freshest ingredients. Quality over speed, always.",
|
||||
},
|
||||
id: "4", title: "Are your desserts made fresh daily?", content: "Absolutely! All our crepes, pancakes, and desserts are made to order with the freshest ingredients. Quality over speed, always."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Do you have WiFi for studying?",
|
||||
content: "Yes! We love having students and remote workers. Free WiFi, plenty of seating, and endless coffee refills to keep you going.",
|
||||
},
|
||||
id: "5", title: "Do you have WiFi for studying?", content: "Yes! We love having students and remote workers. Free WiFi, plenty of seating, and endless coffee refills to keep you going."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Where are you located?",
|
||||
content: "Nero Cafe is proudly located on Whyte Avenue in Edmonton. Easy to find, hard to leave!",
|
||||
},
|
||||
id: "6", title: "Where are you located?", content: "Nero Cafe is proudly located on Whyte Avenue in Edmonton. Easy to find, hard to leave!"},
|
||||
]}
|
||||
textPosition="left"
|
||||
useInvertedBackground={false}
|
||||
@@ -325,38 +211,11 @@ export default function HomePage() {
|
||||
description="Follow Nero for daily dessert temptation and behind-the-scenes cafe moments."
|
||||
blogs={[
|
||||
{
|
||||
id: "1",
|
||||
category: "Desserts",
|
||||
title: "That's Not Just Chocolate",
|
||||
excerpt: "Our Dubai crepe is a work of art. Rich chocolate meets pistachio in perfect harmony.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yn4rni",
|
||||
imageAlt: "Dubai Chocolate Crepe",
|
||||
authorName: "Nero Cafe",
|
||||
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8qmcze",
|
||||
date: "Today",
|
||||
},
|
||||
id: "1", category: "Desserts", title: "That's Not Just Chocolate", excerpt: "Our Dubai crepe is a work of art. Rich chocolate meets pistachio in perfect harmony.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yn4rni", imageAlt: "Dubai Chocolate Crepe", authorName: "Nero Cafe", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8qmcze", date: "Today"},
|
||||
{
|
||||
id: "2",
|
||||
category: "Drinks",
|
||||
title: "Pistachio Magic in a Cup",
|
||||
excerpt: "Our signature pistachio latte is the drink customers literally cannot stop talking about.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jmilo3",
|
||||
imageAlt: "Pistachio Latte",
|
||||
authorName: "Nero Cafe",
|
||||
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8qmcze",
|
||||
date: "Yesterday",
|
||||
},
|
||||
id: "2", category: "Drinks", title: "Pistachio Magic in a Cup", excerpt: "Our signature pistachio latte is the drink customers literally cannot stop talking about.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jmilo3", imageAlt: "Pistachio Latte", authorName: "Nero Cafe", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8qmcze", date: "Yesterday"},
|
||||
{
|
||||
id: "3",
|
||||
category: "Pancakes",
|
||||
title: "Fluffy Perfection on a Plate",
|
||||
excerpt: "Mini pancakes so good, sharing them is optional (but we recommend it).",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lyoucm",
|
||||
imageAlt: "Mini Pancakes",
|
||||
authorName: "Nero Cafe",
|
||||
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8qmcze",
|
||||
date: "2 days ago",
|
||||
},
|
||||
id: "3", category: "Pancakes", title: "Fluffy Perfection on a Plate", excerpt: "Mini pancakes so good, sharing them is optional (but we recommend it).", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=lyoucm", imageAlt: "Mini Pancakes", authorName: "Nero Cafe", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8qmcze", date: "2 days ago"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -364,9 +223,7 @@ export default function HomePage() {
|
||||
carouselMode="buttons"
|
||||
buttons={[
|
||||
{
|
||||
text: "Follow on Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
text: "Follow on Instagram", href: "https://instagram.com"},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
/>
|
||||
@@ -378,26 +235,18 @@ export default function HomePage() {
|
||||
description="Located on Whyte Avenue in Edmonton. Open late for dessert lovers. Come experience the cozy vibes and incredible flavors."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "What's your favorite dessert? Tell us!",
|
||||
rows: 4,
|
||||
name: "message", placeholder: "What's your favorite dessert? Tell us!", rows: 4,
|
||||
required: false,
|
||||
}}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mj81cf&_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mj81cf"
|
||||
imageAlt="Nero Cafe Interior"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
@@ -413,49 +262,31 @@ export default function HomePage() {
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "/",
|
||||
},
|
||||
label: "Home", href: "/"},
|
||||
{
|
||||
label: "Menu",
|
||||
href: "/menu",
|
||||
},
|
||||
label: "Menu", href: "/menu"},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Visit",
|
||||
href: "#visit",
|
||||
},
|
||||
label: "Visit", href: "#visit"},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#visit",
|
||||
},
|
||||
label: "Contact", href: "#visit"},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
label: "Instagram", href: "https://instagram.com"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms of Service", href: "#"},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
label: "Careers", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -1,51 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
textClassName?: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: number | string;
|
||||
letterSpacing?: number;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
className = '',
|
||||
textClassName = '',
|
||||
fontSize = 32,
|
||||
fontWeight = 700,
|
||||
letterSpacing = 0,
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.2}`}
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
y={fontSize * 0.9}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
letterSpacing={letterSpacing}
|
||||
className={textClassName}
|
||||
dominantBaseline="hanging"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user