✨ "New" landing-page

frontend/pnpm-lock.yaml

@@ -40,6 +40,7 @@ specifiers:
     svelte-check: ^2.2.6
     svelte-preprocess: ^4.10.1
     sveltejs-tippy: ^3.0.0
+    swiper: ^8.1.0
     tailwindcss: ^3.0.12
     tslib: ^2.3.1
     typescript: ~4.5.4
@@ -87,6 +88,7 @@ devDependencies:
     svelte-check: 2.4.5_bb21b93d557fc716a6ae071c4dce10e1
     svelte-preprocess: 4.10.4_c54fd0a3479054b5002c3dc2e70c9c9a
     sveltejs-tippy: 3.0.0
+    swiper: 8.1.0
     tailwindcss: 3.0.23_autoprefixer@10.4.2
     tslib: 2.3.1
     typescript: 4.5.5
@@ -1378,6 +1380,15 @@ packages:
             esutils: 2.0.3
         dev: true
 
+    /dom7/4.0.4:
+        resolution:
+            {
+                integrity: sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==
+            }
+        dependencies:
+            ssr-window: 4.0.2
+        dev: true
+
     /duplexify/3.7.1:
         resolution:
             {
@@ -3639,6 +3650,13 @@ packages:
         resolution: { integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= }
         dev: true
 
+    /ssr-window/4.0.2:
+        resolution:
+            {
+                integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+            }
+        dev: true
+
     /standard-as-callback/2.1.0:
         resolution:
             {
@@ -3856,6 +3874,18 @@ packages:
             tippy.js: 6.0.3
         dev: true
 
+    /swiper/8.1.0:
+        resolution:
+            {
+                integrity: sha512-Py2vuk7Nb3xlZMB2e201DQkjslTb6Uaju6wvr4BB7VjWrouSZegA0QjbxDVheJOsbKMUV092iDL3kymPBbuVzw==
+            }
+        engines: { node: '>= 4.7.0' }
+        requiresBuild: true
+        dependencies:
+            dom7: 4.0.4
+            ssr-window: 4.0.2
+        dev: true
+
     /table/6.8.0:
         resolution:
             {

frontend/src/lib/assets/landing/.gitignore

@@ -0,0 +1,2 @@
+*.png
+*.xcf

frontend/src/lib/landing/landing-promo.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	/*
+	import AdminOverviewScreenshot from '$lib/assets/landing/admin_overview.png';
+	import SelectScreenshot from '$lib/assets/landing/select.webp';
+	import ResultsScreenshot from '$lib/assets/landing/results.webp';
+	import SolutionScreenshot from '$lib/assets/landing/solution.webp';
+	*/
+	import SelectMockup from '$lib/assets/landing/select-mockup.webp';
+	import ResultsMockup from '$lib/assets/landing/results-mockup.webp';
+	import SolutionMockup from '$lib/assets/landing/solution-mockup.webp';
+	import ImportSelectMockup from '$lib/assets/landing/import-select-mockup.webp';
+	import OverviewMockup from '$lib/assets/landing/overview-mockup.webp';
+
+	let teacherTab = false;
+</script>
+
+<div class="grid grid-cols-1 overflow-hidden h-fit">
+	{#if teacherTab}
+		<div class="h-fit">
+			<!--			<h1 class='text-5xl marck-script text-center pt-4'>Teacher</h1>-->
+
+			<div class="grid grid-cols-2 grow pt-4 transition ease-in-out">
+				<h1 class="text-center text-3xl marck-script">1: Create or Import</h1>
+				<h1 class="text-center text-3xl marck-script">2: See all your quizzes</h1>
+				<!--				<h1 class='text-center text-3xl marck-script'>3: See how many were right or wrong</h1>-->
+
+				<div class="flex justify-center">
+					<img src={ImportSelectMockup} class="w-4/6 align-top" alt="Select answer" />
+				</div>
+				<div class="flex justify-center">
+					<img
+						src={OverviewMockup}
+						class="w-4/6 align-top"
+						alt="See right and wrong solutions"
+					/>
+				</div>
+				<!--				<div class='flex justify-center'>-->
+				<!--					<img-->
+				<!--						src={ResultsMockup}-->
+				<!--						class='max-h-80 align-top'-->
+				<!--						alt='See results in comparison with other players'-->
+				<!--					/>-->
+				<!--				</div>-->
+			</div>
+		</div>
+	{:else}
+		<div class="h-fit">
+			<!--			<h1 class='text-5xl marck-script text-center pt-4'>Student</h1>-->
+			<div class="grid grid-cols-3 grow pt-4 transition ease-in-out">
+				<h1 class="text-center text-3xl marck-script">1: Answer</h1>
+				<h1 class="text-center text-3xl marck-script">2: See what was right or wrong</h1>
+				<h1 class="text-center text-3xl marck-script">
+					3: See how many were right or wrong
+				</h1>
+
+				<div class="flex justify-center">
+					<img src={SelectMockup} class="w-4/6 align-top" alt="Select answer" />
+				</div>
+				<div class="flex justify-center">
+					<img
+						src={SolutionMockup}
+						class="w-4/6 align-top"
+						alt="See right and wrong solutions"
+					/>
+				</div>
+				<div class="flex justify-center">
+					<img
+						src={ResultsMockup}
+						class="w-4/6 align-top"
+						alt="See results in comparison with other players"
+					/>
+				</div>
+			</div>
+		</div>
+	{/if}
+	<div class="w-full h-fit pt-4">
+		<div class="flex justify-center">
+			<div class="flex justify-evenly lg:w-2/6">
+				{#if teacherTab}
+					<button
+						class="border border-blue-600 p-2 border-2 rounded hover:bg-gray-700 text-2xl"
+						on:click={() => {
+							teacherTab = true;
+						}}
+						>Teacher's site
+					</button>
+				{:else}
+					<button
+						class="border border-black p-2 border-2 rounded hover:bg-gray-700 text-base"
+						class:border-black={!teacherTab}
+						class:text-base={!teacherTab}
+						on:click={() => {
+							teacherTab = true;
+						}}
+						>Teacher's site
+					</button>
+				{/if}
+				<button
+					class="border border-black p-2 border-2 rounded hover:bg-gray-700"
+					class:border-blue-600={!teacherTab}
+					class:text-2xl={!teacherTab}
+					on:click={() => {
+						teacherTab = false;
+					}}
+					>Studen's site
+				</button>
+			</div>
+		</div>
+	</div>
+</div>

frontend/src/lib/landing/testimonials.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Swiper, SwiperSlide } from 'swiper/svelte';
+	import { Autoplay } from 'swiper';
+	import 'swiper/css';
+	// import 'swiper/css/autoplay';
+
+	const testimotionals = [
+		{
+			quote: 'Great programm!',
+			name: 'John Doe',
+			source: 'https://t.co'
+		},
+		{
+			quote:
+				'The Landscaping Professionals were quick, courteous and very helpful. They\n' +
+				'      helped me restore my lawn and gardens completely after putting in my deck.\n' +
+				'      I was worried it wouldn’t be done in time for my garden party, but they\n' +
+				'      finished the job with time to spare!',
+			name: 'Jane Doe',
+			source: 'https://t.co'
+		}
+	];
+</script>
+
+<div class="grid grid-cols-3">
+	<div class="col-start-2">
+		<Swiper
+			centeredSlides={true}
+			modules={[Autoplay]}
+			autoplay={{
+				delay: 3000,
+				disableOnInteraction: false
+			}}
+			loop={true}
+		>
+			{#each testimotionals as testi}
+				<SwiperSlide>
+					<div class="flex justify-center">
+						<div class="max-w-3xl p-4 text-gray-800 rounded-lg text-white">
+							<div class="mb-2">
+								<div class="h-3 text-3xl text-left text-indigo-600">“</div>
+								<p class="px-4 text-center text-gray-200">
+									{testi.quote}
+								</p>
+								<div class="h-3 text-3xl text-right text-indigo-600">”</div>
+								<div class="text-center">
+									<h5 class="font-bold text-indigo-600">{testi.name}</h5>
+									<a class="text-sm text-gray-600" href={testi.source}>Source</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</SwiperSlide>
+			{/each}
+		</Swiper>
+	</div>
+</div>

frontend/src/routes/__layout.svelte

@@ -39,7 +39,7 @@
 		background-size: cover;
 		/*background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); */
 		/*background: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%); */
-		color: beige;
+		color: black;
 
 		// background-size: 400% 400%;
 

frontend/src/routes/index.svelte

@@ -14,6 +14,8 @@
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
 
+	import LandingPromo from '$lib/landing/landing-promo.svelte';
+
 	const { t } = getLocalization();
 
 	navbarVisible.set(true);
@@ -54,8 +56,24 @@
 			</p>
 		</div>
 	</section>
-	<section id="features">
+
-		<div class="text-center pt-24 snap-y">
+	<section class="py-8">
+		<h1 class="sm:text-6xl text-4xl text-center">Screenshots</h1>
+		<div>
+			<LandingPromo />
+		</div>
+	</section>
+
+	<!--
+	<section>
+		<h1 class='sm:text-6xl text-4xl text-center'>Testimonials</h1>
+		{#await import('$lib/landing/testimonials.svelte') then testimonials}
+			<svelte:component this={testimonials.default} />
+		{/await}
+	</section>
+	-->
+	<section id="features" class='mt-8'>
+		<div class="text-center snap-y">
 			<h1 class="sm:text-6xl text-4xl">{$t('words.features')}</h1>
 			<p class="text-xl pt-4">
 				{$t('index_page.features_description.1')}

frontend/svelte.config.js

@@ -17,6 +17,9 @@ const config = {
 			precompress: true
 		}),
 		vite: {
+			optimizeDeps: {
+				include: ['swiper']
+			},
 			build: {
 				sourcemap: true
 			}