piotr.zaborowski.dev
this repo has no description
Refactor code structure for improved readability and maintainability
apps/web/public/assets/family.jpg
apps/web/public/assets/family.jpg
This is a binary file and will not be displayed.
-11
apps/web/src/components/Section.svelte
-11
apps/web/src/components/Section.svelte
+32
-32
apps/web/src/components/organisms/Header.svelte
+32
-32
apps/web/src/components/organisms/Header.svelte
···
1
1
<script>
2
-
import Icon from "@iconify/svelte";
3
-
import Link from "../atoms/Link.svelte"
2
+
import Icon from '@iconify/svelte';
3
+
import Link from '../atoms/Link.svelte';
4
4
</script>
5
5
6
-
<header class="sticky top-0 z-50 bg-white">
7
-
<div class='flex justify-between items-center px-4 py-3 text-hyski-blue'>
8
-
<a href="/" class="flex items-center gap-1">
9
-
<img src="/logo.png" alt="Hyski Logo" class='h-8 mr-2'/>
10
-
<h1 class=' font-black text-xl'>Hyski</h1>
11
-
</a>
6
+
<header class="sticky top-0 z-50 bg-white/50 backdrop-blur-sm">
7
+
<div class="flex items-center px-4 py-3 text-hyski-blue gap-4 w-full">
8
+
<a href="/" class="flex items-center gap-1">
9
+
<img src="/logo.png" alt="Hyski Logo" class="h-8 mr-2" />
10
+
<h1 class="font-black text-xl">Hyski</h1>
11
+
</a>
12
12
13
-
<Link role="button" href="#" title='Arriving soon!'>
14
-
<Icon icon="streamline-freehand-color:coding-files-network-folder" class='text-2xl text-shadow-hyski-blue'/>
15
-
<span>Download will be available soon!</span>
16
-
</Link>
17
-
</div>
18
-
<div class='bg-hyski-blue text-white p-4'>
19
-
<nav>
20
-
<ul class='flex gap-4 justify-center items-center'>
21
-
<li>
22
-
<Link href='/features' role="button" class="hover:bg-white/50 rounded">Features</Link>
23
-
</li>
24
-
<li>
25
-
<Link href="/pricing" role="button" class="hover:bg-white/50 rounded">Pricing</Link>
26
-
</li>
27
-
<li>
28
-
<Link href="/help" role="button" class="hover:bg-white/50 rounded">Support</Link>
29
-
</li>
30
-
<li>
31
-
<Link href="/blog" role="button" class="hover:bg-white/50 rounded">Blog</Link>
32
-
</li>
33
-
</ul>
34
-
</nav>
35
-
</div>
36
-
</header>
13
+
<nav>
14
+
<ul class="flex gap-4 justify-center items-center">
15
+
<li>
16
+
<Link href="/features" role="button" class="hover:bg-white/50 rounded">Features</Link>
17
+
</li>
18
+
<li>
19
+
<Link href="/pricing" role="button" class="hover:bg-white/50 rounded">Pricing</Link>
20
+
</li>
21
+
<li>
22
+
<Link href="/docs" role="button" class="hover:bg-white/50 rounded">Documentation</Link>
23
+
</li>
24
+
25
+
<li>
26
+
<Link href="https://blog.hyski.eu" role="button" class="hover:bg-white/50 rounded"
27
+
>Blog</Link
28
+
>
29
+
</li>
30
+
<li>
31
+
<Link href="/help" role="button" class="hover:bg-white/50 rounded">Support</Link>
32
+
</li>
33
+
</ul>
34
+
</nav>
35
+
</div>
36
+
</header>
+7
-8
apps/web/src/layouts/App.astro
+7
-8
apps/web/src/layouts/App.astro
···
1
1
---
2
-
import Base from "./Base.astro";
3
-
import Header from "../components/organisms/Header.svelte";
4
-
import Footer from "../components/organisms/Footer.svelte";
5
-
2
+
import Base from './Base.astro';
3
+
import Header from '../components/organisms/Header.svelte';
4
+
import Footer from '../components/organisms/Footer.svelte';
6
5
---
7
6
8
7
<Base>
9
-
<Header client:only='svelte' />
10
-
<slot />
11
-
<Footer client:only='svelte' />
12
-
</Base>
8
+
<Header client:only="svelte" />
9
+
<slot />
10
+
<Footer client:only="svelte" />
11
+
</Base>
+123
-44
apps/web/src/pages/index.astro
+123
-44
apps/web/src/pages/index.astro
···
1
1
---
2
2
import App from '../layouts/App.astro';
3
-
import Section from '../components/Section.svelte';
3
+
4
4
import Link from '../components/atoms/Link.svelte';
5
5
import Icon from '@iconify/svelte';
6
6
---
7
7
8
8
<App>
9
-
<Section even client:only="svelte">
10
-
<div class="flex flex-col items-center justify-center gap-10 text-hyski-blue w-full h-full">
11
-
<img src="/logo.png" alt="Hyski Logo" class="h-48" />
12
-
<h2 class="text-6xl font-black">Hyski</h2>
13
-
<h3 class="font-extralight text-8xl">
14
-
Finding <p class="font-bold inline">Kotoisa<sup class="text-5xl">*</sup></p>
15
-
<br /> in the Everyday
16
-
</h3>
17
-
<p class="text-xs">* Finnish for a sense of belonging and comfort</p>
18
-
</div>
19
-
</Section>
20
-
<Section client:only="svelte">
21
-
<div class="flex flex-col items-center gap-10 text-hyski-blue w-full h-full">
9
+
<div class="grid grid-cols-8 grid-rows-6 gap-10 p-10 w-full h-[calc(100vh-3.5rem)]">
10
+
<section id="shared-calendar" class="bg-yellow-300/60 p-4 rounded-lg flex flex-col gap-4">
11
+
<Icon
12
+
client:only="svelte"
13
+
icon="solar:calendar-broken"
14
+
class="text-5xl text-shadow-hyski-blue"
15
+
/>
16
+
17
+
<h3 class="text-3xl">Calendars</h3>
18
+
</section>
19
+
20
+
<section id="notes" class="bg-hyski-blue/10 p-4 rounded-lg flex flex-col gap-4">
21
+
<Icon
22
+
client:only="svelte"
23
+
icon="solar:notes-broken"
24
+
class="text-5xl text-shadow-hyski-blue"
25
+
/>
26
+
27
+
<h3 class="text-3xl">Notes</h3>
28
+
</section>
29
+
30
+
<section id="hero" class={`bg-blue-200 p-4 rounded-lg bg-[url(/assets/family.jpg)] bg-cover`}>
31
+
</section>
32
+
33
+
<section id="plugins" class="bg-black text-white p-4 rounded-lg flex flex-col gap-4">
34
+
<Icon
35
+
client:only="svelte"
36
+
icon="solar:plug-circle-broken"
37
+
class="text-6xl text-shadow-hyski-blue"
38
+
/>
39
+
40
+
<h3 class="text-3xl">Built-in plugins</h3>
41
+
22
42
<div>
23
-
<Icon icon="streamline-freehand-color:plugin-hands-puzzle" />
24
-
<h2 class="text-4xl font-bold mt-25 mb-4">Simple, yet powerful...</h2>
43
+
<ul class="list-none flex gap-4">
44
+
<li class="plugin-item">To-Do Lists</li>
45
+
<li class="plugin-item">Finances</li>
46
+
<li class="plugin-item">Baby Tracker</li>
47
+
<li class="plugin-item">Order Tracker</li>
48
+
<li class="plugin-item">And more...</li>
49
+
</ul>
25
50
</div>
26
-
<p class="mb-2">With Hyski you can focus on your family in a structured way.</p>
27
-
<Link role="button" href="/features"> Explore all features </Link>
28
-
</div>
29
-
</Section>
30
-
<Section even client:only="svelte">
31
-
<h2 class="text-2xl font-bold mt-8 mb-4">Pricing</h2>
32
-
<ul class="list-disc list-inside">
33
-
<li>New user dashboard launched.</li>
34
-
<li>Improved performance and bug fixes.</li>
35
-
<li>Added dark mode support.</li>
36
-
</ul>
37
-
</Section>
51
+
</section>
52
+
53
+
<section id="security" class="bg-hyski-blue/10 p-4 rounded-lg flex flex-col gap-4">
54
+
<Icon
55
+
client:only="svelte"
56
+
icon="solar:shield-keyhole-broken"
57
+
class="text-5xl text-shadow-hyski-blue"
58
+
/>
59
+
60
+
<h3 class="text-3xl">Secure & Fully Private</h3>
61
+
</section>
62
+
63
+
<section id="eu" class="bg-hyski-blue/80 text-white p-4 rounded-lg flex flex-col gap-4">
64
+
<Icon client:only="svelte" icon="game-icons:european-flag" class="text-5xl" />
65
+
66
+
<h3 class="text-3xl">EU Compliant</h3>
67
+
</section>
68
+
69
+
<section id="banner" class="flex items-center">
70
+
<h2 class="text-hyski-blue text-7xl font-semibold">Finding Kotoisa <br /> in Everyday</h2>
71
+
</section>
38
72
39
-
<Section client:only="svelte">
40
-
<h2 class="text-2xl font-bold mt-8 mb-4">Read all the latest news!</h2>
41
-
</Section>
73
+
<section id="description" class="grid grid-rows-3 gap-10">
74
+
<p class="text-2xl row-span-2">
75
+
Self-hosted family hub. <br /> All your data fully under your control.
76
+
</p>
42
77
43
-
<Section even client:only="svelte">
44
-
<div class="flex flex-col items-center justify-center gap-10 text-hyski-blue w-full h-full">
45
-
<h2 class="text-6xl font-bold mt-8 mb-4">Get Started Today!</h2>
46
-
<Link role="button" href="#" class="text-3xl">
47
-
<Icon
48
-
client:only="svelte"
49
-
icon="streamline-freehand-color:kindle-read-document-hold"
50
-
class="text-5xl text-shadow-hyski-blue"
51
-
/>
52
-
<span> Check it out now! </span>
53
-
</Link>
54
-
</div>
55
-
</Section>
78
+
<div id="download" class="grid grid-cols-2 gap-10">
79
+
<Link role="button" href="/download" class="bg-hyski-blue text-white justify-center py-2">
80
+
<span class="text-xl">Host it yourself today!</span>
81
+
</Link>
82
+
<div class="flex items-center justify-center gap-4">
83
+
<span class="text-xl font-light">Available soon on</span>
84
+
<Icon
85
+
client:only="svelte"
86
+
icon="tabler:brand-github"
87
+
class="text-4xl inline-block bg-gray-300 p-1 rounded-full"
88
+
/>
89
+
</div>
90
+
</div>
91
+
</section>
92
+
</div>
56
93
</App>
94
+
95
+
<style>
96
+
.plugin-item {
97
+
background-color: white;
98
+
color: black;
99
+
padding: 0.5rem 1rem;
100
+
border-radius: 0.375rem;
101
+
font-size: small;
102
+
}
103
+
104
+
#shared-calendar {
105
+
grid-area: 1 / 1 / span 2 / span 2;
106
+
}
107
+
108
+
#notes {
109
+
grid-area: 1 / 3 / span 2 / span 2;
110
+
}
111
+
112
+
#hero {
113
+
grid-area: 1 / 5 / span 4 / span 2;
114
+
}
115
+
116
+
#plugins {
117
+
grid-area: 3 / 1 / span 2 / span 4;
118
+
}
119
+
120
+
#banner {
121
+
grid-area: 5 / 1 / span 2 / span 4;
122
+
}
123
+
124
+
#security {
125
+
grid-area: 3 / 7 / span 2 / span 2;
126
+
}
127
+
128
+
#eu {
129
+
grid-area: 1 / 7 / span 2 / span 2;
130
+
}
131
+
132
+
#description {
133
+
grid-area: 5 / 5 / span 2 / span 4;
134
+
}
135
+
</style>