diff --git a/angular.json b/angular.json index 53bc5f4..76135dd 100644 --- a/angular.json +++ b/angular.json @@ -49,6 +49,7 @@ } ], "styles": [ + "src/custom-theme.scss", "src/styles.css" ], "scripts": [], diff --git a/package-lock.json b/package-lock.json index 025d876..e029776 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "version": "0.0.0", "dependencies": { "@angular/animations": "^19.1.0", + "@angular/cdk": "^19.2.19", "@angular/common": "^19.1.0", "@angular/compiler": "^19.1.0", "@angular/core": "^19.1.0", "@angular/forms": "^19.1.0", + "@angular/material": "^19.2.19", "@angular/platform-browser": "^19.1.0", "@angular/platform-browser-dynamic": "^19.1.0", "@angular/platform-server": "^19.1.0", @@ -457,6 +459,21 @@ } } }, + "node_modules/@angular/cdk": { + "version": "19.2.19", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.19.tgz", + "integrity": "sha512-PCpJagurPBqciqcq4Z8+3OtKLb7rSl4w/qBJoIMua8CgnrjvA1i+SWawhdtfI1zlY8FSwhzLwXV0CmWWfFzQPg==", + "license": "MIT", + "dependencies": { + "parse5": "^7.1.2", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "19.2.15", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.15.tgz", @@ -630,6 +647,23 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "19.2.19", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.2.19.tgz", + "integrity": "sha512-auIE6JUzTIA3LyYklh9J/T7u64crmphxUBgAa0zcOMDog6SYfwbNe9YeLQqua5ek4OUAOdK/BHHfVl5W5iaUoQ==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/cdk": "19.2.19", + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "@angular/forms": "^19.0.0 || ^20.0.0", + "@angular/platform-browser": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "19.2.14", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.14.tgz", @@ -11682,7 +11716,6 @@ "version": "7.3.0", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz", "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==", - "dev": true, "license": "MIT", "dependencies": { "entities": "^6.0.0" @@ -11723,7 +11756,6 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz", "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" diff --git a/package.json b/package.json index 5ae6149..55ec12a 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,12 @@ "private": true, "dependencies": { "@angular/animations": "^19.1.0", + "@angular/cdk": "^19.2.19", "@angular/common": "^19.1.0", "@angular/compiler": "^19.1.0", "@angular/core": "^19.1.0", "@angular/forms": "^19.1.0", + "@angular/material": "^19.2.19", "@angular/platform-browser": "^19.1.0", "@angular/platform-browser-dynamic": "^19.1.0", "@angular/platform-server": "^19.1.0", @@ -44,4 +46,4 @@ "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.7.2" } -} +} \ No newline at end of file diff --git a/src/app/features/landingpage/landingpage.component.css b/src/app/features/landingpage/landingpage.component.css index 7b4e45b..f5b3595 100644 --- a/src/app/features/landingpage/landingpage.component.css +++ b/src/app/features/landingpage/landingpage.component.css @@ -1,195 +1,290 @@ -/* - * ============================================ - * BASIS- & LAYOUT-STILE - * ============================================ - */ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); - -:host { - --bg-color: #1a1d24; /* Ein sehr dunkles Blau/Grau */ - --surface-color: #2a2d34; /* Etwas helleres Grau für die Varianten-Karten */ - --text-color: #e0e0e0; - --headline-color: #FFFFFF; - --connector-color: #555; - --font-main: 'Inter', sans-serif; - --container-width: 1100px; +/* ========================================================================== + GLOBALE STILE & GRUNDEINSTELLUNGEN + ========================================================================== */ +:root { + --primary-color: #3f51b5; + --accent-color: #ef4444; + --text-color: #333; + --light-gray-border: #e5e7eb; } -.showcase { - background-color: var(--bg-color); - color: var(--text-color); - font-family: var(--font-main); - overflow-x: hidden; /* Verhindert horizontales Scrollen */ +*, +*::before, +*::after { + box-sizing: border-box; } -.container { - max-width: var(--container-width); - margin: 0 auto; - padding: 0 20px; -} - -/* - * ============================================ - * HERO-SEKTION - * ============================================ - */ -.hero-section { - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - position: relative; - /* WICHTIG: Ersetze dies mit deinem Bild! */ - background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://via.placeholder.com/1920x1080/1a1d24/e0e0e0?text=SATO+HERO+IMAGE'); - background-size: cover; - background-position: center; - color: var(--headline-color); -} - -.hero-content h1 { - font-size: 2.5rem; - font-weight: 700; - line-height: 1.2; +body { margin: 0; + font-family: Roboto, "Helvetica Neue", sans-serif; + color: var(--text-color); + line-height: 1.6; } -.hero-content .brand-name { - font-size: 6rem; - font-weight: 700; - margin-top: 1rem; +/* ========================================================================== + WIEDERVERWENDBARE LAYOUT- & KOMPONENTEN-STILE + ========================================================================== */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 24px; } -/* - * ============================================ - * PRODUKT-SEKTION (ALLGEMEIN) - * ============================================ - */ -.product-section { +.section { padding: 80px 0; } -/* Der Verbindungslinien-Stil */ -.connector { - width: 1px; - height: 120px; - background-color: var(--connector-color); - margin: 0 auto 80px auto; - position: relative; -} -.connector::after { - content: ''; - display: block; - width: 7px; - height: 7px; - border: 1px solid var(--connector-color); - border-radius: 50%; - position: absolute; - bottom: -15px; - left: 50%; - transform: translateX(-50%); -} - -.product-grid { - display: grid; - gap: 30px; - /* Mobile-First: Einspaltiges Layout wird unten für Desktop überschrieben */ - grid-template-columns: 1fr; -} - -.product-main-image img, -.variant-item img { - width: 100%; - height: 100%; - display: block; - object-fit: cover; -} - -.product-info { +.section-heading { text-align: center; + margin-bottom: 60px; } -.product-info h2 { - font-size: 3rem; - font-weight: 700; - color: var(--headline-color); - margin: 0 0 1rem 0; +.section-title { + font-size: 36px; + margin-top: 0; + margin-bottom: 20px; } -.product-info p { - font-size: 1rem; - line-height: 1.6; - max-width: 450px; +.section-subtitle { + font-size: 22px; + max-width: 800px; margin: 0 auto; + font-weight: 300; } -.product-variants { - display: grid; - grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Mobile */ - gap: 20px; +/* ========================================================================== + HEADER + ========================================================================== */ +.main-header { + position: sticky; + top: 0; + z-index: 100; + width: 100%; + background-color: rgba(0, 0, 0, 0.9); + height: 80px; } -.variant-item { - background-color: var(--surface-color); - padding: 10px; +.header-content { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; +} + +.logo-image { + width: 128px; border-radius: 8px; } -/* - * ============================================ - * DESKTOP LAYOUT (ab 992px) - * ============================================ - */ -@media (min-width: 992px) { - .product-grid { - /* Ein 12-Spalten-Grid für maximale Flexibilität */ - grid-template-columns: repeat(12, 1fr); - grid-template-rows: auto auto; /* Zwei Zeilen für die Inhalte */ - align-items: center; - gap: 40px; - } +.social-button { + background: none; + border: none; + cursor: pointer; + padding: 0; + width: 28px; + height: 28px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.2s ease-in-out; +} +.social-button:hover { + transform: scale(1.1); +} - .product-info { - text-align: left; - } - - .product-info p { - margin: 0; - } - - .product-variants { - grid-template-columns: repeat(4, 1fr); /* 4 Spalten auf Desktop */ - } +/* ========================================================================== + HERO SECTION + ========================================================================== */ +.hero-section { + position: relative; + overflow: hidden; + color: black; + padding: 100px 0; +} - /* --- Layout A (z.B. Cervantes) --- */ - .layout-a .product-main-image { - grid-column: 1 / span 6; /* Spalten 1-6 */ - grid-row: 1 / span 2; /* Über beide Zeilen */ - } - .layout-a .product-info { - grid-column: 8 / span 5; /* Spalten 8-12 */ - grid-row: 1 / 2; - } - .layout-a .product-variants { - grid-column: 8 / span 5; /* Spalten 8-12 */ - grid-row: 2 / 3; - } +.hero-content { + position: relative; + z-index: 10; + max-width: 576px; + text-align: center; + margin: 200px auto 0 auto; +} - /* --- Layout B (z.B. Sirius) --- */ - .layout-b .product-main-image { - grid-column: 8 / span 5; /* Spalten 8-12 */ - grid-row: 1 / span 2; +.hero-headline { + font-size: 2.5rem; + font-weight: 700; + line-height: 1.2; +} + +.hero-sub-headline { + display: block; + font-weight: 400; +} + +.hero-button { + display: inline-flex; + align-items: center; + gap: 12px; + text-decoration: none; + color: white; + background-color: var(--accent-color); + padding: 14px 28px; + font-weight: 500; + border-radius: 8px; + transition: background-color 0.3s, opacity 0.3s; +} +.hero-button:hover { + opacity: 0.85; +} + +.hero-background-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; + display: flex; + align-items: flex-start; + justify-content: flex-start; + padding-top: 48px; +} +.hero-image { + width: 384px; + opacity: 0.8; +} + +/* ========================================================================== + ABOUT SECTION + ========================================================================== */ +.about-cards-container { + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: center; +} + +.about-card { + flex: 1 1 270px; + max-width: 300px; + text-align: center; + padding: 20px; +} + +.about-icon { + font-size: 64px; + color: var(--primary-color); + margin-bottom: 20px; +} + +.about-card-title { + font-size: 20px; + margin-top: 0; + margin-bottom: 10px; +} + +/* ========================================================================== + WORKSPACE SECTION + ========================================================================== */ +.workspace-grid { + display: grid; + grid-template-columns: 1fr; + gap: 30px; +} + +.workspace-card { + border: 2px solid var(--light-gray-border); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + border-radius: 8px; + padding: 80px 20px; + text-align: center; + font-size: 1.2rem; + font-weight: 500; +} + +/* ========================================================================== + FOOTER + ========================================================================== */ +.main-footer { + text-align: center; + padding: 20px 0; +} +.main-footer hr { + border: none; + border-top: 1px solid var(--light-gray-border); + margin-bottom: 20px; +} +.main-footer span { + font-weight: 900; +} + +/* ========================================================================== + MEDIA QUERIES (RESPONSIVE ANPASSUNGEN) + ========================================================================== */ + +/* Ab 600px (Tablets im Hochformat und größer) */ +@media (min-width: 600px) { + .workspace-grid { + grid-template-columns: repeat(2, 1fr); } - .layout-b .product-info { - grid-column: 1 / span 6; /* Spalten 1-6 */ - grid-row: 1 / 2; + .hero-content { + margin: 4px 0 0 auto; text-align: right; } - .layout-b .product-info p { - margin-left: auto; + .hero-headline { + font-size: 3.5rem; } - .layout-b .product-variants { - grid-column: 1 / span 6; /* Spalten 1-6 */ - grid-row: 2 / 3; +} + +/* Ab 960px (Tablets im Querformat und Desktops) */ +@media (min-width: 960px) { + .workspace-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +/* Bis 959px (Tablets und kleiner) */ +@media (max-width: 959px) { + .section { + padding: 60px 0; + } + .about-cards-container { + flex-direction: column; + align-items: center; + } + .about-card { + max-width: 450px; + width: 100%; + padding: 20px; + } + .about-icon { + font-size: 56px; + } +} + +/* Bis 599px (Mobiltelefone) */ +@media (max-width: 599px) { + .section { + padding: 40px 0; + } + .section-title, + .hero-headline { + font-size: 2rem; + } + .section-subtitle { + font-size: 1rem; + } + .hero-content { + margin-top: 250px; /* Mehr Platz für Hintergrundbild */ + text-align: center; + margin-left: auto; + margin-right: auto; + } + .hero-background-image { + justify-content: center; + } + .hero-image { + width: 280px; } } \ No newline at end of file diff --git a/src/app/features/landingpage/landingpage.component.html b/src/app/features/landingpage/landingpage.component.html index 9e3ebfb..4caa2fb 100644 --- a/src/app/features/landingpage/landingpage.component.html +++ b/src/app/features/landingpage/landingpage.component.html @@ -1,83 +1,148 @@ -
- - - -
-
-

Klicke, um mit einem
kostenlosen Konto alles
aus dieser Idee herauszuholen.

-

SATO

-
-
+ + +
+ +
+
+ +
+ + + +
+
+
-
+ +
+
+ Remote work illustration +
+
+
+

+ Download Now + Lorem Ipsum +

+ + + + + Download now + +
+
+
- - - -
-
-
-
- Sonnenbrille Cervantes -
-
-

Cervantes

-

Ein Statement für zeitlose Eleganz. Die markante Silhouette verbindet klassisches Design mit modernen Akzenten.

-
-
-
Cervantes Variante 1
-
Cervantes Variante 2
-
Cervantes Variante 3
-
Cervantes Variante 4
-
-
-
+ +
+
+
+

About

+

+ Lorem ipsum dolor sit amet conse ctetur adipi sicing elit. + Doloribus numquam quis. +

+
- - - -
-
-
-
- Sonnenbrille Sirius +
+
+ build +

This is the expansion title

+

+ Lorem ipsum dolor sit amet conse ctetur adipi sicing elit. + Doloribus numquam quis. +

+
+
+ alarm +

This is the expansion title

+

+ Lorem ipsum dolor sit amet conse ctetur adipi sicing elit. + Doloribus numquam quis. +

+
+
+ stars +

This is the expansion title

+

+ Lorem ipsum dolor sit amet conse ctetur adipi sicing elit. + Doloribus numquam quis. +

+
+
+ settings +

This is the expansion title

+

+ Lorem ipsum dolor sit amet conse ctetur adipi sicing elit. + Doloribus numquam quis. +

+
+
-
-

Sirius

-

Inspiriert von der Dynamik der Metropole. Sirius besticht durch seine leichte Bauweise und das futuristische Design.

-
-
-
Sirius Variante 1
-
Sirius Variante 2
-
Sirius Variante 3
-
Sirius Variante 4
-
-
-
+
- - - -
-
-
-
- Sonnenbrille Almach + +
+
+
+

Lorem Ipsum Yojo

+
+
+
Workspace 1
+
Workspace 2
+
Workspace 3
+
Workspace 4
+
Workspace 5
+
Workspace 6
+
-
-

Almach

-

Mutig und unkonventionell. Almach ist für all jene, die sich trauen, aus der Masse herauszustechen.

-
-
-
Almach Variante 1
-
Almach Variante 2
-
Almach Variante 3
-
-
-
- - + -
-
\ No newline at end of file + + + + + + + diff --git a/src/app/features/landingpage/landingpage.component.ts b/src/app/features/landingpage/landingpage.component.ts index da2b6dd..1bd9045 100644 --- a/src/app/features/landingpage/landingpage.component.ts +++ b/src/app/features/landingpage/landingpage.component.ts @@ -1,13 +1,14 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; + + @Component({ selector: 'app-landingpage', imports: [], templateUrl: './landingpage.component.html', styleUrl: './landingpage.component.css', + schemas: [], }) export class LandingpageComponent { - onSubmit() { - console.log('Formular abgeschickt!'); - } + } diff --git a/src/app/modules.ts b/src/app/modules.ts new file mode 100644 index 0000000..bf64cde --- /dev/null +++ b/src/app/modules.ts @@ -0,0 +1,21 @@ +// src/app/material.ts +import { CommonModule } from '@angular/common'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTableModule } from '@angular/material/table'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatToolbarModule } from '@angular/material/toolbar'; +// ... füge hier alle Material-Module hinzu, die du häufig verwendest + +export const MATERIAL_MODULES = [ + CommonModule, + + MatButtonModule, + MatCardModule, + MatIconModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, +]; \ No newline at end of file diff --git a/src/custom-theme.scss b/src/custom-theme.scss new file mode 100644 index 0000000..ecfc92d --- /dev/null +++ b/src/custom-theme.scss @@ -0,0 +1,16 @@ + +// Custom Theming for Angular Material +// For more information: https://material.angular.dev/guide/theming +@use '@angular/material' as mat; + +html { + @include mat.theme(( + color: ( + theme-type: light, + primary: mat.$azure-palette, + tertiary: mat.$blue-palette, + ), + typography: Roboto, + density: 0, + )); +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 3af61ec..d4f82fb 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,8 @@ + + diff --git a/src/styles.css b/src/styles.css index 90d4ee0..cc40dde 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,5 @@ /* You can add global styles to this file, and also import other style files */ +@import "tailwindcss"; + +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }