From 68811beb74663168da835bc03fac718ab123d678 Mon Sep 17 00:00:00 2001
From: Priyanshu <bartwalpriyanshu00@gmail.com>
Date: Wed, 8 Jan 2025 19:59:45 +0530
Subject: [PATCH] Smooth footer reveal

---
 app/components/Footer.tsx | 173 ++++++++++++++++++--------------------
 app/page.tsx              |  16 ++--
 components/HeroImage.tsx  |   2 +-
 3 files changed, 89 insertions(+), 102 deletions(-)

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 5563b49..f49c82e 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,10 +1,6 @@
-"use client";
-
 import Image from "next/image";
-import { useRef } from "react";
 import { Montserrat_Alternates as Montserrat } from "next/font/google";
 import { Github, Star } from "lucide-react";
-import { motion, useScroll, useSpring, useTransform } from "framer-motion";
 
 import logo from "@/public/logo.svg";
 
@@ -14,101 +10,94 @@ const roboto = Montserrat({
   subsets: ["cyrillic"],
 });
 export default function Footer() {
-  const footerRef = useRef(null);
-
-  const { scrollYProgress } = useScroll({
-    target: footerRef,
-    offset: ["0 1", "1 1"],
-  });
+  return (
+    <footer className="relative h-[400px] z-[-10]">
+      <div className="fixed bottom-0 h-[400px] w-full">
 
-  const footerProgress = useTransform(scrollYProgress, [0, 1], ["-100%", "0%"]);
+        <div className="flex justify-between py-20 px-4 md:px-6 lg:px-6 2xl:px-20">
+          <div>
+            <div className="flex gap-2 items-end mb-2">
+              <Image src={logo} alt="logo" width={40} />
+              <p
+                className={`${roboto.className} hidden sm:block text-lg text-neutral-600 `}
+              >
+                DocX
+              </p>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Copyright &copy; 2025 DocX. <br /> All rights reserved.
+            </p>
+          </div>
 
-  return (
-    <motion.footer
-      ref={footerRef}
-      style={{ y: footerProgress }}
-      className="flex z-0 justify-between py-20  px-4 md:px-6 lg:px-6 2xl:px-20"
-    >
-      <div>
-        <div className="flex gap-2 items-end mb-2">
-          <Image src={logo} alt="logo" width={40} />
-          <p
-            className={`${roboto.className} hidden sm:block text-lg text-neutral-600 `}
-          >
-            DocX
-          </p>
-        </div>
-        <p className="text-sm text-muted-foreground">
-          Copyright &copy; 2025 DocX. <br /> All rights reserved.
-        </p>
-      </div>
+          <div className="grid grid-cols-3 gap-10 items-start mt-10">
+            <div className="flex justify-center space-y-4 flex-col">
+              <a
+                href="#"
+                className="text-sm text-muted-foreground hover:text-black no-underline"
+              >
+                Home
+              </a>
+              <a
+                href="#features"
+                className="text-sm text-muted-foreground hover:text-black no-underline"
+              >
+                Features
+              </a>
+              <a
+                href="https://github.com/git-init-priyanshu/Docx"
+                target="_blank"
+                className="text-sm text-muted-foreground hover:text-black no-underline"
+              >
+                Open Source
+              </a>
+            </div>
 
-      <div className="grid grid-cols-3 gap-10 items-start mt-10">
-        <div className="flex justify-center space-y-4 flex-col">
-          <a
-            href="#"
-            className="text-sm text-muted-foreground hover:text-black no-underline"
-          >
-            Home
-          </a>
-          <a
-            href="#features"
-            className="text-sm text-muted-foreground hover:text-black no-underline"
-          >
-            Features
-          </a>
-          <a
-            href="https://github.com/git-init-priyanshu/Docx"
-            target="_blank"
-            className="text-sm text-muted-foreground hover:text-black no-underline"
-          >
-            Open Source
-          </a>
-        </div>
+            <div className="flex justify-center space-y-4 flex-col">
+              <a className="text-sm text-muted-foreground hover:text-black no-underline">
+                Privacy Policy
+              </a>
+              <a className="text-sm text-muted-foreground hover:text-black no-underline">
+                Terms of Service
+              </a>
+            </div>
 
-        <div className="flex justify-center space-y-4 flex-col">
-          <a className="text-sm text-muted-foreground hover:text-black no-underline">
-            Privacy Policy
-          </a>
-          <a className="text-sm text-muted-foreground hover:text-black no-underline">
-            Terms of Service
-          </a>
-        </div>
+            <div className="flex justify-center space-y-4 flex-col">
+              <a
+                href="https://github.com/git-init-priyanshu"
+                target="_blank"
+                className="text-sm text-muted-foreground hover:text-black no-underline"
+              >
+                Github
+              </a>
+              <a
+                href="https://x.com/PriyanshuBartw5"
+                target="_blank"
+                className="text-sm text-muted-foreground hover:text-black no-underline"
+              >
+                X ( Twitter )
+              </a>
+              <a
+                href="https://www.linkedin.com/in/priyanshu-bartwal/"
+                target="_blank"
+                className="text-sm text-muted-foreground hover:text-black no-underline"
+              >
+                LinkedIn
+              </a>
+            </div>
 
-        <div className="flex justify-center space-y-4 flex-col">
-          <a
-            href="https://github.com/git-init-priyanshu"
-            target="_blank"
-            className="text-sm text-muted-foreground hover:text-black no-underline"
-          >
-            Github
-          </a>
-          <a
-            href="https://x.com/PriyanshuBartw5"
-            target="_blank"
-            className="text-sm text-muted-foreground hover:text-black no-underline"
-          >
-            X ( Twitter )
-          </a>
-          <a
-            href="https://www.linkedin.com/in/priyanshu-bartwal/"
-            target="_blank"
-            className="text-sm text-muted-foreground hover:text-black no-underline"
-          >
-            LinkedIn
-          </a>
+            <a
+              href="https://github.com/git-init-priyanshu/Docx"
+              target="_blank"
+              className=" col-span-3 z-10 flex cursor-pointer gap-2 h-10 items-center justify-center rounded-md border bg-background px-4 sm:px-8 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground hover:border-blue-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-muted-foreground"
+            >
+              <Star size={18} strokeWidth={2} />
+              <p>Star us on</p>
+              <Github size={18} strokeWidth={2} />
+            </a>
+          </div>
         </div>
 
-        <a
-          href="https://github.com/git-init-priyanshu/Docx"
-          target="_blank"
-          className=" col-span-3 z-10 flex cursor-pointer gap-2 h-10 items-center justify-center rounded-md border bg-background px-4 sm:px-8 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground hover:border-blue-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-muted-foreground"
-        >
-          <Star size={18} strokeWidth={2} />
-          <p>Star us on</p>
-          <Github size={18} strokeWidth={2} />
-        </a>
       </div>
-    </motion.footer>
+    </footer>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 93a93df..acec7de 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,14 +6,12 @@ import Footer from "./components/Footer";
 
 export default function Component() {
   return (
-    <div className="flex flex-col min-h-[100dvh] overflow-hidden">
-      <main className="flex-1">
-        <HeroSection />
-        <FeaturesSection />
-        {/* <AboutSection /> */}
-        {/* <ContactSection /> */}
-        <Footer />
-      </main>
-    </div>
+    <main className="flex flex-col min-h-[100dvh] overflow-hidden">
+      <HeroSection />
+      <FeaturesSection />
+      {/* <AboutSection /> */}
+      {/* <ContactSection /> */}
+      <Footer />
+    </main>
   );
 }
diff --git a/components/HeroImage.tsx b/components/HeroImage.tsx
index ea007a4..a6f044b 100644
--- a/components/HeroImage.tsx
+++ b/components/HeroImage.tsx
@@ -31,7 +31,7 @@ export default function HeroImage() {
   });
 
   return (
-    <div ref={containerRef} className="flex flex-col items-center">
+    <div ref={containerRef} className="flex flex-col items-center bg-slate-50">
       <GridBg
         isCursorMaskEnabled={false}
         cursorMaskSize={300}