Skip to content

Commit 0e2c3c4

Browse files
YNazymko12YNazymko12
committed
refactor(home): Update CodeCards, button behavior, and layout
Increase code cards size Ensure button text visible on initial load Update mobile position of online counter Make Q&A section full height
1 parent 622cde3 commit 0e2c3c4

10 files changed

Lines changed: 239 additions & 232 deletions

File tree

‎frontend/app/[locale]/layout.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { AppChrome } from '@/components/header/AppChrome';
1010
import { MainSwitcher } from '@/components/header/MainSwitcher';
1111
import { CookieBanner } from '@/components/shared/CookieBanner';
1212
import Footer from '@/components/shared/Footer';
13-
import { OnlineCounterPopup } from '@/components/shared/OnlineCounterPopup';
1413
import { ThemeProvider } from '@/components/theme/ThemeProvider';
1514
import { locales } from '@/i18n/config';
1615
import { getCurrentUser } from '@/lib/auth';
@@ -73,7 +72,6 @@ export default async function LocaleLayout({
7372
{children}
7473
</MainSwitcher>
7574
</AppChrome>
76-
<OnlineCounterPopup />
7775

7876
<Footer />
7977
<Toaster position="top-right" richColors expand />

‎frontend/app/[locale]/q&a/page.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,21 @@ export default async function QAPage({
2727
const t = await getTranslations({ locale, namespace: 'qa' });
2828

2929
return (
30-
<DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
31-
<main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
32-
<div className="mb-8">
33-
<p className="text-sm font-semibold text-(--accent-primary)">
34-
{t('pretitle')}
35-
</p>
36-
<h1 className="text-3xl font-bold">{t('title')}</h1>
37-
<p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
38-
</div>
39-
<Suspense fallback={<>...</>}>
40-
<QaSection />
41-
</Suspense>
42-
</main>
43-
</DynamicGridBackground>
30+
<div className="min-h-screen">
31+
<DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
32+
<main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
33+
<div className="mb-8">
34+
<p className="text-sm font-semibold text-(--accent-primary)">
35+
{t('pretitle')}
36+
</p>
37+
<h1 className="text-3xl font-bold">{t('title')}</h1>
38+
<p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
39+
</div>
40+
<Suspense fallback={<>...</>}>
41+
<QaSection />
42+
</Suspense>
43+
</main>
44+
</DynamicGridBackground>
45+
</div>
4446
);
4547
}

‎frontend/app/globals.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,8 @@
237237
will-change: transform;
238238
}
239239

240-
.lg\:left-16.animate-card-breathe {
240+
.lg\:left-16.animate-card-breathe,
241+
.xl\:left-8.animate-card-breathe {
241242
transform: rotate(-10deg);
242243
--card-x: -20px;
243244
--card-y: -15px;
@@ -246,7 +247,8 @@
246247
animation-delay: 0s;
247248
}
248249

249-
.lg\:right-20.animate-card-breathe {
250+
.lg\:right-20.animate-card-breathe,
251+
.xl\:right-8.animate-card-breathe {
250252
transform: rotate(8deg);
251253
--card-x: 20px;
252254
--card-y: 15px;

‎frontend/components/home/CodeCard.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,19 @@ export function CodeCard({ fileName, snippet, className }: CodeCardProps) {
1818

1919
<div className="absolute top-2/3 -right-1 -bottom-2 -left-1 rounded-2xl bg-[var(--accent-primary)]/15 blur-md" />
2020

21-
<div className="bg-card/90 relative max-w-[200px] min-w-[180px] overflow-hidden rounded-2xl border border-[var(--accent-primary)]/20 px-3.5 py-3 shadow-2xl backdrop-blur-xl dark:shadow-[var(--accent-primary)]/10">
22-
<div className="text-muted-foreground/80 mb-2 flex items-center justify-between text-[9px]">
21+
<div className="bg-card/90 relative max-w-[200px] min-w-[180px] overflow-hidden rounded-2xl border border-[var(--accent-primary)]/20 px-3.5 py-3 shadow-2xl backdrop-blur-xl lg:max-w-[220px] lg:min-w-[200px] lg:px-4 lg:py-3.5 xl:max-w-[240px] xl:min-w-[220px] xl:px-4 xl:py-3.5 dark:shadow-[var(--accent-primary)]/10">
22+
<div className="text-muted-foreground/80 mb-2 flex items-center justify-between text-[9px] lg:text-[10px] xl:text-xs">
2323
<div className="flex items-center gap-1">
24-
<span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm" />
25-
<span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm" />
26-
<span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm" />
24+
<span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" />
25+
<span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" />
26+
<span className="xl:w-2. h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5" />
2727
</div>
28-
<span className="text-[8.5px] font-medium">{fileName}</span>
28+
<span className="text-[8.5px] font-medium lg:text-[9.5px] xl:text-[10.5px]">
29+
{fileName}
30+
</span>
2931
</div>
3032

31-
<code className="text-foreground/85 relative z-10 block font-mono text-[10px] leading-relaxed whitespace-pre">
33+
<code className="text-foreground/85 relative z-10 block font-mono text-[10px] leading-relaxed whitespace-pre lg:text-[11px] xl:text-xs">
3234
{snippet}
3335
</code>
3436
</div>

‎frontend/components/home/HeroCodeCards.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export function HeroCodeCards() {
55
<>
66
<CodeCard
77
fileName="arrays.ts"
8-
className="lg:top-0 lg:left-16"
8+
className="lg:top-0 lg:left-16 xl:-top-2 xl:left-8"
99
snippet={
1010
<>
1111
<span className="text-[var(--accent-primary)]">type</span> Arr1 = [
@@ -31,7 +31,7 @@ export function HeroCodeCards() {
3131

3232
<CodeCard
3333
fileName="utils.js"
34-
className="lg:right-20 lg:bottom-16"
34+
className="lg:right-20 lg:bottom-14 xl:right-8 xl:bottom-4"
3535
snippet={
3636
<>
3737
<span className="text-[var(--accent-primary)]">function</span> sum(

‎frontend/components/home/HeroSection.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
'use client';
22

33
import { useTranslations } from 'next-intl';
4+
import * as React from 'react';
5+
6+
import { OnlineCounterPopup } from '@/components/shared/OnlineCounterPopup';
47

58
import { HeroBackground } from './HeroBackground';
69
import { HeroCodeCards } from './HeroCodeCards';
710
import { InteractiveCTAButton } from './InteractiveCTAButton';
811

912
export default function HeroSection() {
13+
const ctaRef = React.useRef<HTMLAnchorElement>(null);
1014
const t = useTranslations('homepage');
1115

1216
return (
13-
<section className="relative flex min-h-[calc(100vh-260px)] items-center overflow-hidden bg-gray-50 transition-colors duration-300 sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh] dark:bg-black">
17+
<section className="relative flex min-h-[calc(100vh-200px)] items-center overflow-hidden bg-gray-50 transition-colors duration-300 sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-screen dark:bg-black">
1418
<HeroBackground />
1519

1620
<div className="relative mx-auto flex w-full max-w-5xl flex-col items-center px-6 py-8 text-center sm:py-12 md:py-28 lg:py-[7.5rem] xl:py-32">
@@ -40,7 +44,8 @@ export default function HeroSection() {
4044
</p>
4145

4246
<div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16">
43-
<InteractiveCTAButton />
47+
<InteractiveCTAButton ref={ctaRef} />
48+
<OnlineCounterPopup ctaRef={ctaRef} />
4449
</div>
4550
</div>
4651
</section>

0 commit comments

Comments
 (0)