diff --git a/src/components/main/Event.tsx b/src/components/main/Event.tsx new file mode 100644 index 0000000..eaadef5 --- /dev/null +++ b/src/components/main/Event.tsx @@ -0,0 +1,32 @@ +// Modules +import { Link } from "react-router-dom"; + +// Icons +import divider from "../../icons/divider.svg"; + +// Types +import { eventProps } from "../../types/eventProps"; + +const Event = ({ image, time, date, text }: eventProps) => { + return ( + +
+
+ +
+
+ {time} + + + + {date} +
+
+
+

{text}

+
+ + ); +}; + +export default Event; diff --git a/src/components/main/EventsSection.tsx b/src/components/main/EventsSection.tsx new file mode 100644 index 0000000..ad5b529 --- /dev/null +++ b/src/components/main/EventsSection.tsx @@ -0,0 +1,79 @@ +// Modules + +// Components +import SectionTitle from "../global/SectionTitle"; +import Event from "./Event"; + +// Images +import competition from "../../images/competition.jpg"; +import competition2 from "../../images/competition2.jpg"; +import competition3 from "../../images/competition3.jpg"; + +// Types +import { eventProps } from "../../types/eventProps"; + +const eventsData: eventProps[] = [ + { + image: competition, + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + time: "02:58", + date: "16.12.2021", + }, + { + image: competition2, + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + time: "02:58", + date: "16.12.2021", + }, + { + image: competition3, + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + time: "02:58", + date: "16.12.2021", + }, + { + image: competition, + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + time: "02:58", + date: "16.12.2021", + }, + { + image: competition2, + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + time: "02:58", + date: "16.12.2021", + }, + { + image: competition3, + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + time: "02:58", + date: "16.12.2021", + }, +]; + +const EventsSection = () => { + return ( +
+
+
+ +
+ {eventsData.map((evnt, id) => { + return ( + + ); + })} +
+
+
+
+ ); +}; + +export default EventsSection; diff --git a/src/icons/divider.svg b/src/icons/divider.svg new file mode 100644 index 0000000..2b05b40 --- /dev/null +++ b/src/icons/divider.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/competition.jpg b/src/images/competition.jpg new file mode 100644 index 0000000..62d54f3 Binary files /dev/null and b/src/images/competition.jpg differ diff --git a/src/images/competition2.jpg b/src/images/competition2.jpg new file mode 100644 index 0000000..70208b2 Binary files /dev/null and b/src/images/competition2.jpg differ diff --git a/src/images/competition3.jpg b/src/images/competition3.jpg new file mode 100644 index 0000000..c67a338 Binary files /dev/null and b/src/images/competition3.jpg differ diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 477e8c6..2323848 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -2,12 +2,13 @@ // Components import MainSlider from "../components/main/MainSlider"; -import SectionTitle from "../components/global/SectionTitle"; +import EventsSection from "../components/main/EventsSection"; const Main = () => { return (
+
); }; diff --git a/src/styles/_main.scss b/src/styles/_main.scss index df7e758..e1a84a5 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -97,3 +97,67 @@ .slider-next { right: 2rem; } + +// Events +.events-inner { + display: flex; + flex-direction: column; + gap: 4rem; + padding-bottom: 8rem; +} + +.event { + display: flex; + flex-direction: column; + gap: 1.6rem; + padding-bottom: 1.6rem; + border-bottom: 0.1rem solid $base-green; +} + +.events-content { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap: 7rem; + row-gap: 3.2rem; +} + +.event-img { + img { + width: 100%; + height: 100%; + object-fit: cover; + } +} + +.event-top { + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.event-date { + display: flex; + align-items: center; + gap: 0.8rem; + font-size: 1.6rem; +} + +.event-divider { + display: flex; + align-items: center; + justify-content: center; + width: 1rem; + height: 1rem; + + img { + width: 0.6rem; + height: 0.6rem; + } +} + +.event-bottom { + p { + font-size: 1.6rem; + font-weight: bold; + } +} diff --git a/src/styles/_section-title.scss b/src/styles/_section-title.scss index c2681b3..3f81b9f 100644 --- a/src/styles/_section-title.scss +++ b/src/styles/_section-title.scss @@ -6,7 +6,6 @@ gap: 1.6rem; padding: 1.6rem; overflow: hidden; - margin-bottom: 10rem; } .section-title-title { diff --git a/src/types/eventProps.ts b/src/types/eventProps.ts new file mode 100644 index 0000000..cdb41e7 --- /dev/null +++ b/src/types/eventProps.ts @@ -0,0 +1,8 @@ +export interface eventProps { + image: string; + time: string; + date: string; + text: string; +} + +// Used in EventsSection.tsx and its' child component Event.tsx