Merge version_4_1782160640142 into main

Merge version_4_1782160640142 into main

src/index.css

@@ -8,8 +8,8 @@
   --background: #0a0a0a;
   --card: rgba(255, 255, 255, 0.05);
   --foreground: #ffffffe6;
-  --primary-cta: #e6e6e6;
-  --primary-cta-text: #0a0a0a;
+  --primary-cta: rgba(255, 255, 255, 0.1);
+  --primary-cta-text: #ffffff;
   --secondary-cta: rgba(255, 255, 255, 0.05);
   --secondary-cta-text: #ffffffe6;
   --accent: #737373;

src/pages/HomePage/sections/Hero.tsx

@@ -1,109 +1,18 @@
-/* eslint-disable */
-// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
-import Button from "@/components/ui/Button";
-import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import { motion, useScroll, useTransform } from "motion/react";
-import { useRef } from "react";
+// Created by add_section_from_catalog (HeroBrand).
 
-const primaryButton = {
-  text: "Start Your Project",
-  href: "#contact"
-};
-const secondaryButton = {
-  text: "Learn More",
-  href: "#about"
-};
+import React from 'react';
+import HeroBrand from '@/components/sections/hero/HeroBrand';
 
-type HeroSplitProps = {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton: { text: string; href: string };
-  secondaryButton: { text: string; href: string };
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-const HeroInline = () => {
-  const containerRef = useRef(null);
-  const { scrollYProgress } = useScroll({
-    target: containerRef,
-    offset: ["start start", "end start"]
-  });
-
-  const y1 = useTransform(scrollYProgress, [0, 1], [0, 300]);
-  const rotate1 = useTransform(scrollYProgress, [0, 1], [0, 90]);
-  const scale1 = useTransform(scrollYProgress, [0, 1], [1, 1.5]);
-
-  const y2 = useTransform(scrollYProgress, [0, 1], [0, -200]);
-  const rotate2 = useTransform(scrollYProgress, [0, 1], [0, -120]);
-  const scale2 = useTransform(scrollYProgress, [0, 1], [1, 0.8]);
-
-  const y3 = useTransform(scrollYProgress, [0, 1], [0, 400]);
-  const rotate3 = useTransform(scrollYProgress, [0, 1], [0, 180]);
-  const scale3 = useTransform(scrollYProgress, [0, 1], [1, 1.2]);
-
-  return (
-    <section aria-label="Hero section" ref={containerRef as any} className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0 overflow-hidden">
-      <HeroBackgroundSlot />
-      
-      {/* Glassmorphic 3D-like Objects */}
-      <motion.div 
-        style={{ y: y1, rotate: rotate1, scale: scale1 }}
-        className="absolute top-20 left-10 w-64 h-64 rounded-3xl bg-white/5 backdrop-blur-2xl border border-white/10 shadow-[0_8px_32px_0_rgba(255,255,255,0.05)] z-0"
-      />
-      <motion.div 
-        style={{ y: y2, rotate: rotate2, scale: scale2 }}
-        className="absolute bottom-20 right-10 w-80 h-80 rounded-full bg-white/5 backdrop-blur-2xl border border-white/10 shadow-[0_8px_32px_0_rgba(255,255,255,0.05)] z-0"
-      />
-      <motion.div 
-        style={{ y: y3, rotate: rotate3, scale: scale3 }}
-        className="absolute top-1/3 right-1/3 w-48 h-48 rounded-2xl bg-white/5 backdrop-blur-2xl border border-white/10 shadow-[0_8px_32px_0_rgba(255,255,255,0.05)] z-0"
-      />
-
-      <div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto relative z-10">
-        <div className="w-full md:w-1/2">
-          <div className="flex flex-col items-center md:items-start gap-3">
-            <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-              <p>{"Innovation Hub"}</p>
-            </div>
-
-            <TextAnimation
-              text={"Where Ideas Rise Into Reality"}
-              variant="fade"
-              gradientText={true}
-              tag="h1"
-              className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance"
-            />
-
-            <TextAnimation
-              text={"RiseLab accelerates innovation through advanced technology infrastructure and expert collaboration. Transform your concept into market-ready solutions."}
-              variant="fade"
-              gradientText={false}
-              tag="p"
-              className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance"
-            />
-
-            <div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md: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>
-        </div>
-
-        <ScrollReveal variant="slide-up" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
-          <ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/person-uses-tablet-governmental-cyber-security-room-working-russian-flag_482257-90680.jpg"} />
-        </ScrollReveal>
-      </div>
-    </section>
-  );
-};
-
-export default function HeroSection() {
+export default function HeroSection(): React.JSX.Element {
   return (
     <div data-webild-section="hero" id="hero">
-      <HeroInline />
+      <HeroBrand
+        primaryButton={{"href":"#contact","text":"Start Your Project"}}
+        imageSrc="http://img.b2bpic.net/free-photo/person-uses-tablet-governmental-cyber-security-room-working-russian-flag_482257-90680.jpg"
+        description="Where Ideas Rise Into Reality. RiseLab accelerates innovation through advanced technology infrastructure and expert collaboration. Transform your concept into market-ready solutions."
+        secondaryButton={{"href":"#about","text":"Learn More"}}
+        brand="RiseLab"
+      />
     </div>
   );
 }