Merge version_1 into main #2
@@ -19,7 +19,7 @@ export default function LandingPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="noiseDiagonalGradient"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -46,14 +46,14 @@ export default function LandingPage() {
|
||||
tag="Vietnam Travel Reviews"
|
||||
tagIcon={MapPin}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "noiseDiagonalGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/boat-river-surrounded-by-cliffs-covered-greens_181624-45709.jpg", imageAlt: "Vietnam mountain landscape with rice terraces" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/traditional-function-stairs-bridges-ancient-town_1417-587.jpg", imageAlt: "Hanoi street scene with historic architecture" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/local-night-region-fuzzy-house-tourism_1417-1294.jpg", imageAlt: "Hue Imperial temple with traditional architecture" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/animal-habitat_23-2148167367.jpg?_wi=1", imageAlt: "Halong Bay limestone karsts and waters" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/animal-habitat_23-2148167367.jpg", imageAlt: "Halong Bay limestone karsts and waters" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/friends-having-fun-by-seaside_23-2149494823.jpg", imageAlt: "Hoi An ancient town with lantern lights" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-traditional-ao-dai-clothing_23-2149530718.jpg?_wi=1", imageAlt: "Mekong Delta floating market boats" }
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-traditional-ao-dai-clothing_23-2149530718.jpg", imageAlt: "Mekong Delta floating market boats" }
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Browse Reviews", href: "#testimonials" },
|
||||
@@ -131,10 +131,10 @@ export default function LandingPage() {
|
||||
id: "4", name: "Tuan Hoang, Tour Guide Expert", date: "Date: 25 January 2025", title: "Hoi An combines tradition with beauty", quote: "Hoi An's ancient town is perfectly preserved, offering an authentic glimpse into Vietnamese history and culture. The lantern lights at night create pure magic. The friendliness of local artisans and shop owners makes it feel like you're part of a living museum.", tag: "Cultural Heritage", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man_158595-284.jpg", avatarAlt: "Tuan", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-posing-indoors_23-2151038493.jpg", imageAlt: "Tuan in Hoi An ancient town"
|
||||
},
|
||||
{
|
||||
id: "5", name: "An Vu, Beach Lover", date: "Date: 3 February 2025", title: "Mekong Delta left me speechless", quote: "The Mekong Delta is pure authenticity. Floating through the waterways and visiting local villages gave me a real perspective on how river communities live. The sunset over the water, surrounded by fruit orchards and fishermen, was absolutely magical. Highly recommended.", tag: "Rural Experience", avatarSrc: "http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-puts-hand-chin-looks-camera_141793-103509.jpg", avatarAlt: "An", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-traditional-ao-dai-clothing_23-2149530718.jpg?_wi=2", imageAlt: "Mekong Delta floating market"
|
||||
id: "5", name: "An Vu, Beach Lover", date: "Date: 3 February 2025", title: "Mekong Delta left me speechless", quote: "The Mekong Delta is pure authenticity. Floating through the waterways and visiting local villages gave me a real perspective on how river communities live. The sunset over the water, surrounded by fruit orchards and fishermen, was absolutely magical. Highly recommended.", tag: "Rural Experience", avatarSrc: "http://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-puts-hand-chin-looks-camera_141793-103509.jpg", avatarAlt: "An", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-traditional-ao-dai-clothing_23-2149530718.jpg", imageAlt: "Mekong Delta floating market"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Sophie Martin, International Traveler", date: "Date: 12 February 2025", title: "Vietnam offers exceptional value", quote: "Vietnam provides incredible value for travelers. Luxury accommodations, world-class restaurants, and unforgettable experiences cost significantly less than similar offerings elsewhere. The warmth and hospitality of Vietnamese people make every interaction memorable. I'm already planning my return trip.", tag: "Budget Travel", avatarSrc: "http://img.b2bpic.net/free-photo/nurse-portrait-hospital_23-2150780404.jpg", avatarAlt: "Sophie", imageSrc: "http://img.b2bpic.net/free-photo/animal-habitat_23-2148167367.jpg?_wi=2", imageAlt: "Halong Bay scenic view"
|
||||
id: "6", name: "Sophie Martin, International Traveler", date: "Date: 12 February 2025", title: "Vietnam offers exceptional value", quote: "Vietnam provides incredible value for travelers. Luxury accommodations, world-class restaurants, and unforgettable experiences cost significantly less than similar offerings elsewhere. The warmth and hospitality of Vietnamese people make every interaction memorable. I'm already planning my return trip.", tag: "Budget Travel", avatarSrc: "http://img.b2bpic.net/free-photo/nurse-portrait-hospital_23-2150780404.jpg", avatarAlt: "Sophie", imageSrc: "http://img.b2bpic.net/free-photo/animal-habitat_23-2148167367.jpg", imageAlt: "Halong Bay scenic view"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
|
||||
@@ -1,51 +1,38 @@
|
||||
"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;
|
||||
fontSize?: number;
|
||||
fontFamily?: string;
|
||||
fill?: string;
|
||||
}
|
||||
|
||||
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 = '',
|
||||
fontSize = 24,
|
||||
fontFamily = 'Arial, sans-serif',
|
||||
fill = 'currentColor',
|
||||
}) => {
|
||||
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 * 15} ${fontSize + 10}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
>
|
||||
<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}
|
||||
fontSize={fontSize}
|
||||
fontFamily={fontFamily}
|
||||
fill={fill}
|
||||
dominantBaseline="middle"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user