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

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>