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

fix: tighten CTA footer spacing and product detail scaling

Browse Source
This commit is contained in:
Salih Hasicic 2026-04-23 12:29:12 +02:00
parent 3f2c51eb1f
commit 9d3180287a
5 changed files with 112 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
parfum-shop/src/App.jsx
View File

@ -1,4 +1,4 @@
import { Routes, Route } from "react-router"; import { Routes, Route, useLocation } from "react-router";
import LandingPage from "./pages/LandingPage"; import LandingPage from "./pages/LandingPage";
import ProductDetailPage from "./components/ProductDetailPage"; import ProductDetailPage from "./components/ProductDetailPage";
import AboutPage from "./pages/AboutPage"; import AboutPage from "./pages/AboutPage";
@ -14,6 +14,10 @@ import ShopDrawer from "./components/ShopDrawer";
import CartToast from "./components/CartToast"; import CartToast from "./components/CartToast";
function App() { function App() {
const location = useLocation();
const shouldFlushFooter =
location.pathname === "/" || location.pathname.startsWith("/duft/");
return ( return (
<> <>
<ScrollToTop /> <ScrollToTop />
@ -31,7 +35,7 @@ function App() {
<ShopDrawer /> <ShopDrawer />
<CartToast /> <CartToast />
<Footer /> <Footer flushTop={shouldFlushFooter} />
<SupportChatbot /> <SupportChatbot />
</> </>
); );

6
parfum-shop/src/components/Footer.css
View File

@ -5,6 +5,10 @@
border-top: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.08);
} }
.site-footer--flush {
margin-top: 0;
}
.site-footer__inner { .site-footer__inner {
max-width: 1600px; max-width: 1600px;
margin: 0 auto; margin: 0 auto;
@ -77,4 +81,4 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 24px 16px 28px; padding: 24px 16px 28px;
} }
} }

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

@ -1,9 +1,9 @@
import { Link } from "react-router"; import { Link } from "react-router";
import "./Footer.css"; import "./Footer.css";
function Footer() { function Footer({ flushTop = false }) {
return ( return (
<footer className="site-footer"> <footer className={`site-footer${flushTop ? " site-footer--flush" : ""}`}>
<div className="site-footer__inner"> <div className="site-footer__inner">
<div className="site-footer__brand"> <div className="site-footer__brand">
<Link to="/" className="site-footer__logo"> <Link to="/" className="site-footer__logo">
@ -37,4 +37,4 @@ function Footer() {
); );
} }
export default Footer; export default Footer;

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

@ -3,7 +3,7 @@
.detail-page { .detail-page {
min-height: 100vh; min-height: 100vh;
color: #1f1f1f; color: #1f1f1f;
padding: 26px 38px 38px; padding: 26px 38px 0;
background: background:
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)), linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1)),
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)); linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
@ -13,7 +13,10 @@
background: #f5f5f5; background: #f5f5f5;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
border-radius: 0px; border-radius: 0px;
padding: 0 38px 38px; width: 100%;
max-width: 1680px;
margin: 0 auto;
padding: 0 38px 0;
} }
/* --- Product Detail Page Wrapper End --- */ /* --- Product Detail Page Wrapper End --- */
@ -40,13 +43,13 @@
} }
.detail-topbar-label { .detail-topbar-label {
font-size: 10px; font-size: 11px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #777; color: #777;
} }
.detail-topbar-name { .detail-topbar-name {
font-size: 12px; font-size: 13px;
letter-spacing: 0.16em; letter-spacing: 0.16em;
color: #1f1f1f; color: #1f1f1f;
} }
@ -62,7 +65,7 @@
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
color: #1f1f1f; color: #1f1f1f;
letter-spacing: 0.01em; letter-spacing: 0.01em;
@ -86,8 +89,8 @@
.detail-layout { .detail-layout {
display: grid; display: grid;
grid-template-columns: 1.02fr 1fr; grid-template-columns: minmax(420px, 760px) minmax(0, 1fr);
gap: 28px; gap: 34px;
align-items: start; align-items: start;
} }
@ -98,6 +101,9 @@
.detail-gallery { .detail-gallery {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
max-width: 760px;
justify-self: center;
} }
.detail-main-image { .detail-main-image {
@ -171,13 +177,13 @@
.detail-meta-grid span { .detail-meta-grid span {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 10px; font-size: 11px;
letter-spacing: 0.22em; letter-spacing: 0.22em;
color: #666; color: #666;
} }
.detail-meta-grid p { .detail-meta-grid p {
font-size: 14px; font-size: 15px;
line-height: 1.55; line-height: 1.55;
margin: 0; margin: 0;
} }
@ -204,7 +210,7 @@
} }
.detail-structure h3 { .detail-structure h3 {
font-size: 12px; font-size: 13px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
@ -245,7 +251,7 @@
.structure-phase { .structure-phase {
display: block; display: block;
margin-bottom: 0; margin-bottom: 0;
font-size: 10px; font-size: 11px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
color: #555; color: #555;
} }
@ -277,7 +283,7 @@
min-width: 0; min-width: 0;
min-height: 42px; min-height: 42px;
padding: 10px 12px; padding: 10px 12px;
font-size: 13px; font-size: 14px;
line-height: 1.25; line-height: 1.25;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
@ -319,14 +325,14 @@
} }
.structure-info-label { .structure-info-label {
font-size: 10px; font-size: 11px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
color: #666; color: #666;
} }
.structure-info-box p { .structure-info-box p {
margin: 0; margin: 0;
font-size: 14px; font-size: 15px;
line-height: 1.7; line-height: 1.7;
color: #3f3f3f; color: #3f3f3f;
} }
@ -343,7 +349,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
font-size: 12px; font-size: 13px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #666; color: #666;
} }
@ -380,7 +386,7 @@
.mood-label { .mood-label {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 10px; font-size: 11px;
letter-spacing: 0.2em; letter-spacing: 0.2em;
color: #555; color: #555;
} }
@ -474,6 +480,7 @@
flex-direction: column; flex-direction: column;
gap: 28px; gap: 28px;
padding-top: 4px; padding-top: 4px;
min-width: 0;
} }
.detail-heading { .detail-heading {
@ -492,7 +499,7 @@
.detail-kicker { .detail-kicker {
display: inline-block; display: inline-block;
font-size: 10px; font-size: 11px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
color: #777; color: #777;
} }
@ -507,7 +514,7 @@
} }
.detail-heading p { .detail-heading p {
max-width: 520px; max-width: 640px;
font-size: 18px; font-size: 18px;
line-height: 1.45; line-height: 1.45;
color: #5f5f5f; color: #5f5f5f;
@ -523,7 +530,7 @@
.label-title { .label-title {
display: block; display: block;
margin-bottom: 0; margin-bottom: 0;
font-size: 10px; font-size: 11px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
color: #666; color: #666;
} }
@ -552,7 +559,7 @@
.detail-copy-label { .detail-copy-label {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 10px; font-size: 11px;
letter-spacing: 0.24em; letter-spacing: 0.24em;
color: #666; color: #666;
} }
@ -561,7 +568,7 @@
white-space: pre-line; white-space: pre-line;
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
font-size: 15px; font-size: 16px;
color: #1f1f1f; color: #1f1f1f;
} }
@ -595,7 +602,7 @@
padding: 0 10px; padding: 0 10px;
border: 1px solid #ff6a00; border: 1px solid #ff6a00;
color: #ff6a00; color: #ff6a00;
font-size: 11px; font-size: 12px;
letter-spacing: 0.16em; letter-spacing: 0.16em;
} }
@ -618,14 +625,14 @@
} }
.delivery-item-label { .delivery-item-label {
font-size: 10px; font-size: 11px;
letter-spacing: 0.2em; letter-spacing: 0.2em;
color: #666; color: #666;
} }
.delivery-item p { .delivery-item p {
margin: 0; margin: 0;
font-size: 15px; font-size: 16px;
line-height: 1.45; line-height: 1.45;
color: #1f1f1f; color: #1f1f1f;
} }
@ -683,21 +690,21 @@
} }
.comment-card-title { .comment-card-title {
font-size: 11px; font-size: 12px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
color: #666; color: #666;
} }
.comment-card p { .comment-card p {
margin: 0; margin: 0;
font-size: 15px; font-size: 16px;
line-height: 1.55; line-height: 1.55;
color: #1f1f1f; color: #1f1f1f;
flex: 1; flex: 1;
} }
.comment-card-author { .comment-card-author {
font-size: 12px; font-size: 13px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #777; color: #777;
} }
@ -728,7 +735,7 @@
.review-section-text { .review-section-text {
margin: 0; margin: 0;
font-size: 15px; font-size: 16px;
line-height: 1.55; line-height: 1.55;
color: #5f5f5f; color: #5f5f5f;
} }
@ -756,13 +763,13 @@
} }
.review-stars { .review-stars {
font-size: 14px; font-size: 15px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
color: #ff6a00; color: #ff6a00;
} }
.review-count { .review-count {
font-size: 11px; font-size: 12px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #666; color: #666;
} }
@ -788,7 +795,7 @@
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
background: transparent; background: transparent;
padding: 12px 14px; padding: 12px 14px;
font-size: 12px; font-size: 13px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #1f1f1f; color: #1f1f1f;
cursor: pointer; cursor: pointer;
@ -854,7 +861,7 @@
} }
.review-detail-label { .review-detail-label {
font-size: 10px; font-size: 11px;
letter-spacing: 0.18em; letter-spacing: 0.18em;
color: #666; color: #666;
} }
@ -874,7 +881,7 @@
} }
.review-detail-value { .review-detail-value {
font-size: 12px; font-size: 13px;
color: #1f1f1f; color: #1f1f1f;
text-align: right; text-align: right;
} }
@ -910,7 +917,7 @@
border: 1px solid #d2d2d2; border: 1px solid #d2d2d2;
border-radius: 0px; border-radius: 0px;
background: transparent; background: transparent;
font-size: 13px; font-size: 14px;
user-select: none; user-select: none;
} }
@ -946,7 +953,7 @@
.size-title { .size-title {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 12px; font-size: 13px;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: #1f1f1f; color: #1f1f1f;
} }
@ -960,7 +967,7 @@
} }
.size-card small { .size-card small {
font-size: 11px; font-size: 12px;
color: #6a6a6a; color: #6a6a6a;
} }
@ -982,16 +989,16 @@
.discovery-note-text strong { .discovery-note-text strong {
display: block; display: block;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.discovery-note-text p { .discovery-note-text p {
font-size: 12px; font-size: 13px;
line-height: 1.45; line-height: 1.45;
color: #d0d0d0; color: #d0d0d0;
margin: 0; margin: 0;
max-width: 420px; max-width: 520px;
} }
.discovery-note-text .discount-preview { .discovery-note-text .discount-preview {
@ -1088,7 +1095,7 @@
.detail-bottom-cta p { .detail-bottom-cta p {
margin-top: 18px; margin-top: 18px;
font-size: 15px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
color: #fff; color: #fff;
} }
@ -1128,6 +1135,15 @@
.detail-structure-layout { .detail-structure-layout {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.detail-layout {
grid-template-columns: minmax(380px, 680px) minmax(0, 1fr);
gap: 28px;
}
.detail-gallery {
max-width: 680px;
}
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
@ -1135,6 +1151,10 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.detail-gallery {
width: min(100%, 720px);
}
.detail-info { .detail-info {
gap: 24px; gap: 24px;
} }
@ -1149,6 +1169,18 @@
} }
@media (max-width: 700px) { @media (max-width: 700px) {
.detail-page {
padding: 18px 14px 0;
}
.detail-shell {
padding: 0 16px 0;
}
.detail-layout {
gap: 24px;
}
.detail-columns, .detail-columns,
.detail-meta-grid, .detail-meta-grid,
.size-grid, .size-grid,
@ -1197,6 +1229,18 @@
font-size: 16px; font-size: 16px;
} }
.detail-bottom-cta {
padding: 32px 20px;
}
.detail-bottom-cta h2 {
font-size: 34px;
}
.detail-bottom-cta p {
font-size: 15px;
}
.discovery-note { .discovery-note {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -1238,9 +1282,21 @@
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.detail-page {
padding: 12px 10px 0;
}
.detail-shell {
padding: 0 12px 0;
}
.structure-tags-grid { .structure-tags-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.detail-bottom-cta {
padding: 28px 16px;
}
} }
/* --- Responsive End --- */ /* --- Responsive End --- */

4
parfum-shop/src/pages/LandingPage.css
View File

@ -385,7 +385,7 @@
gap: 28px; gap: 28px;
align-items: center; align-items: center;
background: #ff6a00; background: #ff6a00;
margin: 20px; margin: 20px 20px 0;
border-radius: 0; border-radius: 0;
padding: 40px 38px; padding: 40px 38px;
} }
@ -516,7 +516,7 @@
} }
.discovery-section { .discovery-section {
margin: 12px; margin: 12px 12px 0;
padding: 28px 20px; padding: 28px 20px;
} }
} }