From 0e9891b5a219ef2b45426c7e0645e9425f159c98 Mon Sep 17 00:00:00 2001
From: Yehoshua Sandler <accounts@tzed.io>
Date: Wed, 30 Apr 2025 14:32:21 -0500
Subject: [PATCH] feat: home page hero enter button

---
 components/motion-primitives/magnetic.tsx | 112 ++++++++++++++++++++++
 public/images/down.svg                    |   1 +
 src/app/(frontend)/page.tsx               |  66 ++-----------
 src/components/HomeHero.tsx               | 101 +++++++++++++++++++
 4 files changed, 220 insertions(+), 60 deletions(-)
 create mode 100644 components/motion-primitives/magnetic.tsx
 create mode 100644 public/images/down.svg
 create mode 100644 src/components/HomeHero.tsx

diff --git a/components/motion-primitives/magnetic.tsx b/components/motion-primitives/magnetic.tsx
new file mode 100644
index 0000000..f9a04c6
--- /dev/null
+++ b/components/motion-primitives/magnetic.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  type SpringOptions,
+} from 'motion/react';
+
+const SPRING_CONFIG = { stiffness: 26.7, damping: 4.1, mass: 0.2 };
+
+export type MagneticProps = {
+  children: React.ReactNode;
+  intensity?: number;
+  range?: number;
+  actionArea?: 'self' | 'parent' | 'global';
+  springOptions?: SpringOptions;
+};
+
+export function Magnetic({
+  children,
+  intensity = 0.6,
+  range = 100,
+  actionArea = 'self',
+  springOptions = SPRING_CONFIG,
+}: MagneticProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  const springX = useSpring(x, springOptions);
+  const springY = useSpring(y, springOptions);
+
+  useEffect(() => {
+    const calculateDistance = (e: MouseEvent) => {
+      if (ref.current) {
+        const rect = ref.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const distanceX = e.clientX - centerX;
+        const distanceY = e.clientY - centerY;
+
+        const absoluteDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2);
+
+        if (isHovered && absoluteDistance <= range) {
+          const scale = 1 - absoluteDistance / range;
+          x.set(distanceX * intensity * scale);
+          y.set(distanceY * intensity * scale);
+        } else {
+          x.set(0);
+          y.set(0);
+        }
+      }
+    };
+
+    document.addEventListener('mousemove', calculateDistance);
+
+    return () => {
+      document.removeEventListener('mousemove', calculateDistance);
+    };
+  }, [ref, isHovered, intensity, range]);
+
+  useEffect(() => {
+    if (actionArea === 'parent' && ref.current?.parentElement) {
+      const parent = ref.current.parentElement;
+
+      const handleParentEnter = () => setIsHovered(true);
+      const handleParentLeave = () => setIsHovered(false);
+
+      parent.addEventListener('mouseenter', handleParentEnter);
+      parent.addEventListener('mouseleave', handleParentLeave);
+
+      return () => {
+        parent.removeEventListener('mouseenter', handleParentEnter);
+        parent.removeEventListener('mouseleave', handleParentLeave);
+      };
+    } else if (actionArea === 'global') {
+      setIsHovered(true);
+    }
+  }, [actionArea]);
+
+  const handleMouseEnter = () => {
+    if (actionArea === 'self') {
+      setIsHovered(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (actionArea === 'self') {
+      setIsHovered(false);
+      x.set(0);
+      y.set(0);
+    }
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      onMouseEnter={actionArea === 'self' ? handleMouseEnter : undefined}
+      onMouseLeave={actionArea === 'self' ? handleMouseLeave : undefined}
+      style={{
+        x: springX,
+        y: springY,
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/public/images/down.svg b/public/images/down.svg
new file mode 100644
index 0000000..7a277fc
--- /dev/null
+++ b/public/images/down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 80 80" width="80px" height="80px"><path d="M 40 7 C 21.786448 7 7 21.786448 7 40 C 7 58.213552 21.786448 73 40 73 C 58.213552 73 73 58.213552 73 40 C 73 21.786448 58.213552 7 40 7 z M 40 9 C 57.132672 9 71 22.867328 71 40 C 71 57.132672 57.132672 71 40 71 C 22.867328 71 9 57.132672 9 40 C 9 22.867328 22.867328 9 40 9 z M 40 12 A 1 1 0 0 0 39 13 A 1 1 0 0 0 40 14 A 1 1 0 0 0 41 13 A 1 1 0 0 0 40 12 z M 34.732422 12.519531 A 1 1 0 0 0 33.732422 13.519531 A 1 1 0 0 0 34.732422 14.519531 A 1 1 0 0 0 35.732422 13.519531 A 1 1 0 0 0 34.732422 12.519531 z M 45.267578 12.519531 A 1 1 0 0 0 44.267578 13.519531 A 1 1 0 0 0 45.267578 14.519531 A 1 1 0 0 0 46.267578 13.519531 A 1 1 0 0 0 45.267578 12.519531 z M 29.667969 14.056641 A 1 1 0 0 0 28.667969 15.056641 A 1 1 0 0 0 29.667969 16.056641 A 1 1 0 0 0 30.667969 15.056641 A 1 1 0 0 0 29.667969 14.056641 z M 50.332031 14.056641 A 1 1 0 0 0 49.332031 15.056641 A 1 1 0 0 0 50.332031 16.056641 A 1 1 0 0 0 51.332031 15.056641 A 1 1 0 0 0 50.332031 14.056641 z M 25 16.552734 A 1 1 0 0 0 24 17.552734 A 1 1 0 0 0 25 18.552734 A 1 1 0 0 0 26 17.552734 A 1 1 0 0 0 25 16.552734 z M 55.001953 16.552734 A 1 1 0 0 0 54.001953 17.552734 A 1 1 0 0 0 55.001953 18.552734 A 1 1 0 0 0 56.001953 17.552734 A 1 1 0 0 0 55.001953 16.552734 z M 20.908203 19.908203 A 1 1 0 0 0 19.908203 20.908203 A 1 1 0 0 0 20.908203 21.908203 A 1 1 0 0 0 21.908203 20.908203 A 1 1 0 0 0 20.908203 19.908203 z M 59.091797 19.908203 A 1 1 0 0 0 58.091797 20.908203 A 1 1 0 0 0 59.091797 21.908203 A 1 1 0 0 0 60.091797 20.908203 A 1 1 0 0 0 59.091797 19.908203 z M 17.550781 24.001953 A 1 1 0 0 0 16.550781 25.001953 A 1 1 0 0 0 17.550781 26.001953 A 1 1 0 0 0 18.550781 25.001953 A 1 1 0 0 0 17.550781 24.001953 z M 62.451172 24.003906 A 1 1 0 0 0 61.451172 25.003906 A 1 1 0 0 0 62.451172 26.003906 A 1 1 0 0 0 63.451172 25.003906 A 1 1 0 0 0 62.451172 24.003906 z M 15.054688 28.669922 A 1 1 0 0 0 14.054688 29.669922 A 1 1 0 0 0 15.054688 30.669922 A 1 1 0 0 0 16.054688 29.669922 A 1 1 0 0 0 15.054688 28.669922 z M 64.945312 28.669922 A 1 1 0 0 0 63.945312 29.669922 A 1 1 0 0 0 64.945312 30.669922 A 1 1 0 0 0 65.945312 29.669922 A 1 1 0 0 0 64.945312 28.669922 z M 13.519531 33.734375 A 1 1 0 0 0 12.519531 34.734375 A 1 1 0 0 0 13.519531 35.734375 A 1 1 0 0 0 14.519531 34.734375 A 1 1 0 0 0 13.519531 33.734375 z M 66.480469 33.734375 A 1 1 0 0 0 65.480469 34.734375 A 1 1 0 0 0 66.480469 35.734375 A 1 1 0 0 0 67.480469 34.734375 A 1 1 0 0 0 66.480469 33.734375 z M 27.707031 33.792969 L 26.292969 35.207031 L 40 48.914062 L 53.707031 35.207031 L 52.292969 33.792969 L 40 46.085938 L 27.707031 33.792969 z M 13 39 A 1 1 0 0 0 12 40 A 1 1 0 0 0 13 41 A 1 1 0 0 0 14 40 A 1 1 0 0 0 13 39 z M 67 39 A 1 1 0 0 0 66 40 A 1 1 0 0 0 67 41 A 1 1 0 0 0 68 40 A 1 1 0 0 0 67 39 z M 13.519531 44.267578 A 1 1 0 0 0 12.519531 45.267578 A 1 1 0 0 0 13.519531 46.267578 A 1 1 0 0 0 14.519531 45.267578 A 1 1 0 0 0 13.519531 44.267578 z M 66.482422 44.267578 A 1 1 0 0 0 65.482422 45.267578 A 1 1 0 0 0 66.482422 46.267578 A 1 1 0 0 0 67.482422 45.267578 A 1 1 0 0 0 66.482422 44.267578 z M 15.054688 49.332031 A 1 1 0 0 0 14.054688 50.332031 A 1 1 0 0 0 15.054688 51.332031 A 1 1 0 0 0 16.054688 50.332031 A 1 1 0 0 0 15.054688 49.332031 z M 64.945312 49.333984 A 1 1 0 0 0 63.945312 50.333984 A 1 1 0 0 0 64.945312 51.333984 A 1 1 0 0 0 65.945312 50.333984 A 1 1 0 0 0 64.945312 49.333984 z M 17.548828 54.001953 A 1 1 0 0 0 16.548828 55.001953 A 1 1 0 0 0 17.548828 56.001953 A 1 1 0 0 0 18.548828 55.001953 A 1 1 0 0 0 17.548828 54.001953 z M 62.449219 54.003906 A 1 1 0 0 0 61.449219 55.003906 A 1 1 0 0 0 62.449219 56.003906 A 1 1 0 0 0 63.449219 55.003906 A 1 1 0 0 0 62.449219 54.003906 z M 20.908203 58.091797 A 1 1 0 0 0 19.908203 59.091797 A 1 1 0 0 0 20.908203 60.091797 A 1 1 0 0 0 21.908203 59.091797 A 1 1 0 0 0 20.908203 58.091797 z M 59.091797 58.091797 A 1 1 0 0 0 58.091797 59.091797 A 1 1 0 0 0 59.091797 60.091797 A 1 1 0 0 0 60.091797 59.091797 A 1 1 0 0 0 59.091797 58.091797 z M 24.998047 61.453125 A 1 1 0 0 0 23.998047 62.453125 A 1 1 0 0 0 24.998047 63.453125 A 1 1 0 0 0 25.998047 62.453125 A 1 1 0 0 0 24.998047 61.453125 z M 55 61.453125 A 1 1 0 0 0 54 62.453125 A 1 1 0 0 0 55 63.453125 A 1 1 0 0 0 56 62.453125 A 1 1 0 0 0 55 61.453125 z M 50.332031 63.945312 A 1 1 0 0 0 49.332031 64.945312 A 1 1 0 0 0 50.332031 65.945312 A 1 1 0 0 0 51.332031 64.945312 A 1 1 0 0 0 50.332031 63.945312 z M 29.667969 63.947266 A 1 1 0 0 0 28.667969 64.947266 A 1 1 0 0 0 29.667969 65.947266 A 1 1 0 0 0 30.667969 64.947266 A 1 1 0 0 0 29.667969 63.947266 z M 34.732422 65.482422 A 1 1 0 0 0 33.732422 66.482422 A 1 1 0 0 0 34.732422 67.482422 A 1 1 0 0 0 35.732422 66.482422 A 1 1 0 0 0 34.732422 65.482422 z M 45.267578 65.482422 A 1 1 0 0 0 44.267578 66.482422 A 1 1 0 0 0 45.267578 67.482422 A 1 1 0 0 0 46.267578 66.482422 A 1 1 0 0 0 45.267578 65.482422 z M 40 66 A 1 1 0 0 0 39 67 A 1 1 0 0 0 40 68 A 1 1 0 0 0 41 67 A 1 1 0 0 0 40 66 z"/></svg>
\ No newline at end of file
diff --git a/src/app/(frontend)/page.tsx b/src/app/(frontend)/page.tsx
index 4189bc3..d881da2 100644
--- a/src/app/(frontend)/page.tsx
+++ b/src/app/(frontend)/page.tsx
@@ -10,6 +10,10 @@ import { TextShimmer } from '@/components/ui/text-shimmer'
 import { LoginForm } from '@/components/login-form'
 import SearchBooks from '@/components/Search/SearchBooks'
 import Manage from '@/components/Manage/Manage'
+import { Magnetic } from 'components/motion-primitives/magnetic'
+import { Button } from '@/components/ui/button'
+import Image from 'next/image'
+import HomeHero from '@/components/HomeHero'
 
 export default async function HomePage() {
   const headers = await getHeaders()
@@ -89,68 +93,10 @@ export default async function HomePage() {
 
   return (
     <div className="home">
-      <div className="relative isolate overflow-hidden py-24 sm:py-32 rounded-md">
-        <img
-          alt=""
-          src="/api/media/file/geniza1.jpg"
-          className="absolute inset-0 -z-10 size-full object-cover"
-        />
-
-        <div
-          aria-hidden="true"
-          className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="aspect-1097/845 w-[78.5625rem] bg-linear-to-tr from-accent-background to-background opacity-100"
-          />
-        </div>
-
-        <div
-          aria-hidden="true"
-          className="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu"
-        >
-          <div
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-            className="aspect-1097/845 w-[78.5625rem] bg-linear-to-tr from-background bg-background"
-          />
-        </div>
-
-        <div className="mx-auto max-w-7xl px-6 lg:px-8 ">
-          <div className="mx-auto max-w-2xl lg:mx-0">
-            <p className="text-base/7 font-semibold text-foreground">Temple Beth-El Beit Midrash</p>
-
-            <h2 className="mt-2 text-5xl font-semibold tracking-tight text-foreground  sm:text-7xl text-shadow-lg">
-              <TextShimmer
-                duration={2.2}
-                className="[--base-color:var(--color-emerald-700)] [--base-gradient-color:var(--color-white)] dark:[--base-color:var(--color-emerald-600)] dark:[--base-gradient-color:var(--color-white)]"
-              >
-                Welcome&nbsp;
-              </TextShimmer>
-              <span className="text-shadow-lg text-shadow-background">
-                {user ? <small>{user.firstName}</small> : <small>In</small>}
-              </span>
-            </h2>
-            <div className="mt-8 text-lg font-normal text-pretty text-foreground text-shadow-lg text-shadow-background sm:text-xl/8">
-              <p className="indent-5 italic">
-                Never refuse to lend books to anyone who cannot afford to purchase them, but lend
-                books only to those who can be trusted to return them.
-              </p>
-
-              <small className="block text-right">- ibn Tibbon</small>
-            </div>
-          </div>
-        </div>
-      </div>
+      <HomeHero user={user} />
 
       {user ? (
-        <Tabs defaultValue="feed" className="p-4">
+        <Tabs id="tabs" defaultValue="feed" className="p-4">
           <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="feed">Your Feed</TabsTrigger>
             <TabsTrigger value="search">Search</TabsTrigger>
diff --git a/src/components/HomeHero.tsx b/src/components/HomeHero.tsx
new file mode 100644
index 0000000..41a1ab0
--- /dev/null
+++ b/src/components/HomeHero.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import { Magnetic } from 'components/motion-primitives/magnetic'
+import { Button } from './ui/button'
+import Image from 'next/image'
+import { TextShimmer } from './ui/text-shimmer'
+import { User } from '@/payload-types'
+
+type Props = {
+  user: User | null
+}
+const HomeHero = (props: Props) => {
+  const { user } = props
+  return (
+    <div>
+      <div className="relative isolate overflow-hidden py-24 sm:py-32 rounded-md">
+        <img
+          alt=""
+          src="/api/media/file/geniza1.jpg"
+          className="absolute inset-0 -z-10 size-full object-cover"
+        />
+
+        <div
+          aria-hidden="true"
+          className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="aspect-1097/845 w-[78.5625rem] bg-linear-to-tr from-accent-background to-background opacity-100"
+          />
+        </div>
+
+        <div
+          aria-hidden="true"
+          className="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="aspect-1097/845 w-[78.5625rem] bg-linear-to-tr from-background bg-background"
+          />
+        </div>
+
+        <div className="mx-auto max-w-7xl px-6 lg:px-8 ">
+          <div className="mx-auto max-w-2xl lg:mx-0">
+            <p className="text-base/7 font-semibold text-foreground">Temple Beth-El Beit Midrash</p>
+
+            <h2 className="mt-2 text-5xl font-semibold tracking-tight text-foreground  sm:text-7xl text-shadow-lg">
+              <TextShimmer
+                duration={2.2}
+                className="[--base-color:var(--color-emerald-700)] [--base-gradient-color:var(--color-white)] dark:[--base-color:var(--color-emerald-600)] dark:[--base-gradient-color:var(--color-white)]"
+              >
+                Welcome&nbsp;
+              </TextShimmer>
+              <span className="text-shadow-lg text-shadow-background">
+                {user ? <small>{user.firstName}</small> : <small>In</small>}
+              </span>
+            </h2>
+            <div className="mt-8 text-lg font-normal text-pretty text-foreground text-shadow-lg text-shadow-background sm:text-xl/8">
+              <p className="indent-5 italic">
+                Never refuse to lend books to anyone who cannot afford to purchase them, but lend
+                books only to those who can be trusted to return them.
+              </p>
+
+              <small className="block text-right">- ibn Tibbon</small>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-center h-32">
+        <Magnetic intensity={0.2} springOptions={{ bounce: 0.1 }} actionArea="global" range={200}>
+          <Button
+            type="button"
+            className="animate-pulse mx-auto block items-center rounded-lg border border-zinc-100/10 bg-transparent text-foreground  px-8 py-2 text-sm  transition-all duration-200 h-fit"
+            onClick={() => {
+              const tabs = document.getElementById('tabs')
+              tabs?.scrollIntoView({ behavior: 'smooth' })
+            }}
+          >
+            <Image
+              src="/images/down.svg"
+              alt="Enter site"
+              width={40}
+              height={40}
+              className="block mx-auto dark:invert"
+            />
+            <span className="block">Enter</span>
+          </Button>
+        </Magnetic>
+      </div>
+    </div>
+  )
+}
+
+export default HomeHero