Skip to content

Commit 7891c88

Browse files
rsazrsaz
committed
style: improve layout and responsiveness across components
- Added global styles to prevent horizontal overflow and ensure maximum width. - Adjusted padding and margins in VideoModal and PlaygroundModal for better spacing. - Enhanced text sizes and layout in the Home component for improved readability on different screen sizes. - Updated Container and Header components to support responsive design with max-width adjustments. - Refined mobile navigation styles for better usability and consistency.
1 parent 6cf9b06 commit 7891c88

File tree

5 files changed

+74
-48
lines changed

5 files changed

+74
-48
lines changed

‎src/app/(home)/page.tsx‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,11 @@ const VideoModal = ({ isOpen, onClose, videoId }: VideoModalProps) => {
132132
<div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
133133

134134
{/* Modal Content */}
135-
<div className="animate-fadeInScale relative z-10 mx-4 w-full max-w-4xl">
135+
<div className="relative z-10 mx-4 w-full max-w-4xl animate-fadeInScale">
136136
<div className="glass-card-premium overflow-hidden rounded-2xl">
137137
{/* Header */}
138-
<div className="flex items-center justify-between border-b border-neutral-6/20 p-6">
139-
<h3 className="text-xl font-bold text-neutral-12">Welcome to ExpressoTS</h3>
138+
<div className="flex items-center justify-between border-b border-neutral-6/20 p-4 sm:p-6">
139+
<h3 className="text-lg font-bold text-neutral-12 sm:text-xl">Welcome to ExpressoTS</h3>
140140
<button
141141
onClick={onClose}
142142
className="flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-3/20 transition-all duration-300 hover:bg-red-500/20 hover:text-red-400"
@@ -146,7 +146,7 @@ const VideoModal = ({ isOpen, onClose, videoId }: VideoModalProps) => {
146146
</div>
147147

148148
{/* Video Container */}
149-
<div className="p-6">
149+
<div className="p-4 sm:p-6">
150150
<div className="relative aspect-video w-full overflow-hidden rounded-xl">
151151
<iframe
152152
width="100%"
@@ -194,7 +194,7 @@ const PlaygroundModal = ({ isOpen, onClose }: PlaygroundModalProps) => {
194194
openFile: 'src/main.ts',
195195
hideExplorer: false,
196196
theme: 'dark',
197-
height: 600,
197+
height: window.innerWidth < 640 ? 400 : 600,
198198
width: '100%',
199199
})
200200
setIsLoaded(true)
@@ -228,11 +228,11 @@ const PlaygroundModal = ({ isOpen, onClose }: PlaygroundModalProps) => {
228228
<div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
229229

230230
{/* Modal Content */}
231-
<div className="animate-fadeInScale relative z-10 mx-4 w-full max-w-6xl">
231+
<div className="relative z-10 mx-4 w-full max-w-6xl animate-fadeInScale">
232232
<div className="glass-card-premium overflow-hidden rounded-2xl">
233233
{/* Header */}
234-
<div className="flex items-center justify-between border-b border-neutral-6/20 p-6">
235-
<h3 className="text-xl font-bold text-neutral-12">Playground</h3>
234+
<div className="flex items-center justify-between border-b border-neutral-6/20 p-4 sm:p-6">
235+
<h3 className="text-lg font-bold text-neutral-12 sm:text-xl">Playground</h3>
236236
<button
237237
onClick={onClose}
238238
className="flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-3/20 transition-all duration-300 hover:bg-red-500/20 hover:text-red-400"
@@ -242,10 +242,10 @@ const PlaygroundModal = ({ isOpen, onClose }: PlaygroundModalProps) => {
242242
</div>
243243

244244
{/* StackBlitz Container */}
245-
<div className="p-6">
246-
<div className="relative min-h-[600px] w-full overflow-hidden rounded-xl bg-neutral-1">
245+
<div className="p-4 sm:p-6">
246+
<div className="relative min-h-[400px] w-full overflow-hidden rounded-xl bg-neutral-1 sm:min-h-[600px]">
247247
{!isLoaded && (
248-
<div className="flex h-[600px] items-center justify-center">
248+
<div className="flex h-[400px] items-center justify-center sm:h-[600px]">
249249
<div className="text-center">
250250
<div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-2 border-base-6/30 border-t-base-6"></div>
251251
<p className="text-neutral-7">Loading ExpressoTS Playground...</p>
@@ -274,15 +274,15 @@ export default function Home() {
274274
<Container className="relative z-10 w-full">
275275
<div className="flex flex-col items-center justify-center py-20 text-center">
276276
{/* Main Headline */}
277-
<div className="animate-fadeInScale mb-8">
278-
<h1 className="mb-6 text-5xl font-bold leading-tight lg:text-7xl">
277+
<div className="mb-8 animate-fadeInScale">
278+
<h1 className="mb-6 text-3xl font-bold leading-tight sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
279279
Build Modern APIs with <span className="text-gradient-premium">Confidence</span>
280280
</h1>
281281
</div>
282282

283283
{/* Tagline */}
284-
<div className="animate-slideInUp mb-12 max-w-3xl">
285-
<p className="text-xl leading-relaxed text-neutral-8 lg:text-2xl">
284+
<div className="mb-12 max-w-3xl animate-slideInUp">
285+
<p className="text-lg leading-relaxed text-neutral-8 sm:text-xl lg:text-2xl">
286286
A type-safe TypeScript framework for building fast, scalable APIs with minimal setup
287287
and developer-first design.
288288
</p>
@@ -292,15 +292,15 @@ export default function Home() {
292292
<div className="mb-16 flex flex-col items-center gap-4 lg:flex-row">
293293
<LinkButton
294294
href="https://doc.expresso-ts.com/"
295-
className="btn-primary-premium min-w-[220px] rounded-lg px-8 py-4 text-lg font-semibold [&>span]:flex [&>span]:flex-nowrap [&>span]:items-center [&>span]:gap-2"
295+
className="btn-primary-premium flex-shrink-0 rounded-lg px-6 py-4 text-lg font-semibold sm:px-8 [&>span]:flex [&>span]:flex-nowrap [&>span]:items-center [&>span]:gap-2"
296296
>
297297
<IconRocket className="h-5 w-5 flex-shrink-0" />
298298
<span>Quick Start</span>
299299
<IconArrowRight className="h-5 w-5 flex-shrink-0" />
300300
</LinkButton>
301301
<button
302302
onClick={() => setIsVideoModalOpen(true)}
303-
className="btn-secondary-premium group relative flex inline-flex min-w-[220px] items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-lg border border-base-6/30 bg-base-7/10 px-8 py-4 text-lg font-semibold transition-all duration-300 hover:scale-105 hover:border-base-6/50 hover:bg-base-6/20 active:scale-95"
303+
className="btn-secondary-premium group relative flex flex-shrink-0 items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-lg border border-base-6/30 bg-base-7/10 px-6 py-4 text-lg font-semibold transition-all duration-300 hover:scale-105 hover:border-base-6/50 hover:bg-base-6/20 active:scale-95 sm:px-8"
304304
>
305305
<div className="absolute inset-0 bg-gradient-to-r from-base-6/20 to-base-5/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
306306
<span className="relative z-10 flex transform items-center gap-2 transition-all duration-300 group-hover:tracking-wider">
@@ -311,24 +311,24 @@ export default function Home() {
311311
</div>
312312

313313
{/* Statistics */}
314-
<div className="flex flex-col items-center gap-12 lg:flex-row lg:gap-20">
314+
<div className="flex flex-col items-center gap-8 sm:gap-12 lg:flex-row lg:gap-20">
315315
<div className="text-center">
316-
<div className="text-4xl font-bold text-neutral-12 lg:text-5xl">
316+
<div className="text-3xl font-bold text-neutral-12 sm:text-4xl lg:text-5xl">
317317
<AnimatedCounter target={130000} suffix="+" />
318318
</div>
319-
<div className="mt-2 text-lg text-neutral-7">Weekly Downloads</div>
319+
<div className="mt-2 text-base text-neutral-7 sm:text-lg">Weekly Downloads</div>
320320
</div>
321321
<div className="text-center">
322-
<div className="text-4xl font-bold text-neutral-12 lg:text-5xl">
322+
<div className="text-3xl font-bold text-neutral-12 sm:text-4xl lg:text-5xl">
323323
<AnimatedCounter target={1800} suffix="+" />
324324
</div>
325-
<div className="mt-2 text-lg text-neutral-7">GitHub Stars</div>
325+
<div className="mt-2 text-base text-neutral-7 sm:text-lg">GitHub Stars</div>
326326
</div>
327327
<div className="text-center">
328-
<div className="text-4xl font-bold text-neutral-12 lg:text-5xl">
328+
<div className="text-3xl font-bold text-neutral-12 sm:text-4xl lg:text-5xl">
329329
<AnimatedCounter target={56} suffix="+" />
330330
</div>
331-
<div className="mt-2 text-lg text-neutral-7">Contributors</div>
331+
<div className="mt-2 text-base text-neutral-7 sm:text-lg">Contributors</div>
332332
</div>
333333
</div>
334334
</div>
@@ -347,16 +347,16 @@ export default function Home() {
347347
Try It Now
348348
</span>
349349
</div>
350-
<h2 className="mb-4 text-4xl font-bold text-neutral-12 lg:text-5xl">
350+
<h2 className="mb-4 text-3xl font-bold text-neutral-12 sm:text-4xl lg:text-5xl">
351351
Interactive <span className="text-gradient-premium">Playground</span>
352352
</h2>
353-
<p className="mx-auto mb-8 max-w-2xl text-xl text-neutral-7">
353+
<p className="mx-auto mb-8 max-w-2xl text-lg text-neutral-7 sm:text-xl">
354354
Experience ExpressoTS directly in your browser. No installation required.
355355
</p>
356356

357357
<button
358358
onClick={() => setIsPlaygroundModalOpen(true)}
359-
className="btn-primary-premium group relative mx-auto flex inline-flex min-w-[220px] items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-lg border border-base-6/30 bg-base-7/10 px-8 py-4 text-lg font-semibold transition-all duration-300 hover:scale-105 hover:border-base-6/50 hover:bg-base-6/20 active:scale-95"
359+
className="btn-primary-premium group relative mx-auto flex w-full max-w-[280px] items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-lg border border-base-6/30 bg-base-7/10 px-6 py-4 text-lg font-semibold transition-all duration-300 hover:scale-105 hover:border-base-6/50 hover:bg-base-6/20 active:scale-95 sm:px-8"
360360
>
361361
<div className="absolute inset-0 bg-gradient-to-r from-base-6/20 to-base-5/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
362362
<span className="relative z-10 flex transform items-center gap-2 transition-all duration-300 group-hover:tracking-wider">
@@ -374,15 +374,15 @@ export default function Home() {
374374

375375
<Container className="relative z-10">
376376
<div className="mb-16 text-center">
377-
<h2 className="mb-4 text-4xl font-bold text-neutral-12 lg:text-5xl">
377+
<h2 className="mb-4 text-3xl font-bold text-neutral-12 sm:text-4xl lg:text-5xl">
378378
Complete <span className="text-gradient-premium">Ecosystem</span>
379379
</h2>
380-
<p className="mx-auto max-w-2xl text-xl text-neutral-7">
380+
<p className="mx-auto max-w-2xl text-lg text-neutral-7 sm:text-xl">
381381
Everything you need to build, test, and deploy production-ready applications.
382382
</p>
383383
</div>
384384

385-
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
385+
<div className="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-4">
386386
<InfoCard
387387
header={
388388
<>
@@ -513,19 +513,19 @@ export default function Home() {
513513

514514
<Container className="relative z-10">
515515
<div className="mb-16 text-center">
516-
<h2 className="mb-4 text-4xl font-bold text-neutral-12 lg:text-5xl">
516+
<h2 className="mb-4 text-3xl font-bold text-neutral-12 sm:text-4xl lg:text-5xl">
517517
Start Building <span className="text-gradient-premium">Today</span>
518518
</h2>
519-
<p className="text-xl text-neutral-7">
519+
<p className="text-lg text-neutral-7 sm:text-xl">
520520
Get up and running with ExpressoTS in under 5 minutes.
521521
</p>
522522
</div>
523523

524524
<div className="mx-auto max-w-2xl">
525525
{/* Installation Command */}
526-
<div className="glass-card-premium mb-8 rounded-xl p-6">
527-
<div className="flex items-center justify-between">
528-
<code className="font-mono text-lg text-neutral-8">
526+
<div className="glass-card-premium mb-8 rounded-xl p-4 sm:p-6">
527+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
528+
<code className="break-all font-mono text-sm text-neutral-8 sm:break-normal sm:text-lg">
529529
npx @expressots/cli new my-app
530530
</code>
531531
<CopyButton command="npx @expressots/cli new my-app" />
@@ -536,13 +536,13 @@ export default function Home() {
536536
<div className="flex flex-col items-center gap-4 lg:flex-row lg:justify-center">
537537
<LinkButton
538538
href="https://doc.expresso-ts.com/"
539-
className="btn-primary-premium rounded-lg px-8 py-4 text-lg font-semibold"
539+
className="btn-primary-premium w-full max-w-[200px] rounded-lg px-6 py-4 text-lg font-semibold sm:px-8"
540540
>
541541
Get Started
542542
</LinkButton>
543543
<LinkButton
544544
href="https://github.com/expressots/expressots"
545-
className="btn-secondary-premium rounded-lg px-8 py-4 text-lg font-semibold"
545+
className="btn-secondary-premium w-full max-w-[200px] rounded-lg px-6 py-4 text-lg font-semibold sm:px-8"
546546
>
547547
View on GitHub
548548
</LinkButton>

‎src/components/Container/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import { clsxm } from '@/utils/clsxm'
55
const Container = forwardRef<HTMLDivElement, TContainerProps>(
66
({ children, className, ...rest }, ref) => {
77
return (
8-
<div className={clsxm('container mx-auto px-4', className)} ref={ref} {...rest}>
8+
<div
9+
className={clsxm('container mx-auto max-w-full px-4 sm:px-6 lg:px-8', className)}
10+
ref={ref}
11+
{...rest}
12+
>
913
{children}
1014
</div>
1115
)

‎src/components/Header/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Header = () => {
1818
Number(height) > 30 && 'nav-glass-premium border-b-neutral-2/50',
1919
)}
2020
>
21-
<div className="container mx-auto flex items-center justify-between px-6">
21+
<div className="container mx-auto flex max-w-full items-center justify-between px-4 sm:px-6 lg:px-8">
2222
<Link
2323
aria-label="Home"
2424
href="/"
@@ -41,25 +41,25 @@ export const Header = () => {
4141
</div>
4242
</Link>
4343

44-
<div className="flex items-center gap-6 max-lg:hidden">
45-
<ul className="flex items-center justify-end gap-6">
44+
<div className="flex items-center gap-4 max-lg:hidden lg:gap-6">
45+
<ul className="flex items-center justify-end gap-4 lg:gap-6">
4646
<MenuLi href="/#playground">Playground</MenuLi>
4747
<MenuLi href="/#ecosystem">Ecosystem</MenuLi>
4848
<MenuLi href="/team">Team</MenuLi>
4949
</ul>
50-
<div className="flex items-center gap-3">
50+
<div className="flex items-center gap-2 lg:gap-3">
5151
<Link
5252
href="https://github.com/expressots/expressots"
53-
className="flex items-center gap-2 rounded-lg px-4 py-2 text-neutral-8 transition-all duration-300 hover:bg-white/5 hover:text-base-6"
53+
className="flex items-center gap-2 rounded-lg px-3 py-2 text-neutral-8 transition-all duration-300 hover:bg-white/5 hover:text-base-6 lg:px-4"
5454
target="_blank"
5555
aria-label="GitHub"
5656
>
5757
<IconBrandGithub className="h-5 w-5" />
58-
GitHub
58+
<span className="hidden sm:inline">GitHub</span>
5959
</Link>
6060
<LinkButton
6161
href="https://doc.expresso-ts.com/"
62-
className="btn-primary-premium rounded-lg px-6 py-2 text-sm font-semibold"
62+
className="btn-primary-premium rounded-lg px-4 py-2 text-sm font-semibold lg:px-6"
6363
>
6464
Get Started
6565
</LinkButton>

‎src/components/Header/nav-mobile.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ import Link from 'next/link'
1414

1515
export function NavMobile() {
1616
return (
17-
<div className="w-56 text-right">
17+
<div className="w-auto max-w-[200px] text-right">
1818
<Menu as="div" className="relative inline-block text-left">
1919
<div>
20-
<Menu.Button className="group inline-flex w-full justify-center rounded-xl border border-neutral-2 bg-neutral-1/50 px-5 py-3 text-sm font-medium text-neutral-8 transition-all duration-300 hover:bg-neutral-2/50 hover:text-base-6 focus:outline-none focus-visible:ring-2 focus-visible:ring-base-6 focus-visible:ring-opacity-75">
20+
<Menu.Button className="group inline-flex w-full justify-center rounded-xl border border-neutral-2 bg-neutral-1/50 px-4 py-3 text-sm font-medium text-neutral-8 transition-all duration-300 hover:bg-neutral-2/50 hover:text-base-6 focus:outline-none focus-visible:ring-2 focus-visible:ring-base-6 focus-visible:ring-opacity-75">
2121
Menu
2222
<IconChevronDown
2323
className={`-mr-1 ml-2 h-5 w-5 text-neutral-6 transition-colors duration-300 group-hover:text-base-6`}
@@ -34,7 +34,7 @@ export function NavMobile() {
3434
leaveFrom="transform opacity-100 scale-100"
3535
leaveTo="transform opacity-0 scale-95"
3636
>
37-
<Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-neutral-2 rounded-xl border border-neutral-2 bg-neutral-1/90 shadow-2xl backdrop-blur-xl focus:outline-none">
37+
<Menu.Items className="absolute right-0 mt-2 w-48 origin-top-right divide-y divide-neutral-2 rounded-xl border border-neutral-2 bg-neutral-1/90 shadow-2xl backdrop-blur-xl focus:outline-none sm:w-56">
3838
<div className="px-2 py-2">
3939
<Menu.Item>
4040
{({ active }) => (

‎src/globals.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
@tailwind utilities;
66

77
@layer base {
8+
/* Prevent horizontal overflow globally */
9+
html,
10+
body {
11+
overflow-x: hidden;
12+
max-width: 100vw;
13+
}
14+
815
h1,
916
h2,
1017
h3 {
@@ -63,6 +70,7 @@
6370
.pulsing-circles {
6471
position: relative;
6572
overflow: hidden;
73+
max-width: 100vw;
6674
}
6775

6876
.pulsing-circles::before,
@@ -85,6 +93,13 @@
8593
top: -100px;
8694
right: -100px;
8795
animation-delay: 0s;
96+
/* Ensure it doesn't overflow on smaller screens */
97+
@media (max-width: 768px) {
98+
width: 300px;
99+
height: 300px;
100+
top: -50px;
101+
right: -50px;
102+
}
88103
}
89104

90105
.pulsing-circles::after {
@@ -93,6 +108,13 @@
93108
bottom: -50px;
94109
left: -50px;
95110
animation-delay: 2s;
111+
/* Ensure it doesn't overflow on smaller screens */
112+
@media (max-width: 768px) {
113+
width: 200px;
114+
height: 200px;
115+
bottom: -25px;
116+
left: -25px;
117+
}
96118
}
97119

98120
@keyframes pulse {

0 commit comments

Comments
 (0)