Add optimized video background to Concepta hero

components/ConceptaHome.tsx

@@ -401,7 +401,7 @@ function ProjectCard({ project, index }: { project: Project; index: number }) {
 
 export const ConceptaHome = () => {
   return (
-    <>
+    <div className="concepta-home">
       <HeroBackground />
 
       <Layout>
@@ -640,6 +640,16 @@ export const ConceptaHome = () => {
       </Layout>
 
       <style jsx global>{`
+        html[data-product="concepta"],
+        html[data-product="concepta"] body {
+          overflow-x: clip;
+        }
+
+        .concepta-home {
+          position: relative;
+          isolation: isolate;
+        }
+
         .hero-section {
           padding-top: 80px;
           padding-bottom: 40px;
@@ -1332,6 +1342,6 @@ export const ConceptaHome = () => {
           color: var(--mix-accent);
         }
       `}</style>
-    </>
+    </div>
   );
 };

components/HeroBackground.tsx

@@ -2,18 +2,52 @@
 
 export const HeroBackground = () => {
   return (
-    <div className="pointer-events-none fixed inset-0 w-full h-full z-0">
-      {/* Radial glow */}
+    <div
+      className="concepta-hero-background pointer-events-none absolute z-0 overflow-hidden"
+      aria-hidden="true"
+    >
       <div
-        className="absolute inset-0"
+        className="absolute inset-0 bg-cover bg-center"
+        style={{
+          backgroundImage: "url('/assets/concepta-hero-poster.jpg')",
+        }}
+      />
+
+      <video
+        className="concepta-hero-video absolute inset-0 h-full w-full object-cover object-center"
+        autoPlay
+        loop
+        muted
+        playsInline
+        preload="metadata"
+        poster="/assets/concepta-hero-poster.jpg"
+        tabIndex={-1}
+      >
+        <source src="/assets/concepta-hero.mp4" type="video/mp4" />
+      </video>
+
+      <div
+        className="concepta-hero-filter absolute inset-0"
         style={{
           background:
-            "radial-gradient(circle at 50% -20%, rgba(139, 92, 246, 0.12) 0%, transparent 60%)",
+            "linear-gradient(135deg, rgba(42, 89, 255, 0.09), rgba(7, 27, 94, 0.14))",
+        }}
+      />
+
+      {/* Keep the copy legible while preserving the movement and aqua detail. */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background: [
+            "linear-gradient(90deg, rgba(5, 4, 10, 0.9) 0%, rgba(5, 4, 10, 0.64) 48%, rgba(5, 4, 10, 0.25) 100%)",
+            "radial-gradient(circle at 72% 24%, rgba(58, 91, 255, 0.24) 0%, rgba(58, 91, 255, 0.08) 38%, transparent 66%)",
+            "linear-gradient(180deg, rgba(5, 4, 10, 0.06) 0%, rgba(7, 11, 28, 0.2) 56%, #070b1c 100%)",
+          ].join(", "),
         }}
       />
-      {/* Grid lines */}
+
       <div
-        className="absolute inset-0 opacity-[0.04]"
+        className="absolute inset-0 opacity-[0.06]"
         style={{
           backgroundImage: [
             "linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px)",
@@ -22,6 +56,42 @@ export const HeroBackground = () => {
           backgroundSize: "40px 40px",
         }}
       />
+
+      <style jsx>{`
+        .concepta-hero-background {
+          left: 50%;
+          top: -96px;
+          width: 100vw;
+          height: max(980px, 115svh);
+          max-height: 1100px;
+          transform: translateX(-50%);
+          background: #05040a;
+          -webkit-mask-image: linear-gradient(
+            to bottom,
+            #000 0%,
+            #000 62%,
+            rgba(0, 0, 0, 0.82) 72%,
+            transparent 100%
+          );
+          mask-image: linear-gradient(
+            to bottom,
+            #000 0%,
+            #000 62%,
+            rgba(0, 0, 0, 0.82) 72%,
+            transparent 100%
+          );
+        }
+
+        .concepta-hero-video {
+          opacity: 0.78;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .concepta-hero-video {
+            display: none;
+          }
+        }
+      `}</style>
     </div>
   );
 };

site-tests/concepta-home-video.test.mjs

@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict'
+import { existsSync, readFileSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import { test } from 'node:test'
+
+const root = resolve(import.meta.dirname, '..')
+
+test('uses an accessible, motion-aware video background on the Concepta hero', () => {
+  const background = readFileSync(join(root, 'components/HeroBackground.tsx'), 'utf8')
+
+  assert.match(background, /aria-hidden="true"/)
+  assert.match(background, /<video/)
+  assert.match(background, /autoPlay/)
+  assert.match(background, /loop/)
+  assert.match(background, /muted/)
+  assert.match(background, /playsInline/)
+  assert.match(background, /preload="metadata"/)
+  assert.match(background, /prefers-reduced-motion: reduce/)
+  assert.match(background, /concepta-hero-poster\.jpg/)
+  assert.match(background, /concepta-hero\.mp4/)
+  assert.match(background, /rgba\(42, 89, 255, 0\.09\)/)
+  assert.doesNotMatch(background, /HERO_VIDEOS|HERO_FILTERS|Hero video|Hero filter/)
+  assert.ok(existsSync(join(root, 'public/assets/concepta-hero.mp4')))
+  assert.ok(existsSync(join(root, 'public/assets/concepta-hero-poster.jpg')))
+})