Feature/about us timeline

app/(landing)/about/layout.tsx

@@ -0,0 +1,17 @@
+// components/DashboardLayout.tsx
+import BeamBackground from '@/components/landing-page/BeamBackground';
+import React, { ReactNode } from 'react';
+type AboutLayoutProps = {
+  children: ReactNode;
+};
+
+const AboutLayout = ({ children }: AboutLayoutProps) => {
+  return (
+    <section>
+      <BeamBackground />
+      {children}
+    </section>
+  );
+};
+
+export default AboutLayout;

app/(landing)/about/page.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { Metadata } from 'next';
 import { generatePageMetadata } from '@/lib/metadata';
+
+import Timeline from '@/components/landing-page/about/timeline/Timeline';
+import AboutLayout from './layout';
+
 import TestimonialsSection from '@/components/testimonials/TestimonialsSection';
 import { testimonials } from '@/components/testimonials/data/testimonial';
 import OurTeam from './OurTeam';
@@ -10,13 +14,19 @@ export const metadata: Metadata = generatePageMetadata('about');
 
 const AboutPage = () => {
   return (
-    <div className='relative z-10 space-y-[23px] md:space-y-[80px] max-w-[1300px] mx-auto'>
-      <OurTeam />
-      <Partners />
-      <div className='text-white text-4xl font-bold text-center mt-10'>
-        <TestimonialsSection testimonials={testimonials} />
+    <AboutLayout>
+      {/* Hero Section */}
+      {/* Boundless Difference */}
+      <Timeline />
+
+      <div className="relative z-10 space-y-[23px] md:space-y-[80px] max-w-[1300px] mx-auto">
+        <OurTeam />
+        <Partners />
+        <div className="text-white text-4xl font-bold text-center mt-10">
+          <TestimonialsSection testimonials={testimonials} />
+        </div>
       </div>
-    </div>
+    </AboutLayout>
   );
 };
 

app/globals.css

@@ -368,3 +368,36 @@ input[type='number'] {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+/* About Timeline Card's Background gradient for images */
+.my-gradient-box {
+  background: radial-gradient(circle, #ffffff7a, #ffffff14);
+}
+
+/* Background Images for the three Timeline Cards  */
+.time-card-background-image-one {
+  background-image: url('/landing/about/Abstract_01.png');
+}
+.time-card-background-image-two {
+  background-image: url('/landing/about/Abstract_02.png');
+}
+.time-card-background-image-three {
+  background-image: url('/landing/about/Abstract_03.png');
+}
+
+.time-card-general-background-positioning {
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: bottom right;
+}
+@media (min-width: 768px) {
+  .time-card-background-image-one {
+    background-image: url('/landing/about/Abstract_01md.png');
+  }
+  .time-card-background-image-two {
+    background-image: url('/landing/about/Abstract_02md.png');
+  }
+  .time-card-background-image-three {
+    background-image: url('/landing/about/Abstract_03md.png');
+  }
+}

components/landing-page/about/timeline/ImageSlider.tsx

@@ -0,0 +1,138 @@
+'use client';
+import React, { useState } from 'react';
+import { aboutTimelineData } from '@/constants';
+import { motion } from 'framer-motion';
+import TimelineCard from './TimelineCard';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import ProgressiveeBarSvg from './ProgressiveeBarSvg';
+
+const ImageSlider = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const totalItems = aboutTimelineData.length;
+
+  const next = () => {
+    setCurrentIndex(prevIndex => (prevIndex + 1) % totalItems);
+  };
+
+  const prev = () => {
+    setCurrentIndex(prevIndex => (prevIndex - 1 + totalItems) % totalItems);
+  };
+
+  const getPosition = (
+    index: number
+  ): 'center' | 'left' | 'right' | 'hidden' => {
+    const diff = (index - currentIndex + totalItems) % totalItems;
+
+    if (diff === 0) return 'center';
+    if (diff === 1 || diff === totalItems - 1) {
+      return diff === 1 ? 'right' : 'left';
+    }
+    return 'hidden';
+  };
+
+  const imageVariants = {
+    center: {
+      x: '0%',
+      scale: 1,
+      zIndex: 5,
+      opacity: 1,
+      rotateY: 0,
+    },
+    left: {
+      x: '-40%',
+      scale: 0.8,
+      zIndex: 2,
+      opacity: 0.7,
+      rotateY: 15,
+    },
+    right: {
+      x: '40%',
+      scale: 0.8,
+      zIndex: 2,
+      opacity: 0.7,
+      rotateY: -15,
+    },
+    hidden: {
+      x: '0%',
+      scale: 0.5,
+      zIndex: 1,
+      opacity: 0,
+    },
+  };
+
+  return (
+    <div className='flex relative min-h-[500px] max-w-[800px] mx-auto items-center'>
+      <div className='relative w-full h-[400px]'>
+        {aboutTimelineData.map((item, index) => {
+          const position = getPosition(index);
+          const { img, year, title, subTitle, backgroundImage } = item;
+          return (
+            <motion.div
+              key={index}
+              initial='center'
+              animate={position}
+              variants={imageVariants}
+              transition={{
+                duration: 0.6,
+                ease: 'easeInOut',
+              }}
+              className='absolute inset-0 flex justify-center items-center'
+              style={{
+                width: '450px',
+                left: '50%',
+                marginLeft: '-200px',
+              }}
+            >
+              <TimelineCard
+                img={img}
+                year={year}
+                title={title}
+                subTitle={subTitle}
+                backgroundImage={backgroundImage}
+              />
+            </motion.div>
+          );
+        })}
+      </div>
+
+      {/* Left and Right button */}
+      <button
+        onClick={prev}
+        className='absolute left-32  top-1/2 -translate-y-1/2 bg-gray-900/80 hover:bg-gray-800 rounded-full p-2 shadow-lg transition-colors z-10'
+      >
+        <ChevronLeft className='w-6 h-6 text-white' />
+      </button>
+
+      <button
+        onClick={next}
+        className='absolute right-24 top-1/2 -translate-y-1/2 bg-gray-900/80 hover:bg-gray-800 rounded-full p-2 shadow-lg transition-colors z-10'
+      >
+        <ChevronRight className='w-6 h-6 text-white' />
+      </button>
+
+      {/* Progress Bar and Number */}
+      <div className='absolute bottom-0 left-1/2 -translate-x-1/2 flex items-center'>
+        {aboutTimelineData.map((_, index) => (
+          <div key={index} className='flex items-center'>
+            <button
+              onClick={() => setCurrentIndex(index)}
+              className={`text-sm font-medium transition-colors ${
+                index === currentIndex ? 'text-white' : 'text-gray-700/65'
+              }`}
+            >
+              {String(index + 1).padStart(2, '0')}
+            </button>
+
+            {index < aboutTimelineData.length - 1 && (
+              <div className='mx-4'>
+                <ProgressiveeBarSvg />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ImageSlider;