feat: replace hero carousel with hero scroll

Merge version_12_1778179386501 into main

src/components/sections/hero/HeroBillboardScroll.tsx

@@ -1,79 +1,82 @@
-import { useRef } from "react";
+import { ArrowDown } from 'lucide-react';
-import { useScroll, useTransform, motion } from "motion/react";
-import Button from "@/components/ui/Button";
-import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
 
-type HeroBillboardScrollProps = {
+import { cn } from '@/lib/utils';
-  tag: string;
+import { Button } from '@/components/ui/button';
-  title: string;
-  description: string;
-  primaryButton: { text: string; href: string };
-  secondaryButton: { text: string; href: string };
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
 const HeroBillboardScroll = ({
+  className,
   tag,
   title,
   description,
   primaryButton,
   secondaryButton,
   imageSrc,
-  videoSrc,
+}: {
-}: HeroBillboardScrollProps) => {
+  className?: string;
-  const containerRef = useRef<HTMLDivElement>(null);
+  tag?: string;
-  const { scrollYProgress } = useScroll({ target: containerRef });
+  title?: string;
-
+  description?: string;
-  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  primaryButton?: {
-  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
+    text: string;
-
+    href: string;
+  };
+  secondaryButton?: {
+    text: string;
+    href: string;
+  };
+  imageSrc?: string;
+}) => {
   return (
-    <section aria-label="Hero section" className="relative mb-20">
+    <div
-      <HeroBackgroundSlot />
+      className={cn(
+        'relative flex h-svh w-full flex-col items-center justify-center overflow-hidden',
+        className,
+      )}
+    >
       <div
-        ref={containerRef}
+        className="absolute inset-0 z-0"
-        className="pt-25 pb-20 md:py-30 perspective-distant"
+        style={{
+          backgroundImage: `url(${imageSrc})`,
+          backgroundPosition: 'bottom',
+          backgroundSize: 'cover',
+        }}
+      />
+      <div className="absolute inset-0 z-10 bg-gradient-to-t from-black/80 to-transparent" />
+      <div
+        className="z-20 flex flex-col items-center justify-center gap-4 p-5 text-center text-white"
       >
-        <div className="w-content-width mx-auto">
+        {tag && (
-          <div className="flex flex-col items-center gap-2 text-center">
+          <div className="inline-block rounded-theme-full bg-white/10 px-3 py-1 text-sm">
-            <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+            {tag}
-
-            <TextAnimation
-              text={title}
-              variant="fade"
-              gradientText={true}
-              tag="h1"
-              className="text-6xl font-medium text-balance"
-            />
-
-            <TextAnimation
-              text={description}
-              variant="fade"
-              gradientText={false}
-              tag="p"
-              className="text-base md:text-lg leading-tight text-balance"
-            />
-
-            <div className="flex flex-wrap justify-center gap-3 mt-3">
-              <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
-              <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
-            </div>
           </div>
+        )}
+        {title && (
+          <h1 className="text-4xl font-bold md:text-6xl">
+            {title}
+          </h1>
+        )}
+        {description && (
+          <p className="max-w-prose text-lg text-white/80">{description}</p>
+        )}
+        <div className="mt-4 flex gap-2">
+          {primaryButton && (
+            <Button as="a" href={primaryButton.href}>
+              {primaryButton.text}
+            </Button>
+          )}
+          {secondaryButton && (
+            <Button as="a" href={secondaryButton.href} variant="secondary">
+              {secondaryButton.text}
+            </Button>
+          )}
         </div>
-
-        <div className="w-content-width mx-auto mt-8 p-3 card rounded overflow-hidden rotate-x-20 md:hidden">
-          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-4/5" />
-        </div>
-
-        <motion.div
-          style={{ rotateX: rotate, scale }}
-          className="w-content-width mx-auto mt-5 2xl:mt-2 p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden hidden md:block"
-        >
-          <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="aspect-video" />
-        </motion.div>
       </div>
-    </section>
+      <div
+        className="absolute bottom-5 z-20"
+      >
+        <ArrowDown className="animate-bounce text-white" />
+      </div>
+    </div>
   );
 };
 

src/components/ui/Button.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { motion } from "motion/react";
 import { useButtonClick } from "@/hooks/useButtonClick";
 import { cls } from "@/lib/utils";
 import { useStyle } from "@/components/ui/useStyle";
@@ -23,31 +22,18 @@ interface ButtonProps {
   className?: string;
 }
 
-const DefaultButton = ({ text, variant = "primary", href = "#", onClick, animate = true, animationDelay = 0, className = "" }: ButtonProps) => {
+const DefaultButton = ({ text, variant = "primary", href = "#", onClick, className = "" }: ButtonProps) => {
   const handleClick = useButtonClick(href, onClick);
 
-  const button = (
+  return (
     <a
       href={href}
       onClick={handleClick}
-      className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer", variant === "primary" ? "primary-button text-primary-cta-text" : "secondary-button text-secondary-cta-text", className)}
+      className={cls("flex items-center justify-center h-9 px-6 text-sm rounded cursor-pointer transform transition-transform duration-200 hover:scale-105 active:scale-95", variant === "primary" ? "primary-button text-primary-cta-text shadow-[0_4px_0_0_rgba(0,0,0,0.2)] hover:shadow-[0_6px_0_0_rgba(0,0,0,0.2)] active:shadow-[0_2px_0_0_rgba(0,0,0,0.2)]" : "secondary-button text-secondary-cta-text shadow-[0_4px_0_0_rgba(0,0,0,0.2)] hover:shadow-[0_6px_0_0_rgba(0,0,0,0.2)] active:shadow-[0_2px_0_0_rgba(0,0,0,0.2)]", className)}
     >
       {text}
     </a>
   );
-
-  if (!animate) return button;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true }}
-      transition={{ duration: 0.6, delay: animationDelay, ease: "easeOut" }}
-    >
-      {button}
-    </motion.div>
-  );
 };
 
 const Button = (props: ButtonProps) => {

src/pages/HomePage.tsx

@@ -1,7 +1,7 @@
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
 import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
 import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
@@ -12,7 +12,7 @@ export default function HomePage() {
   return (
     <>
   <div id="home" data-section="home">
-      <HeroBillboardCarousel
+      <HeroBillboardScroll
       tag="Fintech SaaS"
       title="Unlock the Future of Financial Management"
       description="Finflow provides cutting-edge solutions for businesses to streamline operations, enhance security, and drive growth in the digital economy."
@@ -24,26 +24,7 @@ export default function HomePage() {
         text: "Request a Demo",
         href: "#contact",
       }}
-      items={[
+      imageSrc="https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-futuristic-dark-themed-financial-dashb-1778165802560-ef94d27a.png"
-        {
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-futuristic-dark-themed-financial-dashb-1778165802560-ef94d27a.png",
-        },
-        {
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/another-view-of-a-sleek-dark-fintech-das-1778165802942-0ef804ae.png",
-        },
-        {
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-representation-of-complex-fi-1778165803491-13ee1608.png?_wi=1",
-        },
-        {
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-metaphor-for-advanced-financial-1778165802292-f7d22bff.png?_wi=1",
-        },
-        {
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-illustration-of-financial-process-aut-1778165804096-d3ea01b2.png?_wi=1",
-        },
-        {
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-visual-concept-for-regulatory-complian-1778165802615-1e994baa.png?_wi=1",
-        },
-      ]}
     />
   </div>