feat: implement home page structure with section wrapper and scroll i…

[kirito666coder]

…ndicator

Summary by CodeRabbit

• New Features
  • Added a layered, smooth-scrolling page experience with animated section reveals as visitors scroll.
• Improvements
  • Updated the availability indicator to better match the active visual theme.
  • Simplified the scroll indicator for a more consistent display.
• Navigation
  • Removed the Admin link from the footer navigation.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
blog-web	Ready	Preview, Comment	Jul 27, 2026 2:24pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 25b145da-7d56-4e15-8fe2-e436d8285aaf

📥 Commits

Reviewing files that changed from the base of the PR and between 90f7b31 and 693dfff.

📒 Files selected for processing (5)

• web/src/app/(root)/BentoGrid.tsx
• web/src/app/(root)/Footer.tsx
• web/src/app/(root)/SectionWrapper.tsx
• web/src/app/(root)/components/ScrollIndicator.tsx
• web/src/app/(root)/page.tsx

---

📝 Walkthrough

Walkthrough

The home page now uses a new SectionWrapper for GSAP-based layered scrolling, removes inline scroll-layer orchestration, renders a static scroll indicator, removes the footer admin link, and updates the availability dot to use the foreground theme color.

Changes

Home scroll composition

Layer / File(s)	Summary
Layered scroll animation web/src/app/(root)/SectionWrapper.tsx	Adds a client component that initializes ScrollSmoother and a pinned ScrollTrigger timeline to animate stacked page layers.
Home page integration web/src/app/(root)/page.tsx, web/src/app/(root)/components/ScrollIndicator.tsx	Moves layer orchestration into SectionWrapper, restructures the page composition, and removes scroll-progress wiring from ScrollIndicator.
Navigation and status visuals web/src/app/(root)/Footer.tsx, web/src/app/(root)/BentoGrid.tsx	Removes the footer admin link and changes the availability indicator dot to the foreground theme color.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Home
  participant SectionWrapper
  participant ScrollSmoother
  participant ScrollTrigger
  participant PageLayers
  Home->>SectionWrapper: render page content when loading is false
  SectionWrapper->>ScrollSmoother: initialize smooth scrolling
  SectionWrapper->>ScrollTrigger: create pinned clipPath timeline
  ScrollTrigger->>PageLayers: animate layered reveals during scroll

Loading

Possibly related PRs

• kirito666coder/blog#40: Modifies the same scroll-progress and ScrollSmoother integration in ScrollIndicator and page.tsx.
• kirito666coder/blog#41: Adjusts the same pinned multi-layer clipPath animation flow in page.tsx.

✨ 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 dev

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

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.}