hero-section

[Jasper1229]

Hero section has been created, and matches Figma design.

Summary by CodeRabbit

• New Features
  • Added a responsive landing-page hero to the homepage, featuring “CQ,” “BUILD,” “LEARN,” and “CREATE” alongside an image.
• Visual Updates
  • Updated page typography to use the Cal Sans font.
  • The page’s background and foreground appearance no longer changes based on the system’s dark-mode setting.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

acmutsa is on CodeRabbit Free, which includes PR summaries. Ask your admin to upgrade for code reviews.

• Ask an admin to upgrade

Open in CodeRabbit

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Free

Run ID: a021688d-5a69-47c4-ac0f-eed237abb6a0

📥 Commits

Reviewing files that changed from the base of the PR and between 8eae17e and c661b0c.

📒 Files selected for processing (1)

• src/app/page.tsx

💤 Files with no reviewable changes (1)

• src/app/page.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The root layout and global styles now use Cal Sans. The home page renders a hero section with headings and a technology image. The .gitignore file excludes .idea directories.

Changes

Landing page

Layer / File(s)	Summary
Configure Cal Sans src/app/layout.tsx, src/app/globals.css	The root layout configures Cal Sans at weight 400 and applies its CSS variable to the root HTML element. Global styles use Cal Sans for the sans font and body font stack, and apply the background variable to html. The dark-mode media query is commented out.
Render the home page hero src/app/page.tsx, src/landing/Hero.tsx	The home page renders the Hero component. The component displays “CQ,” “BUILD,” “LEARN,” and “CREATE” text alongside a technology image.

JetBrains ignore rule

Layer / File(s)	Summary
Ignore JetBrains project files .gitignore	Adds an ignore rule for .idea directories.

Estimated code review effort: 2 (Simple) | ~10 minutes

Architecture Summary

Architecture risk: 🔵 Low · up to 8eae1

The change affects 1 system.

Changed systems: src

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — src (service) was modified; 4 changed files map to changed impact.

Before / after behavior

• observed — Modified behavior in src/app/layout.tsx: The font import adds Cal_Sans; the Geist and Geist Mono imports remain.
• observed — Modified behavior in src/app/layout.tsx: Adds a calSans font configuration with weight "400" and CSS variable --font-cal-sans.
• observed — Modified behavior in src/app/layout.tsx: The root <html> class now uses calSans.variable instead of the Geist Sans and Geist Mono variables; h-full and antialiased remain.
• observed — Modified behavior in src/app/globals.css: The sans theme font changes from --font-geist-sans to --font-cal-sans. The prefers-color-scheme: dark rule that set dark background and foreground values is now commented out.

---

_{Comment @coderabbitai help to get the list of available commands.}

[Jasper1229]

Closed until I fix some mobile responsiveness stuff

[MKorolyova]

Background
The page background doesn't match the hero section, so the white hero block stands out against the dark page. Please update the background color in globals.css so the page and the hero section use the same color, ideally through a shared CSS variable so they stay in sync.

Responsive layout
Desktop looks great! The problems start at medium and small screen sizes, where the layout shifts a lot.

Medium screens (tablet).
Keep the same layout as desktop, but scale everything down proportionally. Text size, illustration size, and spacing should shrink together, so the elements keep the same proportions relative to each other.

Small screens (phone)
Keep the same design: text (CQ / BUILD / LEARN / CREATE) on the left, illustration on the right. The illustration should be cropped, not squeezed or moved underneath the text.

[Jasper1229]

Make image shrink with screen, make text flush with the bottom