...

src/App.css

@@ -241,3 +241,40 @@ html {
   z-index: 2;
 }
 
+/* Panning effect for background images */
+@keyframes pan-image {
+  0% {
+    transform: scale(1.05) translateX(0) translateY(0);
+  }
+  25% {
+    transform: scale(1.05) translateX(-1%) translateY(-0.5%);
+  }
+  50% {
+    transform: scale(1.05) translateX(1%) translateY(0.5%);
+  }
+  75% {
+    transform: scale(1.05) translateX(-0.5%) translateY(0.8%);
+  }
+  100% {
+    transform: scale(1.05) translateX(0) translateY(0);
+  }
+}
+
+.pan-effect {
+  animation: pan-image 35s ease-in-out infinite;
+}
+
+/* Image container for panning effect */
+.image-container {
+  position: relative;
+  overflow: hidden;
+  border-radius: 1rem;
+}
+
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+

src/components/HeroSection.jsx

@@ -2,30 +2,31 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
 
-const HeroSection = ({ 
-  title, 
-  subtitle, 
-  description, 
-  backgroundImage, 
-  ctaText = "Get Started", 
+const HeroSection = ({
+  title,
+  subtitle,
+  description,
+  backgroundImage,
+  ctaText = "Get Started",
   ctaLink = "/get-started",
-  showVideo = false 
+  showVideo = false,
+  videoEmbed = null
 }) => {
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
       {/* Background Image/Video */}
       <div className="absolute inset-0 z-0">
-        {showVideo ? (
-          <div className="w-full h-full bg-gradient-to-br from-blue-900/20 to-purple-900/20">
-            {/* Placeholder for video background */}
-            <div className="w-full h-full bg-black/50 flex items-center justify-center">
-              <span className="text-white/50 text-lg">Video Background Placeholder</span>
+        {showVideo && videoEmbed ? (
+          <div className="relative w-full h-full">
+            <div className="absolute inset-0">
+              {videoEmbed}
             </div>
+            <div className="absolute inset-0 bg-black/40"></div>
           </div>
         ) : (
-          <div 
-            className="w-full h-full bg-cover bg-center bg-no-repeat"
-            style={{ 
+          <div
+            className="w-full h-full bg-cover bg-center bg-no-repeat pan-effect"
+            style={{
               backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
               backgroundColor: '#000'
             }}

src/pages/GetStarted.jsx

@@ -6,7 +6,7 @@ import Section from '../components/Section';
 import { Button } from '@/components/ui/button';
 
 // Import images
-import startImage from '../assets/ozNr9q8elMcO.jpg'; // Digital human silhouette
+import startImage from '../assets/getstarted.jpg'; // Getting started with HERO
 import securityImage from '../assets/wD5nv0lVwg3i.jpg'; // Digital privacy
 
 const GetStarted = () => {

src/pages/Home.jsx

@@ -7,7 +7,6 @@ import FeatureCard from '../components/FeatureCard';
 import { Button } from '@/components/ui/button';
 
 // Import images
-import heroBackground from '../assets/47WALTyZu0ep.jpg'; // Cyberpunk city
 import networkImage from '../assets/yKQ5gi1xUIrM.jpg'; // Connected lines
 import heartTechImage from '../assets/LubjiSy2yrT2.jpg'; // Technology heart
 import humanConnectionImage from '../assets/htZtx22e5QlA.jpg'; // Digital human connection
@@ -74,7 +73,17 @@ const Home = () => {
           </span>
         }
         description="HERO is not just another app — it's your trusted digital extension that works for you and no one else. Own your data, decide who accesses what, and preserve your memory in a way that can never be corrupted, lost, or hacked."
-        backgroundImage={heroBackground}
+        showVideo={true}
+        videoEmbed={
+          <iframe
+            src="https://player.vimeo.com/video/1106820500?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&background=1&muted=1&loop=1"
+            frameBorder="0"
+            allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
+            referrerPolicy="strict-origin-when-cross-origin"
+            style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%", objectFit: "cover"}}
+            title="heroback1"
+          />
+        }
         ctaText="Start Your Journey"
         ctaLink="/get-started"
       />

src/pages/How.jsx

@@ -9,7 +9,7 @@ import FeatureCard from '../components/FeatureCard';
 import agentImage from '../assets/H2coK1FCuiPB.jpeg'; // AI Agent Creation
 import memoryImage from '../assets/bjNv78U6CA3e.jpg'; // Digital privacy/memory
 import ledgerImage from '../assets/SXifMdAlG29t.png'; // Blockchain visualization
-import networkImage from '../assets/9nsRPMS0HUV4.jpg'; // Human silhouette with network
+import networkImage from '../assets/tech.jpg'; // Technology visualization with panning effect
 
 const How = () => {
   const howItWorks = [

src/pages/Technology.jsx

@@ -6,7 +6,7 @@ import Section from '../components/Section';
 import FeatureCard from '../components/FeatureCard';
 
 // Import images
-import techBackground from '../assets/poVm1zm8mO0y.png'; // AI Dark Mode
+import techBackground from '../assets/herotech.jpg'; // HERO Technology background
 import blockchainImage from '../assets/SXifMdAlG29t.png'; // Blockchain visualization
 import networkImage from '../assets/yKQ5gi1xUIrM.jpg'; // Connected lines
 import securityImage from '../assets/bjNv78U6CA3e.jpg'; // Digital privacy