diff --git a/data/previousEvents.js b/data/previousEvents.js index 4d09be9..09316b6 100644 --- a/data/previousEvents.js +++ b/data/previousEvents.js @@ -1,4 +1,12 @@ export const PREVIOUSEVENTS = [ + // { + // id: "synelixis", + // year: "2025", + // link: "", + // source: "synelixis.png", + // logo: "synelixis-logo.png", + // paragraph: "", + // }, { id: "ephemeral", year: "2024", diff --git a/src/app/layout.js b/src/app/layout.js index 38404bf..7b0c223 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -26,7 +26,7 @@ export default function RootLayout({ children }) { return ( - + {/* */}
diff --git a/src/app/page.js b/src/app/page.js index 2ba7556..3e7953e 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -4,58 +4,94 @@ import SecondScroll from "@/components/MainPage/2ndScroll"; // import TEDxInNumbers from "@/components/TEDInNumbers/TEDxInNumbers"; import Timeline from "@/components/TimelineComponent/Timeline"; +import NewTimeline from "@/components/NewTimeline/NewTimeline"; import NewFooter from "@/components/Footer/NewFooter"; import ScrollTopButton from "@/components/ScrollTopButton"; +import { PREVIOUSEVENTS } from "../../data/previousEvents"; +import YearLine from "@/components/NewTimeline/YearLine"; +import TimelineEvent from "@/components/NewTimeline/TimelineEvent"; function HomePage() { return (
- {/*
*/} - {/*
*/} - {/*
- -
- {/*
* -
- -
- -
-
*/} -
- {/*
+ {/*
+

- 2024 + 2025

- Stay posTED. More coming + Stay updaTED. More coming soon!

-
*/} +
x +
*/} + + {/* */} +
+ {/*
*/} +
+ {/* Timeline appears in screens of size XL */} +
+ +
+ +
+
+
+
2025
+

+ Stay updaTED. More + coming soon! +

+
+
+
+ +
+
+
2025
+

+ Stay updaTED. More coming + soon! +

+
+
+ + {/* When timeline appears */} +
+ {/* Render Timeline Events */} + {PREVIOUSEVENTS.map((TedEvent, index) => ( + + ))} +
+
- {/*
*/} + + {/*
+ +
*/}
- {/*
*/}
); } +{ +} export default HomePage; diff --git a/src/components/MainPage/2ndScroll.js b/src/components/MainPage/2ndScroll.js index 754b42b..2e817f6 100644 --- a/src/components/MainPage/2ndScroll.js +++ b/src/components/MainPage/2ndScroll.js @@ -4,7 +4,7 @@ import Image from "next/image"; function SecondScroll() { return ( -
+
diff --git a/src/components/NewTimeline/NewTimeline.js b/src/components/NewTimeline/NewTimeline.js new file mode 100644 index 0000000..a975ec5 --- /dev/null +++ b/src/components/NewTimeline/NewTimeline.js @@ -0,0 +1,33 @@ +import React from "react"; +import TimelineEvent from "./TimelineEvent"; +import YearLine from "./YearLine"; + +const Timeline = ({ events }) => { + return ( +
+ + +
+
+
2025
+

+ Stay updaTED. More coming + soon! +

+
+
+ +
+ {/* Render Timeline Events */} + {events.map((TedEvent, index) => ( + + ))} +
+
+ ); +}; + +export default Timeline; diff --git a/src/components/NewTimeline/TimelineEvent.js b/src/components/NewTimeline/TimelineEvent.js new file mode 100644 index 0000000..485e283 --- /dev/null +++ b/src/components/NewTimeline/TimelineEvent.js @@ -0,0 +1,59 @@ +import React from "react"; + +const TimelineEvent = ({ TedEvent }) => { + const { link, logo, source, year, paragraph, index } = TedEvent; // Index added for bullet alignment + const isHoverable = Boolean(link); // Check if the link exists + + return ( +
+ {/* Year Column */} + + {/*
2025
*/} + + {/*
*/} +
+ {/*
*/} +
{year}
+
+ + {/* Image Column */} +
+ {link ? ( + + {`${year} + + ) : ( + {`${year} + )} +
+ + {/* Description Column */} +
+
+ {paragraph} +
+
+
+ ); +}; + +export default TimelineEvent; diff --git a/src/components/NewTimeline/YearLine.js b/src/components/NewTimeline/YearLine.js new file mode 100644 index 0000000..7e77304 --- /dev/null +++ b/src/components/NewTimeline/YearLine.js @@ -0,0 +1,21 @@ +function YearLine({ numberOfYears }) { + return ( + // Vertical Line Bullets +
+
+ + {/* Render Bullets */} + {Array.from({ length: numberOfYears }).map((_, index) => ( +
+ ))} +
+ ); +} + +export default YearLine; diff --git a/src/components/TimelineComponent/Photo.js b/src/components/TimelineComponent/Photo.js index 4679fb1..19f2c97 100644 --- a/src/components/TimelineComponent/Photo.js +++ b/src/components/TimelineComponent/Photo.js @@ -12,48 +12,14 @@ export default function Photo({ TedEvent }) { console.log(TedEvent.link); return ( - //
- //
- //

- // {TedEvent.year} - //

- // - //
- // {/*
*/} - // Previous ted event - // {/*
*/} - //

- // {TedEvent.paragraph} - //

- //
- //
- {/*
*/}
-

+

{TedEvent.year}

{/*
- {/*
- Previous ted event -
*/}
{TedEvent.link !== "" ? ( - {/* */} - -

+

{TedEvent.paragraph}