diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile horizontal overflow and hero responsiveness

Browse Source 
- Remove scrollbar-gutter: stable, add overflow-x: hidden on html
- Cap section-glow pseudo-element width to viewport on mobile
- Scale down hero logo, text, spacing, and button for small screens (iPhone SE)
This commit is contained in:
Diana Dolgolyova
2026-04-03 00:14:42 +03:00
parent bf9b1876b5
commit fa26092ea4
4 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"dev": "next dev -H 0.0.0.0",
"build": "next build",
"start": "next start",
"lint": "next lint",
src/app/globals.css
+1 -1
View File
@@ -19,7 +19,7 @@
html {
scroll-behavior: smooth;
scrollbar-gutter: stable;
overflow-x: hidden;
}
body {
src/app/styles/theme.css
+1 -1
View File
@@ -71,7 +71,7 @@
top: 0;
left: 50%;
transform: translateX(-50%);
width: 600px;
width: min(600px, 100%);
height: 400px;
background: radial-gradient(ellipse, rgba(201, 169, 110, 0.05), transparent 70%);
pointer-events: none;
src/components/sections/Hero.tsx
+7 -7
View File
@@ -164,28 +164,28 @@ export function Hero({ data: hero }: HeroProps) {
{/* Content */}
<div className="section-container relative z-10 text-center" style={{ textShadow: "0 1px 0 rgba(201,169,110,0.3), 0 2px 0 rgba(201,169,110,0.2), 0 4px 8px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.3)" }}>
<div className="hero-logo relative mx-auto mb-12 flex items-center justify-center" style={{ width: 220, height: 181 }}>
<div className="hero-logo relative mx-auto mb-6 sm:mb-12 flex items-center justify-center" style={{ width: 160, height: 132 }}>
<div className="absolute -inset-10 rounded-full blur-[80px]" style={{ background: "radial-gradient(circle, rgba(201,169,110,0.25), transparent 70%)" }} />
<div className="hero-logo-heartbeat relative">
<HeroLogo
size={220}
className="drop-shadow-[0_0_10px_rgba(201,169,110,0.35)] drop-shadow-[0_0_40px_rgba(201,169,110,0.15)]"
size={160}
className="drop-shadow-[0_0_10px_rgba(201,169,110,0.35)] drop-shadow-[0_0_40px_rgba(201,169,110,0.15)] sm:scale-[1.375]"
/>
</div>
</div>
<h1 className="hero-title font-display text-5xl font-bold tracking-tight sm:text-6xl lg:text-8xl">
<h1 className="hero-title font-display text-4xl font-bold tracking-tight sm:text-6xl lg:text-8xl">
<span className="gradient-text">{hero.headline}</span>
</h1>
<p className="hero-subtitle mx-auto mt-8 max-w-xl text-xl text-gold/80 sm:text-2xl">
<p className="hero-subtitle mx-auto mt-5 max-w-xl text-lg text-gold/80 sm:mt-8 sm:text-2xl">
{hero.subheadline}
</p>
<div className="hero-cta mt-14">
<div className="hero-cta mt-8 sm:mt-14">
<button
onClick={openBooking}
className="group relative rounded-full border border-gold/60 bg-gold/15 px-10 py-5 text-lg font-semibold text-gold backdrop-blur-md transition-all duration-300 hover:bg-gold/25 hover:border-gold hover:shadow-[0_0_40px_rgba(201,169,110,0.35)] cursor-pointer"
className="group relative rounded-full border border-gold/60 bg-gold/15 px-8 py-4 text-base font-semibold text-gold backdrop-blur-md transition-all duration-300 hover:bg-gold/25 hover:border-gold hover:shadow-[0_0_40px_rgba(201,169,110,0.35)] cursor-pointer sm:px-10 sm:py-5 sm:text-lg"
>
<span className="relative z-10">{hero.ctaText}</span>
{/* Pulse glow on hover */}