Merge version_1 into main #2
199
src/app/page.tsx
199
src/app/page.tsx
@@ -24,8 +24,7 @@ export default function HomePage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shërbime",
|
||||
items: [
|
||||
title: "Shërbime", items: [
|
||||
{ label: "Menyja", href: "#menu" },
|
||||
{ label: "Rezervime", href: "#contact" },
|
||||
{ label: "Eventi & Festa", href: "#features" },
|
||||
@@ -33,8 +32,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Lidhjet e Shpejtë",
|
||||
items: [
|
||||
title: "Lidhjet e Shpejtë", items: [
|
||||
{ label: "Rreth Nesh", href: "#about" },
|
||||
{ label: "Kontakti", href: "#contact" },
|
||||
{ label: "Politika e Privatësisë", href: "#" },
|
||||
@@ -42,8 +40,7 @@ export default function HomePage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Na Ndiqni",
|
||||
items: [
|
||||
title: "Na Ndiqni", items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "WhatsApp", href: "https://wa.me" },
|
||||
@@ -70,9 +67,7 @@ export default function HomePage() {
|
||||
brandName="Jarna"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Rezervim",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Rezervim", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -90,30 +85,21 @@ export default function HomePage() {
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/rustic-deck-with-patio-furniture-vegetation_23-2150698464.jpg",
|
||||
imageAlt: "Ambient restoranti tradicional",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/rustic-deck-with-patio-furniture-vegetation_23-2150698464.jpg", imageAlt: "Ambient restoranti tradicional"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/fried-meat-with-potatoes-served-with-onions-tomatoes-greens_141793-1068.jpg",
|
||||
imageAlt: "Pjata traditionale shqiptare",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/fried-meat-with-potatoes-served-with-onions-tomatoes-greens_141793-1068.jpg", imageAlt: "Pjata traditionale shqiptare"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/people-sitting-table-with-food_23-2147954299.jpg",
|
||||
imageAlt: "Tavolë me sherbim tradicional",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/people-sitting-table-with-food_23-2147954299.jpg", imageAlt: "Tavolë me sherbim tradicional"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/life-style_1122-1996.jpg",
|
||||
imageAlt: "Kuzhinë autentike shqiptare",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/life-style_1122-1996.jpg", imageAlt: "Kuzhinë autentike shqiptare"},
|
||||
{
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/different-types-tapas-table_23-2147680666.jpg",
|
||||
imageAlt: "Mysafirë duke ngrënë në Jarna",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/different-types-tapas-table_23-2147680666.jpg", imageAlt: "Mysafirë duke ngrënë në Jarna"},
|
||||
]}
|
||||
mediaAnimation="none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -121,10 +107,7 @@ export default function HomePage() {
|
||||
<TextSplitAbout
|
||||
title="Rreth Jarna"
|
||||
description={[
|
||||
"Jarna është më shumë se një restorant - është një udhëtim nëpër traditat dhe vlerat tona kulturore. Për më shumë se dy dekada, ne kemi ruajtur receptat familiale të transmetuara gjeneratë pas gjenerate.",
|
||||
"Misioni ynë është të sjellim në tavolën tuaj shijen autentike të Shqipërisë, duke përdorur lëndë të para lokale të cilësisë më të lartë. Çdo pjatë përgatitet me dashuri, respekt dhe aftësi mastered përmes viteve.",
|
||||
"Në Jarna, bashkësia dhe familja janë në zemër të gjithçkaje. Mirëpresim miqtë e vjetër dhe të rinj me të njëjtën ngrohtësi dhe mirëdashje që përcakton kulturën shqiptare.",
|
||||
]}
|
||||
"Jarna është më shumë se një restorant - është një udhëtim nëpër traditat dhe vlerat tona kulturore. Për më shumë se dy dekada, ne kemi ruajtur receptat familiale të transmetuara gjeneratë pas gjenerate.", "Misioni ynë është të sjellim në tavolën tuaj shijen autentike të Shqipërisë, duke përdorur lëndë të para lokale të cilësisë më të lartë. Çdo pjatë përgatitet me dashuri, respekt dhe aftësi mastered përmes viteve.", "Në Jarna, bashkësia dhe familja janë në zemër të gjithçkaje. Mirëpresim miqtë e vjetër dhe të rinj me të njëjtën ngrohtësi dhe mirëdashje që përcakton kulturën shqiptare."]}
|
||||
buttons={[{ text: "Bisedoni me Ne", href: "#contact" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
@@ -137,71 +120,29 @@ export default function HomePage() {
|
||||
tag="Specialitete"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Jarna Speciale",
|
||||
name: "Tavë Kosi",
|
||||
price: "850 Lekë",
|
||||
rating: 5,
|
||||
reviewCount: "245 komente",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/top-view-delicious-vegetable-meal-sliced-cooked-with-fresh-vegetables-dark-desk-meal-food-dinner-sauce-soup_140725-85990.jpg?_wi=1",
|
||||
imageAlt: "Tavë Kosi - specialiteti ynë",
|
||||
},
|
||||
id: "1", brand: "Jarna Speciale", name: "Tavë Kosi", price: "850 Lekë", rating: 5,
|
||||
reviewCount: "245 komente", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/top-view-delicious-vegetable-meal-sliced-cooked-with-fresh-vegetables-dark-desk-meal-food-dinner-sauce-soup_140725-85990.jpg", imageAlt: "Tavë Kosi - specialiteti ynë"},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Jarna Klasike",
|
||||
name: "Byrek me Spinaq",
|
||||
price: "650 Lekë",
|
||||
rating: 5,
|
||||
reviewCount: "312 komente",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/front-view-pastry-with-meat-delicious-dough-meal-inside-plate-light-desk_140725-40873.jpg?_wi=1",
|
||||
imageAlt: "Byrek me spinaq të ngrohtë",
|
||||
},
|
||||
id: "2", brand: "Jarna Klasike", name: "Byrek me Spinaq", price: "650 Lekë", rating: 5,
|
||||
reviewCount: "312 komente", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/front-view-pastry-with-meat-delicious-dough-meal-inside-plate-light-desk_140725-40873.jpg", imageAlt: "Byrek me spinaq të ngrohtë"},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Jarna Speciale",
|
||||
name: "Fli me Mjalte",
|
||||
price: "450 Lekë",
|
||||
rating: 5,
|
||||
reviewCount: "189 komente",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/cottage-cheese-casserole-with-raisins-semolina_114579-9698.jpg?_wi=1",
|
||||
imageAlt: "Fli tradicional me mjalte",
|
||||
},
|
||||
id: "3", brand: "Jarna Speciale", name: "Fli me Mjalte", price: "450 Lekë", rating: 5,
|
||||
reviewCount: "189 komente", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/cottage-cheese-casserole-with-raisins-semolina_114579-9698.jpg", imageAlt: "Fli tradicional me mjalte"},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Jarna Klasike",
|
||||
name: "Misir i Pjekur",
|
||||
price: "750 Lekë",
|
||||
rating: 5,
|
||||
reviewCount: "198 komente",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/woman-brushing-dough-with-egg-yolk-before-baking-top-view_176474-5527.jpg?_wi=1",
|
||||
imageAlt: "Misir i pjekur në furrë tradicionale",
|
||||
},
|
||||
id: "4", brand: "Jarna Klasike", name: "Misir i Pjekur", price: "750 Lekë", rating: 5,
|
||||
reviewCount: "198 komente", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/woman-brushing-dough-with-egg-yolk-before-baking-top-view_176474-5527.jpg", imageAlt: "Misir i pjekur në furrë tradicionale"},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Jarna Speciale",
|
||||
name: "Qofte me Salcë",
|
||||
price: "550 Lekë",
|
||||
rating: 5,
|
||||
reviewCount: "267 komente",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/top-view-tasty-meatball-bowl-spaghetti-bowl-oil-bottle-tomatoes-parsley-dry-peppers-table_140725-148456.jpg?_wi=1",
|
||||
imageAlt: "Qofte traditionale me salcë speciale",
|
||||
},
|
||||
id: "5", brand: "Jarna Speciale", name: "Qofte me Salcë", price: "550 Lekë", rating: 5,
|
||||
reviewCount: "267 komente", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/top-view-tasty-meatball-bowl-spaghetti-bowl-oil-bottle-tomatoes-parsley-dry-peppers-table_140725-148456.jpg", imageAlt: "Qofte traditionale me salcë speciale"},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Jarna Klasike",
|
||||
name: "Pata Pëlhure",
|
||||
price: "1200 Lekë",
|
||||
rating: 5,
|
||||
reviewCount: "221 komente",
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/person-holding-lamb-ribs-dish_23-2148516949.jpg?_wi=1",
|
||||
imageAlt: "Pata pëlhure në salcë tradicionale",
|
||||
},
|
||||
id: "6", brand: "Jarna Klasike", name: "Pata Pëlhure", price: "1200 Lekë", rating: 5,
|
||||
reviewCount: "221 komente", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/person-holding-lamb-ribs-dish_23-2148516949.jpg", imageAlt: "Pata pëlhure në salcë tradicionale"},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
@@ -218,28 +159,24 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Mjedis Tradicional",
|
||||
description:
|
||||
"Dekorimi autentik shqiptar që ju transporton në zemrën e kulturës sonë të pasur. Çdo kënd tregon një histori.",
|
||||
},
|
||||
title: "Mjedis Tradicional", description:
|
||||
"Dekorimi autentik shqiptar që ju transporton në zemrën e kulturës sonë të pasur. Çdo kënd tregon një histori.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/rustic-deck-with-patio-furniture-vegetation_23-2150698464.jpg", imageAlt: "Mjedis tradicional"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Sherbim i Ngrohtë",
|
||||
description:
|
||||
"Personeli ynë i stëruar me përvojë na jep sigurinë që çdo kërkesë e juaj plotësohet me buzëqeshje dhe përqendrueshmëri.",
|
||||
},
|
||||
title: "Sherbim i Ngrohtë", description:
|
||||
"Personeli ynë i stëruar me përvojë na jep sigurinë që çdo kërkesë e juaj plotësohet me buzëqeshje dhe përqendrueshmëri.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/people-sitting-table-with-food_23-2147954299.jpg", imageAlt: "Sherbim i ngrohtë"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Lëndë të Para Premium",
|
||||
description:
|
||||
"Sigurojmë nga fermat lokale të besuara për të garantuar cilësinë më të lartë në çdo pjatë të servuar.",
|
||||
},
|
||||
title: "Lëndë të Para Premium", description:
|
||||
"Sigurojmë nga fermat lokale të besuara për të garantuar cilësinë më të lartë në çdo pjatë të servuar.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/life-style_1122-1996.jpg", imageAlt: "Lëndë të para premium"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Eventos & Festime",
|
||||
description:
|
||||
"Pikat perfekte për festa familjare, dasmë, dhe eventos të veçanta me menu të personalizuara.",
|
||||
},
|
||||
title: "Eventos & Festime", description:
|
||||
"Pikat perfekte për festa familjare, dasmë, dhe eventos të veçanta me menu të personalizuara.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/different-types-tapas-table_23-2147680666.jpg", imageAlt: "Eventos & festime"},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -254,59 +191,29 @@ export default function HomePage() {
|
||||
tag="Feedback"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Fatmir Dibra",
|
||||
role: "Zyrtari",
|
||||
company: "Tiranë",
|
||||
rating: 5,
|
||||
id: "1", name: "Fatmir Dibra", role: "Zyrtari", company: "Tiranë", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/middle-aged-man-wearing-jacket-laughing-happy_150588-72.jpg?_wi=1",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/middle-aged-man-wearing-jacket-laughing-happy_150588-72.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Luiza Çiço",
|
||||
role: "Mësuesja",
|
||||
company: "Durrës",
|
||||
rating: 5,
|
||||
id: "2", name: "Luiza Çiço", role: "Mësuesja", company: "Durrës", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-businesswoman_329181-1417.jpg?_wi=1",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-businesswoman_329181-1417.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Arben Gega",
|
||||
role: "Arkitekti",
|
||||
company: "Vlorë",
|
||||
rating: 5,
|
||||
id: "3", name: "Arben Gega", role: "Arkitekti", company: "Vlorë", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/blond-man-surprised_1194-2887.jpg?_wi=1",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/blond-man-surprised_1194-2887.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Mira Hasani",
|
||||
role: "Sipërmarrja",
|
||||
company: "Elbasan",
|
||||
rating: 5,
|
||||
id: "4", name: "Mira Hasani", role: "Sipërmarrja", company: "Elbasan", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/businesswoman-posing-meeting_23-2148824909.jpg",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/businesswoman-posing-meeting_23-2148824909.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sokol Rama",
|
||||
role: "Gazetari",
|
||||
company: "Shkodër",
|
||||
rating: 5,
|
||||
id: "5", name: "Sokol Rama", role: "Gazetari", company: "Shkodër", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-business-man-with-backpack_23-2149915912.jpg",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-business-man-with-backpack_23-2149915912.jpg"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Elena Kola",
|
||||
role: "Këngëtare",
|
||||
company: "Prishtinë",
|
||||
rating: 5,
|
||||
id: "6", name: "Elena Kola", role: "Këngëtare", company: "Prishtinë", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-woman-holding-painting-brush_23-2149050517.jpg",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/medium-shot-woman-holding-painting-brush_23-2149050517.jpg"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
|
||||
@@ -20,17 +20,15 @@ export default function AboutPage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Shërbime",
|
||||
items: [
|
||||
title: "Shërbime", items: [
|
||||
{ label: "Menyja", href: "#menu" },
|
||||
{ label: "Rezervime", href: "#contact" },
|
||||
{ label: "Eventi & Festa", href: "#features" },
|
||||
{ label: "eventi & Festa", href: "#features" },
|
||||
{ label: "Dhurata", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Lidhjet e Shpejtë",
|
||||
items: [
|
||||
title: "Lidhjet e Shpejtë", items: [
|
||||
{ label: "Rreth Nesh", href: "#about" },
|
||||
{ label: "Kontakti", href: "#contact" },
|
||||
{ label: "Politika e Privatësisë", href: "#" },
|
||||
@@ -38,8 +36,7 @@ export default function AboutPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Na Ndiqni",
|
||||
items: [
|
||||
title: "Na Ndiqni", items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "WhatsApp", href: "https://wa.me" },
|
||||
@@ -66,9 +63,7 @@ export default function AboutPage() {
|
||||
brandName="Jarna"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Rezervim",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Rezervim", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -76,10 +71,7 @@ export default function AboutPage() {
|
||||
<TextSplitAbout
|
||||
title="Histori Jonë"
|
||||
description={[
|
||||
"Jarna u themelua mbi besimin se ushqimi është më shumë se sustancë - ai është një lidhje me traditat tona, me njerëzit e dashur, dhe me kulturën tonë të pasur.",
|
||||
"Për më shumë se dy dekada, përmes vështirësive dhe sukseseve, ne qëndruam besnik ndaj receptave të gjyshes sonë dhe vlerave të familjes. Çdo servim në tavolën Jarna bartë historinë e një buke të bërë me dashuri.",
|
||||
"Sot, ne krenohemi që të vazhdojmë këtë traditë, duke e sjellë në çdo tavoë një përvojë të vërtetë autentike shqiptare.",
|
||||
]}
|
||||
"Jarna u themelua mbi besimin se ushqimi është më shumë se sustancë - ai është një lidhje me traditat tona, me njerëzit e dashur, dhe me kulturën tonë të pasur.", "Për më shumë se dy dekada, përmes vështirësive dhe sukseseve, ne qëndruam besnik ndaj receptave të gjyshes sonë dhe vlerave të familjes. Çdo servim në tavolën Jarna bartë historinë e një buke të bërë me dashuri.", "Sot, ne krenohemi që të vazhdojmë këtë traditë, duke e sjellë në çdo tavoë një përvojë të vërtetë autentike shqiptare."]}
|
||||
buttons={[{ text: "Shikoni Menynë", href: "/" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
@@ -93,22 +85,19 @@ export default function AboutPage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Autenticitet",
|
||||
description:
|
||||
"Ne nuk e kompromitojmë asnjëherë në autentikitet. Çdo recetë është traditionale, çdo përbërës është i zgjedhur me kujdes.",
|
||||
},
|
||||
title: "Autenticitet", description:
|
||||
"Ne nuk e kompromitojmë asnjëherë në autentikitet. Çdo recetë është traditionale, çdo përbërës është i zgjedhur me kujdes.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/rustic-deck-with-patio-furniture-vegetation_23-2150698464.jpg", imageAlt: "Autenticitet"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Dashurinë për Ushqimin",
|
||||
description:
|
||||
"Gatimi është për ne forma e artit. Personeli ynë gaton me pasionin e një artisti, duke respektuar traditën e kuzhinës shqiptare.",
|
||||
},
|
||||
title: "Dashurinë për Ushqimin", description:
|
||||
"Gatimi është për ne forma e artit. Personeli ynë gaton me pasionin e një artisti, duke respektuar traditën e kuzhinës shqiptare.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/fried-meat-with-potatoes-served-with-onions-tomatoes-greens_141793-1068.jpg", imageAlt: "Dashuri për ushqimin"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Cilësia",
|
||||
description:
|
||||
"Vetëm lëndët e para më të mira hyjnë në kuzhinën tonë. Marrim drejtpërdrejt nga fermat lokale të besuara.",
|
||||
},
|
||||
title: "Cilësia", description:
|
||||
"Vetëm lëndët e para më të mira hyjnë në kuzhinën tonë. Marrim drejtpërdrejt nga fermat lokale të besuara.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/life-style_1122-1996.jpg", imageAlt: "Cilësia premium"},
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -123,32 +112,17 @@ export default function AboutPage() {
|
||||
tag="Zërat e Tyre"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Fatmir Dibra",
|
||||
role: "Zyrtari",
|
||||
company: "Tiranë",
|
||||
rating: 5,
|
||||
id: "1", name: "Fatmir Dibra", role: "Zyrtari", company: "Tiranë", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/middle-aged-man-wearing-jacket-laughing-happy_150588-72.jpg?_wi=2",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/middle-aged-man-wearing-jacket-laughing-happy_150588-72.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Luiza Çiço",
|
||||
role: "Mësuesja",
|
||||
company: "Durrës",
|
||||
rating: 5,
|
||||
id: "2", name: "Luiza Çiço", role: "Mësuesja", company: "Durrës", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-businesswoman_329181-1417.jpg?_wi=2",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-businesswoman_329181-1417.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Arben Gega",
|
||||
role: "Arkitekti",
|
||||
company: "Vlorë",
|
||||
rating: 5,
|
||||
id: "3", name: "Arben Gega", role: "Arkitekti", company: "Vlorë", rating: 5,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/blond-man-surprised_1194-2887.jpg?_wi=2",
|
||||
},
|
||||
"http://img.b2bpic.net/free-photo/blond-man-surprised_1194-2887.jpg"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
|
||||
@@ -1,51 +1,47 @@
|
||||
"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,
|
||||
}) => {
|
||||
// Calculate approximate text width for viewBox
|
||||
const charWidth = fontSize * 0.6;
|
||||
const totalWidth = text.length * charWidth + letterSpacing * (text.length - 1);
|
||||
const padding = 10;
|
||||
const viewBoxWidth = totalWidth + padding * 2;
|
||||
const viewBoxHeight = fontSize + padding * 2;
|
||||
|
||||
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 ${viewBoxWidth} ${viewBoxHeight}`}
|
||||
className={className}
|
||||
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"
|
||||
}}
|
||||
x={padding}
|
||||
y={fontSize + padding / 2}
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
letterSpacing={letterSpacing}
|
||||
dominantBaseline="middle"
|
||||
textAnchor="start"
|
||||
className={textClassName}
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user