feat: background animation

geeksblabla · Jan 21, 2025 · 5b5546e · 5b5546e
1 parent 07f526a
commit 5b5546e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -66,7 +66,7 @@ export default function RootLayout({
       */}
       <head />
       <SalLoader />
-      <body className="bg-[#EFE1C5]">
+      <body className="bg-[#F1E5CB]">
         <Header />
         {children}
         <Footer />

diff --git a/components/hero.tsx b/components/hero.tsx
@@ -1,22 +1,16 @@
-import Image from "next/image";
-import { TechSouk } from "./tech-souk";
-import { SoukDoor } from "./souk-door";
-import Sfanj from "../images/sfanj.png";
-import HeroBackImage from "../images/hero-back.png";
-import { VideoAnimation } from "./video-animation";
 import Link from "next/link";
 
 export const Hero = () => {
   return (
     <>
-      <div className="relative flex flex-col justify-end pt-8 mb-24 min-h-[calc(100svh-90px)]">
+      <div className="relative flex flex-col justify-end pt-8 mb-0 min-h-[calc(100svh-90px)]">
         <Background />
         <div className="relative z-10 flex-1 mx-auto max-w-screen-lg md:max-w-screen-xl py-8 flex flex-col justify-center items-center md:px-8 px-4">
           <div className="mx-auto flex flex-1 flex-col  items-center w-full max-w-[750px] ">
             <div
               data-sal="fade"
               data-sal-delay="0"
-              data-sal-duration="500"
+              data-sal-duration="200"
               className="my-2"
             >
               <TechnoFna />
@@ -25,7 +19,7 @@ export const Hero = () => {
             <p
               className="md:text-[44px] text-[#D35747]  text-3xl font-bold leading-normal md:leading-normal text-center  drop-shadow-[0_0.5px_0.5px_rgba(0,0,0,1)] text-shadow"
               data-sal="fade"
-              data-sal-delay="200"
+              data-sal-delay="100"
               data-sal-duration="500"
             >
               حلاقي التكنولوجيا في جامع الفنا
@@ -288,14 +282,25 @@ const TechnoFna = () => {
 
 const Background = () => {
   return (
-    <div className="absolute top-0 left-0  w-full">
-      <Image
-        src={HeroBackImage}
-        alt="pattern"
-        width={1000}
-        height={1000}
-        className="object-cover mx-auto w-full h-full"
-      />
+    <div className="absolute top-0 left-0 w-full overflow-hidden ">
+      <video
+        autoPlay
+        muted
+        loop
+        playsInline
+        className="hidden md:block object-contain w-full aspect-square max-w-[1800px] mx-auto -mt-36"
+      >
+        <source src="/videos/desktop-back.webm" type="video/webm" />
+      </video>
+      <video
+        autoPlay
+        muted
+        loop
+        playsInline
+        className="block md:hidden object-cover w-full h-full"
+      >
+        <source src="/videos/mobile-back.webm" type="video/webm" />
+      </video>
     </div>
   );
 };
diff --git a/components/tracks.tsx b/components/tracks.tsx
@@ -60,7 +60,7 @@ const tracks = [
 
 export const Tracks = () => {
   return (
-    <section id="tracks" className="py-16">
+    <section id="tracks" className="py-16 pt-0 md:pt-8 lg:pt-24 xl:pt-96">
       <div className="mx-auto max-w-screen-xl mb-10 pt-8 md:mb-16 md:px-8 px-4">
         <div className="mx-auto ">
           <Image

diff --git a/public/videos/desktop-back.webm b/public/videos/desktop-back.webm
diff --git a/public/videos/mobile-back.webm b/public/videos/mobile-back.webm