🔥Spline object responsive

www/src/components/Hero.tsx

@@ -1,11 +1,64 @@
-import React from 'react';
-import { Button } from './ui/button';
-import { ArrowRight, Shield, RefreshCw } from 'lucide-react';
-import { GitHubLogoIcon } from '@radix-ui/react-icons';
+import React, { useRef, useEffect } from "react";
+import { Button } from "./ui/button";
+import { ArrowRight, Shield, RefreshCw } from "lucide-react";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import Spline from "@splinetool/react-spline";
 
 export function Hero() {
+  const splineRef = useRef<any>(null);
+
+  function onLoad(spline: any) {
+    splineRef.current = spline;
+
+    // - try multiple selectors
+    const remove = () => {
+      // Try the spline-viewer element
+      const viewer = document.querySelector("spline-viewer");
+      if (viewer && (viewer as any).shadowRoot) {
+        // Try different selectors 
+        const selectors = [
+          "#logo",
+          ".logo",
+          '[id*="logo"]',
+          '[class*="logo"]',
+          'a[href*="spline"]',
+        ];
+
+        selectors.forEach((selector) => {
+          const element = (viewer as any).shadowRoot.querySelector(selector);
+        });
+
+        // Also check for any links containing "Built with Spline"
+        const allElements = (viewer as any).shadowRoot.querySelectorAll("*");
+        allElements.forEach((el: any) => {
+          if (el.textContent && el.textContent.includes("Built with Spline")) {
+            el.remove();
+            console.log('Removed element containing "Built with Spline"');
+          }
+        });
+      }
+    };
+
+    // Try removing at different intervals to catch dynamically added elements
+    setTimeout(remove, 100);
+    setTimeout(remove, 500);
+    setTimeout(remove, 1000);
+    setTimeout(remove, 2000);
+  }
+
+
+  useEffect(() => {
+    // Ensure the Spline scene is loaded before trying to remove
+    const interval = setInterval(() => {
+      if (splineRef.current && splineRef.current.spline) {
+        onLoad(Spline);
+        clearInterval(interval);
+      }
+    }, 100);
+    return () => clearInterval(interval);
+  }, []);
   return (
-    <section className="relative min-h-[100vh] pt-20 pb-10 flex items-center justify-center px-4 sm:px-6 lg:px-8 overflow-hidden">
+    <section className="relative min-h-[100vh] pt-20 pb-10 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8 overflow-hidden">
       {/* Elegant gradient background */}
       <div className="absolute inset-0 -z-10 overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5"></div>
@@ -13,26 +66,17 @@ export function Hero() {
         <div className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-radial from-accent/10 to-transparent blur-3xl"></div>
       </div>
 
-      <div className="max-w-7xl mx-auto text-center w-full">
-        <div className="mb-6 sm:mb-8 flex justify-center">
-          <div className="relative">
-            <img
-              src="/assets/logo-no-bg.png"
-              alt="Gitea Mirror Logo"
-              className="relative w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 dark:hidden"
-            />
-            <img
-              src="/assets/logo-no-bg.png"
-              alt="Gitea Mirror Logo"
-              className="relative w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 hidden dark:block"
-            />
-          </div>
-        </div>
-
-        <h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-tight">
-          <span className="text-foreground">
-            Keep Your Code
-          </span>
+      {/* spline object */}
+      <div className="spline-object absolute inset-0 max-lg:-z-10 max-h-[40rem] -translate-y-16 md:max-h-[50rem] lg:max-h-[60%] xl:max-h-[70%] 2xl:max-h-[80%] md:-translate-y-24 lg:-translate-y-28 flex items-center justify-center">
+        <Spline
+          scene="https://prod.spline.design/jl0aKWbdH9vHQnYV/scene.splinecode"
+        />  
+      </div>
+      {/* div to avoid clipping in lower screen heights */}
+      <div className="clip-avoid w-full h-[16rem] md:h-[20rem] lg:h-[12rem] 2xl:h-[16rem]" aria-hidden="true"></div>
+      <div className="max-w-7xl mx-auto pb-20 lg:pb-60 xl:pb-24 text-center w-full">
+        <h1 className="pt-10 2xl:pt-20 text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-tight">
+          <span className="text-foreground">Keep Your Code</span>
           <br />
           <span className="text-gradient from-primary via-accent to-accent-purple">
             Safe & Synced
@@ -40,8 +84,9 @@ export function Hero() {
         </h1>
 
         <p className="mt-4 sm:mt-6 text-base sm:text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto px-4">
-          Automatically mirror your GitHub repositories to self-hosted Gitea. 
-          Never lose access to your code with continuous backup and synchronization.
+          Automatically mirror your GitHub repositories to self-hosted Gitea.
+          Never lose access to your code with continuous backup and
+          synchronization.
         </p>
 
         <div className="mt-6 sm:mt-8 flex flex-wrap items-center justify-center gap-3 text-xs sm:text-sm text-muted-foreground px-4">
@@ -59,20 +104,32 @@ export function Hero() {
           </div>
         </div>
 
+        {/* Call to action buttons */}
         <div className="mt-8 sm:mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-4">
-          <Button size="lg" className="group w-full sm:w-auto min-h-[48px] text-base bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300" asChild>
-            <a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
+          <Button
+            size="lg"
+            className="relative group w-full sm:w-auto min-h-[48px] text-base bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300"
+            asChild
+          >
+            <a
+              href="https://github.com/RayLabsHQ/gitea-mirror"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               Get Started
               <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
             </a>
           </Button>
-          <Button size="lg" variant="outline" className="w-full sm:w-auto min-h-[48px] text-base border-primary/20 hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300" asChild>
-            <a href="#features">
-              View Features
-            </a>
+          <Button
+            size="lg"
+            variant="outline"
+            className="relative w-full sm:w-auto min-h-[48px] text-base border-primary/20 hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300"
+            asChild
+          >
+            <a href="#features">View Features</a>
           </Button>
         </div>
       </div>
     </section>
   );
-}
+}