done landing page

components/ui/loader.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import gsap from "gsap";
+import Image from "next/image";
+
+const Loader = () => {
+  // We need a DOM node that will be the clipping container
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const img = imgRef.current;
+    if (!container || !img) return;
+    gsap.set(container, { width: "0", clipPath: "inset(0 100% 0 0)" });
+    gsap.to(container, {
+      width: "280px", // reveal left to right
+      duration: 1.4,
+      clipPath: "inset(0 0% 0 0)",
+      ease: "expo.inout",
+    });
+  }, []);
+
+  return (
+    <div className="bg-brand fixed inset-0 z-100 flex h-screen w-full items-center justify-center">
+      {/* Clipping container */}
+      <div ref={containerRef} className="overflow-hidden pl-3">
+        <Image
+          ref={imgRef}
+          src="/images/svg/whispering-logo.svg"
+          alt="Whispering Trees"
+          width={280}
+          height={68}
+          className="h-[68px] w-[250px] object-contain"
+          priority
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Loader;