Feature/coupon lead flow

[Sashko-kapillar]

Summary by CodeRabbit

• Style
  • Refined Hero section container layout and heading typography with enhanced responsive sizing adjustments.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
leadgen-microcement-lviv	Ready	Preview, Comment	Jun 13, 2026 9:13am

[coderabbitai]

📝 Walkthrough

Walkthrough

Typography sizing across the Hero section is refined with fluid clamp()-based values and adjusted font weights. Global CSS classes (.section-title, .text-hero) are updated for consistent responsive behavior, and the Hero component layout styling is adjusted to apply these refined constraints to the wrapper and heading.

Changes

Hero Typography and Responsive Sizing

Layer / File(s)	Summary
Global typography class refinements src/index.css	.section-title replaces breakpoint-based sizing with clamp() and tracking-tight; .text-hero increases its clamp() range and raises font-weight from 500 to 600; unused .text-section-title class is removed.
Hero component layout styling src/components/Hero/Hero.tsx	Hero wrapper <div> and <h1> classes are updated with min-[680px] width constraint and adjusted max-width clamp() values to apply refined responsive sizing.

Possibly Related PRs

• Sashko-kapillar/leadgen-microcement-lviv#11: Both PRs modify src/components/Hero/Hero.tsx styling and update shared typography in src/index.css (.section-title), indicating overlapping UI class refinements.

• Sashko-kapillar/leadgen-microcement-lviv#3: Both PRs modify the Hero component and .text-hero typography in src/index.css with clamp() sizing and font-weight adjustments.

• Sashko-kapillar/leadgen-microcement-lviv#4: Both PRs directly modify src/components/Hero/Hero.tsx Tailwind layout classes for responsive hero styling.

Estimated Code Review Effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 Clamps and widths now flow so neat,
Typography's responsive beat,
Hero scales on every screen,
The cleanest sizes ever seen,
Weights adjusted, weights refined—
Responsive magic, beautifully aligned! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title 'Feature/coupon lead flow' is unrelated to the actual changes, which involve updating Hero section layout styling and Tailwind CSS classes for typography.	Rename the title to accurately reflect the main changes, such as 'Update Hero section and typography styling with clamp-based responsive sizing' or 'Refactor Hero component and CSS typography classes'.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/coupon-lead-flow

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (2)

src/index.css (1)

208-208: ⚡ Quick win

Remove redundant text-xl utility.

The text-xl utility is overridden by the subsequent text-[clamp(24px,3vw,42px)] arbitrary value. In Tailwind's cascade, the last conflicting utility wins, making text-xl dead code.

♻️ Proposed fix to remove redundant utility

 .section-title {
-  `@apply` text-text-main mb-5 text-xl text-[clamp(24px,3vw,42px)] font-semibold tracking-tight;
+  `@apply` text-text-main mb-5 text-[clamp(24px,3vw,42px)] font-semibold tracking-tight;
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/index.css` at line 208, The `@apply` declaration that currently includes
both text-xl and the arbitrary text-[clamp(24px,3vw,42px)] creates a redundant
utility because the clamp value overrides text-xl; remove the text-xl token from
the `@apply` list (leave text-text-main mb-5 text-[clamp(24px,3vw,42px)]
font-semibold tracking-tight) so the rule is not carrying dead/overridden
utilities.

src/components/Hero/Hero.tsx (1)

26-26: Check the clamp() wrapper width band in Hero.tsx (line 26)

clamp(580px, calc(540.47px + 5.81vw), 600px) yields ~580px at 680px (579.98px → 580px) and ~600px by 1024px (599.96px → 599.96px), so the effective width is a tight ~20px (580–600px) band. Since this wrapper only has a min-[680px] width (no lg: width override), confirm this narrow range matches the intended hero layout.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Hero/Hero.tsx` at line 26, The clamp() width in the Hero
wrapper (the div with class "relative z-10 flex flex-col items-center
min-[680px]:w-[clamp(580px,calc(540.47px+5.81vw),600px)] lg:items-start")
produces only a ~20px range between 580 and 600px and is likely too tight;
either broaden the clamp middle/limits (e.g., lower the min or raise the max),
or replace the single min-[680px] rule with a proper responsive override (add an
lg:w-[...] or md:... breakpoint) to ensure the hero grows beyond 600px at larger
viewports—update the class on that div accordingly so the intended layout range
is achieved.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/components/Hero/Hero.tsx`:
- Line 26: The clamp() width in the Hero wrapper (the div with class "relative
z-10 flex flex-col items-center
min-[680px]:w-[clamp(580px,calc(540.47px+5.81vw),600px)] lg:items-start")
produces only a ~20px range between 580 and 600px and is likely too tight;
either broaden the clamp middle/limits (e.g., lower the min or raise the max),
or replace the single min-[680px] rule with a proper responsive override (add an
lg:w-[...] or md:... breakpoint) to ensure the hero grows beyond 600px at larger
viewports—update the class on that div accordingly so the intended layout range
is achieved.

In `@src/index.css`:
- Line 208: The `@apply` declaration that currently includes both text-xl and the
arbitrary text-[clamp(24px,3vw,42px)] creates a redundant utility because the
clamp value overrides text-xl; remove the text-xl token from the `@apply` list
(leave text-text-main mb-5 text-[clamp(24px,3vw,42px)] font-semibold
tracking-tight) so the rule is not carrying dead/overridden utilities.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 60deeafa-9bed-4846-9d52-c80ac48fdb23

📥 Commits

Reviewing files that changed from the base of the PR and between e4175d7 and 5d3ccab.

📒 Files selected for processing (2)

• src/components/Hero/Hero.tsx
• src/index.css