Skip to content

(SP: 2) [Frontend] Update Code cards, button behavior, and layout #270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ViktorSvertoka merged 2 commits into from
Feb 4, 2026
Merged

(SP: 2) [Frontend] Update Code cards, button behavior, and layout #270

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e2c3c4
refactor(home): Update CodeCards, button behavior, and layout
YNazymko12 Feb 4, 2026
895654d
fix(ui): correct particle angles and tailwind typo
YNazymko12 Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions frontend/app/[locale]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { AppChrome } from '@/components/header/AppChrome';
import { MainSwitcher } from '@/components/header/MainSwitcher';
import { CookieBanner } from '@/components/shared/CookieBanner';
import Footer from '@/components/shared/Footer';
import { OnlineCounterPopup } from '@/components/shared/OnlineCounterPopup';
import { ThemeProvider } from '@/components/theme/ThemeProvider';
import { locales } from '@/i18n/config';
import { getCurrentUser } from '@/lib/auth';
Expand Down Expand Up @@ -73,7 +72,6 @@ export default async function LocaleLayout({
{children}
</MainSwitcher>
</AppChrome>
<OnlineCounterPopup />

<Footer />
<Toaster position="top-right" richColors expand />
Expand Down
30 changes: 16 additions & 14 deletions frontend/app/[locale]/q&a/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,21 @@ export default async function QAPage({
const t = await getTranslations({ locale, namespace: 'qa' });

return (
<DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
<main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="mb-8">
<p className="text-sm font-semibold text-(--accent-primary)">
{t('pretitle')}
</p>
<h1 className="text-3xl font-bold">{t('title')}</h1>
<p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
</div>
<Suspense fallback={<>...</>}>
<QaSection />
</Suspense>
</main>
</DynamicGridBackground>
<div className="min-h-screen">
<DynamicGridBackground className="bg-gray-50 py-10 transition-colors duration-300 dark:bg-transparent">
<main className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="mb-8">
<p className="text-sm font-semibold text-(--accent-primary)">
{t('pretitle')}
</p>
<h1 className="text-3xl font-bold">{t('title')}</h1>
<p className="text-gray-600 dark:text-gray-400">{t('subtitle')}</p>
</div>
<Suspense fallback={<>...</>}>
<QaSection />
</Suspense>
</main>
</DynamicGridBackground>
</div>
);
}
6 changes: 4 additions & 2 deletions frontend/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,8 @@
will-change: transform;
}

.lg\:left-16.animate-card-breathe {
.lg\:left-16.animate-card-breathe,
.xl\:left-8.animate-card-breathe {
transform: rotate(-10deg);
--card-x: -20px;
--card-y: -15px;
Expand All @@ -246,7 +247,8 @@
animation-delay: 0s;
}

.lg\:right-20.animate-card-breathe {
.lg\:right-20.animate-card-breathe,
.xl\:right-8.animate-card-breathe {
transform: rotate(8deg);
--card-x: 20px;
--card-y: 15px;
Expand Down
16 changes: 9 additions & 7 deletions frontend/components/home/CodeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,19 @@ export function CodeCard({ fileName, snippet, className }: CodeCardProps) {

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

<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">
<div className="text-muted-foreground/80 mb-2 flex items-center justify-between text-[9px]">
<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">
<div className="text-muted-foreground/80 mb-2 flex items-center justify-between text-[9px] lg:text-[10px] xl:text-xs">
<div className="flex items-center gap-1">
<span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm" />
<span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm" />
<span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm" />
<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" />
<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" />
<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" />
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Typo in Tailwind class: xl:w-2. should be xl:w-2.5.

The green status dot has a malformed class. Based on the pattern from the adjacent dots (lines 24-25), this should be xl:w-2.5 to match the height.

🐛 Proposed fix 
-            <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" />
+            <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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" />
<span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm lg:h-2 lg:w-2 xl:h-2.5 xl:w-2.5" />
🤖 Prompt for AI Agents 
In `@frontend/components/home/CodeCard.tsx` at line 26, In the CodeCard component
replace the malformed Tailwind token in the status-dot span: find the span
element with className containing "xl:w-2." (inside CodeCard / the green status
dot) and change that token to "xl:w-2.5" so the width matches the xl height
(keeping the rest of the className unchanged.

</div>
<span className="text-[8.5px] font-medium">{fileName}</span>
<span className="text-[8.5px] font-medium lg:text-[9.5px] xl:text-[10.5px]">
{fileName}
</span>
</div>

<code className="text-foreground/85 relative z-10 block font-mono text-[10px] leading-relaxed whitespace-pre">
<code className="text-foreground/85 relative z-10 block font-mono text-[10px] leading-relaxed whitespace-pre lg:text-[11px] xl:text-xs">
{snippet}
</code>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/components/home/HeroCodeCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export function HeroCodeCards() {
<>
<CodeCard
fileName="arrays.ts"
className="lg:top-0 lg:left-16"
className="lg:top-0 lg:left-16 xl:-top-2 xl:left-8"
snippet={
<>
<span className="text-[var(--accent-primary)]">type</span> Arr1 = [
Expand All @@ -31,7 +31,7 @@ export function HeroCodeCards() {

<CodeCard
fileName="utils.js"
className="lg:right-20 lg:bottom-16"
className="lg:right-20 lg:bottom-14 xl:right-8 xl:bottom-4"
snippet={
<>
<span className="text-[var(--accent-primary)]">function</span> sum(
Expand Down
9 changes: 7 additions & 2 deletions frontend/components/home/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
'use client';

import { useTranslations } from 'next-intl';
import * as React from 'react';

import { OnlineCounterPopup } from '@/components/shared/OnlineCounterPopup';

import { HeroBackground } from './HeroBackground';
import { HeroCodeCards } from './HeroCodeCards';
import { InteractiveCTAButton } from './InteractiveCTAButton';

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

return (
<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">
<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">
<HeroBackground />

<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">
Expand Down Expand Up @@ -40,7 +44,8 @@ export default function HeroSection() {
</p>

<div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16">
<InteractiveCTAButton />
<InteractiveCTAButton ref={ctaRef} />
<OnlineCounterPopup ctaRef={ctaRef} />
</div>
</div>
</section>
Expand Down
Loading