Merge branch 'svelte-henri' into svelte

.gitignore

@@ -22,6 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.mise.toml
 
 *storybook.log
 storybook-static

README.md

@@ -1,152 +1,156 @@
 # Lapikud External Website
 
-Built with [Svelte 5](https://svelte.dev/) and [Vite](https://vite.dev/).
+![Built with Svelte](https://img.shields.io/badge/Svelte-5-FF3E00?logo=svelte&logoColor=white)
+![Built with Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)
+![Deployed on GitHub Pages](https://img.shields.io/badge/Deployed-GitHub%20Pages-222?logo=github)
 
-## Development plan
+Welcome! This is the public-facing website for Lapikud. It's a learning project. If something breaks, that's totally fine. You just get to learn more about git.
 
-Materials are on `Google Drive > Lapikud > Tarkvara > Väliveeb`
+Materials and design files are on **Google Drive → Lapikud → Tarkvara → Väliveeb**
 
-## Contribution guide
+---
 
-### 1. Create Issues
+## 🙋 How to help
 
-Easiest way to help would be to create issues about things that are missing and wrong
+You don't need to write code to contribute!
 
-### 2. Fork this repo and create a pull request
+### Option 1 — Report something
+Found a bug, typo, or something missing? [Open an issue](https://github.com/Lapikud/lapikud.github.io/issues) and describe what's wrong. That's already super helpful.
 
-Fork this repo to your own account and create a pull request for changes you have done in there
+### Option 2 — Fix something yourself
+1. **Fork** this repo (button in the top right on GitHub — it copies the project to your account)
+2. Make your changes
+3. Open a **pull request** back to this repo
 
-## How to setup development environment
+---
 
-### Prerequisites
+## 🛠️ Setting up your dev environment
 
-- [Node.js](https://nodejs.org/) (v18 or higher. v20 is recommended)
+### What you need first
-- npm (comes with Node.js)
+
+- [Node.js](https://nodejs.org/) — v18 or higher, but grab the **LTS version** (currently v24) to be safe
+
+> Node.js comes with `npm` included, so you don't need to install that separately.
+
+---
+
+### Don't have a code editor yet?
+
+If you don't have a preferred code editor, [VSCode](https://code.visualstudio.com/) is a solid choice. Download and install it, and you're good to go.
+
+---
+
+### Windows? Set up WSL first (recommended)
+
+WSL lets you run Linux commands on Windows, which makes everything smoother.
 
 <details>
-<summary>Set up VScode</summary>
+<summary>📋 WSL setup steps</summary>
 
-1. install [VSCode](https://code.visualstudio.com/)
+**Step 1** — Enable WSL. Run these two commands in PowerShell as Administrator (this enables the necessary Windows features):
-
-2. Recommended: wsl2 for windows users
-
-You might need to enable virtualization in BIOS unless it is already enabled. It can be checked by looking for "Virtualization" in Task Manager > Performance tab.
 
 ```bash
 dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
 dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
 ```
 
+**Step 2** — Set WSL to version 2 (the better one):
+
 ```bash
 wsl --set-default-version 2
 ```
 
-install [Ubuntu from Microsoft Store](https://apps.microsoft.com/store/detail/ubuntu/9NBLGGH4MSV6)
+**Step 3** — Install [Ubuntu from the Microsoft Store](https://apps.microsoft.com/store/detail/ubuntu/9NBLGGH4MSV6)
+
+> ⚠️ If WSL doesn't work, check that **Virtualization** is enabled on your machine: open Task Manager → Performance tab → look for "Virtualization: Enabled"
 
 </details>
 
+---
+
 ### Installation
 
-1. **Clone the repository**
+**1. Clone the repo** — this downloads the project to your computer:
 
 ```bash
-   git clone https://github.com/Lapikud/lapikud.github.io.git
+git clone https://github.com/Lapikud/lapikud.github.io.git
-   cd lapikud.github.io
+cd lapikud.github.io
 ```
 
-2. **Install dependencies**
+**2. Install dependencies** — this installs all the packages the project needs:
 
 ```bash
-   npm install
+npm install
 ```
 
-3. **Start development server**
+**3. Start the dev server** — this runs the site locally so you can see your changes live:
 
 ```bash
-   npm run dev
+npm run dev
 ```
 
-> [!IMPORTANT]
+Then open the URL it gives you (usually `http://localhost:5173`) in your browser. 🎉
->
+
-> ### Optional (secretly required): Image optimization
+---
->
+
-> No one wants to download 5MB images that are then shown in a 100x100px box.
+## 🖼️ Images — please optimize before committing!
->
+
-> **Always optimize images before committing them!**
+Nobody wants to load a 5MB photo that's displayed at 100×100px. Always resize images before adding them to the project.
+
+Install FFmpeg first:
 
 <details>
-<summary>Linux/Windows (WSL/Ubuntu)</summary>
+<summary>Linux / WSL / Ubuntu</summary>
 
 ```bash
 sudo apt install ffmpeg
 ```
 
-```bash
-# For thumbnails/small images (100-300px display)
-ffmpeg -i input -vf scale=400:-1 output.jpg
-
-# For medium images (300-800px display)
-ffmpeg -i input -vf scale=1200:-1 output.jpg
-
-# For full-width hero images
-ffmpeg -i input -vf scale=1920:-1 output.jpg
-```
-
 </details>
 
 <details>
-<summary>Windows</summary>
+<summary>Windows (without WSL)</summary>
-
-**Option 1: Using winget (Windows 11 or Windows 10 with App Installer)**
 
+**Option A — via winget:**
 ```bash
 winget install ffmpeg
 ```
 
-**Option 2: Manual installation**
+**Option B — manually:**
-
+1. Download from [ffmpeg.org/download.html](https://ffmpeg.org/download.html)
-1. Download FFmpeg from [ffmpeg.org/download.html](https://ffmpeg.org/download.html)
 2. Extract the archive
-3. Add the `bin` folder to your PATH environment variable
+3. Add the `bin` folder to your PATH
-
-**Usage:**
-
-```bash
-# For thumbnails/small images (100-300px display)
-ffmpeg -i input -vf scale=400:-1 output.jpg
-
-# For medium images (300-800px display)
-ffmpeg -i input -vf scale=1200:-1 output.jpg
-
-# For full-width hero images
-ffmpeg -i input -vf scale=1920:-1 output.jpg
-```
 
 </details>
 
 <details>
-<summary>MacOS</summary>
+<summary>macOS</summary>
 
 ```bash
 brew install ffmpeg
 ```
 
+</details>
+
+### Resize commands
+
+Once FFmpeg is installed, use the right size for the job:
+
 ```bash
-# For thumbnails/small images (100-300px display)
+# Small thumbnails (shown at 100–300px)
 ffmpeg -i input -vf scale=400:-1 output.jpg
 
-# For medium images (300-800px display)
+# Medium images (shown at 300–800px)
 ffmpeg -i input -vf scale=1200:-1 output.jpg
 
-# For full-width hero images
+# Hero / full-width images
 ffmpeg -i input -vf scale=1920:-1 output.jpg
 ```
 
-</details>
+---
 
-## Deploy
+## 🚀 Deployment
 
-> [!NOTE]  
+Nothing to do here — GitHub automatically builds and deploys the site whenever something is pushed to the `main` branch.
-> Github will build and deploy the website automatically on every push to the `main` branch. You don't need to do anything manually.
 
-Deployment typically takes 2-5 minutes. You can check the progress in the [Actions tab](https://github.com/Lapikud/lapikud.github.io/actions).
+It usually takes **2–5 minutes**. You can watch it happen in the [Actions tab](https://github.com/Lapikud/lapikud.github.io/actions).

src/App.svelte

@@ -7,6 +7,8 @@
 
 {#if $text && Object.keys($text).length > 0}
   <Navbar />
-  <Router {routes} />
+  <main>
-  <Footer />
+    <Router {routes} />
+    <Footer />
+  </main>
 {/if}

src/app.css

@@ -1,5 +1,6 @@
 /* Global stylesheet */
 
+@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700&display=swap");
 @import "tailwindcss";
 
 /* Overwriting tailwindcss specific variables */
@@ -26,10 +27,6 @@
 
 /* Design tokens & theme variables (light defaults) */
 :root {
-  /* layout tokens */
-  --site-padding: clamp(1rem, 2vw, 2rem); /* horizontal page padding */
-  --content-max: 1200px; /* main content max width */
-
   /* spacing scale */
   --spacing-0: 0px;
   --spacing-1: 4px;
@@ -56,7 +53,7 @@
   box-sizing: border-box;
 }
 html {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+  font-family: "Unbounded", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
     Roboto, "Helvetica Neue", Arial;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/components/Dropdown.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <div class="relative inline-block" on:focusout={handleFocusOut}>
-  <Button onClick={toggle} class={buttonClass}>
+  <Button onClick={toggle} class={`${buttonClass} gap-0`}>
     {name}
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -29,7 +29,7 @@
       viewBox="0 0 24 24"
       stroke-width="2"
       stroke="currentColor"
-      class="w-5 ml-2 mt-1 transition-transform inline-block"
+      class="w-4 h-4 ml-1 mr-0 mt-0.5 transition-transform inline-block"
       style:transform={isOpen ? "rotate(180deg)" : "none"}
     >
       <path

src/components/layout/Section.svelte

@@ -18,7 +18,7 @@
   {id}
   class="w-full {paddingClasses[padding]} {bg} {className}"
 >
-  <div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto px-(--site-padding)">
+  <div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto">
     <slot />
   </div>
 </section>

src/layout/Navbar.svelte

@@ -1,8 +1,8 @@
 <script>
   import {
     Button,
+    Container,
     Dropdown,
-    Section,
     Stack,
   } from "$components";
   import { navigate, getPath, currentLang, text, switchLanguageRoute } from "$lib";
@@ -105,9 +105,10 @@
   }
 </style>
 
-<Section className="text-black" bg="bg-orange-500" padding="tight">
+<header class="fixed inset-x-0 top-0 z-50 text-white">
-  {#if $text && Object.keys($text).length > 0}
+  <Container maxWidth={true} center={false} className="py-2 md:py-3">
-    <div class="flex items-center w-full relative min-h-12">
+    {#if $text && Object.keys($text).length > 0}
+      <div class="flex items-center w-full relative min-h-12">
       <!-- Logo -->
       {#if currentPath !== "/"}
         <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 md:relative md:left-auto md:translate-x-0 md:top-auto md:translate-y-0">
@@ -117,9 +118,9 @@
         </div>
       {/if}
       
-      <div class="flex items-center justify-end ml-auto w-full md:w-auto">
+      <div class="flex items-center justify-end ml-auto w-full md:w-auto md:border-b-3 md:border-white">
         <!-- Desktop Navigation -->
-        <nav class="z-10 hidden md:flex gap-4 justify-end text-xl">
+        <nav class="z-10 hidden md:flex gap-2 justify-end text-xl">
           <Dropdown
             name={$text.about || 'Meist'}
             buttonClass="rounded-[5px] hover:text-white"
@@ -162,7 +163,7 @@
           
           <!-- Language Switcher -->
           <Button 
-            class="rounded-[5px] px-3 py-1 text-sm ml-2 hover:text-white"
+            class="rounded-[5px] px-3 py-1 text-sm ml-4 hover:text-white"
             onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
           >
             {$currentLang === 'est' ? 'EN' : 'EST'}
@@ -178,10 +179,11 @@
       >
         <Menu size={32} />
       </Button>
-    </div>
+      </div>
-    </div>
+      </div>
-  {/if}
+    {/if}
-</Section>
+  </Container>
+</header>
 
 <!-- Full Screen Mobile Menu -->
 {#if mobileMenuOpen}
@@ -191,7 +193,7 @@
     class:menu-closing={isClosing}
   >
     <Stack className="min-h-full">
-      <div class="absolute top-8 right-0 px-(--site-padding)">
+      <div class="absolute top-8 right-0">
         <Button
           onClick={closeMobileMenu}
           class="ml-auto p-2 transition-colors flex bg-transparent hover:text-orange-500"

src/lib/i18n.js

@@ -31,7 +31,7 @@ async function loadTranslations(lang) {
         
         // Dynamically import all translation files for the specific language
         // Vite will code-split these and only bundle the ones actually used
-        const modules = import.meta.glob('../locales/*/*.json');
+        const modules = import.meta.glob('./locales/*/*.json');
         
         for (const path in modules) {
             if (path.includes(`/locales/${lang}/`) || path.includes(`\\locales\\${lang}\\`)) {

src/routes/NewHome.svelte

@@ -0,0 +1,62 @@
+<script>
+import {Section, Grid, Center, Image, Svg} from "$components";
+</script>
+
+<!-- Hero Section -->
+<Section className="relative min-h-screen overflow-hidden" padding="none" fullWidth={true}>
+  <div class="relative min-h-screen flex items-center">
+    <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+      <Image
+        src="/assets/carousel-images/1.jpg"
+        alt=""
+        objectFit="cover"
+        className="w-full h-full"
+        pictureClass="block w-full h-full"
+      />
+    </div>
+    <div
+      class="pointer-events-none absolute inset-0 bg-gray-900 [clip-path:polygon(75%_0,100%_0,100%_100%,25%_100%)]"
+      aria-hidden="true"
+    ></div>
+    <div
+      class="pointer-events-none absolute inset-0 bg-orange-500/75 [clip-path:polygon(0_0,75%_0,25%_100%,0_100%)]"
+      aria-hidden="true"
+    ></div>
+
+    <div
+      class="pointer-events-none absolute inset-0 [clip-path:polygon(0_0,75%_0,25%_100%,0_100%)]"
+      aria-hidden="true"
+    >
+      <Svg
+        type="connector"
+        className="absolute left-0 top-[16%] w-[clamp(130px,14vw,230px)] text-white/95"
+      />
+      <Svg
+        type="branch"
+        className="absolute left-0 top-[52%] -translate-y-1/2 w-[clamp(56px,6vw,94px)] text-white/95"
+      />
+      <Svg
+        type="mirrorV"
+        className="absolute left-0 bottom-[12%] w-[clamp(130px,14vw,230px)] text-white/95"
+      />
+    </div>
+
+    <div
+      class="pointer-events-none absolute inset-x-0 bottom-[6%] z-10 hidden md:flex w-full flex-col items-end gap-3"
+      aria-hidden="true"
+    >
+      <div class="h-6 w-[50%] bg-orange-500/90"></div>
+      <div class="h-4 w-[60%] bg-orange-500/90"></div>
+    </div>
+
+    <Grid columns={2} className="relative z-20 items-center">
+      <Center className="self-center md:-translate-y-8">
+        <img src="/assets/LapLogo_black_white.png" alt="MTÜ Lapikud" class="max-w-lg w-full h-auto p-4"/>
+      </Center>
+      <p class="self-center md:translate-y-16 text-center text-2xl leading-[200%] p-8 text-white">
+        MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi
+        ja praegusi IT huvilisi tudengeid.
+      </p>
+    </Grid>
+  </div>
+</Section>

src/routes/index.js

@@ -1,7 +1,7 @@
 // ADD PAGES HERE TO REGISTER ROUTES
 // examples: '/page', '/page/:id'
 
-import Home from './Home.svelte'
+import NewHome from './NewHome.svelte'
 import Student from './Student.svelte'
 import Mentors from './Mentors.svelte'
 import Helpdesk from './Helpdesk.svelte'
@@ -65,7 +65,7 @@ export function getTranslatedRoute(currentPath, targetLang) {
 }
 
 export const routes = {
-  '/': Home,
+  '/': NewHome,
   '/tudengile': Student,
   '/student': Student,
   '/mentorid': Mentors,