88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
import React from "react";
|
|
import {
|
|
VerticalTimeline,
|
|
VerticalTimelineElement,
|
|
} from "react-vertical-timeline-component";
|
|
import { motion } from "framer-motion";
|
|
|
|
import "react-vertical-timeline-component/style.min.css";
|
|
|
|
import { SectionWrapper } from "src/hoc";
|
|
import { textVariant } from "src/utils/motion";
|
|
import { styles } from "src/style";
|
|
import { experiences } from "src/constans";
|
|
|
|
const ExperienceCard = ({ experience }) => {
|
|
return (
|
|
<VerticalTimelineElement
|
|
contentStyle={{
|
|
background: "#35685952",
|
|
color: "#fff",
|
|
borderRadius: "15px",
|
|
}}
|
|
contentArrowStyle={{ borderRight: "7px solid #35685952" }}
|
|
date={experience.date}
|
|
iconStyle={{ background: experience.iconBg }}
|
|
icon={
|
|
<div className="flex justify-center items-center w-full h-full bg-primary-300 rounded-full"></div>
|
|
}
|
|
>
|
|
<div>
|
|
<h3 className="text-white text-[24px] font-bold">{experience.title}</h3>
|
|
<p
|
|
className="text-secondary text-[16px] font-semibold"
|
|
style={{ margin: 0 }}
|
|
>
|
|
{experience.company_name}
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="mt-5 list-disc ml-5 space-y-2">
|
|
{experience.points.map((point, index) => (
|
|
<li
|
|
key={`experience-point-${index}`}
|
|
className="text-white-100 text-[14px] pl-1 tracking-wider"
|
|
>
|
|
{point}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</VerticalTimelineElement>
|
|
);
|
|
};
|
|
|
|
const Experience = () => {
|
|
return (
|
|
<>
|
|
<motion.div variants={textVariant()}>
|
|
<h2
|
|
className={`text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px] text-center`}
|
|
>
|
|
User journey road map{" "}
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="mt-20 flex flex-col">
|
|
<VerticalTimeline>
|
|
{experiences.map((experience, index) => (
|
|
<ExperienceCard
|
|
key={`experience-${index}`}
|
|
experience={experience}
|
|
/>
|
|
))}
|
|
</VerticalTimeline>
|
|
</div>
|
|
|
|
<div className=" mt-20">
|
|
<h2
|
|
className={`text-white font-bold md:text-[30px] sm:text-[20px] xs:text-[18px] text-[30px] text-center`}
|
|
>
|
|
" Now, your coffee shop's symphony plays harmoniously with Briz."
|
|
</h2>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SectionWrapper(Experience, "work");
|