diff --git a/public/video/black mit white stripes.webm b/public/video/black mit white stripes.webm new file mode 100644 index 0000000..940e25b Binary files /dev/null and b/public/video/black mit white stripes.webm differ diff --git a/public/video/dark mit blue stripes.webm b/public/video/dark mit blue stripes.webm new file mode 100644 index 0000000..67a0722 Binary files /dev/null and b/public/video/dark mit blue stripes.webm differ diff --git a/public/video/türkis motherboard.webm b/public/video/türkis motherboard.webm new file mode 100644 index 0000000..df66095 Binary files /dev/null and b/public/video/türkis motherboard.webm differ diff --git a/public/video/white_mit_black_stripes.webm b/public/video/white_mit_black_stripes.webm new file mode 100644 index 0000000..8e5ab38 Binary files /dev/null and b/public/video/white_mit_black_stripes.webm differ diff --git a/src/app/app.ts b/src/app/app.ts index 4674f1e..a36c593 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,7 +1,9 @@ -import { Component, signal, inject } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { Component, signal, OnInit } from '@angular/core'; +import { RouterOutlet, Router, NavigationEnd } from '@angular/router'; import {provideIcons} from "@ng-icons/core"; +import { filter } from 'rxjs/operators'; import {cssMenu} from "@ng-icons/css.gg"; +import { UmamiService } from '@core/services/umami.service'; @Component({ selector: 'app-root', @@ -10,6 +12,19 @@ import {cssMenu} from "@ng-icons/css.gg"; styleUrl: './app.scss', viewProviders: [provideIcons({cssMenu})] }) -export class App { +export class App implements OnInit { protected readonly title = signal('hurler-webdesign-saas'); + + constructor( + private router: Router, + private umami: UmamiService + ) {} + + ngOnInit(): void { + this.router.events.pipe( + filter(event => event instanceof NavigationEnd) + ).subscribe(() => { + this.umami.trackPageview(); + }); + } } diff --git a/src/app/core/services/seo.service.ts b/src/app/core/services/seo.service.ts index 4844f24..3cf07f0 100644 --- a/src/app/core/services/seo.service.ts +++ b/src/app/core/services/seo.service.ts @@ -13,19 +13,27 @@ export class SeoService { private renderer = this.rendererFactory.createRenderer(null, null); + // Constants for metadata private readonly BRAND = "Hurler Webdesign"; private readonly FALLBACK_IMAGE = 'https://hurler-webdesign.de/assets/og-default.jpg'; private readonly DEFAULT_TYPE = "website"; + /** + * Updates SEO metadata with the provided data. + * + * @param data - The SeoData object containing title, description, type, and image. + * @param canonicalPath - Optional parameter for the canonical URL path. + */ updateMetadata(data: SeoData, canonicalPath?: string) { const fullTitle = `${data.title} | ${this.BRAND}`; const url = `https://hurler-webdesign.de${canonicalPath || ""}`; + // Update title and meta description this.titleService.setTitle(fullTitle); this.metaService.updateTag({ name: "description", content: data.description }); - // Open Graph + // Open Graph metadata this.metaService.updateTag({ property: "og:title", content: fullTitle, @@ -44,7 +52,7 @@ export class SeoService { }); this.metaService.updateTag({ property: "og:url", content: url }); - // Twitter + // Twitter card metadata this.metaService.updateTag({ name: "twitter:card", content: "summary_large_image", @@ -63,13 +71,20 @@ export class SeoService { content: data.image || this.FALLBACK_IMAGE, }); + // Update canonical URL if provided if (canonicalPath) { this.updateCanonicalUrl(url); } + // Set local business schema.org metadata this.setLocalBusinessSchema(); } + /** + * Updates the canonical URL for the given page. + * + * @param url - The new canonical URL. + */ private updateCanonicalUrl(url: string) { let link: HTMLLinkElement = this.document.querySelector("link[rel='canonical']") || @@ -81,7 +96,9 @@ export class SeoService { } } - + /** + * Sets the local business schema.org JSON-LD script in the head of the document. + */ private setLocalBusinessSchema() { const oldScript = this.document.getElementById('schema-org-data'); if (oldScript) this.renderer.removeChild(this.document.head, oldScript); diff --git a/src/app/core/services/umami.service.spec.ts b/src/app/core/services/umami.service.spec.ts new file mode 100644 index 0000000..d87eff0 --- /dev/null +++ b/src/app/core/services/umami.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { UmamiService } from './umami.service'; + +describe('UmamiService', () => { + let service: UmamiService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(UmamiService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/core/services/umami.service.ts b/src/app/core/services/umami.service.ts new file mode 100644 index 0000000..35fe5c2 --- /dev/null +++ b/src/app/core/services/umami.service.ts @@ -0,0 +1,42 @@ +import { Injectable } from '@angular/core'; + +export interface UmamiEventData { + [key: string]: string | number | boolean; +} + +// Typdefinition für das globale umami-Objekt +declare global { + interface Window { + umami?: { + track: (eventName?: string, data?: UmamiEventData) => void; + }; + } +} + +@Injectable({ + providedIn: 'root', +}) +export class UmamiService { + private get isAvailable(): boolean { + return typeof window !== 'undefined' && typeof window.umami !== 'undefined'; + } + + /** + * Trackt einen Pageview manuell – nötig bei SPAs wie Angular, + * da kein echter Seitenaufruf stattfindet. + */ + trackPageview(): void { + if (!this.isAvailable) return; + window.umami!.track(); + } + + /** + * Trackt ein benutzerdefiniertes Event. + * @param eventName Name des Events, z.B. 'button-click' + * @param data Optionale Zusatzdaten, z.B. { label: 'Hero CTA' } + */ + trackEvent(eventName: string, data?: UmamiEventData): void { + if (!this.isAvailable) return; + window.umami!.track(eventName, data); + } +} \ No newline at end of file diff --git a/src/app/features/landing/components/features-section/features-section.component.scss b/src/app/features/landing/components/features-section/features-section.component.scss index e69de29..9a60954 100644 --- a/src/app/features/landing/components/features-section/features-section.component.scss +++ b/src/app/features/landing/components/features-section/features-section.component.scss @@ -0,0 +1,3 @@ +p { + height: 100vh; +} \ No newline at end of file diff --git a/src/app/features/landing/components/footer/footer.component.html b/src/app/features/landing/components/footer/footer.component.html index 28c0d7d..11f87ee 100644 --- a/src/app/features/landing/components/footer/footer.component.html +++ b/src/app/features/landing/components/footer/footer.component.html @@ -1 +1,3 @@ -

footer works!

+ \ No newline at end of file diff --git a/src/app/features/landing/components/footer/footer.component.scss b/src/app/features/landing/components/footer/footer.component.scss index e69de29..42ec025 100644 --- a/src/app/features/landing/components/footer/footer.component.scss +++ b/src/app/features/landing/components/footer/footer.component.scss @@ -0,0 +1,3 @@ +footer { + height: 500px; +} \ No newline at end of file diff --git a/src/app/features/landing/components/hero/hero.component.html b/src/app/features/landing/components/hero/hero.component.html index e100fee..5b25b61 100644 --- a/src/app/features/landing/components/hero/hero.component.html +++ b/src/app/features/landing/components/hero/hero.component.html @@ -1,16 +1,23 @@
-

- Digitales Handwerk
- statt Standard-Baukasten -

-

- Wir programmieren Blitzschnelle, sichere und maßgeschneiderte Webseiten für kleine, - mittelständische Unternehmen und Vereine. Ohne CMS-Ballast, dafür mit maximaler Performance. -

-
- - +
+
-
+
+

+ Digitales Handwerk
+ statt Standard-Baukasten +

+

+ Wir programmieren Blitzschnelle, sichere und maßgeschneiderte Webseiten für kleine, + mittelständische Unternehmen und Vereine. Ohne CMS-Ballast, dafür mit maximaler Performance. +

+
+ + +
+ +
+ \ No newline at end of file diff --git a/src/app/features/landing/components/hero/hero.component.scss b/src/app/features/landing/components/hero/hero.component.scss index 9bac757..16f7ce5 100644 --- a/src/app/features/landing/components/hero/hero.component.scss +++ b/src/app/features/landing/components/hero/hero.component.scss @@ -1,4 +1,66 @@ +@use "abstracts"; + .hero-section { + position: relative; // WICHTIG: Bezugspunkt für das Video + height: 100vh; + margin-top: -60px; + padding-top: 60px; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; // Zentriert den Text-Inhalt + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; width: 100%; - max-width: 1200px; + height: 100%; + background-color: var(--overlay); + z-index: -1; + } + + &__wrapper { + @include abstracts.container-wrapper; + } + + &__video-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -2; // Hinter den Text legen + } + + h1 { + color: var(--text-main); // Dein Wunsch-Style + font-size: var(--font-size-xxl); + position: relative; // Stellt sicher, dass der Text über dem Video-Layer bleibt + margin-bottom: var(--space-4); + } + + &__claim { + color: var(--text-main); + font-size: var(--font-size-xl); + margin-bottom: var(--space-4); + } + + &__links { + display: flex; + flex-direction: row; + gap: var(--space-2); + justify-content: center; + } + + video { + /* Das hier ist der entscheidende Teil */ + width: 100%; + height: 100%; + object-fit: cover; // WICHTIG: Füllt den Container komplett aus, ohne zu verzerren + object-position: center; // Zentriert das Video, falls Ränder abgeschnitten werden + } } \ No newline at end of file diff --git a/src/app/features/landing/components/hero/hero.component.ts b/src/app/features/landing/components/hero/hero.component.ts index aa60839..aed2583 100644 --- a/src/app/features/landing/components/hero/hero.component.ts +++ b/src/app/features/landing/components/hero/hero.component.ts @@ -1,11 +1,17 @@ import { Component } from '@angular/core'; +import { ButtonComponent } from '@shared/ui/button/button.component'; +import { UmamiService } from '@core/services/umami.service'; @Component({ selector: 'app-hero', - imports: [], + imports: [ButtonComponent], templateUrl: './hero.component.html', styleUrl: './hero.component.scss', }) export class HeroComponent { + constructor(private umami: UmamiService) {} + onFeaturesClick(): void { + this.umami.trackEvent('features-anchor-click') + } } diff --git a/src/app/features/landing/components/navigation/navigation.component.html b/src/app/features/landing/components/navigation/navigation.component.html index a37c45c..decf71b 100644 --- a/src/app/features/landing/components/navigation/navigation.component.html +++ b/src/app/features/landing/components/navigation/navigation.component.html @@ -1,15 +1,18 @@ -
-
- -

Hurler Webdesign

-
-
-
- +
+
+
+ +

Hurler Webdesign

- -
- +
+
+ +
+ +
+ +
-
-
+
+ + \ No newline at end of file diff --git a/src/app/features/landing/components/navigation/navigation.component.scss b/src/app/features/landing/components/navigation/navigation.component.scss index 32859c3..2c70d12 100644 --- a/src/app/features/landing/components/navigation/navigation.component.scss +++ b/src/app/features/landing/components/navigation/navigation.component.scss @@ -1,5 +1,15 @@ @use "abstracts"; +.wrapper { + border-radius: 0 0 10px 10px; + background-color: var(--nav-bg); + backdrop-filter: var(--nav-backdrop); + box-shadow: var(--nav-shadow); + position: sticky; + top: 0; + z-index: var(--z-index-sticky); +} + .header { max-width: 1200px; margin: 0 auto; diff --git a/src/app/features/landing/pages/landingpage.component.html b/src/app/features/landing/pages/landingpage.component.html index fb9a4bd..94b8266 100644 --- a/src/app/features/landing/pages/landingpage.component.html +++ b/src/app/features/landing/pages/landingpage.component.html @@ -1,14 +1,4 @@ -
-
- -
-
- -
-
- -
-
- -
-
+ + + + \ No newline at end of file diff --git a/src/app/shared/ui/button/README_BUTTON.md b/src/app/shared/ui/button/README_BUTTON.md new file mode 100644 index 0000000..32a6dd4 --- /dev/null +++ b/src/app/shared/ui/button/README_BUTTON.md @@ -0,0 +1,118 @@ +# NavButtonComponent + +Eine Angular Standalone-Komponente die ein `NavigationItem` rendert und je nach `NavigationType` automatisch den passenden Link-Typ erzeugt. + +## Voraussetzungen + +- Angular 17+ +- `RouterModule` im Projekt eingebunden + +## Dateien + +``` +button/ +├── button.component.ts +├── button.component.html +└── button.component.scss +``` + +## Verwendung + +Die Komponente ist standalone und wird direkt in den `imports` einer anderen Komponente oder eines Moduls eingebunden: + +```typescript +import { NavButtonComponent } from './nav-button/nav-button.component'; + +@Component({ + standalone: true, + imports: [NavButtonComponent], + // ... +}) +export class AppComponent {} +``` + +## Inputs + +| Input | Typ | Pflicht | Default | Beschreibung | +|-----------|--------------------------------------|---------|-------------|-------------------------------------| +| `item` | `NavigationItem` | ✅ | — | Das NavigationItem-Objekt | +| `size` | `'sm' \| 'md' \| 'lg'` | ❌ | `'md'` | Größe des Buttons | +| `variant` | `'primary' \| 'ghost' \| 'outline'` | ❌ | `'primary'` | Visueller Stil | +| `disabled`| `boolean` | ❌ | `false` | Deaktiviert den Button | + +## NavigationItem + +```typescript +export type NavigationType = "anchor" | "route" | "external"; + +export interface NavigationItem { + readonly label: string; // Anzeigetext + readonly type: NavigationType; + readonly target: string; // Pfad, Anchor (#id) oder URL + readonly icon?: string; // Optionales Icon (z. B. Emoji oder Icon-String) + readonly children?: NavigationItem[]; +} +``` + +## Verhalten je NavigationType + +| Typ | Verhalten | +|------------|----------------------------------------------------------------| +| `route` | Rendert `` mit `routerLinkActive` | +| `anchor` | Rendert `` mit `scrollIntoView({ behavior: 'smooth'})` | +| `external` | Rendert `` mit `↗`| + +## Beispiele + +```html + + + + + + + + + + + +``` + +## Theming + +Alle Farben und Abstände sind über CSS Custom Properties steuerbar. Überschreibe die Tokens global in deinem `styles.scss`: + +```scss +:root { + --btn-primary-bg: #1a1a2e; + --btn-primary-color: #ffffff; + --btn-primary-hover-bg: #16213e; + + --btn-outline-border: #1a1a2e; + --btn-outline-color: #1a1a2e; + --btn-outline-hover-bg: #1a1a2e; + --btn-outline-hover-color: #ffffff; + + --btn-radius: 8px; + --btn-font: 'Your Font', sans-serif; +} +``` + +## Accessibility + +- Aktiver Routerlink erhält die Klasse `nav-btn--active` +- Deaktivierte Links erhalten `aria-disabled="true"` +- Externe Links sind mit `aria-label="Opens in new tab"` gekennzeichnet +- Focus-Styles über `:focus-visible` vorhanden \ No newline at end of file diff --git a/src/app/shared/ui/button/button.component.html b/src/app/shared/ui/button/button.component.html index 9cd155e..a7ad9d8 100644 --- a/src/app/shared/ui/button/button.component.html +++ b/src/app/shared/ui/button/button.component.html @@ -1 +1,46 @@ -

button works!

+ +@if (isRouteType) { + + @if (item.icon) { + + } + {{ item.label }} + +} + + +@if (isAnchorType) { + + @if (item.icon) { + + } + {{ item.label }} + +} + + +@if (isExternalType) { + + @if (item.icon) { + + } + {{ item.label }} + ↗ + +} \ No newline at end of file diff --git a/src/app/shared/ui/button/button.component.scss b/src/app/shared/ui/button/button.component.scss index e69de29..b97efe4 100644 --- a/src/app/shared/ui/button/button.component.scss +++ b/src/app/shared/ui/button/button.component.scss @@ -0,0 +1,139 @@ +// ─── Design Tokens ─────────────────────────────────────────────────────────── +:host { + --btn-font: 'DM Mono', 'Courier New', monospace; + --btn-radius: 4px; + --btn-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1); + + // Size tokens + --btn-sm-padding: 6px 14px; + --btn-md-padding: 10px 22px; + --btn-lg-padding: 14px 32px; + --btn-sm-font: 0.75rem; + --btn-md-font: 0.875rem; + --btn-lg-font: 1rem; + + // Color tokens — override at :root level to theme globally + --btn-primary-bg: #0f0f0f; + --btn-primary-color: #f5f5f5; + --btn-primary-border: #0f0f0f; + --btn-primary-hover-bg: #2a2a2a; + + --btn-ghost-bg: transparent; + --btn-ghost-color: #0f0f0f; + --btn-ghost-border: transparent; + --btn-ghost-hover-bg: rgba(0, 0, 0, 0.06); + + --btn-outline-bg: transparent; + --btn-outline-color: #0f0f0f; + --btn-outline-border: #0f0f0f; + --btn-outline-hover-bg: #0f0f0f; + --btn-outline-hover-color: #f5f5f5; + + display: inline-block; +} + +// ─── Base ───────────────────────────────────────────────────────────────────── +.nav-btn { + display: inline-flex; + align-items: center; + gap: 8px; + font-family: var(--btn-font); + font-weight: 500; + letter-spacing: 0.04em; + text-transform: uppercase; + text-decoration: none; + border: 1.5px solid; + border-radius: var(--btn-radius); + cursor: pointer; + white-space: nowrap; + outline-offset: 3px; + transition: + background-color var(--btn-transition), + color var(--btn-transition), + border-color var(--btn-transition), + box-shadow var(--btn-transition), + transform var(--btn-transition); + + &:focus-visible { + outline: 2px solid currentColor; + } + + &:active:not(.nav-btn--disabled) { + transform: translateY(1px); + } + + // ── Sizes ────────────────────────────────────────────────────────────────── + &--sm { + padding: var(--btn-sm-padding); + font-size: var(--btn-sm-font); + } + + &--md { + padding: var(--btn-md-padding); + font-size: var(--btn-md-font); + } + + &--lg { + padding: var(--btn-lg-padding); + font-size: var(--btn-lg-font); + } + + // ── Variants ─────────────────────────────────────────────────────────────── + &--primary { + background-color: var(--btn-primary-bg); + color: var(--btn-primary-color); + border-color: var(--btn-primary-border); + + &:hover:not(.nav-btn--disabled) { + background-color: var(--btn-primary-hover-bg); + } + } + + &--ghost { + background-color: var(--btn-ghost-bg); + color: var(--btn-ghost-color); + border-color: var(--btn-ghost-border); + + &:hover:not(.nav-btn--disabled) { + background-color: var(--btn-ghost-hover-bg); + } + } + + &--outline { + background-color: var(--btn-outline-bg); + color: var(--btn-outline-color); + border-color: var(--btn-outline-border); + + &:hover:not(.nav-btn--disabled) { + background-color: var(--btn-outline-hover-bg); + color: var(--btn-outline-hover-color); + } + } + + // ── States ───────────────────────────────────────────────────────────────── + &--active { + box-shadow: inset 0 0 0 1.5px currentColor; + } + + &--disabled { + opacity: 0.4; + cursor: not-allowed; + pointer-events: none; + } + + // ── Parts ────────────────────────────────────────────────────────────────── + &__icon { + font-size: 1.1em; + line-height: 1; + } + + &__label { + line-height: 1; + } + + &__external-icon { + font-size: 0.85em; + opacity: 0.65; + margin-left: -2px; + } +} \ No newline at end of file diff --git a/src/app/shared/ui/button/button.component.ts b/src/app/shared/ui/button/button.component.ts index 1dc1ae8..d9b4a09 100644 --- a/src/app/shared/ui/button/button.component.ts +++ b/src/app/shared/ui/button/button.component.ts @@ -1,11 +1,55 @@ -import { Component } from '@angular/core'; +import { + Component, + Input, + OnInit, + ChangeDetectionStrategy, +} from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { NavigationItem, isAnchor, isRoute } from '@core/models/navigation.model'; @Component({ selector: 'app-button', - imports: [], + standalone: true, + imports: [RouterModule], templateUrl: './button.component.html', - styleUrl: './button.component.scss', + styleUrls: ['./button.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ButtonComponent { +export class ButtonComponent implements OnInit { + @Input({ required: true }) item!: NavigationItem; -} + /** Optional size variant */ + @Input() size: 'sm' | 'md' | 'lg' = 'md'; + + /** Optional visual variant */ + @Input() variant: 'primary' | 'ghost' | 'outline' = 'primary'; + + /** Whether the button is disabled */ + @Input() disabled = false; + + isAnchorType = false; + isRouteType = false; + isExternalType = false; + + ngOnInit(): void { + this.isAnchorType = isAnchor(this.item); + this.isRouteType = isRoute(this.item); + this.isExternalType = this.item.type === 'external'; + } + + /** Scroll to anchor target */ + scrollToAnchor(event: Event): void { + event.preventDefault(); + const target = document.querySelector(this.item.target); + target?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + + get hostClasses(): string[] { + return [ + 'nav-btn', + `nav-btn--${this.variant}`, + `nav-btn--${this.size}`, + this.disabled ? 'nav-btn--disabled' : '', + ].filter(Boolean); + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index e3a46b8..5f752bc 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,7 @@ + diff --git a/src/styles.scss b/src/styles.scss index 67b7c38..44b8494 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,2 @@ @use "abstracts"; -@use "base"; -@use "layout"; \ No newline at end of file +@use "base"; \ No newline at end of file diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss index 651975a..f868c73 100644 --- a/src/styles/abstracts/_mixins.scss +++ b/src/styles/abstracts/_mixins.scss @@ -12,4 +12,10 @@ $breakpoints: ( @media (width >=map.get($breakpoints, $size)) { @content; } +} + +@mixin container-wrapper { + max-width: 1200px; + margin: auto; + padding-inline: 20px; } \ No newline at end of file diff --git a/src/styles/base/_tokens.scss b/src/styles/base/_tokens.scss index 644185a..55e5f4b 100644 --- a/src/styles/base/_tokens.scss +++ b/src/styles/base/_tokens.scss @@ -26,8 +26,7 @@ --button-text: oklch(100% 0.01 250); --border: oklch(90% 0.02 250); --shadow-color: oklch(0% 0 250); - - // Stapelbare Werte + --overlay: oklch(90% 0.02 250 / 0.9); // Stapelbare Werte --z-index-sticky: 100; // Skalierung (modulare Skala) @@ -41,6 +40,7 @@ --font-size-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem); --font-size-lg: clamp(1.25rem, 1vw + 1rem, 1.5rem); --font-size-xl: clamp(1.5rem, 2vw + 1rem, 2.5rem); + --font-size-xxl: clamp(2.5rem, 3vw + 1.5rem, 4.5rem) } [data-theme="dark"] { @@ -54,6 +54,8 @@ --border: oklch(25% 0.02 250); --shadow-color: 0 0% 100%; + --overlay: oklch(30% 0.0075 250 / 0.9); + } // ============================== diff --git a/src/styles/layout/_grid.scss b/src/styles/layout/_grid.scss index 807ad3f..9f1eb63 100644 --- a/src/styles/layout/_grid.scss +++ b/src/styles/layout/_grid.scss @@ -1,51 +1,51 @@ @use "abstracts"; -.landing-grid { - display: grid; - grid-template-columns: 1fr minmax(auto, 1200px) 1fr; - grid-template-areas: - "navigation navigation navigation" - "hero hero hero" - ". features-section ." - "footer footer footer"; +.layout-wrapper { + max-width: 1200px; + margin: auto; + padding-inline: 20px; } -.grid-area-navigation { - grid-area: navigation; - border-radius: 0 0 10px 10px; - background-color: var(--nav-bg); - backdrop-filter: var(--nav-backdrop); - box-shadow: var(--nav-shadow); - position: sticky; - top: 0; - z-index: var(--z-index-sticky); -} +// .landing-grid { +// display: grid; +// grid-template-columns: 1fr minmax(auto, 1200px) 1fr; +// grid-template-areas: +// "navigation navigation navigation" +// "hero hero hero" +// ". features-section ." +// "footer footer footer"; +// } -.grid-area-hero { - grid-area: hero; - margin-top: -60px; - padding-top: 60px; - height: 100vh; - display: flex; - justify-content: center; - background: - linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1)), - linear-gradient(0.25turn, oklch(56.347% 0.24089 260.834 / 0.8), oklch(55.088% 0.23462 260.772 / 0.8), oklch(56.347% 0.24089 260.834 / 0.8)), - url("/images/backgroundpattern.webp") center / cover no-repeat; -} +// .grid-area-navigation { +// grid-area: navigation; -[data-theme="dark"] .grid-area-hero { - background: - linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), - linear-gradient(0.25turn, oklch(20.648% 0.14311 250 / 0.5), oklch(27.99% 0.10701 258.719 / 0.5), oklch(20.648% 0.14311 250 / 0.5)), - url("/images/backgroundpattern.webp") center / cover no-repeat; -} +// } -.grid-area-features { - grid-area: features-section; - height: 80vh; -} +// .grid-area-hero { +// grid-area: hero; +// margin-top: -60px; +// padding-top: 60px; +// height: 100vh; +// display: flex; +// justify-content: center; +// background: +// linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1)), +// linear-gradient(0.25turn, oklch(56.347% 0.24089 260.834 / 0.8), oklch(55.088% 0.23462 260.772 / 0.8), oklch(56.347% 0.24089 260.834 / 0.8)), +// url("/images/backgroundpattern.webp") center / cover no-repeat; +// } -.grid-area-footer { - grid-area: footer; -} \ No newline at end of file +// [data-theme="dark"] .grid-area-hero { +// background: +// linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), +// linear-gradient(0.25turn, oklch(20.648% 0.14311 250 / 0.5), oklch(27.99% 0.10701 258.719 / 0.5), oklch(20.648% 0.14311 250 / 0.5)), +// url("/images/backgroundpattern.webp") center / cover no-repeat; +// } + +// .grid-area-features { +// grid-area: features-section; +// height: 80vh; +// } + +// .grid-area-footer { +// grid-area: footer; +// } \ No newline at end of file diff --git a/src/styles/layout/_header.scss b/src/styles/layout/_header.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/styles/layout/_index.scss b/src/styles/layout/_index.scss deleted file mode 100644 index 11ed64b..0000000 --- a/src/styles/layout/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@forward "grid"; -@forward "header"; \ No newline at end of file