ui changes

[ComputelessComputer]

• Added search interface image section to product page
• Enhanced product notepad header text size
• Implemented advanced search section with image carousel
• Improved search section with dynamic queries and styling
• Refactored CTA navigation to use Link component
• Fixed audio indicator rendering in MockWindow
• Added anchor offset divs for section navigation

[netlify]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	b759dd3
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/6921e518dd4792000898b3d4
😎 Deploy Preview	https://deploy-preview-1796--hyprnote.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]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This PR updates anchor positioning logic across multiple view routes by moving IDs from section elements to positioned spacer divs, makes MockWindow audio indicator visibility conditional on animation state (enhancedLines), replaces context-based CTA interactions with hash-based Link navigation, and introduces interactive elements to certain product sections including searchable queries and image selection.

Changes

Cohort / File(s)	Change Summary
Anchor Positioning & Layout Structure apps/web/src/routes/_view/index.tsx, apps/web/src/routes/_view/product/ai-assistant.tsx, apps/web/src/routes/_view/product/ai-notetaking.tsx	Moves anchor IDs from section elements to absolutely positioned child spacer divs with top offset (69px), altering scroll-to behavior and layout flow without changing visible content.
Dynamic Audio Indicator Visibility apps/web/src/routes/_view/index.tsx, apps/web/src/routes/_view/product/ai-notetaking.tsx	Ties MockWindow showAudioIndicator prop to enhancedLines state condition (enhancedLines === 0) instead of static boolean values, making audio indicator visibility animation-dependent.
CTA Navigation Refactor apps/web/src/routes/_view/route.tsx	Removes HeroContext usage and replaces button-based CTA interactions with Link components navigating to root with hash anchors (/#hero), updating both desktop and mobile CTA rendering paths.
Interactive Search Section apps/web/src/routes/_view/product/ai-notetaking.tsx	Adds searchQueries array and animated typewriter-like search prompt display with responsive link variants (full and compact) for advanced search navigation.
Interactive Image Selection apps/web/src/routes/_view/product/mini-apps.tsx	Introduces useState for managing selected image in AdvancedSearchSection, replaces static content with interactive grid of selectable image cards and preview rendering.
Typography Adjustment apps/web/src/routes/_view/product/notepad.tsx	Adds "text-lg" Tailwind class to AnimatedNotesDemo heading for font size increase during animation.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Page as View Route
    participant Animation as Animation State<br/>(enhancedLines)
    participant AudioIndicator as MockWindow<br/>Audio Indicator

    User->>Page: Load/Interact
    Page->>Animation: Initialize enhancedLines
    Animation->>AudioIndicator: showAudioIndicator = (enhancedLines === 0)
    
    alt Animation Progresses
        Animation->>Animation: enhancedLines increments
        Animation->>AudioIndicator: showAudioIndicator updates<br/>(false when > 0)
    end

Loading

sequenceDiagram
    participant User
    participant CTA as CTA Element
    participant Router as Router Link
    participant Browser as Browser Navigation

    User->>CTA: Click CTA (non-download action)
    CTA->>Router: Navigate to "/#hero"
    Router->>Browser: Update URL hash
    Browser->>Browser: Scroll to anchor element<br/>(now positioned via spacer div)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Areas requiring extra attention:

• Anchor positioning changes across multiple files—verify that scroll-to-anchor behavior remains functional and positions correctly with the new spacer div structure.
• MockWindow showAudioIndicator conditional logic—ensure audio indicator visibility aligns with animation frame expectations across both desktop and mobile render paths.
• CTA navigation migration from HeroContext to Link-based hash navigation—confirm that all interaction paths are covered and the hash navigation doesn't conflict with existing scroll behavior.
• Interactive state management in mini-apps.tsx and ai-notetaking.tsx—verify that useState initialization and click handlers work correctly with responsive layouts.

Possibly related PRs

• polished notepad page #1675: Extends MockWindow props and adjusts enhancedLines-driven animation timing, directly related to the MockWindow audio indicator conditional rendering changes.
• expanding landing page #1632: Modifies HowItWorks/Hero sections and introduces/uses MockWindow animation changes with anchor spacer adjustments.
• made header better #1676: Changes header sizing and CTA styling/behavior in route.tsx, related to the CTA navigation refactor from context-based to Link-based interaction.

Suggested reviewers

• yujonglee

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch jj-branch-15

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ce5a05a and b759dd3.

📒 Files selected for processing (6)

• apps/web/src/routes/_view/index.tsx (3 hunks)
• apps/web/src/routes/_view/product/ai-assistant.tsx (3 hunks)
• apps/web/src/routes/_view/product/ai-notetaking.tsx (8 hunks)
• apps/web/src/routes/_view/product/mini-apps.tsx (2 hunks)
• apps/web/src/routes/_view/product/notepad.tsx (1 hunks)
• apps/web/src/routes/_view/route.tsx (3 hunks)

---

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