components/vote-banner.tsx (2)

28-40: Prefer Tailwind classes over inline styles for consistency.

The close button uses inline style for positioning while the rest of the component uses Tailwind. Consider using Tailwind classes for consistency.

♻️ Suggested fix

       <button
         onClick={handleDismiss}
-        style={{
-          position: "absolute",
-          right: "12px",
-          top: "50%",
-          transform: "translateY(-50%)",
-        }}
-        className="cursor-pointer text-lg font-bold text-white/70 hover:text-white"
+        className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-lg font-bold text-white/70 hover:text-white"
         aria-label="Close"
       >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/vote-banner.tsx` around lines 28 - 40, The close button in the
VoteBanner component uses inline style for positioning; replace those inline
styles with equivalent Tailwind utility classes (e.g., use "absolute right-3
top-1/2 -translate-y-1/2") on the button that uses onClick={handleDismiss} so
the component consistently uses Tailwind; keep existing className, aria-label,
and the onClick handler intact.

---

6-9: Potential hydration mismatch when sessionStorage has dismissed state.

The initializer returns true during SSR (when window is undefined), but on the client it may return false if vote_banner_dismissed is set. This can cause a React hydration mismatch warning.

Consider initializing to true unconditionally and checking sessionStorage in a useEffect:

♻️ Suggested fix

 export const VoteBanner = () => {
-  const [show, setShow] = useState(() => {
-    if (typeof window === "undefined") return true;
-    return !sessionStorage.getItem("vote_banner_dismissed");
-  });
+  const [show, setShow] = useState(true);
+
+  useEffect(() => {
+    if (sessionStorage.getItem("vote_banner_dismissed")) {
+      setShow(false);
+    }
+  }, []);

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/vote-banner.tsx` around lines 6 - 9, The current useState
initializer in the VoteBanner component checks typeof window and returns true
during SSR which can differ from the client and cause hydration mismatch; change
the useState for show to initialize unconditionally to true (useState(true)) and
then add a useEffect that runs on mount to read
sessionStorage.getItem("vote_banner_dismissed") and call setShow(false) if
present (or setShow accordingly), keeping the sessionStorage key
"vote_banner_dismissed" and using setShow to update visibility so SSR and client
hydration stay consistent.

app/layout.tsx (1)

72-77: Consider the promotional component density.

The layout now includes two banners (VoteBanner, ProductBanner) and a timed modal (CenterPopup). This may feel overwhelming to users, especially on first visit. Consider whether all three are needed simultaneously or if they should be mutually exclusive based on user segment or session state.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/layout.tsx` around lines 72 - 77, The layout renders three promotional
components (VoteBanner, ProductBanner, CenterPopup) at once; change layout.tsx
to render them conditionally so users aren’t overwhelmed—introduce decision
helpers (e.g., shouldShowVoteBanner(), shouldShowProductBanner(),
shouldShowCenterPopup()) that consult user segment, session state or
localStorage/feature flags and then render only one promo at a time (or
prioritize CenterPopup over banners) by replacing the direct renders of
<VoteBanner />, <ProductBanner />, and <CenterPopup /> with a single conditional
block that picks the highest-priority component based on those helpers; ensure
the helpers are deterministic per session and easy to test.

components/center-popup.tsx (1)

27-45: Consider adding keyboard accessibility for the modal.

The modal can be dismissed by clicking the backdrop or buttons, but lacks keyboard support. Consider:

• Adding Escape key to dismiss
• Trapping focus within the modal when visible
• Adding role="dialog" and aria-modal="true"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/center-popup.tsx` around lines 27 - 45, The modal lacks keyboard
accessibility: update the component that uses isVisible, dismiss and the popup
motion.div inside AnimatePresence to (1) add role="dialog" and aria-modal="true"
to the popup motion.div, (2) add a keydown listener (mounted only when
isVisible) that calls dismiss on Escape, and (3) implement focus trapping while
visible by moving focus into the dialog on open (to the first focusable element)
and preventing focus leaving the dialog until closed, then restore focus on
close; tie these behaviors to the existing isVisible/dismiss logic so they
attach/detach cleanly with the AnimatePresence lifecycle.

components/timeline.tsx (1)

64-73: Use CSS instead of deprecated frameBorder attribute.

The frameBorder attribute is deprecated in HTML5. Use CSS border: none or Tailwind's border-0 class instead.

♻️ Suggested fix

             <iframe
               width="100%"
               height="100%"
               src={`https://www.youtube.com/embed/${entry.content}`}
               title="YouTube video player"
-              frameBorder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
               allowFullScreen
+              className="border-0"
             ></iframe>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/timeline.tsx` around lines 64 - 73, Replace the deprecated
frameBorder attribute on the iframe in the Timeline component with CSS: remove
frameBorder="0" from the iframe element and apply a borderless style instead
(e.g., add className="border-0" or style={{border: 'none'}} to the same iframe).
Update the iframe JSX in components/timeline.tsx (the iframe rendering the
YouTube embed using src={`https://www.youtube.com/embed/${entry.content}`}) so
it uses the CSS-based border removal.

components/bottom-popups.tsx (1)

64-66: Dismissal doesn't stop the cycling interval.

When the user clicks dismiss, only isVisible is set to false, but the interval continues running and will show the next popup after the cycle. Other components (VoteBanner, ProductBanner, CenterPopup) persist dismissal in sessionStorage. Consider either:

1. Stopping the interval on dismiss, or
2. Persisting dismissal state in sessionStorage for consistency

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/bottom-popups.tsx` around lines 64 - 66, The dismiss button only
sets isVisible false but doesn't stop the cycling interval; modify the component
so that clicking the dismiss button also clears the interval (use the same
interval id created in your useEffect — e.g., store the timer id in a ref like
intervalRef or state and call clearInterval(intervalRef.current) inside the
onClick handler that calls setIsVisible), and/or persist the dismissal in
sessionStorage (set a key like "bottomPopups.dismissed" in the onClick and check
that key in the useEffect before starting the interval) so the popup remains
dismissed across the session; ensure the useEffect cleanup also clears the
interval to avoid leaks.

app/api/subscribe/route.ts (1)

30-50: Use resend.emails.send() instead of raw fetch for consistency.

The code already uses the Resend SDK for contacts.create, so sending emails should also use the SDK via resend.emails.send(). The SDK supports the template structure you're using (template ID with variables) and eliminates manual header/authentication setup.

Replace the fetch call with:

const resend = new Resend(process.env.RESEND_API_KEY);
const response = await resend.emails.send({
  from: "Its Hover <[email protected]>",
  to: email,
  subject: "welcome to the loop",
  template: {
    id: process.env.RESEND_TEMPLATE_ID,
    variables: {
      name: email.split("@")[0],
    },
  },
});

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/api/subscribe/route.ts` around lines 30 - 50, Replace the manual fetch
POST to Resend with the Resend SDK call: instantiate the Resend client with
process.env.RESEND_API_KEY and call resend.emails.send(...) instead of fetch,
passing the same payload shape (from, to, subject, template: { id:
process.env.RESEND_TEMPLATE_ID, variables: { name: email.split("@")[0] } });
remove manual headers/auth and use the SDK response handling consistent with the
existing contacts.create usage. Ensure you reference the same Resend client
instance used elsewhere (or import new Resend) and preserve error handling
around the resend.emails.send call.

app/timeline/page.tsx (1)

334-370: The Timeline component re-sorts entries before rendering, so chronological order is maintained at display time.

Lines 334-370 in app/timeline/page.tsx do contain entries out of order (Mar 8 entries before Mar 7), but this is automatically corrected by the Timeline component's sorting logic (see ./components/timeline.tsx lines 237-239). The filteredEntries useMemo uses new Date(a.date).getTime() to parse and sort entries before render, respecting the sortOrder state.

That said, keeping the data chronologically ordered at the source level remains a reasonable refactoring for clarity and maintainability—it reduces cognitive overhead and makes future additions safer by avoiding reliance on implicit component-level sorting.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/timeline/page.tsx` around lines 334 - 370, Source data in the timeline
array is out-of-order (entries with id "33-alt", "33-demo", "33-win" dated Mar 8
appear before the entry with id "34" dated Mar 7); although Timeline's
filteredEntries useMemo / sortOrder currently re-sorts at render, please fix the
source by reordering the timeline objects so chronological order is preserved
(move the object with id "34" before the Mar 8 entries or sort the array by new
Date(date).getTime() at data creation), referencing the Timeline component and
filteredEntries useMemo for context.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes