Update src/pages/About.jsx

src/pages/About.jsx

@@ -54,22 +54,22 @@ function TimelineItem({ align = 'left', year, title, children, lineHeight = 0 })
     <div
       ref={ref}
       className={
-        'card relative bg-white p-6 md:p-8 transition ' +
+        'card relative bg-white p-5 md:p-8 transition ' +
         (visible
           ? 'shadow-[0_12px_40px_rgba(0,0,0,0.08)] ring-1 ring-brand-600/20'
           : 'shadow-card')
       }
     >
-      <h3 className="h3">{title}</h3>
-      <div className="mt-3 text-slate-700">{children}</div>
+      <h3 className="h3 text-lg md:text-2xl">{title}</h3>
+      <div className="mt-3 text-sm md:text-base text-slate-700">{children}</div>
     </div>
   );
 
   const yearBadge = (
-    <div className="sticky top-28" ref={yearRef}>
+    <div className="md:sticky md:top-28" ref={yearRef}>
       <div
         className={`inline-flex items-center justify-center rounded-full bg-brand-600 px-3 py-1.5 text-sm font-semibold text-white shadow-lg transition-all duration-500 ease-out ${
-          isEnlarged ? 'scale-125 md:scale-150' : 'scale-100'
+          isEnlarged ? 'scale-110 md:scale-150' : 'scale-100'
         }`}
       >
         {year}
@@ -81,13 +81,21 @@ function TimelineItem({ align = 'left', year, title, children, lineHeight = 0 })
     <div className="relative grid grid-cols-1 items-start gap-4 md:grid-cols-2">
       {align === 'left' ? (
         <>
-          <div className="md:pr-8">{card}</div>
-          <div className="md:pl-8 md:text-left">{yearBadge}</div>
+          <div className="md:pr-8">
+            {/* Mobile: year badge above card */}
+            <div className="mb-4 flex justify-center md:hidden">{yearBadge}</div>
+            {card}
+          </div>
+          {/* Desktop: year badge on right */}
+          <div className="hidden md:block md:pl-8 md:text-left">{yearBadge}</div>
         </>
       ) : (
         <>
+          {/* Mobile: year badge above card */}
+          <div className="mb-4 flex justify-center md:hidden">{yearBadge}</div>
           <div className="order-2 md:order-2 md:pl-8">{card}</div>
-          <div className="order-1 md:order-1 md:pr-8 md:text-right">{yearBadge}</div>
+          {/* Desktop: year badge on left */}
+          <div className="order-1 hidden md:order-1 md:block md:pr-8 md:text-right">{yearBadge}</div>
         </>
       )}
     </div>
@@ -179,8 +187,8 @@ export default function About() {
         </div>
 
         {/* Our History */}
-        <section className="mt-16" aria-labelledby="history-heading">
-          <div className="container">
+        <section className="mt-12 md:mt-16" aria-labelledby="history-heading">
+          <div className="container px-4 md:px-0">
             <Reveal>
               <header className="mb-12 text-center">
                 <h2 id="history-heading" className="h2">Our History</h2>
@@ -189,9 +197,9 @@ export default function About() {
             </Reveal>
 
             <div className="relative pb-20" ref={historyRef} data-timeline-container>
-              {/* Vertical timeline line with scroll growth */}
+              {/* Vertical timeline line with scroll growth - hidden on mobile */}
               <div
-                className="pointer-events-none absolute left-1/2 top-0 bottom-16 -translate-x-1/2 w-[3px] bg-brand-600/15"
+                className="pointer-events-none absolute left-1/2 top-0 bottom-16 -translate-x-1/2 w-[3px] bg-brand-600/15 hidden md:block"
                 aria-hidden="true"
               >
                 <div
@@ -199,7 +207,7 @@ export default function About() {
                   style={{ height: `${lineH}px` }}
                 />
               </div>
-              <div className="space-y-10">
+              <div className="space-y-8 md:space-y-10">
                 <Reveal>
                   <TimelineItem align="left" year="1987" title="The Foundation: R.B. Constructions" lineHeight={lineH}>
                     <p>
@@ -281,7 +289,7 @@ export default function About() {
           <Reveal>
             <article className="overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-brand-50 to-white shadow-card md:mr-auto">
               <div className="flex flex-col md:flex-row md:items-center">
-                <div className="md:w-[38%] flex justify-center md:justify-start p-6 md:pl-10 md:pr-0">
+                <div className="order-2 md:order-1 md:w-[38%] flex justify-center md:justify-start p-6 md:pl-10 md:pr-0">
                   <div className="relative w-full max-w-xs">
                     <div className="absolute -top-8 -left-6 hidden h-40 w-40 rounded-full bg-brand-200/60 blur-3xl md:block"></div>
                     <ImageFlex
@@ -291,7 +299,7 @@ export default function About() {
                     />
                   </div>
                 </div>
-                <div className="relative md:w-[62%] md:pl-10 md:pr-20 md:py-10 p-6">
+                <div className="order-1 md:order-2 relative md:w-[62%] md:pl-10 md:pr-20 md:py-10 p-6">
                   <div className="mb-2 inline-block rounded-full bg-brand-100 px-3 py-1 text-xs font-semibold text-brand-700">Finance & Strategy</div>
                   <h3 className="h3">Mr. Bharat B. Jain</h3>
                   <p className="text-sm font-semibold text-brand-700">The Founder & Financial Strategist</p>
@@ -344,7 +352,7 @@ export default function About() {
           <Reveal delay={160}>
             <article className="overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-brand-50 to-white shadow-card md:mr-auto">
               <div className="flex flex-col md:flex-row md:items-center">
-                <div className="md:w-[38%] flex justify-center md:justify-start p-6 md:pl-10 md:pr-0">
+                <div className="order-2 md:order-1 md:w-[38%] flex justify-center md:justify-start p-6 md:pl-10 md:pr-0">
                   <div className="relative w-full max-w-xs">
                     <div className="absolute -top-6 -left-6 hidden h-40 w-40 rounded-full bg-brand-200/60 blur-3xl md:block"></div>
                     <ImageFlex
@@ -354,7 +362,7 @@ export default function About() {
                     />
                   </div>
                 </div>
-                <div className="md:w-[62%] md:pl-10 md:pr-20 md:py-10 p-6">
+                <div className="order-1 md:order-2 md:w-[62%] md:pl-10 md:pr-20 md:py-10 p-6">
                   <div className="mb-2 inline-block rounded-full bg-brand-100 px-3 py-1 text-xs font-semibold text-brand-700">Design & Brand</div>
                   <h3 className="h3">Mr. Ritesh B. Jain</h3>
                   <p className="text-sm font-semibold text-brand-700">The Visionary & Design Strategist</p>
@@ -462,6 +470,4 @@ export default function About() {
       </section>
     </article>
   );
-}
-
-
+}