hasicicsalih/parfum_agsd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add rounded egdes (blocks, buttons)

Browse Source
This commit is contained in:
anielsen99 2026-03-27 18:36:59 +01:00
parent 955b982a5a
commit aba904f796
2 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
parfum-shop/src/components/ProductDetailPage.css
View File

@ -138,6 +138,7 @@
gap: 6px; gap: 6px;
} }
/* -> habe ich durch Material Tags ersetzt, siehe weiter unten
.structure-tags span { .structure-tags span {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -147,11 +148,13 @@
background: #ebebeb; background: #ebebeb;
font-size: 12px; font-size: 12px;
} }
*/
.mood-box { .mood-box {
margin-top: 18px; margin-top: 18px;
background: #dfdfdf; background: #dfdfdf;
padding: 16px; padding: 16px;
border-radius: 18px;
} }
.mood-label { .mood-label {
@ -247,8 +250,10 @@
min-height: 34px; min-height: 34px;
padding: 8px 14px; padding: 8px 14px;
border: 1px solid #d2d2d2; border: 1px solid #d2d2d2;
background: #ebebeb; border-radius: 999px;
background: transparent;
font-size: 12px; font-size: 12px;
user-select: none;
} }
/* --- Material Tags End --- */ /* --- Material Tags End --- */
@ -263,14 +268,15 @@
.size-card { .size-card {
border: 1px solid #d0d0d0; border: 1px solid #d0d0d0;
background: #fefefe; border-radius: 18px;
background: #fff;
padding: 18px; padding: 18px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.size-card.active { .size-card.active {
border-color: #111; border-color: #ff6a00;
} }
.size-title { .size-title {
@ -296,9 +302,10 @@
/* --- Discovery Hinweis + Kaufen Button Start --- */ /* --- Discovery Hinweis + Kaufen Button Start --- */
.discovery-note { .discovery-note {
background: #050505; background-color: #1f1f1f;
color: #fff; color: #fff;
padding: 14px 16px; padding: 14px 16px;
border-radius: 18px;
} }
.discovery-note strong { .discovery-note strong {
@ -309,14 +316,15 @@
.discovery-note p { .discovery-note p {
font-size: 11px; font-size: 11px;
color: rgba(255, 255, 255, 0.78); color: #d0d0d0;
margin: 0; margin: 0;
} }
.buy-button { .buy-button {
width: 100%; width: 100%;
border: none; border: none;
background: #050505; border-radius: 999px;
background: #ff6a00;
color: #fff; color: #fff;
padding: 18px; padding: 18px;
font-size: 16px; font-size: 16px;
@ -324,6 +332,16 @@
cursor: pointer; cursor: pointer;
} }
.buy-button:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.buy-button:active {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
background: rgba(255, 106, 0, 0.8);
}
/* --- Discovery Hinweis + Kaufen Button End --- */ /* --- Discovery Hinweis + Kaufen Button End --- */
/* --- Description Columns Start --- */ /* --- Description Columns Start --- */
@ -347,12 +365,13 @@
.detail-upsell-bar { .detail-upsell-bar {
margin-top: auto; margin-top: auto;
background: #060606; background-color: #1f1f1f;
color: #fff; color: #fff;
padding: 12px 16px; padding: 12px 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-radius: 999px;
} }
.detail-upsell-bar strong { .detail-upsell-bar strong {
@ -372,7 +391,7 @@
/* --- Bottom CTA Start --- */ /* --- Bottom CTA Start --- */
.detail-bottom-cta { .detail-bottom-cta {
margin: 20px; margin-top: 40px;
padding: 40px 38px; padding: 40px 38px;
background-color: #ff6a00; background-color: #ff6a00;
border-radius: 24px; border-radius: 24px;

6
parfum-shop/src/components/ProductDetailPage.jsx
View File

@ -83,7 +83,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
<div className="structure-block"> <div className="structure-block">
<span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span> <span className="structure-phase">PHASE 1: TOP NOTES (0–1 H)</span>
<div className="structure-tags"> <div className="material-tags">
{perfume.phases.top.map((note) => ( {perfume.phases.top.map((note) => (
<span key={note}>{note}</span> <span key={note}>{note}</span>
))} ))}
@ -92,7 +92,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
<div className="structure-block"> <div className="structure-block">
<span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span> <span className="structure-phase">PHASE 2: HEART NOTES (1–4 H)</span>
<div className="structure-tags"> <div className="material-tags">
{perfume.phases.heart.map((note) => ( {perfume.phases.heart.map((note) => (
<span key={note}>{note}</span> <span key={note}>{note}</span>
))} ))}
@ -101,7 +101,7 @@ function ProductDetailPage({ perfumeSlug = "kalter-beton" }) {
<div className="structure-block"> <div className="structure-block">
<span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span> <span className="structure-phase">PHASE 3: BASE NOTES (4 H+)</span>
<div className="structure-tags"> <div className="material-tags">
{perfume.phases.base.map((note) => ( {perfume.phases.base.map((note) => (
<span key={note}>{note}</span> <span key={note}>{note}</span>
))} ))}