introducing css components

src/assets/css/App.scss

@@ -0,0 +1,18 @@
+@import "./generalites/typography.scss";
+@import "./components/cta.scss";
+@import "./components/menu.scss";
+
+@import "./pages/Home.scss";
+
+.page-container {
+	padding: 0 2vh;
+}
+.screen {
+	@apply bg-purple-500 lg:bg-tahiti-200;
+	min-height: 96vh;
+	margin-top: 2vh;
+}
+
+p {
+	@apply my-0;
+}

src/assets/css/components/cta.scss

@@ -0,0 +1,23 @@
+.cta {
+	@apply block;
+	&--round {
+		@apply w-32 h-32;
+		border-radius: 50%;
+	}
+	&--construction {
+		@apply bg-construction;
+	}
+	&--play {
+		@apply relative;
+
+		&:after {
+			@apply absolute w-12 h-12 z-20 left-1/2 top-1/2;
+			content: "";
+			transform: translate(-50%, -50%);
+			background-image: url("../../img/icon-play.svg");
+			background-position: center;
+			background-size: contain;
+			background-repeat: no-repeat;
+		}
+	}
+}

src/assets/css/components/menu.scss

@@ -0,0 +1,3 @@
+nav.main-menu {
+	@apply bg-red-500 absolute top-0 py-3 w-full flex justify-between;
+}

src/assets/css/generalites/typography.scss

@@ -0,0 +1,34 @@
+@font-face {
+	font-family: "Zuume";
+	src: local("Zuume"), url("../../fonts/ZuumeSoft-Bold.ttf") format("truetype");
+	font-weight: 800;
+	font-style: normal;
+}
+@font-face {
+	font-family: "Dinpro";
+	src: local("Dinpro"), url("../../fonts/DINProBold.otf") format("opentype");
+	font-weight: 800;
+	font-style: normal;
+}
+
+.text-zuume {
+	font-family: "Zuume";
+}
+.text-din {
+	font-family: "Dinpro";
+}
+
+* {
+	@apply text-din;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-family: "Zuume";
+	margin: 0;
+	padding: 0;
+}

src/assets/css/pages/Home.scss

@@ -0,0 +1,56 @@
+.page-container--home {
+	.screen {
+		@apply flex flex-col justify-center items-center relative overflow-hidden;
+
+		.screen_worker_1,
+		.screen_worker_2 {
+			@apply absolute;
+			max-height: 60%;
+			bottom: -2rem;
+		}
+		.screen_worker_1 {
+			@apply left-0;
+		}
+		.screen_worker_2 {
+			@apply -right-16;
+		}
+		&__content {
+			@apply text-center pt-12 px-16 w-fit mx-auto h-auto overflow-visible relative;
+
+			padding-bottom: -100px;
+
+			background-image: url("../../img/mask.svg");
+			background-position: center;
+			background-size: cover;
+
+			.cover_worker {
+				@apply mx-auto;
+				transform: translate(0%, -50%);
+				margin-bottom: -130px;
+			}
+
+			.application_title,
+			.application_subtitle {
+				@apply text-zuume;
+			}
+			.application_title {
+				@apply text-9xl;
+			}
+			.application_subtitle {
+				@apply text-6xl bg-construction w-fit mx-auto px-3 block mb-10;
+				transform: rotate(-3deg);
+			}
+
+			.application_description {
+				@apply max-w-2xl text-xl px-20;
+				margin-bottom: -40px;
+			}
+			.cta--play {
+				@apply mx-auto;
+				transform: translateY(50%);
+			}
+		}
+		&__worker-1 {
+		}
+	}
+}