UI Updates and Fixes

src/components/common/timeline.tsx

@@ -2,7 +2,6 @@
 
 import { TimelineEntry } from "@/types";
 import {
-  useMotionValueEvent,
   useScroll,
   useTransform,
   motion,
@@ -34,16 +33,16 @@ export const Timeline = ({ data }: { data: TimelineEntry[] }) => {
       <div ref={ref} className="relative max-w-7xl mx-auto">
         {data.map((item, index) => (
           <div key={index} className="flex justify-start pt-20 pb-10">
-            <div className="sticky flex flex-col md:flex-row z-40 items-center top-20 self-start max-w-xs lg:max-w-sm md:w-full">
-              <div className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-white dark:bg-black flex items-center justify-center">
-                <div className="h-4 w-4 rounded-full bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 p-2" />
+            <div className="sticky flex flex-col md:flex-row z-40 items-center top-20 lg:top-20 self-start max-w-xs lg:max-w-sm md:w-full">
+              <div className="h-6 w-6 lg:h-8 lg:w-8 absolute left-5 lg:left-4 rounded-full bg-zinc-800 dark:bg-zinc-800 flex items-center justify-center">
+                <div className="h-3 w-3 lg:h-4 lg:w-4 p-1 lg:p-2 rounded-full bg-neutral-700 dark:bg-neutral-700 border border-neutral-600 dark:border-neutral-700" />
               </div>
               <h3 className="hidden md:block text-lg lg:text-xl xl:text-2xl font-semibold text-[var(--textColor)] dark:text-[var(--textColor)] md:pl-20 tracking-wide">
                 {item.title}
               </h3>
             </div>
 
-            <div className="relative pl-20 pr-4 md:pl-4 w-full">
+            <div className="relative pl-16 pr-4 md:pl-4 w-full">
               <h3 className="md:hidden block text-2xl mb-4 text-left font-bold text-neutral-500 dark:text-neutral-500">
                 {item.title}
               </h3>
@@ -53,7 +52,7 @@ export const Timeline = ({ data }: { data: TimelineEntry[] }) => {
         ))}
 
         <div
-          style={{ height: (height - 20) + "px" }}
+          style={{ height: height - 20 + "px" }}
           className="absolute md:left-8 left-8 top-0 overflow-hidden w-[2px] bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-[0%] via-neutral-200 dark:via-neutral-700 to-transparent to-[99%] [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)] "
         >
           <motion.div

src/components/home/Section1.tsx

@@ -11,10 +11,10 @@ import TalkButton from "./ui/TalkButton";
 const HomeSection1 = ({ id }: Readonly<{ id: string }>) => {
   return (
     <ResponsiveBox
-      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-small-white/[0.2] bg-grid-small-white/[0.2] min-h-screen items-center justify-center relative overflow-hidden rounded-md"
+      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-white/[0.1] bg-grid-white/[0.1] min-h-screen items-center justify-center relative overflow-hidden rounded-md"
       id={id}
     >
-      <ConstrainedBox classNames="px-4 py-8 pt-24 z-20 items-center justify-center">
+      <ConstrainedBox classNames="px-4 py-8 pt-16 z-20 items-center justify-center">
         <Column classNames="w-full items-center justify-center">
           <div className="inline-flex items-center">
             <p className="text-2xl/normal sm:text-3xl/normal md:text-5xl/normal lg:text-6xl/normal xl:text-7xl/normal dark:text-[var(--textColor)] text-[var(--textColor)] font-bold text-center">

src/components/home/Section2.tsx

@@ -7,7 +7,7 @@ import services from "@/data/services";
 const HomeSection2 = ({ id }: { id: string }) => {
   return (
     <ResponsiveBox
-      classNames="dark:bg-[var(--dialogColor)] bg-[var(--dialogColor)] min-h-screen items-center justify-center dark:bg-dot-white/[0.2] bg-dot-white/[0.2] rounded-md"
+      classNames="dark:bg-[var(--dialogColor)] bg-[var(--dialogColor)] min-h-screen items-center justify-center dark:bg-dot-white/[0.15] bg-dot-white/[0.15] rounded-md"
       id={id}
     >
       <ConstrainedBox classNames="p-4 py-16 z-20">

src/components/home/Section3.tsx

@@ -8,7 +8,7 @@ import experiences from "@/data/experiences";
 const HomeSection3 = ({ id }: { id: string }) => {
   return (
     <ResponsiveBox
-      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-small-white/[0.2] bg-grid-small-white/[0.2] min-h-screen items-center justify-center"
+      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-white/[0.1] bg-grid-white/[0.1] min-h-screen items-center justify-center"
       id={id}
     >
       <ConstrainedBox classNames="p-4 py-16">

src/components/home/Section4.tsx

@@ -8,7 +8,7 @@ import skills from "@/data/skills";
 const HomeSection4 = ({ id }: { id: string }) => {
   return (
     <ResponsiveBox
-      classNames="dark:bg-[var(--dialogColor)] bg-[var(--dialogColor)] min-h-screen items-center justify-center dark:bg-dot-white/[0.2] bg-dot-white/[0.2]"
+      classNames="dark:bg-[var(--dialogColor)] bg-[var(--dialogColor)] min-h-screen items-center justify-center dark:bg-dot-white/[0.15] bg-dot-white/[0.15]"
       id={id}
     >
       <ConstrainedBox classNames="p-4 py-16">

src/components/home/Section5.tsx

@@ -7,7 +7,7 @@ import projects from "@/data/projects";
 const HomeSection5 = ({ id }: { id: string }) => {
   return (
     <ResponsiveBox
-      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-small-white/[0.2] bg-grid-small-white/[0.2] min-h-screen items-center justify-center"
+      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-white/[0.1] bg-grid-white/[0.1] min-h-screen items-center justify-center"
       id={id}
     >
       <ConstrainedBox classNames="p-4 py-16">

src/components/home/Section6.tsx

@@ -9,7 +9,7 @@ import socialLinks from "@/data/socialLinks";
 const HomeSection6 = ({ id }: { id: string }) => {
   return (
     <ResponsiveBox
-      classNames="dark:bg-[var(--dialogColor)] bg-[var(--dialogColor)] min-h-screen items-center justify-center dark:bg-dot-white/[0.2] bg-dot-white/[0.2] items-center justify-center"
+      classNames="dark:bg-[var(--dialogColor)] bg-[var(--dialogColor)] min-h-screen items-center justify-center dark:bg-dot-white/[0.15] bg-dot-white/[0.15] items-center justify-center"
       id={id}
     >
       <ConstrainedBox classNames="p-4 py-16">

src/components/payment/MainSection.tsx

@@ -5,7 +5,7 @@ import RazorPayButton from "@/components/common/razor-pay-button";
 const PaymentMainSection = () => {
   return (
     <ResponsiveBox
-      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-small-white/[0.2] bg-grid-small-white/[0.2] min-h-screen items-center justify-center relative overflow-hidden rounded-md"
+      classNames="dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-white/[0.1] bg-grid-white/[0.1] min-h-screen items-center justify-center relative overflow-hidden rounded-md"
       id="payment"
     >
       <ConstrainedBox classNames="px-4 py-8 z-20 items-center justify-center">

tailwind.config.ts

@@ -36,7 +36,7 @@ module.exports = {
         {
           "bg-grid": (value: any) => ({
             backgroundImage: `url("${svgToDataUri(
-              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
             )}")`,
           }),
           "bg-grid-small": (value: any) => ({