From d75bded1d5c733d7061373efb04ff5bc46a13802 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 14 Mar 2026 07:34:50 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 49 ++++++++++++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d8f2ae2..f2ddf2f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -68,14 +68,14 @@ export default function HomePage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
+      <div id="nav" data-section="nav" className="transition-all duration-300 ease-out">
         <NavbarStyleApple
           brandName="NIVARO"
           navItems={navItems}
         />
       </div>
 
-      <div id="hero-home" data-section="hero-home">
+      <div id="hero-home" data-section="hero-home" className="transition-all duration-500 ease-out">
         <HeroBillboardTestimonial
           title="Born for the Bold"
           description="Premium luxury streetwear designed for those who dare to stand out. Elevate your street presence with NIVARO's exclusive collections."
@@ -110,12 +110,12 @@ export default function HomePage() {
           containerClassName="max-w-7xl mx-auto px-4"
           titleClassName="text-5xl md:text-7xl font-bold text-white"
           descriptionClassName="text-lg md:text-xl text-gray-300"
-          buttonClassName="px-8 py-3 rounded-lg font-semibold"
+          buttonClassName="px-8 py-3 rounded-lg font-semibold transition-all duration-300 hover:scale-105"
           mediaWrapperClassName="w-full h-full"
         />
       </div>
 
-      <div id="featured-products-home" data-section="featured-products-home">
+      <div id="featured-products-home" data-section="featured-products-home" className="transition-all duration-500 ease-out">
         <ProductCardFour
           title="Featured Essentials"
           description="Handpicked pieces that define NIVARO. Quality, style, and attitude in every collection."
@@ -143,14 +143,15 @@ export default function HomePage() {
               id: "prod-joggers-1",              name: "Luxury Joggers",              price: "$129",              variant: "Performance Blend",              imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-model-street_1303-9381.jpg?_wi=1",              imageAlt: "NIVARO luxury joggers",              isFavorited: false
             }
           ]}
-          className="w-full py-20"
+          className="w-full py-20 transition-all duration-500 ease-out"
           containerClassName="max-w-7xl mx-auto px-4"
           textBoxTitleClassName="text-4xl md:text-5xl font-bold text-white"
           textBoxDescriptionClassName="text-lg text-gray-300"
+          cardClassName="transition-all duration-300 hover:shadow-2xl hover:scale-102"
         />
       </div>
 
-      <div id="brand-story-home" data-section="brand-story-home">
+      <div id="brand-story-home" data-section="brand-story-home" className="transition-all duration-500 ease-out">
         <TestimonialAboutCard
           tag="Our Heritage"
           tagIcon={Award}
@@ -163,15 +164,15 @@ export default function HomePage() {
           imageAlt="NIVARO brand story"
           mediaAnimation="slide-up"
           useInvertedBackground={false}
-          className="w-full py-20"
+          className="w-full py-20 transition-all duration-500 ease-out"
           containerClassName="max-w-7xl mx-auto px-4"
           titleClassName="text-4xl md:text-5xl font-bold text-white"
           descriptionClassName="text-lg text-gray-300"
-          subdescriptionClassName="text-base text-gray-400"
+          cardClassName="transition-all duration-300 hover:shadow-xl"
         />
       </div>
 
-      <div id="latest-drop-home" data-section="latest-drop-home">
+      <div id="latest-drop-home" data-section="latest-drop-home" className="transition-all duration-500 ease-out">
         <FeatureCardTwentySeven
           title="Latest Drop"
           description="This season's most anticipated collection. Limited quantities available."
@@ -206,14 +207,15 @@ export default function HomePage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
-          className="w-full py-20"
+          className="w-full py-20 transition-all duration-500 ease-out"
           containerClassName="max-w-7xl mx-auto px-4"
           textBoxTitleClassName="text-4xl md:text-5xl font-bold text-white"
           textBoxDescriptionClassName="text-lg text-gray-300"
+          cardClassName="transition-all duration-300 hover:shadow-2xl hover:scale-102"
         />
       </div>
 
-      <div id="social-proof-home" data-section="social-proof-home">
+      <div id="social-proof-home" data-section="social-proof-home" className="transition-all duration-500 ease-out">
         <SocialProofOne
           names={[
             "Hypebeast",            "Complex",            "The Hundreds",            "Sneaker News",            "Highsnobiety",            "Grailed",            "Culture Kings",            "Streetwear Daily"
@@ -224,14 +226,16 @@ export default function HomePage() {
           useInvertedBackground={false}
           speed={40}
           showCard={true}
-          className="w-full py-16"
+          className="w-full py-16 transition-all duration-500 ease-out"
           containerClassName="max-w-7xl mx-auto px-4"
           textBoxTitleClassName="text-3xl md:text-4xl font-bold text-white"
           textBoxDescriptionClassName="text-base text-gray-400"
+          logoCardClassName="transition-all duration-300 ease-out hover:shadow-lg hover:scale-105 hover:-translate-y-1"
+          logoItemClassName="transition-all duration-300 ease-out hover:opacity-100 hover:brightness-110"
         />
       </div>
 
-      <div id="newsletter-contact-home" data-section="newsletter-contact-home">
+      <div id="newsletter-contact-home" data-section="newsletter-contact-home" className="transition-all duration-500 ease-out">
         <ContactCenter
           tag="Stay Connected"
           tagIcon={Mail}
@@ -243,25 +247,26 @@ export default function HomePage() {
           inputPlaceholder="Enter your email"
           buttonText="Subscribe"
           termsText="By subscribing, you agree to receive marketing emails from NIVARO. You can unsubscribe at any time."
-          className="w-full py-20"
+          className="w-full py-20 transition-all duration-500 ease-out"
           containerClassName="max-w-4xl mx-auto px-4"
           titleClassName="text-4xl md:text-5xl font-bold text-white"
           descriptionClassName="text-lg text-gray-300"
-          inputClassName="bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-6 py-3 text-white placeholder-gray-400"
-          buttonClassName="bg-white text-black px-8 py-3 rounded-lg font-bold hover:bg-opacity-90"
-          buttonTextClassName="font-bold"
+          formWrapperClassName="transition-all duration-300 ease-out hover:opacity-100"
+          inputClassName="bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-6 py-3 text-white placeholder-gray-400 transition-all duration-300 ease-out focus:bg-opacity-20 focus:border-opacity-40 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-20"
+          buttonClassName="bg-white text-black px-8 py-3 rounded-lg font-bold hover:bg-opacity-90 transition-all duration-300 ease-out hover:shadow-lg hover:scale-105 active:scale-95"
+          buttonTextClassName="font-bold transition-all duration-300"
         />
       </div>
 
-      <div id="footer-home" data-section="footer-home">
+      <div id="footer-home" data-section="footer-home" className="transition-all duration-300 ease-out">
         <FooterBaseReveal
           columns={footerColumns}
           copyrightText="© 2024 NIVARO. All rights reserved. Born for the Bold."
-          className="w-full bg-black"
+          className="w-full bg-black transition-all duration-300 ease-out"
           containerClassName="max-w-7xl mx-auto px-4 py-16"
-          columnTitleClassName="text-white font-bold text-lg mb-6"
-          columnItemClassName="text-gray-400 hover:text-white transition-colors"
-          copyrightTextClassName="text-gray-500 text-sm"
+          columnTitleClassName="text-white font-bold text-lg mb-6 transition-all duration-300"
+          columnItemClassName="text-gray-400 hover:text-white transition-all duration-300 ease-out hover:translate-x-1"
+          copyrightTextClassName="text-gray-500 text-sm transition-all duration-300"
         />
       </div>
     </ThemeProvider>