Skip to content

updated finnovate timeline #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
riyadaz wants to merge 1 commit into
base: main
Choose a base branch
from
Open

updated finnovate timeline #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file modified public/.DS_Store
View file
Open in desktop
Binary file not shown.
95 changes: 55 additions & 40 deletions src/Components/VenturesComponents/WorkshopConstants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,92 @@
export const WORKSHOP_CARDS = [
{
key: "kickoff1",
key: "week1",
header: "Intro to Fintech",
workshopNum: "1",
date: "JAN 22 2025",
startTime: "6:00 PM",
endTime: "7:00 PM",
date: "09/24",
week: "WEEK 1",
startTime: "",
endTime: "",
icon: "fintech", // placeholder for icon name
},
{
key: "kickoff2",
key: "week2",
header: "Ideation",
workshopNum: "2",
date: "JAN 29 2025",
startTime: "6:00 PM",
endTime: "8:00 PM",
date: "10/01",
week: "WEEK 2",
startTime: "",
endTime: "",
icon: "ideation",
},
{
key: "workshop1",
key: "week3",
header: "Validating Ideas",
workshopNum: "3",
date: "FEB 5 2025",
startTime: "11:00 AM",
endTime: "1:00 PM",
date: "10/08",
week: "WEEK 3",
startTime: "",
endTime: "",
icon: "validating",
},
{
key: "workshop2",
key: "week4",
header: "Business Models",
workshopNum: "4",
date: "FEB 12 2025",
startTime: "11:00 AM",
endTime: "1:00 PM",
date: "10/15",
week: "WEEK 4",
startTime: "",
endTime: "",
icon: "business",
},
{
key: "workshop3",
key: "week5",
header: "Figma",
workshopNum: "5",
date: "FEB 19 2025",
startTime: "11:00 AM",
endTime: "1:00 PM",
date: "10/22",
week: "WEEK 5",
startTime: "",
endTime: "",
icon: "figma",
},
{
key: "workshop4",
key: "week6",
header: "Marketing",
workshopNum: "6",
date: "FEB 26 2025",
startTime: "11:00 AM",
endTime: "1:00 PM",
date: "10/29",
week: "WEEK 6",
startTime: "",
endTime: "",
icon: "marketing",
},
{
key: "workshop5",
key: "week7",
header: "Past Pitches",
workshopNum: "7",
date: "MAR 12 2025",
startTime: "11:00 AM",
endTime: "1:00 PM",
topic1: "TBD",
date: "11/05",
week: "WEEK 7",
startTime: "",
endTime: "",
icon: "pitches",
},
{
key: "workshop6",
key: "week8",
header: "How to Pitch",
workshopNum: "8",
date: "MAR 19 2025",
startTime: "6:00 PM",
endTime: "8:00 PM",
topic1: "TBD",
date: "11/12",
week: "WEEK 8",
startTime: "",
endTime: "",
icon: "pitch",
},
{
key: "workshop7",
header: "Pitch Day & Award",
key: "award",
header: "Pitch Day & Award Ceremony!",
workshopNum: "9",
date: "MAR 16 2025",
startTime: "11:00 AM",
endTime: "1:00 PM",
topic1: "TBD",
date: "11/22",
week: "",
startTime: "",
endTime: "",
icon: "award",
},
];
22 changes: 22 additions & 0 deletions src/Components/VenturesComponents/WorkshopIcons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Centralized icon mapping for Finnovate timeline
import fintechIcon from '../../img/fintech.svg';
import ideationIcon from '../../img/ideation.svg';
import validatingIcon from '../../img/validating.svg';
import businessIcon from '../../img/business.svg';
import figmaIcon from '../../img/figma.svg';
import marketingIcon from '../../img/marketing.svg';
import pitchesIcon from '../../img/pitches.svg';
import pitchIcon from '../../img/pitch.svg';
import awardIcon from '../../img/award.svg';

export const WORKSHOP_ICONS = {
fintech: fintechIcon,
ideation: ideationIcon,
validating: validatingIcon,
business: businessIcon,
figma: figmaIcon,
marketing: marketingIcon,
pitches: pitchesIcon,
pitch: pitchIcon,
award: awardIcon,
};
80 changes: 57 additions & 23 deletions src/Components/VenturesComponents/WorkshopsChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,64 @@ import PastVenturesGallery from "../PastVenturesComponents/PastVentureCard";
export default function WorkshopsChart() {
return (
<div className="flex flex-col items-center w-full pb-10 px-4 bg-black">
<p className="mb-8 text-3xl font-bold text-center text-white sm:mb-12 sm:text-5xl">
<p className="mb-8 text-5xl font-bold text-center text-[#b5ff29] tracking-wide" style={{letterSpacing: '0.05em'}}>
WORKSHOP SCHEDULE
</p>

<div className="relative w-full max-w-6xl mx-auto">
{WORKSHOP_CARDS.map((card, index) => {
const position = index % 2 === 0 ? "left" : "right";
return (
<WorkshopCard
key={card.key}
index={index}
position={position}
header={card.header}
workshopNum={card.workshopNum}
date={card.date}
startTime={card.startTime}
endTime={card.endTime}
topic1={card.topic1}
topic2={card.topic2}
/>
);
})}
{/* Vertical Timeline with alternating sides and center neon green line */}
<div className="relative w-full max-w-3xl mx-auto flex flex-col items-center py-10">
{/* Center neon green line */}
<div className="absolute left-1/2 top-0 h-full w-4 flex flex-col items-center z-0" style={{transform: 'translateX(-50%)'}}>
<div className="h-full w-2 bg-[#b5ff29] rounded-full"></div>
</div>
{/* Timeline events */}
<div className="flex flex-col items-center w-full z-10">
{WORKSHOP_CARDS.map((card, index) => {
const isLeft = index % 2 === 0;
return (
<div key={card.key} className="relative w-full mb-12 flex">
{isLeft ? (
<>
{/* Left side event */}
<div className="flex flex-row items-center w-1/2 justify-end pr-12 gap-6">
<div className="flex flex-col items-center" style={{width: '80px'}}>
<div className="w-20 h-20 flex items-center justify-center rounded-full bg-[#009AFF] border-4 border-[#b5ff29]">
<span className="text-white text-4xl font-bold">{index+1}</span>
</div>
{/* Award highlight removed */}
</div>
<div className="flex flex-col items-end text-right">
{card.week && <span className="text-xl text-[#b5ff29] font-bold mb-2">{card.week}</span>}
<span className="text-white text-2xl font-bold mb-2">{card.date}</span>
<span className="text-white text-2xl font-extrabold mb-2">{card.header}</span>
</div>
</div>
<div className="w-1/2"></div>
</>
) : (
<>
<div className="w-1/2"></div>
{/* Right side event */}
<div className="flex flex-row items-center w-1/2 justify-start pl-12 gap-6">
<div className="flex flex-col items-center" style={{width: '80px'}}>
<div className="w-20 h-20 flex items-center justify-center rounded-full bg-[#009AFF] border-4 border-[#b5ff29]">
<span className="text-white text-4xl font-bold">{index+1}</span>
</div>
{/* Award highlight removed */}
</div>
<div className="flex flex-col items-start text-left">
{card.week && <span className="text-xl text-[#b5ff29] font-bold mb-2">{card.week}</span>}
<span className="text-white text-2xl font-bold mb-2">{card.date}</span>
<span className="text-white text-2xl font-extrabold mb-2">{card.header}</span>
</div>
</div>
</>
)}
</div>
);
})}
</div>
</div>

{/* WINNING STAR SECTION */}
<div className="flex items-center justify-center mt-12">
<p className="text-center text-4xl md:text-5xl lg:text-6xl font-bold text-white mr-6 md:mr-12 lg:mr-24">
Expand All @@ -43,7 +77,7 @@ export default function WorkshopsChart() {
/>
</div>

{/* ✅ NEW: connector section */}
{/* Connector section */}
<div className="w-full py-12 bg-gradient-to-b from-black to-gray-900 flex flex-col items-center text-center px-6">
<p className="text-2xl sm:text-3xl font-bold text-white mb-4">Curious about past winning ideas?</p>
<p className="text-white max-w-3xl text-base sm:text-lg font-usual-regular">
Expand All @@ -58,7 +92,7 @@ export default function WorkshopsChart() {
</p>
<PastVenturesGallery />
</div>
</div>

);
</div>
);
}