test
This commit is contained in:
Tizian.Breuch
@@ -49,6 +49,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
|
"src/custom-theme.scss",
|
||||||
"src/styles.css"
|
"src/styles.css"
|
||||||
],
|
],
|
||||||
"scripts": [],
|
"scripts": [],
|
||||||
|
|||||||
36
package-lock.json
generated
36
package-lock.json
generated
@@ -9,10 +9,12 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "^19.1.0",
|
"@angular/animations": "^19.1.0",
|
||||||
|
"@angular/cdk": "^19.2.19",
|
||||||
"@angular/common": "^19.1.0",
|
"@angular/common": "^19.1.0",
|
||||||
"@angular/compiler": "^19.1.0",
|
"@angular/compiler": "^19.1.0",
|
||||||
"@angular/core": "^19.1.0",
|
"@angular/core": "^19.1.0",
|
||||||
"@angular/forms": "^19.1.0",
|
"@angular/forms": "^19.1.0",
|
||||||
|
"@angular/material": "^19.2.19",
|
||||||
"@angular/platform-browser": "^19.1.0",
|
"@angular/platform-browser": "^19.1.0",
|
||||||
"@angular/platform-browser-dynamic": "^19.1.0",
|
"@angular/platform-browser-dynamic": "^19.1.0",
|
||||||
"@angular/platform-server": "^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": {
|
"node_modules/@angular/cli": {
|
||||||
"version": "19.2.15",
|
"version": "19.2.15",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.15.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.15.tgz",
|
||||||
@@ -630,6 +647,23 @@
|
|||||||
"rxjs": "^6.5.3 || ^7.4.0"
|
"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": {
|
"node_modules/@angular/platform-browser": {
|
||||||
"version": "19.2.14",
|
"version": "19.2.14",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.14.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.14.tgz",
|
||||||
@@ -11682,7 +11716,6 @@
|
|||||||
"version": "7.3.0",
|
"version": "7.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
|
||||||
"integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
|
"integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"entities": "^6.0.0"
|
"entities": "^6.0.0"
|
||||||
@@ -11723,7 +11756,6 @@
|
|||||||
"version": "6.0.1",
|
"version": "6.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
|
||||||
"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
|
"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
|
||||||
"dev": true,
|
|
||||||
"license": "BSD-2-Clause",
|
"license": "BSD-2-Clause",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.12"
|
"node": ">=0.12"
|
||||||
|
|||||||
@@ -12,10 +12,12 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "^19.1.0",
|
"@angular/animations": "^19.1.0",
|
||||||
|
"@angular/cdk": "^19.2.19",
|
||||||
"@angular/common": "^19.1.0",
|
"@angular/common": "^19.1.0",
|
||||||
"@angular/compiler": "^19.1.0",
|
"@angular/compiler": "^19.1.0",
|
||||||
"@angular/core": "^19.1.0",
|
"@angular/core": "^19.1.0",
|
||||||
"@angular/forms": "^19.1.0",
|
"@angular/forms": "^19.1.0",
|
||||||
|
"@angular/material": "^19.2.19",
|
||||||
"@angular/platform-browser": "^19.1.0",
|
"@angular/platform-browser": "^19.1.0",
|
||||||
"@angular/platform-browser-dynamic": "^19.1.0",
|
"@angular/platform-browser-dynamic": "^19.1.0",
|
||||||
"@angular/platform-server": "^19.1.0",
|
"@angular/platform-server": "^19.1.0",
|
||||||
@@ -44,4 +46,4 @@
|
|||||||
"karma-jasmine-html-reporter": "~2.1.0",
|
"karma-jasmine-html-reporter": "~2.1.0",
|
||||||
"typescript": "~5.7.2"
|
"typescript": "~5.7.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,195 +1,290 @@
|
|||||||
/*
|
/* ==========================================================================
|
||||||
* ============================================
|
GLOBALE STILE & GRUNDEINSTELLUNGEN
|
||||||
* BASIS- & LAYOUT-STILE
|
========================================================================== */
|
||||||
* ============================================
|
:root {
|
||||||
*/
|
--primary-color: #3f51b5;
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
--accent-color: #ef4444;
|
||||||
|
--text-color: #333;
|
||||||
:host {
|
--light-gray-border: #e5e7eb;
|
||||||
--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);
|
*::before,
|
||||||
color: var(--text-color);
|
*::after {
|
||||||
font-family: var(--font-main);
|
box-sizing: border-box;
|
||||||
overflow-x: hidden; /* Verhindert horizontales Scrollen */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
body {
|
||||||
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;
|
margin: 0;
|
||||||
|
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||||
|
color: var(--text-color);
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-content .brand-name {
|
/* ==========================================================================
|
||||||
font-size: 6rem;
|
WIEDERVERWENDBARE LAYOUT- & KOMPONENTEN-STILE
|
||||||
font-weight: 700;
|
========================================================================== */
|
||||||
margin-top: 1rem;
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
.section {
|
||||||
* ============================================
|
|
||||||
* PRODUKT-SEKTION (ALLGEMEIN)
|
|
||||||
* ============================================
|
|
||||||
*/
|
|
||||||
.product-section {
|
|
||||||
padding: 80px 0;
|
padding: 80px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Der Verbindungslinien-Stil */
|
.section-heading {
|
||||||
.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;
|
text-align: center;
|
||||||
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-info h2 {
|
.section-title {
|
||||||
font-size: 3rem;
|
font-size: 36px;
|
||||||
font-weight: 700;
|
margin-top: 0;
|
||||||
color: var(--headline-color);
|
margin-bottom: 20px;
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-info p {
|
.section-subtitle {
|
||||||
font-size: 1rem;
|
font-size: 22px;
|
||||||
line-height: 1.6;
|
max-width: 800px;
|
||||||
max-width: 450px;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-variants {
|
/* ==========================================================================
|
||||||
display: grid;
|
HEADER
|
||||||
grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Mobile */
|
========================================================================== */
|
||||||
gap: 20px;
|
.main-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
|
height: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.variant-item {
|
.header-content {
|
||||||
background-color: var(--surface-color);
|
display: flex;
|
||||||
padding: 10px;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-image {
|
||||||
|
width: 128px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
.social-button {
|
||||||
* ============================================
|
background: none;
|
||||||
* DESKTOP LAYOUT (ab 992px)
|
border: none;
|
||||||
* ============================================
|
cursor: pointer;
|
||||||
*/
|
padding: 0;
|
||||||
@media (min-width: 992px) {
|
width: 28px;
|
||||||
.product-grid {
|
height: 28px;
|
||||||
/* Ein 12-Spalten-Grid für maximale Flexibilität */
|
border-radius: 50%;
|
||||||
grid-template-columns: repeat(12, 1fr);
|
display: flex;
|
||||||
grid-template-rows: auto auto; /* Zwei Zeilen für die Inhalte */
|
align-items: center;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
gap: 40px;
|
transition: transform 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
.social-button:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
.product-info {
|
/* ==========================================================================
|
||||||
text-align: left;
|
HERO SECTION
|
||||||
}
|
========================================================================== */
|
||||||
|
.hero-section {
|
||||||
.product-info p {
|
position: relative;
|
||||||
margin: 0;
|
overflow: hidden;
|
||||||
}
|
color: black;
|
||||||
|
padding: 100px 0;
|
||||||
.product-variants {
|
}
|
||||||
grid-template-columns: repeat(4, 1fr); /* 4 Spalten auf Desktop */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Layout A (z.B. Cervantes) --- */
|
.hero-content {
|
||||||
.layout-a .product-main-image {
|
position: relative;
|
||||||
grid-column: 1 / span 6; /* Spalten 1-6 */
|
z-index: 10;
|
||||||
grid-row: 1 / span 2; /* Über beide Zeilen */
|
max-width: 576px;
|
||||||
}
|
text-align: center;
|
||||||
.layout-a .product-info {
|
margin: 200px auto 0 auto;
|
||||||
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) --- */
|
.hero-headline {
|
||||||
.layout-b .product-main-image {
|
font-size: 2.5rem;
|
||||||
grid-column: 8 / span 5; /* Spalten 8-12 */
|
font-weight: 700;
|
||||||
grid-row: 1 / span 2;
|
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 {
|
.hero-content {
|
||||||
grid-column: 1 / span 6; /* Spalten 1-6 */
|
margin: 4px 0 0 auto;
|
||||||
grid-row: 1 / 2;
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.layout-b .product-info p {
|
.hero-headline {
|
||||||
margin-left: auto;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,83 +1,148 @@
|
|||||||
<div class="showcase">
|
|
||||||
|
|
||||||
<!-- ======================== -->
|
|
||||||
<!-- HERO SEKTION -->
|
<body>
|
||||||
<!-- ======================== -->
|
<main class="page-wrapper">
|
||||||
<header class="hero-section">
|
<!-- ======================= HEADER ======================= -->
|
||||||
<div class="hero-content">
|
<header class="main-header">
|
||||||
<h1>Klicke, um mit einem<br>kostenlosen Konto alles<br>aus dieser Idee herauszuholen.</h1>
|
<div class="container header-content">
|
||||||
<p class="brand-name">SATO</p>
|
<div class="header-logo">
|
||||||
</div>
|
<img
|
||||||
</header>
|
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>
|
||||||
|
|
||||||
<!-- ======================== -->
|
<!-- ======================= ABOUT SECTION ======================= -->
|
||||||
<!-- PRODUKT: Cervantes -->
|
<section id="about" class="section mat-typography">
|
||||||
<!-- ======================== -->
|
<div class="container">
|
||||||
<section class="product-section layout-a">
|
<div class="section-heading">
|
||||||
<div class="connector"></div>
|
<h2 class="section-title">About</h2>
|
||||||
<div class="container product-grid">
|
<h3 class="section-subtitle">
|
||||||
<div class="product-main-image">
|
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||||
<img src="https://via.placeholder.com/600x600/1a1d24/e0e0e0?text=Cervantes+Main" alt="Sonnenbrille Cervantes">
|
Doloribus numquam quis.
|
||||||
</div>
|
</h3>
|
||||||
<div class="product-info">
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- ======================== -->
|
<div class="about-cards-container">
|
||||||
<!-- PRODUKT: Sirius -->
|
<div class="about-card">
|
||||||
<!-- ======================== -->
|
<i class="material-icons about-icon">build</i>
|
||||||
<section class="product-section layout-b">
|
<h4 class="about-card-title">This is the expansion title</h4>
|
||||||
<div class="connector"></div>
|
<p>
|
||||||
<div class="container product-grid">
|
Lorem ipsum dolor sit amet conse ctetur adipi sicing elit.
|
||||||
<div class="product-main-image">
|
Doloribus numquam quis.
|
||||||
<img src="https://via.placeholder.com/600x600/1a1d24/e0e0e0?text=Sirius+Main" alt="Sonnenbrille Sirius">
|
</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>
|
||||||
<div class="product-info">
|
</section>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- ======================== -->
|
<!-- ======================= WORKSPACE SECTION ======================= -->
|
||||||
<!-- PRODUKT: Almach -->
|
<section id="workspace" class="section">
|
||||||
<!-- ======================== -->
|
<div class="container">
|
||||||
<section class="product-section layout-a">
|
<div class="section-heading">
|
||||||
<div class="connector"></div>
|
<h2 class="section-title">Lorem Ipsum Yojo</h2>
|
||||||
<div class="container product-grid">
|
</div>
|
||||||
<div class="product-main-image">
|
<div class="workspace-grid">
|
||||||
<img src="https://via.placeholder.com/600x600/1a1d24/e0e0e0?text=Almach+Main" alt="Sonnenbrille Almach">
|
<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>
|
||||||
<div class="product-info">
|
</section>
|
||||||
<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>
|
<!-- ======================= FOOTER ======================= -->
|
||||||
</div>
|
<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>
|
||||||
|
|||||||
@@ -1,13 +1,14 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-landingpage',
|
selector: 'app-landingpage',
|
||||||
imports: [],
|
imports: [],
|
||||||
templateUrl: './landingpage.component.html',
|
templateUrl: './landingpage.component.html',
|
||||||
styleUrl: './landingpage.component.css',
|
styleUrl: './landingpage.component.css',
|
||||||
|
schemas: [],
|
||||||
})
|
})
|
||||||
export class LandingpageComponent {
|
export class LandingpageComponent {
|
||||||
onSubmit() {
|
|
||||||
console.log('Formular abgeschickt!');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
21
src/app/modules.ts
Normal file
21
src/app/modules.ts
Normal 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
16
src/custom-theme.scss
Normal 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,
|
||||||
|
));
|
||||||
|
}
|
||||||
@@ -6,6 +6,8 @@
|
|||||||
<base href="/">
|
<base href="/">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root></app-root>
|
<app-root></app-root>
|
||||||
|
|||||||
@@ -1 +1,5 @@
|
|||||||
/* You can add global styles to this file, and also import other style files */
|
/* 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; }
|
||||||
|
|||||||
Reference in New Issue
Block a user