mirror of
https://github.com/Lapikud/lapikud.github.io.git
synced 2026-08-08 21:29:14 +00:00
footer, navbar and components rework
This commit is contained in:
Henri
48
src/app.css
48
src/app.css
@@ -98,30 +98,6 @@ body {
|
||||
font-size: var(--fs-lg);
|
||||
}
|
||||
|
||||
/* Container pattern */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--content-max);
|
||||
|
||||
padding-left: var(--site-padding);
|
||||
padding-right: var(--site-padding);
|
||||
}
|
||||
|
||||
/* Responsive helpers - mobile by default; desktop media queries adjust naturally */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding-left: calc(var(--site-padding) * 1.2);
|
||||
padding-right: calc(var(--site-padding) * 1.2);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
padding-left: calc(var(--site-padding) * 1.5);
|
||||
padding-right: calc(var(--site-padding) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Basic link & button defaults that components inherit */
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
@@ -154,30 +130,6 @@ button:focus {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Card pattern components can use .card */
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-1);
|
||||
border: 1px solid var(--color-border);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
/* Stacking helpers: use .stack to avoid writing margins for children */
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.stack--tight {
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.inline {
|
||||
display: inline-flex;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Simple responsive grid that adapts to available width */
|
||||
.grid {
|
||||
display: grid;
|
||||
|
||||
@@ -1,39 +1,22 @@
|
||||
<script>
|
||||
export let onClick = () => {};
|
||||
export let border = false;
|
||||
export let textAlign = "left";
|
||||
export let whiteSpace = "nowrap";
|
||||
export let borderRadius = "8px";
|
||||
export let buttonHoverStyle = "";
|
||||
|
||||
let isHovered = false;
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={onClick}
|
||||
class="btn"
|
||||
class:borderless={!border}
|
||||
style={`text-align: ${textAlign}; white-space: ${whiteSpace}; border-radius: ${borderRadius};`}
|
||||
{...$$restProps}
|
||||
<button
|
||||
on:click={onClick}
|
||||
on:mouseenter={() => (isHovered = true)}
|
||||
on:mouseleave={() => (isHovered = false)}
|
||||
class={`btn border-[1.5px] px-5 py-2.5 font-medium cursor-pointer flex items-center gap-2 whitespace-nowrap ${$$restProps.class}`}
|
||||
style={isHovered && buttonHoverStyle ? buttonHoverStyle : null}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.btn {
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
border: 1.5px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.btn:not(.borderless) {
|
||||
border-color: var(--orange);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--orange);
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
import Button from "./Button.svelte";
|
||||
|
||||
export let name = "";
|
||||
export let border = false;
|
||||
export let borderRadius = "8px";
|
||||
export let buttonClass = "";
|
||||
export let panelClassName = "";
|
||||
export let buttonHoverStyle = "";
|
||||
|
||||
let isOpen = false;
|
||||
|
||||
@@ -21,7 +22,7 @@
|
||||
</script>
|
||||
|
||||
<div class="relative inline-block" on:focusout={handleFocusOut}>
|
||||
<Button borderRadius={borderRadius} onClick={toggle} border={border}>
|
||||
<Button onClick={toggle} class={buttonClass} {buttonHoverStyle}>
|
||||
{name}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -41,10 +42,11 @@
|
||||
</Button>
|
||||
|
||||
<div
|
||||
class="absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 overflow-hidden flex flex-col"
|
||||
style="border-radius: {borderRadius}"
|
||||
class="{panelClassName} absolute mt-2 rounded-md shadow-lg overflow-visible flex flex-col"
|
||||
style:visibility={isOpen ? "visible" : "hidden"}
|
||||
>
|
||||
<slot />
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,146 +0,0 @@
|
||||
<script>
|
||||
export let title = "";
|
||||
export let description = "";
|
||||
export let icon = null;
|
||||
export let href = "";
|
||||
export let variant = "default"; // 'default' | 'elevated' | 'bordered' | 'glass'
|
||||
export let iconColor = "var(--orange)";
|
||||
export let className = "";
|
||||
|
||||
const variantClasses = {
|
||||
default: "card-default",
|
||||
elevated: "card-elevated",
|
||||
bordered: "card-bordered",
|
||||
glass: "card-glass",
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a {href} class={`feature-card ${variantClasses[variant]} ${className}`}>
|
||||
{#if icon}
|
||||
<div class="feature-icon" style="color: {iconColor}">
|
||||
<svelte:component this={icon} size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if title}
|
||||
<h3 class="feature-title">{title}</h3>
|
||||
{/if}
|
||||
{#if description}
|
||||
<p class="feature-description">{description}</p>
|
||||
{/if}
|
||||
<div class="feature-content">
|
||||
<slot />
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div class={`feature-card ${variantClasses[variant]} ${className}`}>
|
||||
{#if icon}
|
||||
<div class="feature-icon" style="color: {iconColor}">
|
||||
<svelte:component this={icon} size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if title}
|
||||
<h3 class="feature-title">{title}</h3>
|
||||
{/if}
|
||||
{#if description}
|
||||
<p class="feature-description">{description}</p>
|
||||
{/if}
|
||||
<div class="feature-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.feature-card {
|
||||
position: relative;
|
||||
padding: var(--space-5);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
a.feature-card:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-default {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.card-default:hover {
|
||||
box-shadow: var(--shadow-2);
|
||||
border-color: var(--orange);
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--white);
|
||||
box-shadow: var(--shadow-2);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.card-elevated:hover {
|
||||
box-shadow: var(--shadow-3);
|
||||
border-color: var(--orange);
|
||||
}
|
||||
|
||||
.card-bordered {
|
||||
background: transparent;
|
||||
border: 2px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.card-bordered:hover {
|
||||
border-color: var(--orange);
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.card-glass {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.card-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
margin-bottom: var(--space-3);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: var(--fs-xl);
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--space-2);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
color: var(--gray-800);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.feature-content {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.feature-card {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: var(--fs-lg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,8 +4,6 @@ export { default as Stack } from './layout/Stack.svelte'
|
||||
export { default as Grid } from './layout/Grid.svelte'
|
||||
export { default as Center } from './layout/Center.svelte'
|
||||
export { default as Section } from './layout/Section.svelte'
|
||||
export { default as FullWidthBanner } from './layout/FullWidthBanner.svelte'
|
||||
|
||||
export { default as Button } from './Button.svelte'
|
||||
export { default as Dropdown } from './Dropdown.svelte'
|
||||
export { default as FeatureCard } from './FeatureCard.svelte'
|
||||
|
||||
@@ -1,12 +1,88 @@
|
||||
<!--
|
||||
A simple presentational container that renders a `div` with the `card` class.
|
||||
-->
|
||||
|
||||
<script>
|
||||
export let href = "";
|
||||
export let variant = "default"; // 'default' | 'animated' | 'animated-neutral' | 'glass'
|
||||
export let className = "";
|
||||
export let background = "var(--off-white)";
|
||||
|
||||
const variantClasses = {
|
||||
default: "card-default",
|
||||
animated: "card-animated",
|
||||
"animated-neutral": "card-animated-neutral",
|
||||
glass: "card-glass",
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class={`card ${className}`} style="background: {background}">
|
||||
<slot />
|
||||
</div>
|
||||
{#if href}
|
||||
<a {href} class={`card ${variantClasses[variant]} ${className}`}>
|
||||
<slot />
|
||||
</a>
|
||||
{:else}
|
||||
<div class={`card ${variantClasses[variant]} ${className}`}>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.card {
|
||||
position: relative;
|
||||
padding: var(--space-5);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
a.card:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-default {
|
||||
background: var(--white);
|
||||
border: 2px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.card-default:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.card-animated {
|
||||
background: transparent;
|
||||
border: 2px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.card-animated:hover {
|
||||
border-color: var(--orange);
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.card-animated-neutral {
|
||||
background: transparent;
|
||||
border: 2px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.card-animated-neutral:hover {
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.card-glass {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.card-glass:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,9 +7,10 @@ projected via the default slot.
|
||||
|
||||
<script>
|
||||
export let maxWidth = false; // true removes max-width
|
||||
export let center = true; // false prevents centering and removes horizontal padding
|
||||
export let className = "";
|
||||
</script>
|
||||
|
||||
<div class={`container ${maxWidth ? "container--fluid" : ""} ${className}`}>
|
||||
<div class="w-full {center ? 'px-4 md:px-6 lg:px-8' : ''} {maxWidth ? '' : 'max-w-[1200px]'} {center ? 'mx-auto' : ''} {className}">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
<!--
|
||||
Full-width colored section with configurable background and padding.
|
||||
Content is projected via the default slot.
|
||||
-->
|
||||
|
||||
<script>
|
||||
export let background = "var(--orange)";
|
||||
export let paddingX = "var(--site-padding)";
|
||||
export let paddingY = "var(--space-4)";
|
||||
export let className = "";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="w-screen relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] flex justify-center {className}"
|
||||
style="background: {background}; padding: {paddingY} {paddingX};"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -11,8 +11,8 @@ spacing. Content is projected into the default slot.
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={`grid ${className}`}
|
||||
style={`grid-template-columns: repeat(auto-fit, minmax(${min}, 1fr)); gap: ${gap};`}
|
||||
class="grid {className}"
|
||||
style="grid-template-columns: repeat(auto-fit, minmax({min}, 1fr)); gap: {gap};"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
|
||||
const paddingClasses = {
|
||||
none: "py-0",
|
||||
small: "py-section-sm",
|
||||
normal: "py-section",
|
||||
large: "py-section-lg",
|
||||
small: "py-8",
|
||||
normal: "py-12 max-md:py-8",
|
||||
large: "py-[clamp(3rem,8vw,6rem)] max-md:py-12",
|
||||
};
|
||||
|
||||
// Convert background to appropriate CSS value
|
||||
@@ -26,59 +26,10 @@
|
||||
|
||||
<section
|
||||
{id}
|
||||
class={`section ${paddingClasses[padding]} ${className}`}
|
||||
class="w-full relative {paddingClasses[padding]} {className}"
|
||||
style={backgroundStyle ? `background: ${backgroundStyle};` : ""}
|
||||
>
|
||||
<div class="section-inner" class:full-width={fullWidth}>
|
||||
<div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto px-(--site-padding)">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.section {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-inner {
|
||||
max-width: var(--content-max);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--site-padding);
|
||||
}
|
||||
|
||||
.section-inner.full-width {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.py-0 {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.py-section-sm {
|
||||
padding-top: var(--space-5);
|
||||
padding-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.py-section {
|
||||
padding-top: var(--space-6);
|
||||
padding-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.py-section-lg {
|
||||
padding-top: clamp(3rem, 8vw, 6rem);
|
||||
padding-bottom: clamp(3rem, 8vw, 6rem);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.py-section {
|
||||
padding-top: var(--space-5);
|
||||
padding-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.py-section-lg {
|
||||
padding-top: var(--space-6);
|
||||
padding-bottom: var(--space-6);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,6 +8,6 @@ A simple stack/column layout that stacks children vertically.
|
||||
export let className = "";
|
||||
</script>
|
||||
|
||||
<div class={`stack ${className}`} style={`gap: ${gap}; align-items: ${align};`}>
|
||||
<div class="flex flex-col {className}" style="gap: {gap}; align-items: {align};">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -8,24 +8,49 @@ import {
|
||||
|
||||
</script>
|
||||
|
||||
<Section padding="small">
|
||||
<h3 class="text-3xl" style="font-weight: 300; padding-left: var(--site-padding); padding-bottom: var(--space-4);">MTÜ Lapikud</h3>
|
||||
<Section background="off-black" className="text-white">
|
||||
<Grid>
|
||||
<Container maxWidth={true}>
|
||||
<address class="not-italic">
|
||||
Aadress: <a style="color: var(--orange)" href="https://maps.app.goo.gl/1pCDMVNaMD29G7y78">Akadeemia tee 5, 12616 Tallinn, Eesti</a>
|
||||
<br/>
|
||||
E-post: <a style="color: var(--orange)" href="mailto:lapikud@lapikud.ee">lapikud@lapikud.ee</a>
|
||||
<br/>
|
||||
Tel: <a style="color: var(--orange)" href="tel:+37258160799">+372 58 160 799</a>
|
||||
<br/>
|
||||
Messenger: <a style="color: var(--orange)" href="https://m.me/Lapikud" target="_blank" rel="noopener noreferrer">m.me/Lapikud</a>
|
||||
</address>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<div>
|
||||
<h3 class="text-3xl font-light" style="padding-bottom: var(--space-4);">MTÜ Lapikud</h3>
|
||||
<Container center={false}>
|
||||
<address class="not-italic" style="padding-bottom: var(--space-4);">
|
||||
Aadress: <a href="https://maps.app.goo.gl/1pCDMVNaMD29G7y78" style="color: var(--orange)">Akadeemia tee 5, 12616 Tallinn, Eesti</a>
|
||||
<br/>
|
||||
E-post: <a href="mailto:lapikud@lapikud.ee" style="color: var(--orange)">lapikud@lapikud.ee</a>
|
||||
<br/>
|
||||
Tel: <a href="tel:+37258160799" style="color: var(--orange)">+372 58 160 799</a>
|
||||
<br/>
|
||||
Messenger: <a href="https://m.me/Lapikud" target="_blank" rel="noopener noreferrer" style="color: var(--orange)">m.me/Lapikud</a>
|
||||
</address>
|
||||
<div>
|
||||
Reg. kood: <a href="https://ariregister.rik.ee/est/company/80167145/" style="color: var(--orange)">80167145</a>
|
||||
<br/>
|
||||
Swedbank EE812200221019551756
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<div>
|
||||
<Container>
|
||||
<h3 class="text-3xl font-light flex justify-center" style="padding-bottom: var(--space-4);">Sotsiaalmeedia</h3>
|
||||
<div class="flex items-center justify-center" style="gap: var(--space-4);">
|
||||
<a href="https://www.instagram.com/lapikud/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="transition-opacity duration-200">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.facebook.com/Lapikud" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="transition-opacity duration-200">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://github.com/lapikud" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="transition-opacity duration-200">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
<Container></Container>
|
||||
</div>
|
||||
</Grid>
|
||||
<Center><small style="color: var(--orange); padding-top: var(--space-6);">© 2026 MTÜ Lapikud</small></Center>
|
||||
</Section>
|
||||
@@ -18,47 +18,54 @@
|
||||
import Trophy from "lucide-svelte/icons/trophy";
|
||||
</script>
|
||||
|
||||
<Section padding="small">
|
||||
<Section className="text-white" background="off-black" padding="small">
|
||||
<Grid>
|
||||
<nav class="z-10 flex gap-4 justify-end text-xl">
|
||||
<Dropdown borderRadius="4px" name={$text.nav.about} variant="borderless">
|
||||
<Button borderRadius="4px" onClick={() => navigate("/mis-teeme")}
|
||||
<Dropdown
|
||||
name={$text.nav.about}
|
||||
buttonClass="rounded-[5px]"
|
||||
buttonHoverStyle="background-color:var(--orange); color:var(--black)"
|
||||
panelClassName="bg-[var(--off-black)]"
|
||||
>
|
||||
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/mis-teeme")}
|
||||
>{$text.nav.aboutPages.info}</Button
|
||||
>
|
||||
<Button borderRadius="4px" onClick={() => navigate("/liitu-meiega")}
|
||||
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/liitu-meiega")}
|
||||
><Bot />{$text.nav.aboutPages.join}</Button
|
||||
>
|
||||
<Button borderRadius="4px" onClick={() => navigate("/mentorid")}
|
||||
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/mentorid")}
|
||||
><HandHeart />{$text.nav.aboutPages.mentors}</Button
|
||||
>
|
||||
<Button borderRadius="4px" onClick={() => navigate("/juhatus")}
|
||||
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/juhatus")}
|
||||
><Lectern />{$text.nav.aboutPages.board}</Button
|
||||
>
|
||||
</Dropdown>
|
||||
<Dropdown borderRadius="4px" name={$text.nav.events} variant="borderless">
|
||||
<Button borderRadius="4px" onClick={() => navigate("/kalender")}
|
||||
<Dropdown
|
||||
name={$text.nav.events}
|
||||
buttonClass="rounded-[5px]"
|
||||
buttonHoverStyle="background-color:var(--orange); color:var(--black)"
|
||||
panelClassName="bg-[var(--off-black)]"
|
||||
>
|
||||
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/kalender")}
|
||||
><CalendarClock />{$text.nav.eventsPages.calendar}</Button
|
||||
>
|
||||
<Button borderRadius="4px"
|
||||
onClick={() => navigate("https://asikarikas.ee/", { external: true })}
|
||||
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("https://asikarikas.ee/", { external: true })}
|
||||
><Trophy />ASI Karikas</Button
|
||||
>
|
||||
<Button borderRadius="4px" onClick={() => navigate("/mentorid")}
|
||||
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/mentorid")}
|
||||
><Presentation />{$text.nav.eventsPages.workshops}</Button
|
||||
>
|
||||
<Button borderRadius="4px" onClick={() => navigate("/rebased")}
|
||||
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("/rebased")}
|
||||
><Swords />{$text.nav.eventsPages.fresh}</Button
|
||||
>
|
||||
<Button borderRadius="4px"
|
||||
onClick={() =>
|
||||
navigate("https://remondikohvik.lapikud.ee/", { external: true })}
|
||||
<Button class="rounded-[5px] bg-transparent" buttonHoverStyle="color:var(--orange)" onClick={() => navigate("https://remondikohvik.lapikud.ee/", { external: true })}
|
||||
><Coffee />{$text.nav.eventsPages.repair}</Button
|
||||
>
|
||||
</Dropdown>
|
||||
<Button borderRadius="4px" onClick={() => navigate("/kontakt")}
|
||||
<Button buttonHoverStyle="background-color:var(--orange); color:var(--black)" class="rounded-[5px]" onClick={() => navigate("/kontakt")}
|
||||
>{$text.nav.contact}
|
||||
</Button>
|
||||
<Button borderRadius="4px" onClick={() => navigate("/helpdesk")}
|
||||
<Button buttonHoverStyle="background-color:var(--orange); color:var(--black)" class="rounded-[5px]" onClick={() => navigate("/helpdesk")}
|
||||
>{$text.nav.helpdesk}
|
||||
</Button>
|
||||
</nav>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
<script>
|
||||
import {
|
||||
Button,
|
||||
Section,
|
||||
Grid,
|
||||
Card,
|
||||
Center,
|
||||
FeatureCard,
|
||||
Container,
|
||||
} from "$components";
|
||||
import { navigate } from "$lib";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
// Import Lucide icons
|
||||
@@ -40,55 +38,55 @@
|
||||
|
||||
<Section>
|
||||
<Grid gap="var(--space-5)">
|
||||
<FeatureCard
|
||||
variant="bordered"
|
||||
href="/liitu-meiega"
|
||||
icon={Users}
|
||||
iconColor="var(--orange)"
|
||||
title="Tudengile"
|
||||
description="Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest."
|
||||
>
|
||||
<Card variant="animated-neutral" href="/liitu-meiega">
|
||||
<div class="feature-icon" style="color: var(--orange)">
|
||||
<Users size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="feature-title">Tudengile</h3>
|
||||
<p class="feature-description">
|
||||
Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.
|
||||
</p>
|
||||
<div style="color: var(--orange)" class="mt-4 font-semibold flex items-center gap-2">
|
||||
Liitu meiega <ArrowRight size={16} />
|
||||
</div>
|
||||
</FeatureCard>
|
||||
</Card>
|
||||
|
||||
<FeatureCard
|
||||
variant="bordered"
|
||||
href="/helpdesk"
|
||||
icon={Wrench}
|
||||
iconColor="var(--orange)"
|
||||
title="Helpdesk"
|
||||
description="HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele."
|
||||
>
|
||||
<Card variant="animated-neutral" href="/helpdesk">
|
||||
<div class="feature-icon" style="color: var(--orange)">
|
||||
<Wrench size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="feature-title">Helpdesk</h3>
|
||||
<p class="feature-description">
|
||||
HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele.
|
||||
</p>
|
||||
<div style="color: var(--orange)" class="mt-4 font-semibold flex items-center gap-2">
|
||||
Vaata teenuseid <ArrowRight size={16} />
|
||||
</div>
|
||||
</FeatureCard>
|
||||
</Card>
|
||||
|
||||
<FeatureCard
|
||||
variant="bordered"
|
||||
href="/ourwork"
|
||||
icon={HeartHandshake}
|
||||
iconColor="var(--orange)"
|
||||
title="Ettevõttele"
|
||||
description="Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima."
|
||||
>
|
||||
<Card variant="animated-neutral" href="/ourwork">
|
||||
<div class="feature-icon" style="color: var(--orange)">
|
||||
<HeartHandshake size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="feature-title">Ettevõttele</h3>
|
||||
<p class="feature-description">
|
||||
Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.
|
||||
</p>
|
||||
<div style="color: var(--orange)" class="mt-4 font-semibold flex items-center gap-2">
|
||||
Tehtud tööd <ArrowRight size={16} />
|
||||
</div>
|
||||
</FeatureCard>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- What We Do Section -->
|
||||
<Section>
|
||||
<Grid gap="var(--space-4)">
|
||||
<Card>
|
||||
<Card variant="glass">
|
||||
<h2 class="pb-4 text-4xl font-bold">Mida me loome</h2>
|
||||
<p>Meie põhieesmärgiks on Tallinna Tehnikaülikooli IT tudengitele erialase lisandväärtuse loomine. Kaasame tudengeid praktilistesse lahendustesse, kus saab ideid reaalselt ellu viia ja oma oskusi päriselt kasutada. Meie projektidest kasvavad välja huvitavad ja tarvilikud lõputööd, millel on selge praktiline väärtus.</p>
|
||||
</Card>
|
||||
<Card>
|
||||
<Card variant="glass">
|
||||
<h2 class="pb-4 text-4xl font-bold">Keda ja kuidas kaasame</h2>
|
||||
<p>Pakume nutikatele ja motiveeritud tudengitele võimalust saada meie juures esimene töökogemus ning arendada end meeskonnas töötades. Lapikud ei ole ainult IT-tudengite organisatsioon, kaasame projektidesse ka majandusteaduskonna tudengeid, et tehniliste lahenduste kõrval oleks esindatud ka äriline vaade.</p>
|
||||
</Card>
|
||||
@@ -98,12 +96,12 @@
|
||||
<!-- Partners Section -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl">
|
||||
<h2 class="text-5xl">
|
||||
Koostööpartnerid
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Grid gap="var(--space-4)">
|
||||
<Center className="flex-wrap">
|
||||
{#each partners as partner}
|
||||
{#if partner.url}
|
||||
<a href={partner.url} target="_blank" rel="noopener noreferrer" class="partner-item" title={partner.name}>
|
||||
@@ -123,19 +121,36 @@
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</Grid>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.feature-icon {
|
||||
margin-bottom: var(--space-3);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: var(--fs-xl);
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--space-2);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.feature-description {
|
||||
color: var(--gray-800);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.partner-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
padding: var(--space-3);
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
a.partner-item:hover {
|
||||
@@ -143,9 +158,9 @@
|
||||
}
|
||||
|
||||
.partner-item img {
|
||||
max-width: 100%;
|
||||
max-height: 60px;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
max-height: 150px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user