-
-
-
-
+
+ {/* Hero Section */}
+ {/* Boundless Difference */}
+
+
+
-
+
);
};
diff --git a/app/globals.css b/app/globals.css
index cb10f508f..581291a80 100644
--- a/app/globals.css
+++ b/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');
+ }
+}
diff --git a/components/landing-page/about/timeline/ImageSlider.tsx b/components/landing-page/about/timeline/ImageSlider.tsx
new file mode 100644
index 000000000..122c765f5
--- /dev/null
+++ b/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 (
+
+
+ {aboutTimelineData.map((item, index) => {
+ const position = getPosition(index);
+ const { img, year, title, subTitle, backgroundImage } = item;
+ return (
+
+
+
+ );
+ })}
+
+
+ {/* Left and Right button */}
+
+
+
+
+ {/* Progress Bar and Number */}
+
+ {aboutTimelineData.map((_, index) => (
+
+
+
+ {index < aboutTimelineData.length - 1 && (
+
+ )}
+
+ ))}
+
+
+ );
+};
+
+export default ImageSlider;
diff --git a/components/landing-page/about/timeline/ProgressiveeBarSvg.tsx b/components/landing-page/about/timeline/ProgressiveeBarSvg.tsx
new file mode 100644
index 000000000..446a75a3c
--- /dev/null
+++ b/components/landing-page/about/timeline/ProgressiveeBarSvg.tsx
@@ -0,0 +1,268 @@
+import React from 'react';
+
+const ProgressiveeBarSvg = () => {
+ return (
+
+ );
+};
+
+export default ProgressiveeBarSvg;
diff --git a/components/landing-page/about/timeline/Timeline.tsx b/components/landing-page/about/timeline/Timeline.tsx
new file mode 100644
index 000000000..ff2915b67
--- /dev/null
+++ b/components/landing-page/about/timeline/Timeline.tsx
@@ -0,0 +1,97 @@
+'use client';
+import TimelineLayout from './TimelineLayout';
+import { aboutTimelineData } from '@/constants';
+import React, { useEffect, useRef } from 'react';
+import TimelineCard from './TimelineCard';
+import ImageSlider from './ImageSlider';
+import { gsap } from 'gsap';
+import TopRightSvg from './backgroundSvgs/TopRightSvg';
+import MiddleLeftSvg from './backgroundSvgs/MiddleLeftSvg';
+import MiddleRightSvg from './backgroundSvgs/MiddleRightSvg';
+import BottomLeftSvg from './backgroundSvgs/BottomLeftSvg';
+
+const Timeline = () => {
+ const svgRefs = useRef<(SVGPathElement | null)[]>([]);
+
+ useEffect(() => {
+ svgRefs.current.forEach((path, i) => {
+ if (path) {
+ const length = path.getTotalLength();
+
+ // set initial hidden state
+ gsap.set(path, {
+ strokeDasharray: length,
+ strokeDashoffset: length,
+ opacity: 0,
+ });
+
+ // continuous animation
+ gsap.to(path, {
+ strokeDashoffset: 0,
+ opacity: 1,
+ duration: 2,
+ ease: 'power2.inOut',
+ delay: 0.3 * i, // stagger by index
+ repeat: -1, // infinite loop
+ yoyo: true, // reverse back
+ });
+ }
+ });
+ }, []);
+
+ return (
+
+ {/* Heading with Top Right SVG */}
+
+
+
+ Timeline
+
+
+ Our Journey
+
+
+
+ {/* Top Right SVG */}
+
+
+ {aboutTimelineData.map((item, index) => {
+ const { img, year, title, subTitle, backgroundImage } = item;
+ return (
+
+ );
+ })}
+
+
+ {/* Carousel with Middle SVGs */}
+
+
+
+
+
+ {/* Left Middle SVG */}
+
+
+ {/* Right Middle SVG */}
+
+
+
+
+
+ );
+};
+
+export default Timeline;
diff --git a/components/landing-page/about/timeline/TimelineCard.tsx b/components/landing-page/about/timeline/TimelineCard.tsx
new file mode 100644
index 000000000..44dd2eb3d
--- /dev/null
+++ b/components/landing-page/about/timeline/TimelineCard.tsx
@@ -0,0 +1,50 @@
+import Image from 'next/image';
+import React from 'react';
+
+interface props {
+ img: string;
+ year: string;
+ title: string;
+ subTitle: string;
+ backgroundImage: string;
+}
+
+const TimelineCard = ({
+ img,
+ year,
+ title,
+ subTitle,
+ backgroundImage,
+}: props) => {
+ return (
+
+
+
+
+ {title}
+
+
+ {subTitle}
+
+
+ );
+};
+
+export default TimelineCard;
diff --git a/components/landing-page/about/timeline/TimelineLayout.tsx b/components/landing-page/about/timeline/TimelineLayout.tsx
new file mode 100644
index 000000000..463180a7c
--- /dev/null
+++ b/components/landing-page/about/timeline/TimelineLayout.tsx
@@ -0,0 +1,15 @@
+// components/DashboardLayout.tsx
+import React, { ReactNode } from 'react';
+type TimelineLayoutProps = {
+ children: ReactNode;
+};
+
+const TimelineLayout = ({ children }: TimelineLayoutProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default TimelineLayout;
diff --git a/components/landing-page/about/timeline/backgroundSvgs/BottomLeftSvg.tsx b/components/landing-page/about/timeline/backgroundSvgs/BottomLeftSvg.tsx
new file mode 100644
index 000000000..27818e50d
--- /dev/null
+++ b/components/landing-page/about/timeline/backgroundSvgs/BottomLeftSvg.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+
+interface BottomLeftSvgProps {
+ svgRefs: React.MutableRefObject<(SVGPathElement | null)[]>;
+}
+
+const BottomLeftSvg: React.FC
= ({ svgRefs }) => {
+ return (
+
+
+
+
+
+
+
+
+