(SP: 2) [Frontend] Refactor Home HeroSection and Footer stylestor/home

[YNazymko12]

HeroSection (Home)

• Update color palette
• Adjust spacing and layout
• Enhance title and primary button with subtle animations
• Add touch interaction styles for mobile
• Refactor HeroSection into smaller reusable components
• Optimize and clean up component code

Footer

• Update background styles
• Add touch interaction styles for mobile

Summary by CodeRabbit

• New Features

  • New interactive hero section with layered decorative backgrounds, floating code cards, and an animated CTA that cycles variants on hover.

• Style

  • Overhauled global animations and added new gradient/clip-path effects for text, cards, and slide-up visuals.
  • Updated footer styling with translucent backdrop and improved hover/active states.

• Chores

  • Project structure reorganized for a flatter, locale-based routing and updated component layout.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	b0abe31
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/6978a261cf1b3b000806c89d
😎 Deploy Preview	https://deploy-preview-221--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactors the home hero into new home-scoped components (HeroSection, HeroBackground, HeroCodeCards, CodeCard, InteractiveCTAButton), updates global CSS animations/utilities, simplifies MainSwitcher layout logic, removes the shared HeroSection, updates Footer styling, and adds CTA variant utilities and project-structure adjustments.

Changes

Cohort / File(s)	Summary
Home hero components frontend/components/home/HeroSection.tsx, frontend/components/home/HeroBackground.tsx, frontend/components/home/HeroCodeCards.tsx	New modular hero UI: top-level hero, layered background, and grouped code-card renderers; presentational-only components.
Code cards & CTA frontend/components/home/CodeCard.tsx, frontend/components/home/InteractiveCTAButton.tsx	New presentational CodeCard and stateful InteractiveCTAButton with hover-driven CTA variant cycling and layered gradients.
CTA variants utility frontend/lib/home/cta-variants.ts	New CTAVariant interface and createCTAVariants factory producing five styled CTA variants.
Global CSS & animations frontend/app/globals.css	Replaced float/pulse animations with new keyframes (wave-clip, slide-up-gradient, wave-slide-up, text-fade-in, card-breathe, etc.) and added an @layer utilities block with animation/gradient utilities.
Removed shared hero frontend/components/shared/HeroSection.tsx	Deleted previous monolithic HeroSection (including internal CodeCard); functionality migrated to new home components.
Header layout frontend/components/header/MainSwitcher.tsx	Simplified wrapper className ternary: removes min-h-[80vh] and px-6 in QA/home contexts.
Footer styling frontend/components/shared/Footer.tsx	Removed large decorative layers; added translucent bg/backdrop-blur and explicit hover/active/focus styles for links and social icons.
Import & routing adjustments frontend/app/[locale]/page.tsx, frontend/project-structure.txt	Updated HeroSection import path to home-scoped component; reflects project routing/structure reorganization.

Sequence Diagram(s)

(omitted — changes are UI/component refactors and presentation logic; no new multi-component control flow requiring sequence diagrams)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related issues

• (SP: 2) [Frontend] Refactor Home HeroSection and Footer styles #220: Matches the HeroSection extraction into home-scoped components and Footer style updates described in this PR.

Possibly related PRs

• feat(header): refine site header actions and mobile navigation #72: Also modifies header/MainSwitcher logic relevant to this PR's MainSwitcher changes.
• Sanity #155: Related adjustments to MainSwitcher and blog handling overlap with this PR's header edits.
• refactor: update accent color hover effects to Footer #185: Updates Footer link/icon hover and color styling similar to this PR's Footer changes.

Suggested labels

UI, refactor

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 New hero parts spring up, tidy and bright,
Cards hop in gradients, buttons blink with delight,
Backgrounds breathe softly, animations play,
A rabbit cheers code into a modular day! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title references refactoring HeroSection and Footer styles, which aligns with the main changes in the PR, but contains unclear/garbled text ('stylestor/home') that obscures the message.	Clarify the title by removing the garbled suffix; consider: '[Frontend] Refactor Home HeroSection and Footer styles' for better clarity.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing touches

• 📝 Generate docstrings

---

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]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@frontend/components/home/HeroSection.tsx`:
- Line 26: The div in HeroSection.tsx uses an invalid Tailwind class "lg:py-30"
which Tailwind will ignore; replace it with a valid spacing token or an
arbitrary value—e.g., change "lg:py-30" to "lg:py-28" (matches md:py-28) or use
an arbitrary value like "lg:py-[7.5rem]" so the large breakpoint padding
actually applies in the className string.

🧹 Nitpick comments (5)

frontend/components/shared/Footer.tsx (2)

94-100: Consider removing !important modifiers if possible.

The ! modifiers (hover:!text-..., hover:!border-...) indicate specificity conflicts. If the base styles don't require overriding, these can likely be replaced with standard utility classes. If specificity issues persist, consider restructuring the base classes instead of forcing overrides.

---

41-46: Consider consolidating the repeated link styles.

Both privacy policy and terms of service links share identical styling. Extract a constant or apply a shared class to reduce duplication.

♻️ Suggested refactor

+const linkClassName = `
+  transition-colors
+  hover:[color:var(--accent-hover)]
+  active:[color:var(--accent-hover)]
+  focus-visible:[color:var(--accent-hover)]
+`;
+
 <Link
   href="/privacy-policy"
-  className="
-transition-colors
-hover:[color:var(--accent-hover)]
-active:[color:var(--accent-hover)]
-focus-visible:[color:var(--accent-hover)]
-"
+  className={linkClassName}
 >

Also applies to: 53-58

frontend/lib/home/cta-variants.ts (1)

22-26: Consider using CSS variables consistently for all colors.

Variant 1 uses CSS variables (--accent-primary, --accent-hover), but variants 2-5 use hardcoded hex colors. For maintainability and theme consistency, consider defining additional CSS variables or extracting these to a shared constants file.

Also applies to: 30-34, 38-42, 46-50

frontend/components/home/CodeCard.tsx (1)

11-13: Avoid literal "undefined" class when className is omitted (Line 12).
Optional className interpolates into the string and can yield a stray "undefined" class.

♻️ Suggested tweak

-      className={`pointer-events-none absolute hidden md:block ${className}`}
+      className={`pointer-events-none absolute hidden md:block ${className ?? ''}`}

frontend/app/globals.css (1)

291-312: Add reduced-motion fallbacks for new animations (Lines 291-312).
The new continuous animations should respect prefers-reduced-motion to avoid accessibility issues.

♿ Suggested addition

 `@layer` utilities {
   .wave-text-gradient {
     animation: wave-clip 5s ease-in-out infinite;
   }
@@
   .animate-card-breathe {
     animation: card-breathe 6s ease-in-out infinite;
     will-change: transform;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .wave-text-gradient,
+  .animate-slide-up-gradient,
+  .animate-wave-slide-up,
+  .animate-text-fade-in,
+  .animate-card-breathe {
+    animation: none !important;
+  }
+}