bender/4f6f752f-0798-4f48-9964-6a522b83737d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 5 commits from version_1 into main 2026-03-11 15:21:53 +00:00
Conversation 0 Commits 5 Files Changed 5 +170 -348
5 changed files with 170 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/about/page.tsx
View File

@@ -34,9 +34,7 @@ export default function AboutPage() {
{ name: "Reviews", id: "/reviews" },
]}
button={{
text: "Reserve Table",
href: "/reservation",
}}
text: "Reserve Table", href: "/reservation"}}
animateOnLoad={true}
/>
</div>
@@ -49,7 +47,7 @@ export default function AboutPage() {
description="Joon Persian Restaurant"
subdescription="The View Tower, Muroor Rd, Abu Dhabi"
icon={Leaf}
imageSrc="http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg?_wi=3"
imageSrc="http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg"
imageAlt="Joon Restaurant ambiance and interior design"
mediaAnimation="slide-up"
useInvertedBackground={false}
@@ -65,26 +63,16 @@ export default function AboutPage() {
features={[
{
id: 1,
title: "Dine-In Experience",
description: "Immerse yourself in our elegant ambiance with impeccable service in our luxury dining room",
imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg?_wi=4",
},
title: "Dine-In Experience", description: "Immerse yourself in our elegant ambiance with impeccable service in our luxury dining room", imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg"},
{
id: 2,
title: "Drive-Through",
description: "Convenient service for those on the go, without compromising on quality or presentation",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598352.jpg?_wi=2",
},
title: "Drive-Through", description: "Convenient service for those on the go, without compromising on quality or presentation", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598352.jpg"},
{
id: 3,
title: "Contactless Delivery",
description: "Safe and reliable delivery of our premium dishes directly to your home or office",
imageSrc: "http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg?_wi=3",
},
title: "Contactless Delivery", description: "Safe and reliable delivery of our premium dishes directly to your home or office", imageSrc: "http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg"},
]}
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
/>
</div>
@@ -95,8 +83,7 @@ export default function AboutPage() {
description="Experience exceptional Persian cuisine. Contact us at +971 50 401 9009 or reserve online. Located in The View Tower on Muroor Road, Abu Dhabi."
tagIcon={Phone}
background={{
variant: "rotated-rays-animated-grid",
}}
variant: "rotated-rays-animated-grid"}}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Reserve Now"
@@ -108,87 +95,51 @@ export default function AboutPage() {
<FooterSimple
columns={[
{
title: "Navigation",
items: [
title: "Navigation", items: [
{
label: "Home",
href: "/",
},
label: "Home", href: "/"},
{
label: "About",
href: "/about",
},
label: "About", href: "/about"},
{
label: "Menu",
href: "/menu",
},
label: "Menu", href: "/menu"},
{
label: "Gallery",
href: "/gallery",
},
label: "Gallery", href: "/gallery"},
],
},
{
title: "Services",
items: [
title: "Services", items: [
{
label: "Dine-In",
href: "#",
},
label: "Dine-In", href: "#"},
{
label: "Drive-Through",
href: "#",
},
label: "Drive-Through", href: "#"},
{
label: "Delivery",
href: "#",
},
label: "Delivery", href: "#"},
{
label: "Events",
href: "#",
},
label: "Events", href: "#"},
],
},
{
title: "Contact",
items: [
title: "Contact", items: [
{
label: "Phone: +971 50 401 9009",
href: "tel:+971504019009",
},
label: "Phone: +971 50 401 9009", href: "tel:+971504019009"},
{
label: "The View Tower, Muroor Rd",
href: "#",
},
label: "The View Tower, Muroor Rd", href: "#"},
{
label: "Abu Dhabi, UAE",
href: "#",
},
label: "Abu Dhabi, UAE", href: "#"},
{
label: "reservations@joon.ae",
href: "mailto:reservations@joon.ae",
},
label: "reservations@joon.ae", href: "mailto:reservations@joon.ae"},
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
{
label: "Cookie Policy",
href: "#",
},
label: "Cookie Policy", href: "#"},
{
label: "Accessibility",
href: "#",
},
label: "Accessibility", href: "#"},
],
},
]}

69
src/app/menu/page.tsx
View File

@@ -21,8 +21,7 @@ export default function MenuPage() {
const footerColumns = [
{
title: "Navigation",
items: [
title: "Navigation", items: [
{ label: "Home", href: "/" },
{ label: "About", href: "/about" },
{ label: "Menu", href: "/menu" },
@@ -30,8 +29,7 @@ export default function MenuPage() {
],
},
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Dine-In", href: "#" },
{ label: "Drive-Through", href: "#" },
{ label: "Delivery", href: "#" },
@@ -39,8 +37,7 @@ export default function MenuPage() {
],
},
{
title: "Contact",
items: [
title: "Contact", items: [
{ label: "Phone: +971 50 401 9009", href: "tel:+971504019009" },
{ label: "The View Tower, Muroor Rd", href: "#" },
{ label: "Abu Dhabi, UAE", href: "#" },
@@ -48,8 +45,7 @@ export default function MenuPage() {
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
@@ -79,9 +75,7 @@ export default function MenuPage() {
id: item.id,
}))}
button={{
text: "Reserve Table",
href: "/reservation",
}}
text: "Reserve Table", href: "/reservation"}}
animateOnLoad={true}
/>
</div>
@@ -93,18 +87,14 @@ export default function MenuPage() {
tag="Signature Menu"
tagIcon={Crown}
background={{ variant: "glowing-orb" }}
imageSrc="http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg?_wi=4"
imageSrc="http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg"
imageAlt="Persian menu dishes showcase"
imagePosition="right"
buttons={[
{
text: "Reserve Now",
href: "/reservation",
},
text: "Reserve Now", href: "/reservation"},
{
text: "View Gallery",
href: "/gallery",
},
text: "View Gallery", href: "/gallery"},
]}
mediaAnimation="slide-up"
/>
@@ -118,26 +108,11 @@ export default function MenuPage() {
tagIcon={Sparkles}
products={[
{
id: "1",
name: "Chelo Kubab Kubideh",
price: "AED 95",
imageSrc: "http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg?_wi=5",
imageAlt: "Chelo Kubab Kubideh with saffron rice",
},
id: "1", name: "Chelo Kubab Kubideh", price: "AED 95", imageSrc: "http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg", imageAlt: "Chelo Kubab Kubideh with saffron rice"},
{
id: "2",
name: "Grilled Lamb Chops",
price: "AED 120",
imageSrc: "http://img.b2bpic.net/free-photo/entrecote-kebab-served-with-arugula-sauce_141793-1171.jpg?_wi=2",
imageAlt: "Premium grilled lamb chops",
},
id: "2", name: "Grilled Lamb Chops", price: "AED 120", imageSrc: "http://img.b2bpic.net/free-photo/entrecote-kebab-served-with-arugula-sauce_141793-1171.jpg", imageAlt: "Premium grilled lamb chops"},
{
id: "3",
name: "Saffron Rice",
price: "AED 45",
imageSrc: "http://img.b2bpic.net/free-photo/piece-cabbage-finely-chopped-cabbage-bowl-marble-surface_114579-48420.jpg?_wi=2",
imageAlt: "Traditional Persian saffron rice",
},
id: "3", name: "Saffron Rice", price: "AED 45", imageSrc: "http://img.b2bpic.net/free-photo/piece-cabbage-finely-chopped-cabbage-bowl-marble-surface_114579-48420.jpg", imageAlt: "Traditional Persian saffron rice"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -154,27 +129,17 @@ export default function MenuPage() {
tagIcon={Utensils}
features={[
{
id: "1",
title: "À la Carte Dining",
description: "Select from our comprehensive menu of traditional and contemporary Persian dishes prepared to order",
imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg?_wi=5",
},
id: 1,
title: "À la Carte Dining", description: "Select from our comprehensive menu of traditional and contemporary Persian dishes prepared to order", imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg"},
{
id: "2",
title: "Chef's Tasting Menu",
description: "Embark on a culinary journey with our curated multi-course tasting menu showcasing seasonal ingredients",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598352.jpg?_wi=3",
},
id: 2,
title: "Chef's Tasting Menu", description: "Embark on a culinary journey with our curated multi-course tasting menu showcasing seasonal ingredients", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598352.jpg"},
{
id: "3",
title: "Private Dining Events",
description: "Host your special occasions with customized menus and dedicated service in our elegant private spaces",
imageSrc: "http://img.b2bpic.net/free-photo/entrecote-kebab-served-with-arugula-sauce_141793-1171.jpg?_wi=3",
},
id: 3,
title: "Private Dining Events", description: "Host your special occasions with customized menus and dedicated service in our elegant private spaces", imageSrc: "http://img.b2bpic.net/free-photo/entrecote-kebab-served-with-arugula-sauce_141793-1171.jpg"},
]}
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
/>
</div>

204
src/app/page.tsx
View File

@@ -38,9 +38,7 @@ export default function HomePage() {
{ name: "Reviews", id: "/reviews" },
]}
button={{
text: "Reserve Table",
href: "/reservation",
}}
text: "Reserve Table", href: "/reservation"}}
animateOnLoad={true}
/>
</div>
@@ -52,20 +50,15 @@ export default function HomePage() {
tag="Luxury Fine Dining"
tagIcon={Crown}
background={{
variant: "glowing-orb",
}}
imageSrc="http://img.b2bpic.net/free-photo/copy-space-arranged-table-dinner_23-2148335008.jpg?_wi=1"
variant: "glowing-orb"}}
imageSrc="http://img.b2bpic.net/free-photo/copy-space-arranged-table-dinner_23-2148335008.jpg"
imageAlt="Joon Persian Restaurant elegant interior"
imagePosition="right"
buttons={[
{
text: "Reserve Now",
href: "/reservation",
},
text: "Reserve Now", href: "/reservation"},
{
text: "View Menu",
href: "/menu",
},
text: "View Menu", href: "/menu"},
]}
mediaAnimation="slide-up"
/>
@@ -79,7 +72,7 @@ export default function HomePage() {
description="Joon Persian Restaurant"
subdescription="The View Tower, Muroor Rd, Abu Dhabi"
icon={ChefHat}
imageSrc="http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg"
imageAlt="Joon Restaurant ambiance and interior design"
mediaAnimation="slide-up"
useInvertedBackground={false}
@@ -94,26 +87,11 @@ export default function HomePage() {
tagIcon={Sparkles}
products={[
{
id: "1",
name: "Chelo Kubab Kubideh",
price: "AED 95",
imageSrc: "http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg?_wi=1",
imageAlt: "Chelo Kubab Kubideh with saffron rice",
},
id: "1", name: "Chelo Kubab Kubideh", price: "AED 95", imageSrc: "http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg", imageAlt: "Chelo Kubab Kubideh with saffron rice"},
{
id: "2",
name: "Grilled Lamb Chops",
price: "AED 120",
imageSrc: "http://img.b2bpic.net/free-photo/entrecote-kebab-served-with-arugula-sauce_141793-1171.jpg?_wi=1",
imageAlt: "Premium grilled lamb chops",
},
id: "2", name: "Grilled Lamb Chops", price: "AED 120", imageSrc: "http://img.b2bpic.net/free-photo/entrecote-kebab-served-with-arugula-sauce_141793-1171.jpg", imageAlt: "Premium grilled lamb chops"},
{
id: "3",
name: "Saffron Rice",
price: "AED 45",
imageSrc: "http://img.b2bpic.net/free-photo/piece-cabbage-finely-chopped-cabbage-bowl-marble-surface_114579-48420.jpg?_wi=1",
imageAlt: "Traditional Persian saffron rice",
},
id: "3", name: "Saffron Rice", price: "AED 45", imageSrc: "http://img.b2bpic.net/free-photo/piece-cabbage-finely-chopped-cabbage-bowl-marble-surface_114579-48420.jpg", imageAlt: "Traditional Persian saffron rice"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
@@ -130,26 +108,11 @@ export default function HomePage() {
tagIcon={Award}
metrics={[
{
id: "1",
title: "4.9 Star Rating",
subtitle: "Based on 699 verified reviews from satisfied guests",
category: "Customer Reviews",
value: "Premium Rated",
},
id: "1", title: "4.9 Star Rating", subtitle: "Based on 699 verified reviews from satisfied guests", category: "Customer Reviews", value: "Premium Rated"},
{
id: "2",
title: "Authentic Persian Cuisine",
subtitle: "Traditional recipes with modern fine dining presentation",
category: "Culinary Excellence",
value: "Award-Winning",
},
id: "2", title: "Authentic Persian Cuisine", subtitle: "Traditional recipes with modern fine dining presentation", category: "Culinary Excellence", value: "Award-Winning"},
{
id: "3",
title: "Multiple Services",
subtitle: "Dine-in, drive-through, and contactless delivery available",
category: "Convenience",
value: "24/7 Available",
},
id: "3", title: "Multiple Services", subtitle: "Dine-in, drive-through, and contactless delivery available", category: "Convenience", value: "24/7 Available"},
]}
animationType="slide-up"
textboxLayout="default"
@@ -165,51 +128,25 @@ export default function HomePage() {
tagIcon={Star}
testimonials={[
{
id: "1",
name: "Sarah Al Mansouri",
role: "Food Critic",
company: "Abu Dhabi Dining Guide",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-sitting-couch-smiling_23-2148095699.jpg?_wi=1",
},
id: "1", name: "Sarah Al Mansouri", role: "Food Critic", company: "Abu Dhabi Dining Guide", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-sitting-couch-smiling_23-2148095699.jpg"},
{
id: "2",
name: "Mohammed Al Shehhi",
role: "Business Executive",
company: "Emirates Corporate",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-business-woman-suit-looks-confident-stands-relaxed-street-poses-near-office-buil_1258-118780.jpg?_wi=1",
},
id: "2", name: "Mohammed Al Shehhi", role: "Business Executive", company: "Emirates Corporate", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-business-woman-suit-looks-confident-stands-relaxed-street-poses-near-office-buil_1258-118780.jpg"},
{
id: "3",
name: "Fatima Al Zaabi",
role: "Travel Influencer",
company: "Explore UAE",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-professional_1098-14759.jpg?_wi=1",
},
id: "3", name: "Fatima Al Zaabi", role: "Travel Influencer", company: "Explore UAE", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-professional_1098-14759.jpg"},
{
id: "4",
name: "Ahmed Al Mazrouei",
role: "Hospitality Manager",
company: "Luxury Hotels Group",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg?_wi=1",
},
id: "4", name: "Ahmed Al Mazrouei", role: "Hospitality Manager", company: "Luxury Hotels Group", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg"},
]}
kpiItems={[
{
value: "699+",
label: "Verified Reviews",
},
value: "699+", label: "Verified Reviews"},
{
value: "4.9/5",
label: "Average Rating",
},
value: "4.9/5", label: "Average Rating"},
{
value: "15+",
label: "Years Excellence",
},
value: "15+", label: "Years Excellence"},
]}
animationType="slide-up"
textboxLayout="default"
@@ -226,26 +163,16 @@ export default function HomePage() {
features={[
{
id: 1,
title: "Dine-In Experience",
description: "Immerse yourself in our elegant ambiance with impeccable service in our luxury dining room",
imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg?_wi=2",
},
title: "Dine-In Experience", description: "Immerse yourself in our elegant ambiance with impeccable service in our luxury dining room", imageSrc: "http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg"},
{
id: 2,
title: "Drive-Through",
description: "Convenient service for those on the go, without compromising on quality or presentation",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598352.jpg?_wi=1",
},
title: "Drive-Through", description: "Convenient service for those on the go, without compromising on quality or presentation", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598352.jpg"},
{
id: 3,
title: "Contactless Delivery",
description: "Safe and reliable delivery of our premium dishes directly to your home or office",
imageSrc: "http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg?_wi=2",
},
title: "Contactless Delivery", description: "Safe and reliable delivery of our premium dishes directly to your home or office", imageSrc: "http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg"},
]}
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
/>
</div>
@@ -256,8 +183,7 @@ export default function HomePage() {
description="Experience exceptional Persian cuisine. Contact us at +971 50 401 9009 or reserve online. Located in The View Tower on Muroor Road, Abu Dhabi."
tagIcon={Phone}
background={{
variant: "rotated-rays-animated-grid",
}}
variant: "rotated-rays-animated-grid"}}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Reserve Now"
@@ -269,87 +195,51 @@ export default function HomePage() {
<FooterSimple
columns={[
{
title: "Navigation",
items: [
title: "Navigation", items: [
{
label: "Home",
href: "/",
},
label: "Home", href: "/"},
{
label: "About",
href: "/about",
},
label: "About", href: "/about"},
{
label: "Menu",
href: "/menu",
},
label: "Menu", href: "/menu"},
{
label: "Gallery",
href: "/gallery",
},
label: "Gallery", href: "/gallery"},
],
},
{
title: "Services",
items: [
title: "Services", items: [
{
label: "Dine-In",
href: "#",
},
label: "Dine-In", href: "#"},
{
label: "Drive-Through",
href: "#",
},
label: "Drive-Through", href: "#"},
{
label: "Delivery",
href: "#",
},
label: "Delivery", href: "#"},
{
label: "Events",
href: "#",
},
label: "Events", href: "#"},
],
},
{
title: "Contact",
items: [
title: "Contact", items: [
{
label: "Phone: +971 50 401 9009",
href: "tel:+971504019009",
},
label: "Phone: +971 50 401 9009", href: "tel:+971504019009"},
{
label: "The View Tower, Muroor Rd",
href: "#",
},
label: "The View Tower, Muroor Rd", href: "#"},
{
label: "Abu Dhabi, UAE",
href: "#",
},
label: "Abu Dhabi, UAE", href: "#"},
{
label: "reservations@joon.ae",
href: "mailto:reservations@joon.ae",
},
label: "reservations@joon.ae", href: "mailto:reservations@joon.ae"},
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
{
label: "Cookie Policy",
href: "#",
},
label: "Cookie Policy", href: "#"},
{
label: "Accessibility",
href: "#",
},
label: "Accessibility", href: "#"},
],
},
]}

42
src/app/reservation/page.tsx
View File

@@ -20,8 +20,7 @@ export default function ReservationPage() {
const footerColumns = [
{
title: "Navigation",
items: [
title: "Navigation", items: [
{ label: "Home", href: "/" },
{ label: "About", href: "/about" },
{ label: "Menu", href: "/menu" },
@@ -29,8 +28,7 @@ export default function ReservationPage() {
],
},
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Dine-In", href: "#" },
{ label: "Drive-Through", href: "#" },
{ label: "Delivery", href: "#" },
@@ -38,8 +36,7 @@ export default function ReservationPage() {
],
},
{
title: "Contact",
items: [
title: "Contact", items: [
{ label: "Phone: +971 50 401 9009", href: "tel:+971504019009" },
{ label: "The View Tower, Muroor Rd", href: "#" },
{ label: "Abu Dhabi, UAE", href: "#" },
@@ -47,8 +44,7 @@ export default function ReservationPage() {
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
@@ -85,7 +81,7 @@ export default function ReservationPage() {
description="Experience the finest Persian cuisine in an atmosphere of elegance and sophistication. Book your reservation now and immerse yourself in culinary luxury at Abu Dhabi's premier fine dining destination."
tag="Luxury Dining"
background={{ variant: "glowing-orb" }}
imageSrc="http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg?_wi=7"
imageSrc="http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg"
imageAlt="Joon Persian Restaurant reservation experience"
imagePosition="right"
buttons={[
@@ -105,32 +101,22 @@ export default function ReservationPage() {
features={[
{
id: 1,
title: "Dine-In Experience",
description:
"Immerse yourself in our elegant ambiance with impeccable service in our luxury dining room",
imageSrc:
"http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg?_wi=8",
},
title: "Dine-In Experience", description:
"Immerse yourself in our elegant ambiance with impeccable service in our luxury dining room", imageSrc:
"http://img.b2bpic.net/free-photo/luxury-dining-room-with-elegant-chandelier-lighting-generated-by-ai_188544-21199.jpg"},
{
id: 2,
title: "Drive-Through",
description:
"Convenient service for those on the go, without compromising on quality or presentation",
imageSrc:
"http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598352.jpg?_wi=4",
},
title: "Drive-Through", description:
"Convenient service for those on the go, without compromising on quality or presentation", imageSrc:
"http://img.b2bpic.net/free-photo/medium-shot-couple-having-lunch-luxury-restaurant_23-2150598352.jpg"},
{
id: 3,
title: "Contactless Delivery",
description:
"Safe and reliable delivery of our premium dishes directly to your home or office",
imageSrc:
"http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg?_wi=6",
},
title: "Contactless Delivery", description:
"Safe and reliable delivery of our premium dishes directly to your home or office", imageSrc:
"http://img.b2bpic.net/free-photo/fried-liver-with-vegetable-set_140725-9673.jpg"},
]}
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
/>
</div>

102
src/components/shared/SvgTextLogo/SvgTextLogo.tsx
View File

@@ -1,51 +1,81 @@
"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;
config?: {
animationEnabled?: boolean;
animationDuration?: number;
animationDelay?: 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 = 48,
fontWeight = 700,
letterSpacing = 2,
config = {},
}) => {
const {
animationEnabled = true,
animationDuration = 2,
animationDelay = 0,
} = config;
const textLength = text.length;
const estimatedWidth = textLength * (fontSize * 0.6) + letterSpacing * (textLength - 1);
const estimatedHeight = fontSize * 1.5;
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
className={`svg-text-logo ${className}`}
viewBox={`0 0 ${estimatedWidth} ${estimatedHeight}`}
width={estimatedWidth}
height={estimatedHeight}
xmlns="http://www.w3.org/2000/svg"
>
<defs>
{animationEnabled && (
<style>
{`
@keyframes fadeInSlide {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animated-text {
animation: fadeInSlide ${animationDuration}s ease-out ${animationDelay}s forwards;
}
`}
</style>
)}
</defs>
<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"
}}
x="50%"
y="50%"
dominantBaseline="middle"
textAnchor="middle"
className={`${animationEnabled ? 'animated-text' : ''} ${textClassName}`}
fontSize={fontSize}
fontWeight={fontWeight}
letterSpacing={letterSpacing}
>
{logoText}
{text}
</text>
</svg>
);
});
};
SvgTextLogo.displayName = "SvgTextLogo";
export default SvgTextLogo;
export default SvgTextLogo;