diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx index 943d260..444a489 100644 --- a/src/app/gallery/page.tsx +++ b/src/app/gallery/page.tsx @@ -15,7 +15,7 @@ export default function GalleryPage() { borderRadius="rounded" contentWidth="mediumSmall" sizing="mediumLargeSizeMediumTitles" - background="floatingGradient" + background="circleGradient" cardStyle="subtle-shadow" primaryButtonStyle="double-inset" secondaryButtonStyle="layered" @@ -41,42 +41,26 @@ export default function GalleryPage() { description="Step into BrewHaven and experience our inviting spaces, carefully crafted beverages, and delicious homemade treats. Our gallery showcases the heart and soul of our community café." tag="Gallery Showcase" tagIcon={Coffee} - background={{ variant: "floatingGradient" }} + background={{ variant: "plain" }} leftCarouselItems={[ { - imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-cup-tea-teapot-books-candle-candlestick_169016-10127.jpg?_wi=5", - imageAlt: "Specialty coffee preparation", - }, + imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-cup-tea-teapot-books-candle-candlestick_169016-10127.jpg", imageAlt: "Specialty coffee preparation"}, { - imageSrc: "http://img.b2bpic.net/free-photo/ice-cream-sundae-edible-waffle-bowl_1339-2876.jpg?_wi=4", - imageAlt: "Delicious desserts", - }, + imageSrc: "http://img.b2bpic.net/free-photo/ice-cream-sundae-edible-waffle-bowl_1339-2876.jpg", imageAlt: "Delicious desserts"}, { - imageSrc: "http://img.b2bpic.net/free-photo/best-place-town-meeting-with-friends_329181-2888.jpg?_wi=5", - imageAlt: "People working and studying", - }, + imageSrc: "http://img.b2bpic.net/free-photo/best-place-town-meeting-with-friends_329181-2888.jpg", imageAlt: "People working and studying"}, { - imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-chair-by-christmas-tree_1303-12424.jpg?_wi=3", - imageAlt: "Cozy café seating", - }, + imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-chair-by-christmas-tree_1303-12424.jpg", imageAlt: "Cozy café seating"}, ]} rightCarouselItems={[ { - imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-worker-coffee-shop_23-2148366546.jpg?_wi=2", - imageAlt: "Fresh coffee drinks", - }, + imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-worker-coffee-shop_23-2148366546.jpg", imageAlt: "Fresh coffee drinks"}, { - imageSrc: "http://img.b2bpic.net/free-photo/macaroons-plastic-box_23-2147787082.jpg?_wi=5", - imageAlt: "Fresh desserts and pastries", - }, + imageSrc: "http://img.b2bpic.net/free-photo/macaroons-plastic-box_23-2147787082.jpg", imageAlt: "Fresh desserts and pastries"}, { - imageSrc: "http://img.b2bpic.net/free-photo/non-binary-person-wearing-retro-clothes-enjoying-coffee_23-2148757536.jpg?_wi=2", - imageAlt: "Comfortable seating area", - }, + imageSrc: "http://img.b2bpic.net/free-photo/non-binary-person-wearing-retro-clothes-enjoying-coffee_23-2148757536.jpg", imageAlt: "Comfortable seating area"}, { - imageSrc: "http://img.b2bpic.net/free-photo/smiling-girl-barista-cafe-preparing-cappuccino-coffee-machine-steaming-milk-wearing-uniform_1258-199307.jpg?_wi=4", - imageAlt: "Quality café experience", - }, + imageSrc: "http://img.b2bpic.net/free-photo/smiling-girl-barista-cafe-preparing-cappuccino-coffee-machine-steaming-milk-wearing-uniform_1258-199307.jpg", imageAlt: "Quality café experience"}, ]} buttons={[ { text: "Visit Us", href: "/contact" }, @@ -89,24 +73,21 @@ export default function GalleryPage() { (function SvgTextLogo({ - logoText, - adjustHeightFactor, - verticalAlign = "top", - className = "", -}) { - const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor); +export const SvgTextLogo = ({ + text, + fontSize = 48, + fontWeight = "bold", fontFamily = "system-ui, -apple-system, sans-serif", fill = "#000000", animated = false, + className = ""}: SvgTextLogoProps) => { + const textLength = useMemo(() => { + const canvas = typeof document !== "undefined" ? document.createElement("canvas") : null; + if (!canvas) return text.length * fontSize * 0.6; + const context = canvas.getContext("2d"); + if (!context) return text.length * fontSize * 0.6; + context.font = `${fontWeight} ${fontSize}px ${fontFamily}`; + return context.measureText(text).width; + }, [text, fontSize, fontWeight, fontFamily]); + + const padding = 20; + const width = textLength + padding * 2; + const height = fontSize + padding * 2; + + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.02, + }, + }, + }; + + const letterVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.5, + }, + }, + }; + + if (!animated) { + return ( + + + {text} + + + ); + } return ( - - - {logoText} - - + {text.split("").map((char, index) => ( + + {char} + + ))} + ); -}); +}; -SvgTextLogo.displayName = "SvgTextLogo"; - -export default SvgTextLogo; +export default SvgTextLogo; \ No newline at end of file