new hero effect & mobile responsive

src/components/setions/projects.tsx

@@ -14,7 +14,7 @@ const ProjectCard = (p: Project) => (
   >
     {/* <div className="font-serif text-muted-foreground w-20">{`[ ${p.year} ]`}</div> */}
     <div className="flex items-center gap-4 cursor-pointer hover:bg-muted w-full rounded-xl relative">
-      <div className="h-40 w-32 relative rounded-xl overflow-hidden">
+      <div className="h-40 w-full max-w-32 relative rounded-xl overflow-hidden">
         <Image
           src={p.image}
           alt="project-image"
@@ -22,10 +22,12 @@ const ProjectCard = (p: Project) => (
           className="object-cover"
         />
       </div>
-      <div className="space-y-1">
+      <div className="space-y-1 w-full">
         <span className="text-xs text-muted-foreground ">{`[ ${p.year} ]`}</span>
-        <h3 className="text-3xl font-black">{p.name}</h3>
-        <p className="text-muted-foreground text-lg">{p.description}</p>
+        <h3 className="text-2xl md:text-3xl font-black">{p.name}</h3>
+        <p className="text-muted-foreground text-sm md:text-lg">
+          {p.description}
+        </p>
       </div>
 
       <ArrowRight className="size-6 text-primary absolute right-4 top-8 -rotate-45 group-hover:-translate-y-4 group-hover:translate-x-2 transition-all duration-300" />
@@ -35,16 +37,20 @@ const ProjectCard = (p: Project) => (
 
 function Projects() {
   return (
-    <div className="flex gap-8 container lg:px-20">
+    <div className="flex flex-col lg:flex-row gap-8 container lg:px-20">
       <MeCard
-        className=" sticky top-20"
+        className="mx-auto order-last lg:order-first lg:sticky lg:top-20"
         button={{
           label: "Contact Me",
-          link: "/contact/#",
+          link: "/contact",
         }}
       />
-      <div id="projects" className="space-y-8  w-full">
-        <Heading title="Projects" subTitle="Recent" />
+      <div className="space-y-8  w-full p-4">
+        <Heading
+          title="Projects"
+          subTitle="Recent"
+          // className="sticky top-0 z-50 pb-6"
+        />
         <menu className=" flex flex-col items-center gap-8 pb-20 w-full">
           {projects.map((p) => (
             <li key={p.link} className="w-full">