steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 08:42:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

hero section more responsive

Browse Source
This commit is contained in:
vcoppe
2024-07-18 15:19:22 +02:00
parent 79e872670b
commit 0c7e9ff9e4
2 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/src/lib/assets/img/home/routing-small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

69
website/src/routes/[...language]/+page.svelte
View File

@@ -5,7 +5,16 @@
import ElevationProfile from '$lib/components/ElevationProfile.svelte'; import ElevationProfile from '$lib/components/ElevationProfile.svelte';
import GPXStatistics from '$lib/components/GPXStatistics.svelte'; import GPXStatistics from '$lib/components/GPXStatistics.svelte';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte'; import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import { BookOpenText, Heart, LineChart, Map, PencilRuler, Route, Scale } from 'lucide-svelte'; import {
BookOpenText,
Heart,
LineChart,
Map,
PencilRuler,
Route,
Scale,
MoveDown
} from 'lucide-svelte';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { exampleGPXFile } from '$lib/assets/example'; import { exampleGPXFile } from '$lib/assets/example';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
@@ -13,6 +22,7 @@
import { currentTool, Tool } from '$lib/stores'; import { currentTool, Tool } from '$lib/stores';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import routingScreenshot from '$lib/assets/img/home/routing.png?enhanced'; import routingScreenshot from '$lib/assets/img/home/routing.png?enhanced';
import routingScreenshotSmall from '$lib/assets/img/home/routing-small.png?enhanced';
import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced'; import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
import mapboxSatelliteMap from '$lib/assets/img/home/mapbox-satellite.png?enhanced'; import mapboxSatelliteMap from '$lib/assets/img/home/mapbox-satellite.png?enhanced';
import ignMap from '$lib/assets/img/home/ign.png?enhanced'; import ignMap from '$lib/assets/img/home/ign.png?enhanced';
@@ -35,33 +45,40 @@
</script> </script>
<div class="space-y-24 my-24"> <div class="space-y-24 my-24">
<div class="px-12 w-full flex flex-col items-center"> <div class="-mt-12 sm:mt-0">
<div class="flex flex-col gap-6 items-center max-w-3xl"> <div class="px-12 w-full flex flex-col items-center">
<div class="text-5xl xs:text-6xl font-black text-center">{$_('metadata.app_title')}</div> <div class="flex flex-col gap-6 items-center max-w-3xl">
<div class="text-xl text-muted-foreground text-center"> <div class="text-4xl sm:text-6xl font-black text-center">{$_('metadata.app_title')}</div>
{$_('metadata.description')} <div class="text-lg sm:text-xl text-muted-foreground text-center">
</div> {$_('metadata.description')}
<div class="w-full flex flex-row justify-center gap-3"> </div>
<Button href="./app" class="w-1/3 min-w-fit"> <div class="w-full flex flex-row justify-center gap-3">
<Map size="18" class="mr-1.5" /> <Button href="./app" class="w-1/3 min-w-fit">
{$_('homepage.app')} <Map size="18" class="mr-1.5" />
</Button> {$_('homepage.app')}
<Button variant="secondary" href="./help" class="w-1/3 min-w-fit"> </Button>
<BookOpenText size="18" class="mr-1.5" /> <Button variant="secondary" href="./help" class="w-1/3 min-w-fit">
<span>{$_('menu.help')}</span> <BookOpenText size="18" class="mr-1.5" />
</Button> <span>{$_('menu.help')}</span>
</Button>
</div>
</div> </div>
</div> </div>
</div> <div class="relative">
<div class="relative"> <enhanced:img
<enhanced:img src={routingScreenshotSmall}
src={routingScreenshot} alt="Screenshot of the gpx.studio map in 3D."
alt="Screenshot of the gpx.studio map in 3D." class="w-full sm:hidden"
class="w-full" />
/> <enhanced:img
<div src={routingScreenshot}
class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background via-transparent to-background" alt="Screenshot of the gpx.studio map in 3D."
/> class="w-full hidden sm:block"
/>
<div
class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background via-transparent to-background"
/>
</div>
</div> </div>
<div class="px-12 sm:px-24 w-full flex flex-col items-center"> <div class="px-12 sm:px-24 w-full flex flex-col items-center">
<div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl"> <div class="flex flex-col md:flex-row gap-x-12 gap-y-6 items-center justify-between max-w-5xl">