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

test

Browse Source
This commit is contained in:
Tizian.Breuch
2025-09-05 13:06:42 +02:00
parent 2da416ca1f
commit 79d8df8d4f
10 changed files with 482 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

417
src/app/features/landingpage/landingpage.component.css
View File

@@ -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;
}
}

215
src/app/features/landingpage/landingpage.component.html
View File

@@ -1,83 +1,148 @@
<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>
<body>
<main class="page-wrapper">
<!-- ======================= HEADER ======================= -->
<header class="main-header">
<div class="container header-content">
<div class="header-logo">
<img
class="logo-image"
src="https://i.ibb.co/tQqTvrz/unipod.png"
alt="unipod logo"
/>
</div>
<div class="header-social">
<a href="https://twitter.com/sahilnetic" aria-label="Twitter">
<button class="social-button">
<svg
fill="white"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
/>
</svg>
</button>
</a>
</div>
</div>
</header>
<main class="product-list">
<!-- ======================= HERO SECTION ======================= -->
<section id="hero" class="hero-section">
<div class="hero-background-image">
<img
class="hero-image"
src="https://i.ibb.co/5BCcDYB/Remote2.png"
alt="Remote work illustration"
/>
</div>
<div class="container">
<div class="hero-content">
<h1 class="hero-headline">
Download Now
<span class="hero-sub-headline"> Lorem Ipsum </span>
</h1>
<a class="hero-button" href="https://twitter.com/sahilnetic">
<svg
fill="white"
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M1.571 23.664l10.531-10.501 3.712 3.701-12.519 6.941c-.476.264-1.059.26-1.532-.011l-.192-.13zm9.469-11.56l-10.04 10.011v-20.022l10.04 10.011zm6.274-4.137l4.905 2.719c.482.268.781.77.781 1.314s-.299 1.046-.781 1.314l-5.039 2.793-4.015-4.003 4.149-4.137zm-15.854-7.534c.09-.087.191-.163.303-.227.473-.271 1.056-.275 1.532-.011l12.653 7.015-3.846 3.835-10.642-10.612z"
/>
</svg>
<span>Download now</span>
</a>
</div>
</div>
</section>
<!-- ======================== -->
<!-- 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>
<!-- ======================= ABOUT SECTION ======================= -->
<section id="about" class="section mat-typography">
<div class="container">
<div class="section-heading">
<h2 class="section-title">About</h2>
<h3 class="section-subtitle">
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
Doloribus numquam quis.
</h3>
</div>
<!-- ======================== -->
<!-- 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 class="about-cards-container">
<div class="about-card">
<i class="material-icons about-icon">build</i>
<h4 class="about-card-title">This is the expansion title</h4>
<p>
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
Doloribus numquam quis.
</p>
</div>
<div class="about-card">
<i class="material-icons about-icon">alarm</i>
<h4 class="about-card-title">This is the expansion title</h4>
<p>
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
Doloribus numquam quis.
</p>
</div>
<div class="about-card">
<i class="material-icons about-icon">stars</i>
<h4 class="about-card-title">This is the expansion title</h4>
<p>
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
Doloribus numquam quis.
</p>
</div>
<div class="about-card">
<i class="material-icons about-icon">settings</i>
<h4 class="about-card-title">This is the expansion title</h4>
<p>
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
Doloribus numquam quis.
</p>
</div>
</div>
</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>
</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">
<!-- ======================= WORKSPACE SECTION ======================= -->
<section id="workspace" class="section">
<div class="container">
<div class="section-heading">
<h2 class="section-title">Lorem Ipsum Yojo</h2>
</div>
<div class="workspace-grid">
<div class="workspace-card">Workspace 1</div>
<div class="workspace-card">Workspace 2</div>
<div class="workspace-card">Workspace 3</div>
<div class="workspace-card">Workspace 4</div>
<div class="workspace-card">Workspace 5</div>
<div class="workspace-card">Workspace 6</div>
</div>
</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 -->
</section>
</main>
</div>
<!-- ======================= FOOTER ======================= -->
<footer class="main-footer">
<div class="container">
<hr />
<p>Crafted with ❤️ by <span>Sahil</span></p>
</div>
</footer>
</main>
<!-- Externes Skript -->
<script
data-name="BMC-Widget"
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
data-id="sahilnetic"
></script>
</body>

9
src/app/features/landingpage/landingpage.component.ts
View File

@@ -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!');
}
}

21
src/app/modules.ts Normal file
View File

@@ -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,
];

16
src/custom-theme.scss Normal file
View File

@@ -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,
));
}

2
src/index.html
View File

@@ -6,6 +6,8 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>

4
src/styles.css
View File

@@ -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; }