From dbed34976eaafddf910b8caa03d0475f712628d4 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Tue, 24 Feb 2026 14:22:28 +0200
Subject: [PATCH] Bob AI: Add glossy effect to all headlines across the page
 using CSS

---
 src/app/page.tsx | 70 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 32eef91..67cf92d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -46,19 +46,63 @@ setBubbles((prev) => [...prev, newBubble]);
     setIsVideoOpen(false);
     setVideoUrl('');
   };
-  return (
-    <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="mediumLargeSizeMediumTitles"
-      background="circleGradient"
-      cardStyle="outline"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="layered"
-      headingFontWeight="normal"
-    >
+   return (
+     <ThemeProvider
+       defaultButtonVariant="hover-magnetic"
+       defaultTextAnimation="reveal-blur"
+       borderRadius="soft"
+       contentWidth="smallMedium"
+       sizing="mediumLargeSizeMediumTitles"
+       background="circleGradient"
+       cardStyle="outline"
+       primaryButtonStyle="radial-glow"
+       secondaryButtonStyle="layered"
+       headingFontWeight="normal"
+     >
+       <style>{`
+         @keyframes shimmer {
+           0% {
+             background-position: -1000px 0;
+           }
+           100% {
+             background-position: 1000px 0;
+           }
+         }
+
+         h1, h2, h3 {
+           position: relative;
+           background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
+           backdrop-filter: blur(10px);
+           -webkit-backdrop-filter: blur(10px);
+           border: 1px solid rgba(255, 255, 255, 0.2);
+           border-radius: 8px;
+           padding: 12px 16px;
+           box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.3);
+           animation: shimmer 3s infinite;
+           background-size: 1000px 100%;
+           background-image: 
+             linear-gradient(90deg, 
+               rgba(255, 255, 255, 0) 0%, 
+               rgba(255, 255, 255, 0.2) 50%, 
+               rgba(255, 255, 255, 0) 100%),
+             linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
+         }
+
+         h1 {
+           font-size: 2.5rem;
+           letter-spacing: -0.02em;
+         }
+
+         h2 {
+           font-size: 2rem;
+           letter-spacing: -0.015em;
+         }
+
+         h3 {
+           font-size: 1.5rem;
+           letter-spacing: -0.01em;
+         }
+       `}</style>
       {/* Video Popup Modal */}
       {isVideoOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">