aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/app/OurServices.tsx4
-rw-r--r--src/app/WhyUs.tsx1
-rw-r--r--src/app/page.tsx1
-rw-r--r--src/components/old/bentonbox.tsx326
-rw-r--r--src/components/ui/background-ripple-effect.tsx2
-rw-r--r--src/components/ui/canvas-reveal-effect.tsx572
-rw-r--r--src/components/ui/card-spotlight.tsx140
-rw-r--r--src/components/ui/wavy-background.tsx250
-rw-r--r--src/components/ui/wooble-card.tsx150
-rw-r--r--src/components/ui/world-map.tsx312
10 files changed, 876 insertions, 882 deletions
diff --git a/src/app/OurServices.tsx b/src/app/OurServices.tsx
index 4f3e5e8..04e2764 100644
--- a/src/app/OurServices.tsx
+++ b/src/app/OurServices.tsx
@@ -1,9 +1,5 @@
"use client";
-import { BackgroundRippleEffect } from "@/components/ui/background-ripple-effect";
-import { CardSpotlight } from "@/components/ui/card-spotlight";
-import { WobbleCard } from "@/components/ui/wooble-card";
-import { WorldMap } from "@/components/ui/world-map";
import { motion } from "motion/react";
export default function OurServices() {
diff --git a/src/app/WhyUs.tsx b/src/app/WhyUs.tsx
index bb92485..046c4d4 100644
--- a/src/app/WhyUs.tsx
+++ b/src/app/WhyUs.tsx
@@ -1,4 +1,3 @@
-import { BackgroundRippleEffect } from "@/components/ui/background-ripple-effect";
import {
AcademicCapIcon,
BanknotesIcon,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0c59aab..ba1a9dd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,5 @@
"use client";
-import Grid from "@/components/backgrounds/Grid";
import Polygons from "@/components/backgrounds/Polygons";
import Footer from "./Footer";
import Header from "./Header";
diff --git a/src/components/old/bentonbox.tsx b/src/components/old/bentonbox.tsx
index 5a3afca..547b8d7 100644
--- a/src/components/old/bentonbox.tsx
+++ b/src/components/old/bentonbox.tsx
@@ -1,165 +1,165 @@
-"use client";
+// "use client";
-import { motion } from "motion/react";
+// import { motion } from "motion/react";
-export default function OurServices() {
- return (
- <div className="pt-24 sm:pt-32">
- <section className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
- <motion.h2
- className="text-center text-base/7 font-semibold text-indigo-700"
- initial={{ opacity: 0, y: -20 }}
- whileInView={{ opacity: 1, y: 0 }}
- transition={{ duration: 0.5 }}
- >
- Learn In a Better Way
- </motion.h2>
- <motion.p
- className="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight sm:text-5xl"
- initial={{ opacity: 0, y: -20 }}
- whileInView={{ opacity: 1, y: 0 }}
- transition={{ duration: 0.5, delay: 0.1 }}
- >
- Our Services
- </motion.p>
- <div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
- <motion.div
- className="relative lg:row-span-2"
- initial={{ opacity: 0, y: 20 }}
- whileInView={{ opacity: 1, y: 0 }}
- transition={{ delay: 0.2, duration: 0.2 }}
- >
- <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 lg:rounded-l-4xl" />
- <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
- <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
- <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
- Tutoring at All Grade Levels
- </p>
- <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
- Our tutors cover a wide range of subjects and grade levels,
- </p>
- </div>
- <div className="@container relative min-h-120 w-full grow max-lg:mx-auto max-lg:max-w-sm">
- <div className="absolute inset-x-10 top-10 bottom-0 overflow-hidden rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] border-gray-700 bg-gray-900 outline outline-white/20">
- <img
- alt=""
- src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-mobile-friendly.png"
- className="size-full object-cover object-top"
- />
- </div>
- </div>
- </div>
- <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 lg:rounded-l-4xl" />
- </motion.div>
- <motion.div
- className="relative max-lg:row-start-1"
- initial={{ opacity: 0, y: 20 }}
- whileInView={{
- opacity: 1,
- y: 0,
- transition: { delay: 0.2, duration: 0.2 },
- }}
- >
- <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 max-lg:rounded-t-4xl" />
- <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
- <div className="px-8 pt-8 sm:px-10 sm:pt-10">
- <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
- SAT / ACT Prep
- </p>
- <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
- We only hire tutors who have been high-performing students
- with previous teaching experience. Most of our tutors are
- currently pursuing PhDs or Masters in their respective fields.
- </p>
- </div>
- <div className="flex flex-1 items-center justify-center px-8 max-lg:pt-10 max-lg:pb-12 sm:px-10 lg:pb-2">
- <img
- alt=""
- src="https://tailwindcss.com/plus-assets/img/component-images/dark-bento-03-performance.png"
- className="w-full max-lg:max-w-xs"
- />
- </div>
- </div>
- <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-t-4xl" />
- </motion.div>
- <motion.div
- className="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2"
- initial={{ opacity: 0, y: 20 }}
- whileInView={{
- opacity: 1,
- y: 0,
- transition: { delay: 0.2, duration: 0.2 },
- }}
- >
- <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5" />
- <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
- <div className="px-8 pt-8 sm:px-10 sm:pt-10">
- <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
- Secure Technological Integration
- </p>
- <p className="mt-2 text-sm/6 text-gray-700 max-lg:text-center">
- While applying technology to make learning the best it can be,
- we prioritize security and privacy to protect our users' data
- and ensure a safe learning environment.
- </p>
- </div>
- <div className="@container flex flex-1 items-center max-lg:py-6 lg:pb-2">
- <img
- alt=""
- src="https://tailwindcss.com/plus-assets/img/component-images/dark-bento-03-security.png"
- className="h-[min(152px,40cqw)] object-cover"
- />
- </div>
- </div>
- <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15" />
- </motion.div>
- <motion.div
- className="relative lg:row-span-2"
- initial={{ opacity: 0, y: 20 }}
- whileInView={{
- opacity: 1,
- y: 0,
- transition: { delay: 0.2, duration: 0.2 },
- }}
- >
- <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
- <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
- <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
- <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
- Competitive Math and Coding Counseling
- </p>
- <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
- Our handcrafted AI learns from your sessions and provides
- personalized summaries, practice problems, and study plans to
- help you succeed.
- </p>
- </div>
- <div className="relative min-h-120 w-full grow">
- <div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl bg-gray-900/60 outline outline-white/10">
- <div className="flex bg-gray-900 outline outline-white/5">
- <div className="-mb-px flex text-sm/6 font-medium text-gray-400">
- <div className="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white">
- Week1_Session_Precalc.md
- </div>
- <div className="border-r border-gray-600/10 px-4 py-2">
- Week2_Session_Precalc.md
- </div>
- </div>
- </div>
- <div className="px-6 pt-6 pb-14">
- <p className="text-sm/6 text-gray-400">AI Summary:</p>
- <p className="text-sm/6 text-gray-400">
- This is a summary of the AI's findings and recommendations
- based on the user's input and interactions.
- </p>
- </div>
- </div>
- </div>
- </div>
- <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
- </motion.div>
- </div>
- </section>
- </div>
- );
-}
+// export default function OurServices() {
+// return (
+// <div className="pt-24 sm:pt-32">
+// <section className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+// <motion.h2
+// className="text-center text-base/7 font-semibold text-indigo-700"
+// initial={{ opacity: 0, y: -20 }}
+// whileInView={{ opacity: 1, y: 0 }}
+// transition={{ duration: 0.5 }}
+// >
+// Learn In a Better Way
+// </motion.h2>
+// <motion.p
+// className="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight sm:text-5xl"
+// initial={{ opacity: 0, y: -20 }}
+// whileInView={{ opacity: 1, y: 0 }}
+// transition={{ duration: 0.5, delay: 0.1 }}
+// >
+// Our Services
+// </motion.p>
+// <div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
+// <motion.div
+// className="relative lg:row-span-2"
+// initial={{ opacity: 0, y: 20 }}
+// whileInView={{ opacity: 1, y: 0 }}
+// transition={{ delay: 0.2, duration: 0.2 }}
+// >
+// <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 lg:rounded-l-4xl" />
+// <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
+// <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
+// <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
+// Tutoring at All Grade Levels
+// </p>
+// <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
+// Our tutors cover a wide range of subjects and grade levels,
+// </p>
+// </div>
+// <div className="@container relative min-h-120 w-full grow max-lg:mx-auto max-lg:max-w-sm">
+// <div className="absolute inset-x-10 top-10 bottom-0 overflow-hidden rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] border-gray-700 bg-gray-900 outline outline-white/20">
+// <img
+// alt=""
+// src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-mobile-friendly.png"
+// className="size-full object-cover object-top"
+// />
+// </div>
+// </div>
+// </div>
+// <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 lg:rounded-l-4xl" />
+// </motion.div>
+// <motion.div
+// className="relative max-lg:row-start-1"
+// initial={{ opacity: 0, y: 20 }}
+// whileInView={{
+// opacity: 1,
+// y: 0,
+// transition: { delay: 0.2, duration: 0.2 },
+// }}
+// >
+// <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 max-lg:rounded-t-4xl" />
+// <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
+// <div className="px-8 pt-8 sm:px-10 sm:pt-10">
+// <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
+// SAT / ACT Prep
+// </p>
+// <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
+// We only hire tutors who have been high-performing students
+// with previous teaching experience. Most of our tutors are
+// currently pursuing PhDs or Masters in their respective fields.
+// </p>
+// </div>
+// <div className="flex flex-1 items-center justify-center px-8 max-lg:pt-10 max-lg:pb-12 sm:px-10 lg:pb-2">
+// <img
+// alt=""
+// src="https://tailwindcss.com/plus-assets/img/component-images/dark-bento-03-performance.png"
+// className="w-full max-lg:max-w-xs"
+// />
+// </div>
+// </div>
+// <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-t-4xl" />
+// </motion.div>
+// <motion.div
+// className="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2"
+// initial={{ opacity: 0, y: 20 }}
+// whileInView={{
+// opacity: 1,
+// y: 0,
+// transition: { delay: 0.2, duration: 0.2 },
+// }}
+// >
+// <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5" />
+// <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+// <div className="px-8 pt-8 sm:px-10 sm:pt-10">
+// <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
+// Secure Technological Integration
+// </p>
+// <p className="mt-2 text-sm/6 text-gray-700 max-lg:text-center">
+// While applying technology to make learning the best it can be,
+// we prioritize security and privacy to protect our users&apos; data
+// and ensure a safe learning environment.
+// </p>
+// </div>
+// <div className="@container flex flex-1 items-center max-lg:py-6 lg:pb-2">
+// <img
+// alt=""
+// src="https://tailwindcss.com/plus-assets/img/component-images/dark-bento-03-security.png"
+// className="h-[min(152px,40cqw)] object-cover"
+// />
+// </div>
+// </div>
+// <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15" />
+// </motion.div>
+// <motion.div
+// className="relative lg:row-span-2"
+// initial={{ opacity: 0, y: 20 }}
+// whileInView={{
+// opacity: 1,
+// y: 0,
+// transition: { delay: 0.2, duration: 0.2 },
+// }}
+// >
+// <div className="absolute inset-px rounded-lg bg-white/30 outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
+// <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
+// <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
+// <p className="mt-2 text-lg font-medium tracking-tight max-lg:text-center">
+// Competitive Math and Coding Counseling
+// </p>
+// <p className="mt-2 text-sm/6 text-gray-600 max-lg:text-center">
+// Our handcrafted AI learns from your sessions and provides
+// personalized summaries, practice problems, and study plans to
+// help you succeed.
+// </p>
+// </div>
+// <div className="relative min-h-120 w-full grow">
+// <div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl bg-gray-900/60 outline outline-white/10">
+// <div className="flex bg-gray-900 outline outline-white/5">
+// <div className="-mb-px flex text-sm/6 font-medium text-gray-400">
+// <div className="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white">
+// Week1_Session_Precalc.md
+// </div>
+// <div className="border-r border-gray-600/10 px-4 py-2">
+// Week2_Session_Precalc.md
+// </div>
+// </div>
+// </div>
+// <div className="px-6 pt-6 pb-14">
+// <p className="text-sm/6 text-gray-400">AI Summary:</p>
+// <p className="text-sm/6 text-gray-400">
+// This is a summary of the AI&apos;s findings and recommendations
+// based on the user&apos;s input and interactions.
+// </p>
+// </div>
+// </div>
+// </div>
+// </div>
+// <div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-white/15 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
+// </motion.div>
+// </div>
+// </section>
+// </div>
+// );
+// }
diff --git a/src/components/ui/background-ripple-effect.tsx b/src/components/ui/background-ripple-effect.tsx
index d9d265b..7f084cd 100644
--- a/src/components/ui/background-ripple-effect.tsx
+++ b/src/components/ui/background-ripple-effect.tsx
@@ -16,7 +16,7 @@ export const BackgroundRippleEffect = ({
col: number;
} | null>(null);
const [rippleKey, setRippleKey] = useState(0);
- const ref = useRef<any>(null);
+ const ref = useRef<HTMLDivElement>(null);
return (
<div
diff --git a/src/components/ui/canvas-reveal-effect.tsx b/src/components/ui/canvas-reveal-effect.tsx
index f84d7a8..b03d01c 100644
--- a/src/components/ui/canvas-reveal-effect.tsx
+++ b/src/components/ui/canvas-reveal-effect.tsx
@@ -1,308 +1,308 @@
-"use client";
-import { cn } from "@/lib/utils";
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
-import React, { useMemo, useRef } from "react";
-import * as THREE from "three";
+// "use client";
+// import { cn } from "@/lib/utils";
+// import { Canvas, useFrame, useThree } from "@react-three/fiber";
+// import React, { useMemo, useRef } from "react";
+// import * as THREE from "three";
-export const CanvasRevealEffect = ({
- animationSpeed = 0.4,
- opacities = [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1],
- colors = [[0, 255, 255]],
- containerClassName,
- dotSize,
- showGradient = false,
-}: {
- /**
- * 0.1 - slower
- * 1.0 - faster
- */
- animationSpeed?: number;
- opacities?: number[];
- colors?: number[][];
- containerClassName?: string;
- dotSize?: number;
- showGradient?: boolean;
-}) => {
- return (
- <div className={cn("h-full relative bg-white w-full", containerClassName)}>
- <div className="h-full w-full">
- <DotMatrix
- colors={colors ?? [[0, 255, 255]]}
- dotSize={dotSize ?? 3}
- opacities={
- opacities ?? [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1]
- }
- shader={`
- float animation_speed_factor = ${animationSpeed.toFixed(1)};
- float intro_offset = distance(u_resolution / 2.0 / u_total_size, st2) * 0.01 + (random(st2) * 0.15);
- opacity *= step(intro_offset, u_time * animation_speed_factor);
- opacity *= clamp((1.0 - step(intro_offset + 0.1, u_time * animation_speed_factor)) * 1.25, 1.0, 1.25);
- `}
- center={["x", "y"]}
- />
- </div>
- {showGradient && (
- <div className="absolute inset-0 bg-gradient-to-t from-gray-950 to-[84%]" />
- )}
- </div>
- );
-};
+// export const CanvasRevealEffect = ({
+// animationSpeed = 0.4,
+// opacities = [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1],
+// colors = [[0, 255, 255]],
+// containerClassName,
+// dotSize,
+// showGradient = false,
+// }: {
+// /**
+// * 0.1 - slower
+// * 1.0 - faster
+// */
+// animationSpeed?: number;
+// opacities?: number[];
+// colors?: number[][];
+// containerClassName?: string;
+// dotSize?: number;
+// showGradient?: boolean;
+// }) => {
+// return (
+// <div className={cn("h-full relative bg-white w-full", containerClassName)}>
+// <div className="h-full w-full">
+// <DotMatrix
+// colors={colors ?? [[0, 255, 255]]}
+// dotSize={dotSize ?? 3}
+// opacities={
+// opacities ?? [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1]
+// }
+// shader={`
+// float animation_speed_factor = ${animationSpeed.toFixed(1)};
+// float intro_offset = distance(u_resolution / 2.0 / u_total_size, st2) * 0.01 + (random(st2) * 0.15);
+// opacity *= step(intro_offset, u_time * animation_speed_factor);
+// opacity *= clamp((1.0 - step(intro_offset + 0.1, u_time * animation_speed_factor)) * 1.25, 1.0, 1.25);
+// `}
+// center={["x", "y"]}
+// />
+// </div>
+// {showGradient && (
+// <div className="absolute inset-0 bg-gradient-to-t from-gray-950 to-[84%]" />
+// )}
+// </div>
+// );
+// };
-interface DotMatrixProps {
- colors?: number[][];
- opacities?: number[];
- totalSize?: number;
- dotSize?: number;
- shader?: string;
- center?: ("x" | "y")[];
-}
+// interface DotMatrixProps {
+// colors?: number[][];
+// opacities?: number[];
+// totalSize?: number;
+// dotSize?: number;
+// shader?: string;
+// center?: ("x" | "y")[];
+// }
-const DotMatrix: React.FC<DotMatrixProps> = ({
- colors = [[0, 0, 0]],
- opacities = [0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14],
- totalSize = 4,
- dotSize = 2,
- shader = "",
- center = ["x", "y"],
-}) => {
- const uniforms = React.useMemo(() => {
- let colorsArray = [
- colors[0],
- colors[0],
- colors[0],
- colors[0],
- colors[0],
- colors[0],
- ];
- if (colors.length === 2) {
- colorsArray = [
- colors[0],
- colors[0],
- colors[0],
- colors[1],
- colors[1],
- colors[1],
- ];
- } else if (colors.length === 3) {
- colorsArray = [
- colors[0],
- colors[0],
- colors[1],
- colors[1],
- colors[2],
- colors[2],
- ];
- }
+// const DotMatrix: React.FC<DotMatrixProps> = ({
+// colors = [[0, 0, 0]],
+// opacities = [0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14],
+// totalSize = 4,
+// dotSize = 2,
+// shader = "",
+// center = ["x", "y"],
+// }) => {
+// const uniforms = React.useMemo(() => {
+// let colorsArray = [
+// colors[0],
+// colors[0],
+// colors[0],
+// colors[0],
+// colors[0],
+// colors[0],
+// ];
+// if (colors.length === 2) {
+// colorsArray = [
+// colors[0],
+// colors[0],
+// colors[0],
+// colors[1],
+// colors[1],
+// colors[1],
+// ];
+// } else if (colors.length === 3) {
+// colorsArray = [
+// colors[0],
+// colors[0],
+// colors[1],
+// colors[1],
+// colors[2],
+// colors[2],
+// ];
+// }
- return {
- u_colors: {
- value: colorsArray.map((color) => [
- color[0] / 255,
- color[1] / 255,
- color[2] / 255,
- ]),
- type: "uniform3fv",
- },
- u_opacities: {
- value: opacities,
- type: "uniform1fv",
- },
- u_total_size: {
- value: totalSize,
- type: "uniform1f",
- },
- u_dot_size: {
- value: dotSize,
- type: "uniform1f",
- },
- };
- }, [colors, opacities, totalSize, dotSize]);
+// return {
+// u_colors: {
+// value: colorsArray.map((color) => [
+// color[0] / 255,
+// color[1] / 255,
+// color[2] / 255,
+// ]),
+// type: "uniform3fv",
+// },
+// u_opacities: {
+// value: opacities,
+// type: "uniform1fv",
+// },
+// u_total_size: {
+// value: totalSize,
+// type: "uniform1f",
+// },
+// u_dot_size: {
+// value: dotSize,
+// type: "uniform1f",
+// },
+// };
+// }, [colors, opacities, totalSize, dotSize]);
- return (
- <Shader
- source={`
- precision mediump float;
- in vec2 fragCoord;
+// return (
+// <Shader
+// source={`
+// precision mediump float;
+// in vec2 fragCoord;
- uniform float u_time;
- uniform float u_opacities[10];
- uniform vec3 u_colors[6];
- uniform float u_total_size;
- uniform float u_dot_size;
- uniform vec2 u_resolution;
- out vec4 fragColor;
- float PHI = 1.61803398874989484820459;
- float random(vec2 xy) {
- return fract(tan(distance(xy * PHI, xy) * 0.5) * xy.x);
- }
- float map(float value, float min1, float max1, float min2, float max2) {
- return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
- }
- void main() {
- vec2 st = fragCoord.xy;
- ${
- center.includes("x")
- ? "st.x -= abs(floor((mod(u_resolution.x, u_total_size) - u_dot_size) * 0.5));"
- : ""
- }
- ${
- center.includes("y")
- ? "st.y -= abs(floor((mod(u_resolution.y, u_total_size) - u_dot_size) * 0.5));"
- : ""
- }
- float opacity = step(0.0, st.x);
- opacity *= step(0.0, st.y);
+// uniform float u_time;
+// uniform float u_opacities[10];
+// uniform vec3 u_colors[6];
+// uniform float u_total_size;
+// uniform float u_dot_size;
+// uniform vec2 u_resolution;
+// out vec4 fragColor;
+// float PHI = 1.61803398874989484820459;
+// float random(vec2 xy) {
+// return fract(tan(distance(xy * PHI, xy) * 0.5) * xy.x);
+// }
+// float map(float value, float min1, float max1, float min2, float max2) {
+// return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+// }
+// void main() {
+// vec2 st = fragCoord.xy;
+// ${
+// center.includes("x")
+// ? "st.x -= abs(floor((mod(u_resolution.x, u_total_size) - u_dot_size) * 0.5));"
+// : ""
+// }
+// ${
+// center.includes("y")
+// ? "st.y -= abs(floor((mod(u_resolution.y, u_total_size) - u_dot_size) * 0.5));"
+// : ""
+// }
+// float opacity = step(0.0, st.x);
+// opacity *= step(0.0, st.y);
- vec2 st2 = vec2(int(st.x / u_total_size), int(st.y / u_total_size));
+// vec2 st2 = vec2(int(st.x / u_total_size), int(st.y / u_total_size));
- float frequency = 5.0;
- float show_offset = random(st2);
- float rand = random(st2 * floor((u_time / frequency) + show_offset + frequency) + 1.0);
- opacity *= u_opacities[int(rand * 10.0)];
- opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.x / u_total_size));
- opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.y / u_total_size));
+// float frequency = 5.0;
+// float show_offset = random(st2);
+// float rand = random(st2 * floor((u_time / frequency) + show_offset + frequency) + 1.0);
+// opacity *= u_opacities[int(rand * 10.0)];
+// opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.x / u_total_size));
+// opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.y / u_total_size));
- vec3 color = u_colors[int(show_offset * 6.0)];
+// vec3 color = u_colors[int(show_offset * 6.0)];
- ${shader}
+// ${shader}
- fragColor = vec4(color, opacity);
- fragColor.rgb *= fragColor.a;
- }`}
- uniforms={uniforms}
- maxFps={60}
- />
- );
-};
+// fragColor = vec4(color, opacity);
+// fragColor.rgb *= fragColor.a;
+// }`}
+// uniforms={uniforms}
+// maxFps={60}
+// />
+// );
+// };
-type Uniforms = {
- [key: string]: {
- value: number[] | number[][] | number;
- type: string;
- };
-};
-const ShaderMaterial = ({
- source,
- uniforms,
- maxFps = 60,
-}: {
- source: string;
- hovered?: boolean;
- maxFps?: number;
- uniforms: Uniforms;
-}) => {
- const { size } = useThree();
- const ref = useRef<THREE.Mesh>();
- let lastFrameTime = 0;
+// type Uniforms = {
+// [key: string]: {
+// value: number[] | number[][] | number;
+// type: string;
+// };
+// };
+// const ShaderMaterial = ({
+// source,
+// uniforms,
+// maxFps = 60,
+// }: {
+// source: string;
+// hovered?: boolean;
+// maxFps?: number;
+// uniforms: Uniforms;
+// }) => {
+// const { size } = useThree();
+// const ref = useRef<THREE.Mesh>(null);
+// let lastFrameTime = 0;
- useFrame(({ clock }) => {
- if (!ref.current) return;
- const timestamp = clock.getElapsedTime();
- if (timestamp - lastFrameTime < 1 / maxFps) {
- return;
- }
- lastFrameTime = timestamp;
+// useFrame(({ clock }) => {
+// if (!ref.current) return;
+// const timestamp = clock.getElapsedTime();
+// if (timestamp - lastFrameTime < 1 / maxFps) {
+// return;
+// }
+// lastFrameTime = timestamp;
- const material: any = ref.current.material;
- const timeLocation = material.uniforms.u_time;
- timeLocation.value = timestamp;
- });
+// const material: any = ref.current.material;
+// const timeLocation = material.uniforms.u_time;
+// timeLocation.value = timestamp;
+// });
- const getUniforms = () => {
- const preparedUniforms: any = {};
+// const getUniforms = () => {
+// const preparedUniforms: any = {};
- for (const uniformName in uniforms) {
- const uniform: any = uniforms[uniformName];
+// for (const uniformName in uniforms) {
+// const uniform: any = uniforms[uniformName];
- switch (uniform.type) {
- case "uniform1f":
- preparedUniforms[uniformName] = { value: uniform.value, type: "1f" };
- break;
- case "uniform3f":
- preparedUniforms[uniformName] = {
- value: new THREE.Vector3().fromArray(uniform.value),
- type: "3f",
- };
- break;
- case "uniform1fv":
- preparedUniforms[uniformName] = { value: uniform.value, type: "1fv" };
- break;
- case "uniform3fv":
- preparedUniforms[uniformName] = {
- value: uniform.value.map((v: number[]) =>
- new THREE.Vector3().fromArray(v)
- ),
- type: "3fv",
- };
- break;
- case "uniform2f":
- preparedUniforms[uniformName] = {
- value: new THREE.Vector2().fromArray(uniform.value),
- type: "2f",
- };
- break;
- default:
- console.error(`Invalid uniform type for '${uniformName}'.`);
- break;
- }
- }
+// switch (uniform.type) {
+// case "uniform1f":
+// preparedUniforms[uniformName] = { value: uniform.value, type: "1f" };
+// break;
+// case "uniform3f":
+// preparedUniforms[uniformName] = {
+// value: new THREE.Vector3().fromArray(uniform.value),
+// type: "3f",
+// };
+// break;
+// case "uniform1fv":
+// preparedUniforms[uniformName] = { value: uniform.value, type: "1fv" };
+// break;
+// case "uniform3fv":
+// preparedUniforms[uniformName] = {
+// value: uniform.value.map((v: number[]) =>
+// new THREE.Vector3().fromArray(v)
+// ),
+// type: "3fv",
+// };
+// break;
+// case "uniform2f":
+// preparedUniforms[uniformName] = {
+// value: new THREE.Vector2().fromArray(uniform.value),
+// type: "2f",
+// };
+// break;
+// default:
+// console.error(`Invalid uniform type for '${uniformName}'.`);
+// break;
+// }
+// }
- preparedUniforms["u_time"] = { value: 0, type: "1f" };
- preparedUniforms["u_resolution"] = {
- value: new THREE.Vector2(size.width * 2, size.height * 2),
- }; // Initialize u_resolution
- return preparedUniforms;
- };
+// preparedUniforms["u_time"] = { value: 0, type: "1f" };
+// preparedUniforms["u_resolution"] = {
+// value: new THREE.Vector2(size.width * 2, size.height * 2),
+// }; // Initialize u_resolution
+// return preparedUniforms;
+// };
- // Shader material
- const material = useMemo(() => {
- const materialObject = new THREE.ShaderMaterial({
- vertexShader: `
- precision mediump float;
- in vec2 coordinates;
- uniform vec2 u_resolution;
- out vec2 fragCoord;
- void main(){
- float x = position.x;
- float y = position.y;
- gl_Position = vec4(x, y, 0.0, 1.0);
- fragCoord = (position.xy + vec2(1.0)) * 0.5 * u_resolution;
- fragCoord.y = u_resolution.y - fragCoord.y;
- }
- `,
- fragmentShader: source,
- uniforms: getUniforms(),
- glslVersion: THREE.GLSL3,
- blending: THREE.CustomBlending,
- blendSrc: THREE.SrcAlphaFactor,
- blendDst: THREE.OneFactor,
- });
+// // Shader material
+// const material = useMemo(() => {
+// const materialObject = new THREE.ShaderMaterial({
+// vertexShader: `
+// precision mediump float;
+// in vec2 coordinates;
+// uniform vec2 u_resolution;
+// out vec2 fragCoord;
+// void main(){
+// float x = position.x;
+// float y = position.y;
+// gl_Position = vec4(x, y, 0.0, 1.0);
+// fragCoord = (position.xy + vec2(1.0)) * 0.5 * u_resolution;
+// fragCoord.y = u_resolution.y - fragCoord.y;
+// }
+// `,
+// fragmentShader: source,
+// uniforms: getUniforms(),
+// glslVersion: THREE.GLSL3,
+// blending: THREE.CustomBlending,
+// blendSrc: THREE.SrcAlphaFactor,
+// blendDst: THREE.OneFactor,
+// });
- return materialObject;
- }, [size.width, size.height, source]);
+// return materialObject;
+// }, [size.width, size.height, source]);
- return (
- <mesh ref={ref as any}>
- <planeGeometry args={[2, 2]} />
- <primitive object={material} attach="material" />
- </mesh>
- );
-};
+// return (
+// <mesh ref={ref as any}>
+// <planeGeometry args={[2, 2]} />
+// <primitive object={material} attach="material" />
+// </mesh>
+// );
+// };
-const Shader: React.FC<ShaderProps> = ({ source, uniforms, maxFps = 60 }) => {
- return (
- <Canvas className="absolute inset-0 h-full w-full">
- <ShaderMaterial source={source} uniforms={uniforms} maxFps={maxFps} />
- </Canvas>
- );
-};
-interface ShaderProps {
- source: string;
- uniforms: {
- [key: string]: {
- value: number[] | number[][] | number;
- type: string;
- };
- };
- maxFps?: number;
-}
+// const Shader: React.FC<ShaderProps> = ({ source, uniforms, maxFps = 60 }) => {
+// return (
+// <Canvas className="absolute inset-0 h-full w-full">
+// <ShaderMaterial source={source} uniforms={uniforms} maxFps={maxFps} />
+// </Canvas>
+// );
+// };
+// interface ShaderProps {
+// source: string;
+// uniforms: {
+// [key: string]: {
+// value: number[] | number[][] | number;
+// type: string;
+// };
+// };
+// maxFps?: number;
+// }
diff --git a/src/components/ui/card-spotlight.tsx b/src/components/ui/card-spotlight.tsx
index f0b17d7..519d1ac 100644
--- a/src/components/ui/card-spotlight.tsx
+++ b/src/components/ui/card-spotlight.tsx
@@ -1,74 +1,74 @@
-"use client";
+// "use client";
-import { useMotionValue, motion, useMotionTemplate } from "motion/react";
-import React, { MouseEvent as ReactMouseEvent, useState } from "react";
-import { CanvasRevealEffect } from "@/components/ui/canvas-reveal-effect";
-import { cn } from "@/lib/utils";
+// import { useMotionValue, motion, useMotionTemplate } from "motion/react";
+// import React, { MouseEvent as ReactMouseEvent, useState } from "react";
+// import { CanvasRevealEffect } from "@/components/ui/canvas-reveal-effect";
+// import { cn } from "@/lib/utils";
-export const CardSpotlight = ({
- children,
- radius = 350,
- color = "#ffffff33",
- className,
- ...props
-}: {
- radius?: number;
- color?: string;
- children: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>) => {
- const mouseX = useMotionValue(0);
- const mouseY = useMotionValue(0);
- function handleMouseMove({
- currentTarget,
- clientX,
- clientY,
- }: ReactMouseEvent<HTMLDivElement>) {
- let { left, top } = currentTarget.getBoundingClientRect();
+// export const CardSpotlight = ({
+// children,
+// radius = 350,
+// color = "#ffffff33",
+// className,
+// ...props
+// }: {
+// radius?: number;
+// color?: string;
+// children: React.ReactNode;
+// } & React.HTMLAttributes<HTMLDivElement>) => {
+// const mouseX = useMotionValue(0);
+// const mouseY = useMotionValue(0);
+// function handleMouseMove({
+// currentTarget,
+// clientX,
+// clientY,
+// }: ReactMouseEvent<HTMLDivElement>) {
+// let { left, top } = currentTarget.getBoundingClientRect();
- mouseX.set(clientX - left);
- mouseY.set(clientY - top);
- }
+// mouseX.set(clientX - left);
+// mouseY.set(clientY - top);
+// }
- const [isHovering, setIsHovering] = useState(false);
- const handleMouseEnter = () => setIsHovering(true);
- const handleMouseLeave = () => setIsHovering(false);
- return (
- <div
- className={cn(
- "group/spotlight p-10 rounded-md relative border border-neutral-800 bg-black dark:border-neutral-800",
- className
- )}
- onMouseMove={handleMouseMove}
- onMouseEnter={handleMouseEnter}
- onMouseLeave={handleMouseLeave}
- {...props}
- >
- <motion.div
- className="pointer-events-none absolute z-0 -inset-px rounded-md opacity-0 transition duration-300 group-hover/spotlight:opacity-100"
- style={{
- backgroundColor: color,
- maskImage: useMotionTemplate`
- radial-gradient(
- ${radius}px circle at ${mouseX}px ${mouseY}px,
- white,
- transparent 80%
- )
- `,
- }}
- >
- {isHovering && (
- <CanvasRevealEffect
- animationSpeed={5}
- containerClassName="bg-transparent absolute inset-0 pointer-events-none"
- colors={[
- [59, 130, 246],
- [139, 92, 246],
- ]}
- dotSize={3}
- />
- )}
- </motion.div>
- {children}
- </div>
- );
-};
+// const [isHovering, setIsHovering] = useState(false);
+// const handleMouseEnter = () => setIsHovering(true);
+// const handleMouseLeave = () => setIsHovering(false);
+// return (
+// <div
+// className={cn(
+// "group/spotlight p-10 rounded-md relative border border-neutral-800 bg-black dark:border-neutral-800",
+// className
+// )}
+// onMouseMove={handleMouseMove}
+// onMouseEnter={handleMouseEnter}
+// onMouseLeave={handleMouseLeave}
+// {...props}
+// >
+// <motion.div
+// className="pointer-events-none absolute z-0 -inset-px rounded-md opacity-0 transition duration-300 group-hover/spotlight:opacity-100"
+// style={{
+// backgroundColor: color,
+// maskImage: useMotionTemplate`
+// radial-gradient(
+// ${radius}px circle at ${mouseX}px ${mouseY}px,
+// white,
+// transparent 80%
+// )
+// `,
+// }}
+// >
+// {isHovering && (
+// <CanvasRevealEffect
+// animationSpeed={5}
+// containerClassName="bg-transparent absolute inset-0 pointer-events-none"
+// colors={[
+// [59, 130, 246],
+// [139, 92, 246],
+// ]}
+// dotSize={3}
+// />
+// )}
+// </motion.div>
+// {children}
+// </div>
+// );
+// };
diff --git a/src/components/ui/wavy-background.tsx b/src/components/ui/wavy-background.tsx
index 4fbc374..5bfebc1 100644
--- a/src/components/ui/wavy-background.tsx
+++ b/src/components/ui/wavy-background.tsx
@@ -1,132 +1,132 @@
-"use client";
-import { cn } from "@/lib/utils";
-import React, { useEffect, useRef, useState } from "react";
-import { createNoise3D } from "simplex-noise";
+// "use client";
+// import { cn } from "@/lib/utils";
+// import React, { useEffect, useRef, useState } from "react";
+// import { createNoise3D } from "simplex-noise";
-export const WavyBackground = ({
- children,
- className,
- containerClassName,
- colors,
- waveWidth,
- backgroundFill,
- blur = 10,
- speed = "fast",
- waveOpacity = 0.5,
- ...props
-}: {
- children?: any;
- className?: string;
- containerClassName?: string;
- colors?: string[];
- waveWidth?: number;
- backgroundFill?: string;
- blur?: number;
- speed?: "slow" | "fast";
- waveOpacity?: number;
- [key: string]: any;
-}) => {
- const noise = createNoise3D();
- let w: number,
- h: number,
- nt: number,
- i: number,
- x: number,
- ctx: any,
- canvas: any;
- const canvasRef = useRef<HTMLCanvasElement>(null);
- const getSpeed = () => {
- switch (speed) {
- case "slow":
- return 0.001;
- case "fast":
- return 0.002;
- default:
- return 0.001;
- }
- };
+// export const WavyBackground = ({
+// children,
+// className,
+// containerClassName,
+// colors,
+// waveWidth,
+// backgroundFill,
+// blur = 10,
+// speed = "fast",
+// waveOpacity = 0.5,
+// ...props
+// }: {
+// children?: any;
+// className?: string;
+// containerClassName?: string;
+// colors?: string[];
+// waveWidth?: number;
+// backgroundFill?: string;
+// blur?: number;
+// speed?: "slow" | "fast";
+// waveOpacity?: number;
+// [key: string]: any;
+// }) => {
+// const noise = createNoise3D();
+// let w: number,
+// h: number,
+// nt: number,
+// i: number,
+// x: number,
+// ctx: any,
+// canvas: any;
+// const canvasRef = useRef<HTMLCanvasElement>(null);
+// const getSpeed = () => {
+// switch (speed) {
+// case "slow":
+// return 0.001;
+// case "fast":
+// return 0.002;
+// default:
+// return 0.001;
+// }
+// };
- const init = () => {
- canvas = canvasRef.current;
- ctx = canvas.getContext("2d");
- w = ctx.canvas.width = window.innerWidth;
- h = ctx.canvas.height = window.innerHeight;
- ctx.filter = `blur(${blur}px)`;
- nt = 0;
- window.onresize = function () {
- w = ctx.canvas.width = window.innerWidth;
- h = ctx.canvas.height = window.innerHeight;
- ctx.filter = `blur(${blur}px)`;
- };
- render();
- };
+// const init = () => {
+// canvas = canvasRef.current;
+// ctx = canvas.getContext("2d");
+// w = ctx.canvas.width = window.innerWidth;
+// h = ctx.canvas.height = window.innerHeight;
+// ctx.filter = `blur(${blur}px)`;
+// nt = 0;
+// window.onresize = function () {
+// w = ctx.canvas.width = window.innerWidth;
+// h = ctx.canvas.height = window.innerHeight;
+// ctx.filter = `blur(${blur}px)`;
+// };
+// render();
+// };
- const waveColors = colors ?? [
- "#38bdf8",
- "#818cf8",
- "#c084fc",
- "#e879f9",
- "#22d3ee",
- ];
- const drawWave = (n: number) => {
- nt += getSpeed();
- for (i = 0; i < n; i++) {
- ctx.beginPath();
- ctx.lineWidth = waveWidth || 50;
- ctx.strokeStyle = waveColors[i % waveColors.length];
- for (x = 0; x < w; x += 5) {
- var y = noise(x / 800, 0.3 * i, nt) * 100;
- ctx.lineTo(x, y + h * 0.5); // adjust for height, currently at 50% of the container
- }
- ctx.stroke();
- ctx.closePath();
- }
- };
+// const waveColors = colors ?? [
+// "#38bdf8",
+// "#818cf8",
+// "#c084fc",
+// "#e879f9",
+// "#22d3ee",
+// ];
+// const drawWave = (n: number) => {
+// nt += getSpeed();
+// for (i = 0; i < n; i++) {
+// ctx.beginPath();
+// ctx.lineWidth = waveWidth || 50;
+// ctx.strokeStyle = waveColors[i % waveColors.length];
+// for (x = 0; x < w; x += 5) {
+// var y = noise(x / 800, 0.3 * i, nt) * 100;
+// ctx.lineTo(x, y + h * 0.5); // adjust for height, currently at 50% of the container
+// }
+// ctx.stroke();
+// ctx.closePath();
+// }
+// };
- let animationId: number;
- const render = () => {
- ctx.fillStyle = backgroundFill || "black";
- ctx.globalAlpha = waveOpacity || 0.5;
- ctx.fillRect(0, 0, w, h);
- drawWave(5);
- animationId = requestAnimationFrame(render);
- };
+// let animationId: number;
+// const render = () => {
+// ctx.fillStyle = backgroundFill || "black";
+// ctx.globalAlpha = waveOpacity || 0.5;
+// ctx.fillRect(0, 0, w, h);
+// drawWave(5);
+// animationId = requestAnimationFrame(render);
+// };
- useEffect(() => {
- init();
- return () => {
- cancelAnimationFrame(animationId);
- };
- }, []);
+// useEffect(() => {
+// init();
+// return () => {
+// cancelAnimationFrame(animationId);
+// };
+// }, []);
- const [isSafari, setIsSafari] = useState(false);
- useEffect(() => {
- // I'm sorry but i have got to support it on safari.
- setIsSafari(
- typeof window !== "undefined" &&
- navigator.userAgent.includes("Safari") &&
- !navigator.userAgent.includes("Chrome")
- );
- }, []);
+// const [isSafari, setIsSafari] = useState(false);
+// useEffect(() => {
+// // I'm sorry but i have got to support it on safari.
+// setIsSafari(
+// typeof window !== "undefined" &&
+// navigator.userAgent.includes("Safari") &&
+// !navigator.userAgent.includes("Chrome")
+// );
+// }, []);
- return (
- <div
- className={cn(
- "h-screen flex flex-col items-center justify-center",
- containerClassName
- )}
- >
- <canvas
- className="absolute inset-0 z-0"
- ref={canvasRef}
- id="canvas"
- style={{
- ...(isSafari ? { filter: `blur(${blur}px)` } : {}),
- }}
- ></canvas>
- <div className={cn("relative z-10", className)} {...props}>
- {children}
- </div>
- </div>
- );
-};
+// return (
+// <div
+// className={cn(
+// "h-screen flex flex-col items-center justify-center",
+// containerClassName
+// )}
+// >
+// <canvas
+// className="absolute inset-0 z-0"
+// ref={canvasRef}
+// id="canvas"
+// style={{
+// ...(isSafari ? { filter: `blur(${blur}px)` } : {}),
+// }}
+// ></canvas>
+// <div className={cn("relative z-10", className)} {...props}>
+// {children}
+// </div>
+// </div>
+// );
+// };
diff --git a/src/components/ui/wooble-card.tsx b/src/components/ui/wooble-card.tsx
index 05c059a..70a5615 100644
--- a/src/components/ui/wooble-card.tsx
+++ b/src/components/ui/wooble-card.tsx
@@ -1,78 +1,78 @@
-"use client";
-import { cn } from "@/lib/utils";
-import { motion } from "motion/react";
-import React, { useState } from "react";
+// "use client";
+// import { cn } from "@/lib/utils";
+// import { motion } from "motion/react";
+// import React, { useState } from "react";
-export const WobbleCard = ({
- children,
- containerClassName,
- className,
-}: {
- children: React.ReactNode;
- containerClassName?: string;
- className?: string;
-}) => {
- const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
- const [isHovering, setIsHovering] = useState(false);
+// export const WobbleCard = ({
+// children,
+// containerClassName,
+// className,
+// }: {
+// children: React.ReactNode;
+// containerClassName?: string;
+// className?: string;
+// }) => {
+// const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+// const [isHovering, setIsHovering] = useState(false);
- const handleMouseMove = (event: React.MouseEvent<HTMLElement>) => {
- const { clientX, clientY } = event;
- const rect = event.currentTarget.getBoundingClientRect();
- const x = (clientX - (rect.left + rect.width / 2)) / 20;
- const y = (clientY - (rect.top + rect.height / 2)) / 20;
- setMousePosition({ x, y });
- };
- return (
- <motion.section
- onMouseMove={handleMouseMove}
- onMouseEnter={() => setIsHovering(true)}
- onMouseLeave={() => {
- setIsHovering(false);
- setMousePosition({ x: 0, y: 0 });
- }}
- style={{
- transform: isHovering
- ? `translate3d(${mousePosition.x}px, ${mousePosition.y}px, 0) scale3d(1, 1, 1)`
- : "translate3d(0px, 0px, 0) scale3d(1, 1, 1)",
- transition: "transform 0.1s ease-out",
- }}
- className={cn(
- "mx-auto w-full bg-indigo-800 relative rounded-2xl overflow-hidden",
- containerClassName
- )}
- >
- <div
- className="relative h-full [background-image:radial-gradient(88%_100%_at_top,rgba(255,255,255,0.5),rgba(255,255,255,0))] sm:mx-0 sm:rounded-2xl overflow-hidden"
- style={{
- boxShadow:
- "0 10px 32px rgba(34, 42, 53, 0.12), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.05), 0 4px 6px rgba(34, 42, 53, 0.08), 0 24px 108px rgba(47, 48, 55, 0.10)",
- }}
- >
- <motion.div
- style={{
- transform: isHovering
- ? `translate3d(${-mousePosition.x}px, ${-mousePosition.y}px, 0) scale3d(1.03, 1.03, 1)`
- : "translate3d(0px, 0px, 0) scale3d(1, 1, 1)",
- transition: "transform 0.1s ease-out",
- }}
- className={cn("h-full px-4 py-20 sm:px-10", className)}
- >
- <Noise />
- {children}
- </motion.div>
- </div>
- </motion.section>
- );
-};
+// const handleMouseMove = (event: React.MouseEvent<HTMLElement>) => {
+// const { clientX, clientY } = event;
+// const rect = event.currentTarget.getBoundingClientRect();
+// const x = (clientX - (rect.left + rect.width / 2)) / 20;
+// const y = (clientY - (rect.top + rect.height / 2)) / 20;
+// setMousePosition({ x, y });
+// };
+// return (
+// <motion.section
+// onMouseMove={handleMouseMove}
+// onMouseEnter={() => setIsHovering(true)}
+// onMouseLeave={() => {
+// setIsHovering(false);
+// setMousePosition({ x: 0, y: 0 });
+// }}
+// style={{
+// transform: isHovering
+// ? `translate3d(${mousePosition.x}px, ${mousePosition.y}px, 0) scale3d(1, 1, 1)`
+// : "translate3d(0px, 0px, 0) scale3d(1, 1, 1)",
+// transition: "transform 0.1s ease-out",
+// }}
+// className={cn(
+// "mx-auto w-full bg-indigo-800 relative rounded-2xl overflow-hidden",
+// containerClassName
+// )}
+// >
+// <div
+// className="relative h-full [background-image:radial-gradient(88%_100%_at_top,rgba(255,255,255,0.5),rgba(255,255,255,0))] sm:mx-0 sm:rounded-2xl overflow-hidden"
+// style={{
+// boxShadow:
+// "0 10px 32px rgba(34, 42, 53, 0.12), 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(34, 42, 53, 0.05), 0 4px 6px rgba(34, 42, 53, 0.08), 0 24px 108px rgba(47, 48, 55, 0.10)",
+// }}
+// >
+// <motion.div
+// style={{
+// transform: isHovering
+// ? `translate3d(${-mousePosition.x}px, ${-mousePosition.y}px, 0) scale3d(1.03, 1.03, 1)`
+// : "translate3d(0px, 0px, 0) scale3d(1, 1, 1)",
+// transition: "transform 0.1s ease-out",
+// }}
+// className={cn("h-full px-4 py-20 sm:px-10", className)}
+// >
+// <Noise />
+// {children}
+// </motion.div>
+// </div>
+// </motion.section>
+// );
+// };
-const Noise = () => {
- return (
- <div
- className="absolute inset-0 w-full h-full scale-[1.2] transform opacity-10 [mask-image:radial-gradient(#fff,transparent,75%)]"
- style={{
- backgroundImage: "url(/noise.webp)",
- backgroundSize: "30%",
- }}
- ></div>
- );
-};
+// const Noise = () => {
+// return (
+// <div
+// className="absolute inset-0 w-full h-full scale-[1.2] transform opacity-10 [mask-image:radial-gradient(#fff,transparent,75%)]"
+// style={{
+// backgroundImage: "url(/noise.webp)",
+// backgroundSize: "30%",
+// }}
+// ></div>
+// );
+// };
diff --git a/src/components/ui/world-map.tsx b/src/components/ui/world-map.tsx
index d6c9891..fc54cff 100644
--- a/src/components/ui/world-map.tsx
+++ b/src/components/ui/world-map.tsx
@@ -1,167 +1,167 @@
-"use client";
+// "use client";
-import { useRef } from "react";
-import { motion } from "motion/react";
-import DottedMap from "dotted-map";
+// import { useRef } from "react";
+// import { motion } from "motion/react";
+// import DottedMap from "dotted-map";
-import { useTheme } from "next-themes";
+// import { useTheme } from "next-themes";
-interface MapProps {
- dots?: Array<{
- start: { lat: number; lng: number; label?: string };
- end: { lat: number; lng: number; label?: string };
- }>;
- lineColor?: string;
-}
+// interface MapProps {
+// dots?: Array<{
+// start: { lat: number; lng: number; label?: string };
+// end: { lat: number; lng: number; label?: string };
+// }>;
+// lineColor?: string;
+// }
-export function WorldMap({ dots = [], lineColor = "#0ea5e9" }: MapProps) {
- const svgRef = useRef<SVGSVGElement>(null);
- const map = new DottedMap({ height: 100, grid: "diagonal" });
+// export function WorldMap({ dots = [], lineColor = "#0ea5e9" }: MapProps) {
+// const svgRef = useRef<SVGSVGElement>(null);
+// const map = new DottedMap({ height: 100, grid: "diagonal" });
- const { theme } = useTheme();
+// const { theme } = useTheme();
- const svgMap = map.getSVG({
- radius: 0.22,
- color: theme === "dark" ? "#FFFFFF40" : "#00000040",
- shape: "circle",
- backgroundColor: theme === "dark" ? "black" : "white",
- });
+// const svgMap = map.getSVG({
+// radius: 0.22,
+// color: theme === "dark" ? "#FFFFFF40" : "#00000040",
+// shape: "circle",
+// backgroundColor: theme === "dark" ? "black" : "white",
+// });
- const projectPoint = (lat: number, lng: number) => {
- const x = (lng + 180) * (800 / 360);
- const y = (90 - lat) * (400 / 180);
- return { x, y };
- };
+// const projectPoint = (lat: number, lng: number) => {
+// const x = (lng + 180) * (800 / 360);
+// const y = (90 - lat) * (400 / 180);
+// return { x, y };
+// };
- const createCurvedPath = (
- start: { x: number; y: number },
- end: { x: number; y: number }
- ) => {
- const midX = (start.x + end.x) / 2;
- const midY = Math.min(start.y, end.y) - 50;
- return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
- };
+// const createCurvedPath = (
+// start: { x: number; y: number },
+// end: { x: number; y: number }
+// ) => {
+// const midX = (start.x + end.x) / 2;
+// const midY = Math.min(start.y, end.y) - 50;
+// return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
+// };
- return (
- <div className="w-full aspect-[2/1] dark:bg-black bg-white rounded-lg relative font-sans">
- <img
- src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
- className="h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"
- alt="world map"
- height="495"
- width="1056"
- draggable={false}
- />
- <svg
- ref={svgRef}
- viewBox="0 0 800 400"
- className="w-full h-full absolute inset-0 pointer-events-none select-none"
- >
- {dots.map((dot, i) => {
- const startPoint = projectPoint(dot.start.lat, dot.start.lng);
- const endPoint = projectPoint(dot.end.lat, dot.end.lng);
- return (
- <g key={`path-group-${i}`}>
- <motion.path
- d={createCurvedPath(startPoint, endPoint)}
- fill="none"
- stroke="url(#path-gradient)"
- strokeWidth="1"
- initial={{
- pathLength: 0,
- }}
- animate={{
- pathLength: 1,
- }}
- transition={{
- duration: 0,
- delay: 0.5 * i,
- ease: "easeOut",
- }}
- key={`start-upper-${i}`}
- ></motion.path>
- </g>
- );
- })}
+// return (
+// <div className="w-full aspect-[2/1] dark:bg-black bg-white rounded-lg relative font-sans">
+// <img
+// src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
+// className="h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"
+// alt="world map"
+// height="495"
+// width="1056"
+// draggable={false}
+// />
+// <svg
+// ref={svgRef}
+// viewBox="0 0 800 400"
+// className="w-full h-full absolute inset-0 pointer-events-none select-none"
+// >
+// {dots.map((dot, i) => {
+// const startPoint = projectPoint(dot.start.lat, dot.start.lng);
+// const endPoint = projectPoint(dot.end.lat, dot.end.lng);
+// return (
+// <g key={`path-group-${i}`}>
+// <motion.path
+// d={createCurvedPath(startPoint, endPoint)}
+// fill="none"
+// stroke="url(#path-gradient)"
+// strokeWidth="1"
+// initial={{
+// pathLength: 0,
+// }}
+// animate={{
+// pathLength: 1,
+// }}
+// transition={{
+// duration: 0,
+// delay: 0.5 * i,
+// ease: "easeOut",
+// }}
+// key={`start-upper-${i}`}
+// ></motion.path>
+// </g>
+// );
+// })}
- <defs>
- <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
- <stop offset="0%" stopColor="white" stopOpacity="0" />
- <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
- <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
- <stop offset="100%" stopColor="white" stopOpacity="0" />
- </linearGradient>
- </defs>
+// <defs>
+// <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+// <stop offset="0%" stopColor="white" stopOpacity="0" />
+// <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
+// <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
+// <stop offset="100%" stopColor="white" stopOpacity="0" />
+// </linearGradient>
+// </defs>
- {dots.map((dot, i) => (
- <g key={`points-group-${i}`}>
- <g key={`start-${i}`}>
- <circle
- cx={projectPoint(dot.start.lat, dot.start.lng).x}
- cy={projectPoint(dot.start.lat, dot.start.lng).y}
- r="2"
- fill={lineColor}
- />
- <circle
- cx={projectPoint(dot.start.lat, dot.start.lng).x}
- cy={projectPoint(dot.start.lat, dot.start.lng).y}
- r="2"
- fill={lineColor}
- opacity="0.5"
- >
- <animate
- attributeName="r"
- from="2"
- to="8"
- dur="1.5s"
- begin="0s"
- repeatCount="indefinite"
- />
- <animate
- attributeName="opacity"
- from="0.5"
- to="0"
- dur="1.5s"
- begin="0s"
- repeatCount="indefinite"
- />
- </circle>
- </g>
- <g key={`end-${i}`}>
- <circle
- cx={projectPoint(dot.end.lat, dot.end.lng).x}
- cy={projectPoint(dot.end.lat, dot.end.lng).y}
- r="2"
- fill={lineColor}
- />
- <circle
- cx={projectPoint(dot.end.lat, dot.end.lng).x}
- cy={projectPoint(dot.end.lat, dot.end.lng).y}
- r="2"
- fill={lineColor}
- opacity="0.5"
- >
- <animate
- attributeName="r"
- from="2"
- to="8"
- dur="1.5s"
- begin="0s"
- repeatCount="indefinite"
- />
- <animate
- attributeName="opacity"
- from="0.5"
- to="0"
- dur="1.5s"
- begin="0s"
- repeatCount="indefinite"
- />
- </circle>
- </g>
- </g>
- ))}
- </svg>
- </div>
- );
-}
+// {dots.map((dot, i) => (
+// <g key={`points-group-${i}`}>
+// <g key={`start-${i}`}>
+// <circle
+// cx={projectPoint(dot.start.lat, dot.start.lng).x}
+// cy={projectPoint(dot.start.lat, dot.start.lng).y}
+// r="2"
+// fill={lineColor}
+// />
+// <circle
+// cx={projectPoint(dot.start.lat, dot.start.lng).x}
+// cy={projectPoint(dot.start.lat, dot.start.lng).y}
+// r="2"
+// fill={lineColor}
+// opacity="0.5"
+// >
+// <animate
+// attributeName="r"
+// from="2"
+// to="8"
+// dur="1.5s"
+// begin="0s"
+// repeatCount="indefinite"
+// />
+// <animate
+// attributeName="opacity"
+// from="0.5"
+// to="0"
+// dur="1.5s"
+// begin="0s"
+// repeatCount="indefinite"
+// />
+// </circle>
+// </g>
+// <g key={`end-${i}`}>
+// <circle
+// cx={projectPoint(dot.end.lat, dot.end.lng).x}
+// cy={projectPoint(dot.end.lat, dot.end.lng).y}
+// r="2"
+// fill={lineColor}
+// />
+// <circle
+// cx={projectPoint(dot.end.lat, dot.end.lng).x}
+// cy={projectPoint(dot.end.lat, dot.end.lng).y}
+// r="2"
+// fill={lineColor}
+// opacity="0.5"
+// >
+// <animate
+// attributeName="r"
+// from="2"
+// to="8"
+// dur="1.5s"
+// begin="0s"
+// repeatCount="indefinite"
+// />
+// <animate
+// attributeName="opacity"
+// from="0.5"
+// to="0"
+// dur="1.5s"
+// begin="0s"
+// repeatCount="indefinite"
+// />
+// </circle>
+// </g>
+// </g>
+// ))}
+// </svg>
+// </div>
+// );
+// }
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-05 22:42:30 +0000