chore: offset video player position to hide watermarks

Author: actions-user

src/app/contact/page.tsx

@@ -80,21 +80,22 @@ export default function Contact() {
   return (
     <div className={`${Raleway.className}`}>
       {/* ── Hero Section with Video Background ── */}
-      <section className="relative w-full min-h-[320px] overflow-hidden">
+      <section className="relative w-full min-h-[380px] overflow-hidden">
         {/* Video Background */}
         <div className="absolute inset-0">
           <div className="absolute inset-0 opacity-40">
             <VideoPlayer
               mp4Src="/videos/contact-background.mp4"
               posterSrc="/videos/cover-images/contact-background-poster.jpg"
+              objectPosition="center 75%"
             />
           </div>
           {/* Dark overlay — matches .dark-translucent-bg */}
           <div className="absolute inset-0 bg-black/50 hover:bg-black/60 transition-colors duration-300" />
         </div>
 
         {/* Hero Content — accounts for 74px fixed header */}
-        <div className="relative z-10 flex items-center justify-center min-h-[320px] pt-[74px] px-4 py-10">
+        <div className="relative z-10 flex items-center justify-center min-h-[380px] pt-[94px] px-4 py-10">
           <div className="text-center max-w-3xl mx-auto">
             {/* Heading */}
             <h2
@@ -337,7 +338,7 @@ export default function Contact() {
                 {/* Company Name */}
                 <h3 className="text-[22px] mb-4">
                   <span className={`${Pacifico.className} text-[#09afdf]`}>CodeBuilder</span>
-                  <span className="text-[#999] font-light">.us</span>
+                  <span className="text-[#999] font-light">, Inc.</span>
                 </h3>
 
                 {/* Separator */}

src/app/services/page.tsx

@@ -168,25 +168,26 @@ export default function Services() {
   return (
     <div className={`${Raleway.className}`}>
       {/* ── Hero Section with Video Background ── */}
-      <section className="relative w-full min-h-[320px] overflow-hidden">
+      <section className="relative w-full min-h-[380px] overflow-hidden">
         {/* Video Background */}
         <div className="absolute inset-0">
           <div className="absolute inset-0 opacity-90">
             <VideoPlayer
               mp4Src="/videos/network-technology-services.mp4"
               posterSrc="/videos/cover-images/network-technology-services-poster.jpg"
+              objectPosition="top"
             />
           </div>
           {/* Dark overlay — matches .dark-translucent-bg */}
           <div className="absolute inset-0 bg-black/50 hover:bg-black/60 transition-colors duration-300" />
         </div>
 
         {/* Hero Content */}
-        <div className="relative z-10 flex items-center justify-center min-h-[320px] pt-[74px] px-4 py-10">
+        <div className="relative z-10 flex items-center justify-center min-h-[380px] pt-[74px] px-4 py-10">
           <div className="text-center max-w-3xl mx-auto">
             {/* "Our Services" heading */}
             <h1
-              className={`text-white text-[28px] font-normal mb-4 drop-shadow-md ${
+              className={`text-white text-[28px] font-normal mb-2 drop-shadow-md ${
                 bannerVisible ? 'animate__animated animate__zoomIn' : 'opacity-0'
               }`}
               style={{

src/components/video-player.tsx

@@ -5,6 +5,7 @@ interface VideoPlayerProps {
   mp4Src: string
   webmSrc?: string
   posterSrc: string
+  objectPosition?: string
 }
 
 function getType(src: string): string | undefined {
@@ -14,7 +15,7 @@ function getType(src: string): string | undefined {
   return undefined
 }
 
-const VideoPlayer: React.FC<VideoPlayerProps> = ({ mp4Src, webmSrc, posterSrc }) => {
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ mp4Src, webmSrc, posterSrc, objectPosition = 'center' }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const [isPlaying, setIsPlaying] = useState(false)
   const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -75,14 +76,21 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ mp4Src, webmSrc, posterSrc })
   return (
     <div className="relative w-full h-full">
       {/* Poster/still image — always rendered underneath, visible until video plays */}
-      <img src={posterSrc} alt="" aria-hidden="true" className="absolute inset-0 w-full h-full object-cover" />
+      <img
+        src={posterSrc}
+        alt=""
+        aria-hidden="true"
+        className="absolute inset-0 w-full h-full object-cover"
+        style={{ objectPosition }}
+      />
 
       {/* Video element — layered on top, fades in once playing */}
       <video
         ref={videoRef}
         className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ${
           isPlaying ? 'opacity-100' : 'opacity-0'
         }`}
+        style={{ objectPosition }}
         poster={posterSrc}
         autoPlay
         playsInline