feat: enhance hero section and story sections with improved animations and styling - Remove animation delays from hero section for immediate appearance - Restore letter-reveal animations for BOLD/ENERGY/MOMENT titles - Add 3D glass effects to SoundCloud widgets - Remove borders from SoundCloud sections for cleaner look - Add scroll to top button with glassmorphic design - Improve typography and visual effects throughout

Author: artgolwebdev

et --hard 9fc9b00

@@ -0,0 +1,10 @@
+f498d9a - Refactor: Add snap scroll effects and make page brighter - Remove dark overlays and backgrounds - Add CSS scroll-snap properties - Update all sections with lighter colors - Implement background image autoslider - Clean up unnecessary components and imports
+7de8c09 - ✨ Add comprehensive glow effects and refactor brightness system - Enhanced HeroSection with floating glow orbs and neon effects - Added ambient glow backgrounds to all sections - Enhanced StorySection, ServicesSection, and TestimonialsSection with glow effects - Removed problematic brightness filters and replaced with proper glow overlays - Added floating animated orbs throughout the page for depth and movement - Improved visual hierarchy with enhanced drop shadows and glows - Unified futuristic design across all sections
+1728d4f - fix: make header fully visible on all screen sizes with responsive navigation and CTA button
+cb2dd60 - feat: add glassmorphic header with animated navigation and enhanced section animations
+e3b23e0 - fix: resolve scrollToSection reference error with proper function definitions and useCallback
+1d042cd - feat: implement enhanced section scroll snapping with improved navigation and smooth transitions
+78970c1 - feat: enhance hero section with modern TV background, auto-sliding videos, and futuristic UI elements
+9fc9b00 - config
+a0e5b20 - fix: update GitHub Actions workflow to use modern deploy-pages action
+59c56d1 - refactor: extract constants and Logo component, make README minimalistic

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import { LoadingScreen } from "./components/LoadingScreen";
 import { AnimatedLogo } from "./components/AnimatedLogo";
@@ -13,6 +13,7 @@ import { SmoothScrollProvider } from "./components/SmoothScrollContext";
 import { SectionNavigation } from "./components/SectionNavigation";
 import { Logo } from "./components/Logo";
 import { storyData, sectionNames, sectionDividers } from "./constants";
+import { ScrollToTop } from "./components/ScrollToTop";
 
 export default function App() {
   const [isLoading, setIsLoading] = useState(true);
@@ -100,6 +101,12 @@ export default function App() {
                 title={section.title}
                 backgroundImage={section.backgroundImage}
                 index={index}
+                soundcloudTrack={section.soundcloudTrack}
+                trackTitle={section.trackTitle}
+                artist={section.artist}
+                duration={section.duration}
+                trackUrl={section.trackUrl}
+                artistUrl={section.artistUrl}
               />
             ))}
 
@@ -168,6 +175,9 @@ export default function App() {
 
       {/* Toast notifications */}
       <Toaster />
+      
+      {/* Scroll to Top Button */}
+      <ScrollToTop />
     </div>
   );
 }

src/components/HeroSection.tsx

@@ -44,7 +44,7 @@ export function HeroSection() {
         <motion.h1
           initial={{ opacity: 0, y: 50 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 2.5 }}
+          transition={{ duration: 1 }}
           className="text-4xl sm:text-6xl lg:text-8xl xl:text-9xl font-black text-white mb-6 leading-tight tracking-tight"
           style={{ fontFamily: "'Space Grotesk', 'Inter', sans-serif" }}
         >
@@ -57,7 +57,7 @@ export function HeroSection() {
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 3.2 }}
+          transition={{ duration: 0.8 }}
           className="mb-6"
         >
           <motion.p
@@ -81,7 +81,7 @@ export function HeroSection() {
         <motion.div
           initial={{ opacity: 0, scale: 0.8 }}
           animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 1, delay: 2.8 }}
+          transition={{ duration: 1 }}
           className="mb-8 relative"
         >
           <div className="w-32 h-32 sm:w-40 sm:h-40 mx-auto relative overflow-hidden rounded-full border-2 border-[#00FF85]/30 backdrop-blur-sm">
@@ -106,7 +106,7 @@ export function HeroSection() {
         <motion.p
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 3 }}
+          transition={{ duration: 0.8 }}
           className="text-lg sm:text-xl lg:text-2xl font-medium text-white/90 max-w-2xl mx-auto"
         >
           Minimal. Futuristic. Pure Energy.

src/components/ScrollToTop.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+
+export function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Show button when page is scrolled up to given distance
+  const toggleVisibility = () => {
+    if (window.pageYOffset > 50) { // Very low threshold to appear soon
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  // Set the scroll event listener
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisibility);
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+
+  // Scroll to top smoothly
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.button
+          onClick={scrollToTop}
+          className="fixed bottom-12 right-12 z-[9999] p-6 rounded-2xl bg-gradient-to-br from-yellow-400/90 via-red-500/90 to-purple-600/90 border-4 border-white/30 shadow-2xl hover:shadow-3xl transition-all duration-300 group"
+          initial={{ opacity: 0, scale: 0, y: 50 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0, y: 50 }}
+          whileHover={{ scale: 1.2, rotate: 10 }}
+          whileTap={{ scale: 0.9 }}
+        >
+          {/* Large Arrow Icon */}
+          <div className="relative z-10">
+            <svg
+              className="w-12 h-12 text-white drop-shadow-lg"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={3}
+                d="M5 10l7-7m0 0l7 7m-7-7v18"
+              />
+            </svg>
+          </div>
+          
+          {/* Glow Effect */}
+          <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-yellow-400/50 via-red-500/50 to-purple-500/50 blur-xl scale-110 opacity-75"></div>
+          
+          {/* Text Label */}
+          <div className="absolute -bottom-16 left-1/2 transform -translate-x-1/2 whitespace-nowrap">
+            <span className="text-white text-sm font-bold bg-black/70 px-3 py-1 rounded-full">
+              TOP
+            </span>
+          </div>
+        </motion.button>
+      )}
+    </AnimatePresence>
+  );
+}

src/components/SmoothScrollContext.tsx

@@ -20,37 +20,41 @@ export function SmoothScrollProvider({ children }: SmoothScrollProviderProps) {
   const locomotiveScrollRef = useRef<LocomotiveScroll | null>(null);
 
   useEffect(() => {
-    // Initialize Locomotive Scroll
+    // Initialize Locomotive Scroll with optimized settings for faster, more comfortable scrolling
     locomotiveScrollRef.current = new LocomotiveScroll({
       el: document.querySelector('[data-scroll-container]') as HTMLElement,
       smooth: true,
-      lerp: 0.1,
-      multiplier: 0.8,
+      // Faster, more responsive scrolling (lower lerp = faster)
+      lerp: 0.05,
+      // Higher multiplier for more responsive feel
+      multiplier: 1.2,
       // Enable snap scrolling to sections
       scrollFromAnywhere: true,
       // Snap to sections
       snap: true,
-      // Snap duration
-      snapDuration: 1.2,
-      // Snap easing
+      // Faster snap duration for quicker section transitions
+      snapDuration: 0.8,
+      // Smoother snap easing
       snapEasing: [0.25, 0.1, 0.25, 1],
+      // Optimized smartphone settings
       smartphone: {
         smooth: true,
-        lerp: 0.1,
-        multiplier: 0.8,
+        lerp: 0.05,
+        multiplier: 1.2,
         snap: true,
-        snapDuration: 1.2,
+        snapDuration: 0.8,
       },
+      // Optimized tablet settings
       tablet: {
         smooth: true,
-        lerp: 0.1,
-        multiplier: 0.8,
+        lerp: 0.05,
+        multiplier: 1.2,
         snap: true,
-        snapDuration: 1.2,
+        snapDuration: 0.8,
       },
     });
 
-    // Add keyboard navigation
+    // Add keyboard navigation with faster transitions
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!locomotiveScrollRef.current) return;
 
@@ -65,7 +69,7 @@ export function SmoothScrollProvider({ children }: SmoothScrollProviderProps) {
           e.preventDefault();
           const nextSection = Math.min(currentSection + 1, Math.floor(document.body.scrollHeight / windowHeight) - 1);
           locomotiveScrollRef.current.scrollTo(nextSection * windowHeight, {
-            duration: 1.2,
+            duration: 0.8,
             easing: [0.25, 0.1, 0.25, 1],
           });
           break;
@@ -74,21 +78,21 @@ export function SmoothScrollProvider({ children }: SmoothScrollProviderProps) {
           e.preventDefault();
           const prevSection = Math.max(currentSection - 1, 0);
           locomotiveScrollRef.current.scrollTo(prevSection * windowHeight, {
-            duration: 1.2,
+            duration: 0.8,
             easing: [0.25, 0.1, 0.25, 1],
           });
           break;
         case 'Home':
           e.preventDefault();
           locomotiveScrollRef.current.scrollTo(0, {
-            duration: 1.2,
+            duration: 0.8,
             easing: [0.25, 0.1, 0.25, 1],
           });
           break;
         case 'End':
           e.preventDefault();
           locomotiveScrollRef.current.scrollTo(document.body.scrollHeight - windowHeight, {
-            duration: 1.2,
+            duration: 0.8,
             easing: [0.25, 0.1, 0.25, 1],
           });
           break;