steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 16:52: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

25
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,10 +45,11 @@
</script> </script>
<div class="space-y-24 my-24"> <div class="space-y-24 my-24">
<div class="-mt-12 sm:mt-0">
<div class="px-12 w-full flex flex-col items-center"> <div class="px-12 w-full flex flex-col items-center">
<div class="flex flex-col gap-6 items-center max-w-3xl"> <div class="flex flex-col gap-6 items-center max-w-3xl">
<div class="text-5xl xs:text-6xl font-black text-center">{$_('metadata.app_title')}</div> <div class="text-4xl sm:text-6xl font-black text-center">{$_('metadata.app_title')}</div>
<div class="text-xl text-muted-foreground text-center"> <div class="text-lg sm:text-xl text-muted-foreground text-center">
{$_('metadata.description')} {$_('metadata.description')}
</div> </div>
<div class="w-full flex flex-row justify-center gap-3"> <div class="w-full flex flex-row justify-center gap-3">
@@ -54,15 +65,21 @@
</div> </div>
</div> </div>
<div class="relative"> <div class="relative">
<enhanced:img
src={routingScreenshotSmall}
alt="Screenshot of the gpx.studio map in 3D."
class="w-full sm:hidden"
/>
<enhanced:img <enhanced:img
src={routingScreenshot} src={routingScreenshot}
alt="Screenshot of the gpx.studio map in 3D." alt="Screenshot of the gpx.studio map in 3D."
class="w-full" class="w-full hidden sm:block"
/> />
<div <div
class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-background via-transparent to-background" 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">
<div class="markdown text-center"> <div class="markdown text-center">