admin/ShopSolution-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Tizian.Breuch
2025-08-13 23:06:27 +02:00
parent b33e800c10
commit 2da416ca1f
17 changed files with 365 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/app/features/landingpage/landingpage.component.css Normal file
View File

@@ -0,0 +1,195 @@
/*
* ============================================
* 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;
}
.showcase {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-main);
overflow-x: hidden; /* Verhindert horizontales Scrollen */
}
.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;
margin: 0;
}
.hero-content .brand-name {
font-size: 6rem;
font-weight: 700;
margin-top: 1rem;
}
/*
* ============================================
* PRODUKT-SEKTION (ALLGEMEIN)
* ============================================
*/
.product-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 {
text-align: center;
}
.product-info h2 {
font-size: 3rem;
font-weight: 700;
color: var(--headline-color);
margin: 0 0 1rem 0;
}
.product-info p {
font-size: 1rem;
line-height: 1.6;
max-width: 450px;
margin: 0 auto;
}
.product-variants {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Mobile */
gap: 20px;
}
.variant-item {
background-color: var(--surface-color);
padding: 10px;
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;
}
.product-info {
text-align: left;
}
.product-info p {
margin: 0;
}
.product-variants {
grid-template-columns: repeat(4, 1fr); /* 4 Spalten auf Desktop */
}
/* --- 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;
}
/* --- Layout B (z.B. Sirius) --- */
.layout-b .product-main-image {
grid-column: 8 / span 5; /* Spalten 8-12 */
grid-row: 1 / span 2;
}
.layout-b .product-info {
grid-column: 1 / span 6; /* Spalten 1-6 */
grid-row: 1 / 2;
text-align: right;
}
.layout-b .product-info p {
margin-left: auto;
}
.layout-b .product-variants {
grid-column: 1 / span 6; /* Spalten 1-6 */
grid-row: 2 / 3;
}
}

83
src/app/features/landingpage/landingpage.component.html Normal file
View File

@@ -0,0 +1,83 @@
<div class="showcase">
<!-- ======================== -->
<!-- HERO SEKTION -->
<!-- ======================== -->
<header class="hero-section">
<div class="hero-content">
<h1>Klicke, um mit einem<br>kostenlosen Konto alles<br>aus dieser Idee herauszuholen.</h1>
<p class="brand-name">SATO</p>
</div>
</header>
<main class="product-list">
<!-- ======================== -->
<!-- PRODUKT: Cervantes -->
<!-- ======================== -->
<section class="product-section layout-a">
<div class="connector"></div>
<div class="container product-grid">
<div class="product-main-image">
<img src="https://via.placeholder.com/600x600/1a1d24/e0e0e0?text=Cervantes+Main" alt="Sonnenbrille Cervantes">
</div>
<div class="product-info">
<h2>Cervantes</h2>
<p>Ein Statement für zeitlose Eleganz. Die markante Silhouette verbindet klassisches Design mit modernen Akzenten.</p>
</div>
<div class="product-variants">
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+1" alt="Cervantes Variante 1"></div>
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+2" alt="Cervantes Variante 2"></div>
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+3" alt="Cervantes Variante 3"></div>
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+4" alt="Cervantes Variante 4"></div>
</div>
</div>
</section>
<!-- ======================== -->
<!-- PRODUKT: Sirius -->
<!-- ======================== -->
<section class="product-section layout-b">
<div class="connector"></div>
<div class="container product-grid">
<div class="product-main-image">
<img src="https://via.placeholder.com/600x600/1a1d24/e0e0e0?text=Sirius+Main" alt="Sonnenbrille Sirius">
</div>
<div class="product-info">
<h2>Sirius</h2>
<p>Inspiriert von der Dynamik der Metropole. Sirius besticht durch seine leichte Bauweise und das futuristische Design.</p>
</div>
<div class="product-variants">
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+1" alt="Sirius Variante 1"></div>
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+2" alt="Sirius Variante 2"></div>
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+3" alt="Sirius Variante 3"></div>
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+4" alt="Sirius Variante 4"></div>
</div>
</div>
</section>
<!-- ======================== -->
<!-- PRODUKT: Almach -->
<!-- ======================== -->
<section class="product-section layout-a">
<div class="connector"></div>
<div class="container product-grid">
<div class="product-main-image">
<img src="https://via.placeholder.com/600x600/1a1d24/e0e0e0?text=Almach+Main" alt="Sonnenbrille Almach">
</div>
<div class="product-info">
<h2>Almach</h2>
<p>Mutig und unkonventionell. Almach ist für all jene, die sich trauen, aus der Masse herauszustechen.</p>
</div>
<div class="product-variants">
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+1" alt="Almach Variante 1"></div>
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+2" alt="Almach Variante 2"></div>
<div class="variant-item"><img src="https://via.placeholder.com/300x150/2a2d34/e0e0e0?text=Variation+3" alt="Almach Variante 3"></div>
</div>
</div>
</section>
<!-- Hier können weitere Produktsektionen nach dem gleichen Muster folgen -->
</main>
</div>

13
src/app/features/landingpage/landingpage.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-landingpage',
imports: [],
templateUrl: './landingpage.component.html',
styleUrl: './landingpage.component.css',
})
export class LandingpageComponent {
onSubmit() {
console.log('Formular abgeschickt!');
}
}