new home page design (Hero only right now)

src/App.svelte

@@ -7,6 +7,8 @@
 
 {#if $text && Object.keys($text).length > 0}
   <Navbar />
-  <Router {routes} />
-  <Footer />
+  <main>
+    <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">
-  {#if $text && Object.keys($text).length > 0}
-    <div class="flex items-center w-full relative min-h-12">
+<header class="fixed inset-x-0 top-0 z-50 text-white">
+  <Container maxWidth={true} center={false} className="py-2 md:py-3">
+    {#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>
-  {/if}
-</Section>
+      </div>
+      </div>
+    {/if}
+  </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,