chore: offset video player position to hide watermarks

.github/workflows/cloudflare-pages-runtime.yml

@@ -16,6 +16,8 @@ jobs:
   deploy-runtime:
     name: 🏗 Build and Deploy Runtime
     runs-on: ubuntu-latest
+    env:
+      FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
 
     steps:
       - name: 🔍 Checkout repository

.github/workflows/cloudflare-pages.yml

@@ -16,6 +16,8 @@ jobs:
   deploy:
     name: 🏗 Build and Deploy
     runs-on: ubuntu-latest
+    env:
+      FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
 
     steps:
       - name: 🔍 Checkout repository
@@ -52,11 +54,24 @@ jobs:
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           PROJECT_NAME: ${{ secrets.CLOUDFLARE_PAGES_PROJECT_NAME }}
         run: |
-          RESPONSE=$(curl -fsSL \
+          echo "Checking variables..."
+          echo "ACCOUNT_ID is set: $(if [ -n "$CLOUDFLARE_ACCOUNT_ID" ]; then echo "Yes (length: ${#CLOUDFLARE_ACCOUNT_ID})"; else echo "No"; fi)"
+          echo "API_TOKEN is set: $(if [ -n "$CLOUDFLARE_API_TOKEN" ]; then echo "Yes (length: ${#CLOUDFLARE_API_TOKEN})"; else echo "No"; fi)"
+          echo "PROJECT_NAME: $PROJECT_NAME"
+
+          RESPONSE=$(curl -s \
             -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
             -H "Content-Type: application/json" \
             "https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/pages/projects")
 
+          SUCCESS=$(printf '%s' "$RESPONSE" | jq -r '.success')
+          if [ "$SUCCESS" != "true" ]; then
+            echo "API Request Failed! The token might be invalid or lacking permissions."
+            echo "Errors:"
+            printf '%s' "$RESPONSE" | jq -r '.errors[]? | "\(.code): \(.message)"'
+            exit 1
+          fi
+
           COUNT=$(printf '%s' "$RESPONSE" | jq '.result | length')
           MATCH=$(printf '%s' "$RESPONSE" | jq --arg name "$PROJECT_NAME" 'any(.result[]?; .name == $name)')
 

.github/workflows/deploy-docker.depracated.yml

@@ -0,0 +1,56 @@
+name: '🚀 Deploy Next.js Docker App (Single Job)'
+
+on:
+  push:
+    branches: [disabled]
+
+jobs:
+  build-and-deploy:
+    runs-on: self-hosted
+    name: '🐳 Build & Deploy'
+    steps:
+      - name: '🔍 Checkout Code'
+        uses: actions/checkout@v3
+
+      # ========================
+      # 🔐 Secrets & Config Setup
+      # ========================
+      - name: '🔒 Verify Secrets Exist'
+        run: |
+          if [ -z "${{ secrets.GOOGLE_SERVICES_JSON_BASE64 }}" ]; then
+            echo "❌ Critical error: GOOGLE_SERVICES_JSON_BASE64 secret missing!"
+            exit 1
+          fi
+          echo "✅ All secrets present"
+
+      - name: '📁 Create google-services.json'
+        run: |
+          echo "$GOOGLE_SERVICES_JSON_BASE64" | base64 --decode > google-services.json
+          echo "🔄 Validating JSON..."
+          jq empty google-services.json  # Requires jq installed
+        env:
+          GOOGLE_SERVICES_JSON_BASE64: ${{ secrets.GOOGLE_SERVICES_JSON_BASE64 }}
+
+      - name: '⚙️ Create .env File'
+        run: |
+          echo "${{ secrets.ENV_FILE_CONTENT }}" > .env
+          echo "" >> .env  # Ensure trailing newline
+
+      # ========================
+      # 🐳 Docker Operations
+      # ========================
+      - name: '🛠 Build Docker Image'
+        run: docker build -t codebuilder-frontend:latest .
+
+      - name: '🗑 Cleanup Old Containers'
+        run: |
+          docker ps -aq --filter name=codebuilder-frontend | xargs -r docker rm -f
+
+      - name: '🚀 Launch New Container'
+        run: |
+          docker run -d \
+            --network host \
+            -p 3000:3000 \
+            --env-file .env \
+            --name codebuilder-frontend \
+            codebuilder-frontend:latest

.github/workflows/deploy.yml

@@ -8,6 +8,8 @@ jobs:
   build-and-deploy:
     runs-on: self-hosted
     name: '🐳 Build & Deploy'
+    env:
+      FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
 
     steps:
       - name: '🔍 Checkout Code'

.github/workflows/nextjs-static-gh-pages.yml

@@ -19,6 +19,8 @@ jobs:
   build-and-deploy:
     name: 🏗 Build & Deploy
     runs-on: ubuntu-latest
+    env:
+      FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
 
     steps:
       - name: 🔍 Checkout repository

next.config.ts

@@ -28,6 +28,7 @@ const nextConfig = {
   assetPrefix: ghPagesBasePath ? `${ghPagesBasePath}/` : undefined,
 
   allowedDevOrigins: [
+    'https://codebuilder.org',
     'https://api.codebuilder.org',
     'https://new.codebuilder.org',
     'https://new.codebuilder.org:443',

public/sw.js

@@ -5,8 +5,8 @@ self.addEventListener('push', (event) => {
     const data = event.data.json()
     const options = {
       body: data.body,
-      icon: data.icon || 'https://new.codebuilder.org/images/logo2.png', // Use a default icon if none is specified
-      badge: data.badge || 'https://new.codebuilder.org/images/logo2.png',
+      icon: data.icon || 'https://codebuilder.org/images/logo2.png', // Use a default icon if none is specified
+      badge: data.badge || 'https://codebuilder.org/images/logo2.png',
       data: { url: data.url },
     }
 

src/app/about/page.tsx

@@ -142,7 +142,7 @@ export default function About() {
   return (
     <div className={`${Raleway.className}`}>
       {/* Banner with Video Background — pt offsets the fixed header */}
-      <div className="relative w-full h-[420px] overflow-hidden">
+      <div className="relative w-full h-[380px] overflow-hidden">
         {/* Video Background */}
         <div className="absolute inset-0">
           <div className="absolute inset-0 opacity-40">
@@ -157,7 +157,7 @@ export default function About() {
         </div>
 
         {/* Banner Content — pt accounts for 74px fixed header */}
-        <div className="relative z-10 flex items-center justify-center h-full pt-[74px] px-4">
+        <div className="relative z-10 flex items-center justify-center h-full px-4 pt-10">
           <div className="text-center max-w-3xl mx-auto">
             <h2
               className={`text-white text-[28px] uppercase font-light mb-2 drop-shadow-md ${

src/app/api/notifications/mass-notification/route.ts

@@ -21,14 +21,12 @@ export const POST = withLogging(async (request: NextRequest) => {
       title: `${title}`,
       body: body,
       url: url,
-      icon: 'https://new.codebuilder.org/images/logo2.png',
-      badge: 'https://new.codebuilder.org/images/logo2.png',
+      icon: 'https://codebuilder.org/images/logo2.png',
+      badge: 'https://codebuilder.org/images/logo2.png',
     }
 
     // Loop and send notifications concurrently
-    const notificationPromises = subscriptions.map((sub) =>
-      sendNotification(sub, notificationPayload)
-    )
+    const notificationPromises = subscriptions.map((sub) => sendNotification(sub, notificationPayload))
 
     // Wait for all notifications to complete
     await Promise.all(notificationPromises)

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/jobs/details/JobDetailsClient.tsx

@@ -1,4 +1,4 @@
-"use client"
+'use client'
 
 import React, { useEffect, useMemo, useState } from 'react'
 import Link from 'next/link'
@@ -75,10 +75,7 @@ export default function JobDetailsClient() {
       <section className="bg-gray-100 py-4 md:py-6">
         <div className="container mx-auto py-16 px-8 md:px-20 lg:px-32">
           <nav className="mb-6">
-            <Link
-              href="/jobs"
-              className="text-blue-600 hover:text-blue-800 transition-colors duration-200"
-            >
+            <Link href="/jobs" className="text-blue-600 hover:text-blue-800 transition-colors duration-200">
               ← Back to Jobs
             </Link>
           </nav>

src/app/portfolio/page.tsx

@@ -311,7 +311,7 @@ export default function Portfolio() {
       )}
 
       {/* Hero Banner with Video Background */}
-      <div className="relative w-full overflow-hidden" style={{ minHeight: '308px' }}>
+      <div className="relative w-full overflow-hidden" style={{ minHeight: '380px' }}>
         {/* Video Background */}
         <div className="absolute inset-0">
           <div className="absolute inset-0 opacity-40">
@@ -326,7 +326,7 @@ export default function Portfolio() {
         </div>
 
         {/* Banner Content */}
-        <div className="relative z-10 flex items-center justify-center h-full py-10 pt-[calc(74px+25px)] px-4">
+        <div className="relative z-10 flex items-center justify-center h-full py-10 pt-[calc(75px+45px)] px-4">
           <div className="text-center max-w-3xl mx-auto">
             <h1
               className={`text-white text-[28px] font-normal mb-4 drop-shadow-md ${

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/assets/css/globals.css

@@ -26,7 +26,10 @@ body {
 
 .header {
   height: 74px;
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
   transition: all 0.5s ease;
   box-shadow: none;
   display: flex;

src/components/index/hero-carousel.tsx

@@ -401,7 +401,7 @@ export default function CarouselSlider() {
       onMouseLeave={() => setShowBtns(false)}
     >
       {/* slides --------------------------------------------- */}
-      <div className="relative w-full h-[450px] md:h-[550px] flex items-center justify-center">
+      <div className="relative w-full h-[400px] md:h-[550px] flex items-center justify-center">
         <AnimatePresence initial={false} custom={dir} onExitComplete={() => setBusy(false)}>
           <motion.div
             key={idx}
@@ -431,7 +431,7 @@ export default function CarouselSlider() {
                 variants={parentStagger}
                 initial="initial"
                 animate="animate"
-                className="relative z-10 flex flex-col container mx-auto items-start justify-start h-full px-4 md:px-20 lg:px-32 pt-[6.5rem] md:pt-[7rem]"
+                className="relative z-10 flex flex-col container mx-auto items-start justify-start h-full px-4 md:px-16 lg:px-16 pt-[5.5rem] md:pt-[7.5rem]"
               >
                 <motion.h2 variants={childUp} className="text-white text-3xl md:text-[42px] font-light mb-4">
                   {slides[idx].title}

src/components/layout/header.tsx

@@ -129,9 +129,9 @@ const StickyHeader: React.FC = () => {
   return (
     <>
       <header
-        className={`fixed animate__animated animate__slideInDown header ${
-          isSticky ? 'sticky' : ''
-        } shadow-md bg-[rgba(57,66,69,0.92)] border-t-[rgba(37,42,44,0.5)] z-[22] w-full left-0 border-b border-b-[rgba(0,0,0,0.07)] text-[#cacaca]`}
+        className={`animate__animated animate__slideInDown header ${
+          isSticky ? 'sticky bg-[rgba(57,66,69,0.95)]' : 'bg-[rgba(57,66,69,0.8)]'
+        } shadow-md border-t-[rgba(37,42,44,0.5)] z-[22] w-full left-0 border-b border-b-[rgba(0,0,0,0.07)] text-[#cacaca]`}
       >
         <div className="container mx-auto px-8 md:px-20 lg:px-32 w-full flex justify-between items-center p-2">
           {/* Logo and Text Link to Home Page */}

src/components/layout/loading-bar.tsx

@@ -24,7 +24,7 @@ const LoadingBar = () => {
   return (
     loading && (
       <div
-        className="flex w-full h-[2px] z-50 bg-blue-500 animate__animated animate__fadeIn animate__faster"
+        className="flex w-full h-[1px] z-50 bg-red-500 animate__animated animate__fadeIn animate__faster"
         style={{ animationDuration: '0.5s' }}
       >
         <div className="h-full bg-blue-600 animate-pulse" style={{ width: '100%' }} />

src/components/portfolio/PortfolioModal.tsx

@@ -78,12 +78,7 @@ const PortfolioModal: React.FC<PortfolioModalProps> = ({
           <React.Fragment key={i}>
             {part}
             {i < parts.length - 1 && (
-              <a
-                href={link.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-[#09afdf] hover:underline"
-              >
+              <a href={link.href} target="_blank" rel="noopener noreferrer" className="text-[#09afdf] hover:underline">
                 {link.label}
               </a>
             )}
@@ -107,7 +102,9 @@ const PortfolioModal: React.FC<PortfolioModalProps> = ({
       >
         {/* Modal Header */}
         <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200">
-          <h4 id={titleId} className="text-lg font-semibold text-[#333]">{title}</h4>
+          <h4 id={titleId} className="text-lg font-semibold text-[#333]">
+            {title}
+          </h4>
           <button
             onClick={onClose}
             className="text-gray-400 hover:text-gray-700 transition-colors text-xl leading-none p-1"
@@ -135,9 +132,7 @@ const PortfolioModal: React.FC<PortfolioModalProps> = ({
               <p className="text-sm text-[#666] mb-1">
                 <strong>Founded</strong> - {founded} &middot; <strong>Client Since</strong> - {clientSince}
               </p>
-              <p className="text-sm text-[#666]">
-                {renderDescription()}
-              </p>
+              <p className="text-sm text-[#666]">{renderDescription()}</p>
             </div>
           </div>
 
@@ -149,9 +144,7 @@ const PortfolioModal: React.FC<PortfolioModalProps> = ({
                 <button
                   onClick={() => setOpenAccordion(openAccordion === index ? null : index)}
                   className={`w-full text-left px-4 py-3 flex items-center gap-2 text-sm font-medium transition-colors duration-200 ${
-                    openAccordion === index
-                      ? 'bg-[#09afdf] text-white'
-                      : 'text-[#09afdf] hover:bg-gray-50'
+                    openAccordion === index ? 'bg-[#09afdf] text-white' : 'text-[#09afdf] hover:bg-gray-50'
                   }`}
                 >
                   <FontAwesomeIcon icon={faCheck} className="text-xs" />