Merge version_5_1776718179590 into main

Merge version_5_1776718179590 into main

src/App.tsx

@@ -40,7 +40,7 @@ export default function App() {
     />
   </div>
 
-  <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero" className="relative">
       <HeroBillboard
       tag="Since 1994"
       title="Artisan Bread & Pastries"
@@ -57,7 +57,7 @@ export default function App() {
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="about" data-section="about" className="relative">
       <AboutMediaOverlay
       tag="Our Story"
       title="Quality You Can Taste"
@@ -70,7 +70,7 @@ export default function App() {
     />
   </div>
 
-  <div id="products" data-section="products">
+  <div id="products" data-section="products" className="relative">
       <ProductMediaCards
       tag="Our Bakes"
       title="Fresh From The Oven"
@@ -110,7 +110,7 @@ export default function App() {
     />
   </div>
 
-  <div id="features" data-section="features">
+  <div id="features" data-section="features" className="relative">
       <FeaturesTaggedCards
       tag="Our Philosophy"
       title="Why Choose Us?"
@@ -138,7 +138,7 @@ export default function App() {
     />
   </div>
 
-  <div id="metrics" data-section="metrics">
+  <div id="metrics" data-section="metrics" className="relative">
       <MetricsSimpleCards
       tag="Our Impact"
       title="By The Numbers"
@@ -160,7 +160,7 @@ export default function App() {
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
+  <div id="testimonials" data-section="testimonials" className="relative">
       <TestimonialMarqueeCards
       tag="Loved By Locals"
       title="What People Say"
@@ -200,7 +200,7 @@ export default function App() {
     />
   </div>
 
-  <div id="faq" data-section="faq">
+  <div id="faq" data-section="faq" className="relative">
       <FaqTwoColumn
       tag="Questions?"
       title="Common Inquiries"
@@ -226,7 +226,7 @@ export default function App() {
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div id="contact" data-section="contact" className="relative">
       <ContactSplitEmail
       tag="Get in touch"
       title="Stay Connected"

src/components/sections/about/AboutMediaOverlay.tsx

@@ -2,7 +2,7 @@ import { motion } from "motion/react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import GlassmorphicBadge from "@/components/GlassmorphicBadge";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import { getRandomFact } from "@/utils/facts";
 
 type AboutMediaOverlayProps = {
@@ -24,7 +24,9 @@ const AboutMediaOverlay = ({
 }: AboutMediaOverlayProps) => {
   return (
     <section aria-label="About section" className="py-20 relative">
-      <GlassmorphicBadge fact={getRandomFact()} />
+      <div className="w-full text-center mb-4">
+        <GlassmorphicBadge fact={getRandomFact()} />
+      </div>
       <div className="relative flex items-center justify-center py-8 md:py-12 mx-auto w-content-width rounded overflow-hidden">
         <div className="absolute inset-0">
           <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} />

src/components/sections/contact/ContactSplitEmail.tsx

@@ -3,6 +3,8 @@ import { motion } from "motion/react";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import { sendContactEmail } from "@/lib/api/email";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
+import { getRandomFact } from "@/utils/facts";
 
 type ContactSplitEmailProps = {
   tag: string;
@@ -38,6 +40,9 @@ const ContactSplitEmail = ({
 
   return (
     <section aria-label="Contact section" className="py-20">
+      <div className="w-full text-center mb-8">
+        <GlassmorphicBadge fact={getRandomFact()} />
+      </div>
       <div className="w-content-width mx-auto">
         <motion.div
           initial={{ opacity: 0, y: 20 }}

src/components/sections/faq/FaqTwoColumn.tsx

@@ -4,6 +4,8 @@ import { Plus } from "lucide-react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import { cls } from "@/lib/utils";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
+import { getRandomFact } from "@/utils/facts";
 
 type FaqItem = {
   question: string;
@@ -72,6 +74,9 @@ const FaqTwoColumn = ({
 
   return (
     <section aria-label="FAQ section" className="py-20">
+      <div className="w-full text-center mb-8">
+        <GlassmorphicBadge fact={getRandomFact()} />
+      </div>
       <div className="w-content-width mx-auto flex flex-col gap-8">
         <div className="flex flex-col items-center gap-3 md:gap-2">
           <span className="card rounded px-3 py-1 text-sm">{tag}</span>

src/components/sections/features/FeaturesTaggedCards.tsx

@@ -1,4 +1,4 @@
-import GlassmorphicBadge from "@/components/GlassmorphicBadge";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import { getRandomFact } from "@/utils/facts";
 
 type FeatureItem = {
@@ -18,9 +18,11 @@ type FeaturesTaggedCardsProps = {
 const FeaturesTaggedCards = ({ tag, title, description, items }: FeaturesTaggedCardsProps) => {
   return (
     <section className="relative py-20 bg-background text-foreground">
-      <GlassmorphicBadge fact={getRandomFact()} />
+      <div className="w-full text-center mb-12">
+        <GlassmorphicBadge fact={getRandomFact()} />
+      </div>
       <div className="container mx-auto px-4">
-        <div className="text-center mb-12">
+        <div className="text-center">
           <span className="px-3 py-1 text-sm rounded card">{tag}</span>
           <h2 className="text-6xl font-medium text-center text-balance mt-4">{title}</h2>
           <p className="md:max-w-6/10 text-lg leading-tight text-center mx-auto mt-4">{description}</p>

src/components/sections/footer/FooterBasic.tsx

@@ -1,4 +1,6 @@
 import { useButtonClick } from "@/hooks/useButtonClick";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
+import { getRandomFact } from "@/utils/facts";
 
 type FooterLink = {
   label: string;
@@ -35,8 +37,11 @@ const FooterBasic = ({
 }) => {
   return (
     <footer aria-label="Site footer" className="w-full pt-20 pb-10">
+      <div className="w-full text-center mb-10">
+        <GlassmorphicBadge fact={getRandomFact()} />
+      </div>
       <div className="w-content-width mx-auto">
-        <div className="w-full flex flex-wrap justify-between gap-y-10 mb-10">
+        <div className="w-full flex flex-wrap justify-between gap-y-10">
           {columns.map((column) => (
             <div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
               <h3 className="text-sm opacity-50">{column.title}</h3>
@@ -47,7 +52,7 @@ const FooterBasic = ({
           ))}
         </div>
 
-        <div className="w-full h-px bg-foreground/20" />
+        <div className="w-full h-px bg-foreground/20 mt-10" />
 
         <div className="w-full flex items-center justify-between pt-5">
           <span className="text-sm opacity-50">{leftText}</span>

src/components/sections/hero/HeroBillboard.tsx

@@ -1,5 +1,5 @@
 import Button from "@/components/ui/Button";
-import GlassmorphicBadge from "@/components/GlassmorphicBadge";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import { getRandomFact } from "@/utils/facts";
 
 type HeroBillboardProps = {
@@ -21,7 +21,9 @@ const HeroBillboard = ({
 }: HeroBillboardProps) => {
   return (
     <section className="relative py-20 bg-background text-foreground">
-      <GlassmorphicBadge fact={getRandomFact()} />
+      <div className="w-full text-center mb-4">
+        <GlassmorphicBadge fact={getRandomFact()} />
+      </div>
       <div className="container mx-auto px-4 text-center">
         <span className="px-3 py-1 text-sm card rounded">{tag}</span>
         <h1 className="text-6xl font-medium text-balance mt-4">{title}</h1>

src/components/sections/metrics/MetricsSimpleCards.tsx

@@ -1,4 +1,4 @@
-import GlassmorphicBadge from "@/components/GlassmorphicBadge";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import { getRandomFact } from "@/utils/facts";
 
 type Metric = {
@@ -16,9 +16,11 @@ type MetricsSimpleCardsProps = {
 const MetricsSimpleCards = ({ tag, title, description, metrics }: MetricsSimpleCardsProps) => {
   return (
     <section className="relative py-20 bg-background text-foreground">
-      <GlassmorphicBadge fact={getRandomFact()} />
+      <div className="w-full text-center mb-12">
+        <GlassmorphicBadge fact={getRandomFact()} />
+      </div>
       <div className="container mx-auto px-4">
-        <div className="text-center mb-12">
+        <div className="text-center">
           <span className="px-3 py-1 text-sm rounded card">{tag}</span>
           <h2 className="text-6xl font-medium text-center text-balance mt-4">{title}</h2>
           <p className="md:max-w-6/10 text-lg leading-tight text-center mx-auto mt-4">{description}</p>

src/components/sections/product/ProductMediaCards.tsx

@@ -1,4 +1,4 @@
-import GlassmorphicBadge from "@/components/GlassmorphicBadge";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import { getRandomFact } from "@/utils/facts";
 
 type Product = {
@@ -17,9 +17,11 @@ type ProductMediaCardsProps = {
 const ProductMediaCards = ({ tag, title, description, products }: ProductMediaCardsProps) => {
   return (
     <section className="relative py-20 bg-background text-foreground">
-      <GlassmorphicBadge fact={getRandomFact()} />
+      <div className="w-full text-center mb-12">
+        <GlassmorphicBadge fact={getRandomFact()} />
+      </div>
       <div className="container mx-auto px-4">
-        <div className="text-center mb-12">
+        <div className="text-center">
           <span className="px-3 py-1 text-sm rounded card">{tag}</span>
           <h2 className="text-6xl font-medium text-center text-balance mt-4">{title}</h2>
           <p className="md:max-w-6/10 text-lg leading-tight text-center mx-auto mt-4">{description}</p>

src/components/sections/testimonial/TestimonialMarqueeCards.tsx

@@ -2,7 +2,7 @@ import { motion } from "motion/react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import GlassmorphicBadge from "@/components/GlassmorphicBadge";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
 import { getRandomFact } from "@/utils/facts";
 
 type Testimonial = {
@@ -32,6 +32,9 @@ const TestimonialMarqueeCards = ({
 
   return (
     <section aria-label="Testimonials section" className="py-20">
+      <div className="w-full text-center mb-8">
+        <GlassmorphicBadge fact={getRandomFact()} />
+      </div>
       <div className="flex flex-col gap-8">
         <div className="flex flex-col items-center gap-3 md:gap-2 w-content-width mx-auto">
           <span className="px-3 py-1 text-sm rounded card">{tag}</span>

src/components/ui/GlassmorphicBadge.tsx

@@ -0,0 +1,9 @@
+const GlassmorphicBadge = ({ fact }: { fact: string }) => {
+  return (
+    <div className="inline-block backdrop-blur-sm bg-white/30 rounded-lg px-3 py-1 text-sm text-foreground max-w-xs text-balance">
+      {fact}
+    </div>
+  );
+};
+
+export default GlassmorphicBadge;

src/components/ui/NavbarCentered.tsx

@@ -4,6 +4,8 @@ import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
+import GlassmorphicBadge from "@/components/ui/GlassmorphicBadge";
+import { getRandomFact } from "@/utils/facts";
 
 interface NavbarCenteredProps {
   logo: string;
@@ -60,10 +62,13 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
       <nav
         className={cls(
           "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
+          isScrolled ? "py-2 bg-background/80 backdrop-blur-sm" : "py-4 bg-background/0 backdrop-blur-0"
         )}
       >
-        <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
+        <div className="w-full text-center">
+          <GlassmorphicBadge fact={getRandomFact()} />
+        </div>
+        <div className="relative flex items-center justify-between w-content-width mx-auto mt-2">
           <Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
 
           <div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">

src/index.css

@@ -175,3 +175,11 @@ h6 {
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   border: 1px solid var(--color-secondary-cta);
 }
+
+.glassmorphic-badge {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}