Skip to content

Commit cabeff1

Browse files
saifyxprosaifyxpro
committed
fix: enhance mobile responsiveness with improved spacing and touch targets
1 parent d847058 commit cabeff1

2 files changed

Lines changed: 44 additions & 23 deletions

File tree

‎website/app/globals.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,26 @@ body {
5151

5252
/* Mobile-first helpers */
5353
@media (max-width: 640px) {
54-
.feature-card { padding: 1rem; }
54+
.feature-card {
55+
padding: 1rem;
56+
margin-bottom: 1rem;
57+
}
58+
59+
/* Better text scaling on mobile */
60+
h1 { line-height: 1.1; }
61+
h2 { line-height: 1.2; }
62+
63+
/* Improve touch targets */
64+
button, a { min-height: 44px; }
65+
66+
/* Better mobile spacing */
67+
.max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
68+
}
69+
70+
@media (max-width: 480px) {
71+
/* Extra small screens */
72+
.text-4xl { font-size: 2rem; }
73+
.text-5xl { font-size: 2.5rem; }
5574
}
5675

5776
/* Soft pulse animation used in background blobs */

‎website/app/page.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -97,55 +97,57 @@ export default function HomePage() {
9797
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
9898
<div className="flex justify-between items-center py-4">
9999
<div className="flex items-center space-x-3">
100-
{/* Mobile square icon */}
101-
<div className="h-10 w-10 rounded-lg overflow-hidden bg-black/20 ring-1 ring-white/10 md:hidden">
102-
<Image src="/logo.svg" alt="HeadlessX Logo" width={40} height={40} priority />
100+
{/* Mobile: square icon + text */}
101+
<div className="flex items-center space-x-3 md:hidden">
102+
<div className="h-10 w-10 rounded-lg overflow-hidden bg-black/20 ring-1 ring-white/10">
103+
<Image src="/logo.svg" alt="HeadlessX Logo" width={40} height={40} priority />
104+
</div>
105+
<div>
106+
<h1 className="text-xl font-bold text-white">HeadlessX</h1>
107+
<p className="text-xs text-gray-300">v1.1.0</p>
108+
</div>
103109
</div>
104-
{/* Desktop horizontal logo */}
110+
{/* Desktop: horizontal logo only (contains wordmark) */}
105111
<div className="hidden md:block">
106-
<Image src="/logo-horizontal.svg" alt="HeadlessX Logo" width={200} height={40} priority />
107-
</div>
108-
<div>
109-
<h1 className="text-xl font-bold text-white">HeadlessX</h1>
110-
<p className="text-xs text-gray-300">v1.1.0</p>
112+
<Image src="/logo-horizontal.svg" alt="HeadlessX v1.1.0" width={200} height={40} priority />
111113
</div>
112114
</div>
113115
<div className="flex items-center space-x-4">
114-
<a href="#docs" className="text-gray-300 hover:text-white transition-colors">
116+
<a href="#docs" className="text-gray-300 hover:text-white transition-colors text-sm md:text-base">
115117
Documentation
116118
</a>
117-
<a href="#api" className="text-gray-300 hover:text-white transition-colors">
119+
<a href="#api" className="text-gray-300 hover:text-white transition-colors text-sm md:text-base">
118120
API
119121
</a>
120-
<a href="https://github.com/SaifyXPRO/HeadlessX" className="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2">
122+
<a href="https://github.com/SaifyXPRO/HeadlessX" className="bg-gray-800 hover:bg-gray-700 text-white px-3 py-2 md:px-4 md:py-2 rounded-lg transition-colors flex items-center gap-2 text-sm md:text-base">
121123
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
122124
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
123125
</svg>
124-
GitHub
126+
<span className="hidden sm:inline">GitHub</span>
125127
</a>
126128
</div>
127129
</div>
128130
</div>
129131
</header>
130132

131133
{/* Hero Section */}
132-
<section className="relative pt-20 pb-32">
134+
<section className="relative pt-16 md:pt-20 pb-24 md:pb-32">
133135
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
134136
<div className="animate-fade-in">
135-
<h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
137+
<h1 className="text-4xl sm:text-5xl md:text-7xl font-bold text-white mb-4 md:mb-6">
136138
Advanced
137139
<span className="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
138140
{" "}Browserless{" "}
139141
</span>
140142
Web Scraping
141143
</h1>
142-
<p className="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto">
144+
<p className="text-lg sm:text-xl md:text-2xl text-gray-300 mb-6 md:mb-8 max-w-4xl mx-auto">
143145
Open source browserless web scraping API with human-like behavior simulation, 40+ anti-detection techniques,
144146
and comprehensive automation features. Built for scale and reliability.
145147
</p>
146148

147149
{/* Quick Start Code */}
148-
<div className="bg-black/40 backdrop-blur-sm border border-white/10 rounded-lg p-6 max-w-3xl mx-auto mb-8">
150+
<div className="bg-black/40 backdrop-blur-sm border border-white/10 rounded-lg p-4 md:p-6 max-w-3xl mx-auto mb-6 md:mb-8">
149151
<div className="flex items-center justify-between mb-4">
150152
<span className="text-green-400 text-sm font-mono">$ Quick Start</span>
151153
<button
@@ -155,20 +157,20 @@ export default function HomePage() {
155157
{copied ? <CheckCircle className="h-4 w-4" /> : <Download className="h-4 w-4" />}
156158
</button>
157159
</div>
158-
<code className="text-blue-300 font-mono text-sm md:text-base break-all">
160+
<code className="text-blue-300 font-mono text-xs sm:text-sm md:text-base break-all">
159161
curl -X GET &quot;https://headless.saify.me/api/html?token=YOUR_TOKEN&url=https://example.com&quot;
160162
</code>
161163
</div>
162164

163165
<div className="flex flex-col sm:flex-row gap-4 justify-center">
164-
<a href="https://github.com/SaifyXPRO/HeadlessX" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold flex items-center justify-center gap-2 transition-all transform hover:scale-105">
165-
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
166+
<a href="https://github.com/SaifyXPRO/HeadlessX" className="bg-blue-600 hover:bg-blue-700 text-white px-6 md:px-8 py-3 md:py-4 rounded-lg font-semibold flex items-center justify-center gap-2 transition-all transform hover:scale-105 text-sm md:text-base">
167+
<svg className="h-4 md:h-5 w-4 md:w-5" fill="currentColor" viewBox="0 0 24 24">
166168
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
167169
</svg>
168170
View on GitHub
169171
</a>
170-
<a href="#api" className="border border-white/20 text-white px-8 py-4 rounded-lg font-semibold flex items-center justify-center gap-2 hover:bg-white/10 transition-colors">
171-
<Code className="h-5 w-5" />
172+
<a href="#api" className="border border-white/20 text-white px-6 md:px-8 py-3 md:py-4 rounded-lg font-semibold flex items-center justify-center gap-2 hover:bg-white/10 transition-colors text-sm md:text-base">
173+
<Code className="h-4 md:h-5 w-4 md:w-5" />
172174
View Documentation
173175
</a>
174176
</div>

0 commit comments

Comments
 (0)