✨ "New" landing-page
This commit is contained in:
Mawoka
@@ -0,0 +1,2 @@
|
||||
*.png
|
||||
*.xcf
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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%;
|
||||
|
||||
|
||||
@@ -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')}
|
||||
|
||||
Reference in New Issue
Block a user