Skip to content

feat: add landing transition and chat links #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nikhi-l wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: add landing transition and chat links #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b846b90
Create landing.html
Nikhi-l Sep 9, 2025
565f27e
feat: add transition to new landing and chat links
Nikhi-l Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 27 additions & 4 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,40 @@
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Spline from '@splinetool/react-spline/next';
import { Button } from '@/components/ui/button';

export default function Home() {
const [transitioning, setTransitioning] = useState(false);
const router = useRouter();

const startTransition = () => {
if (transitioning) return;
setTransitioning(true);
setTimeout(() => {
router.push('/landing.html');
}, 700);
Comment on lines +1 to +15
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Sep 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P0] Mark home page as client component

The updated home page uses useState, useEffect, and useRouter, which can only be used in Client Components. This file no longer renders through a <Link> and now depends on client‑side hooks, but it is missing the 'use client' directive at the top of the module. Without that directive Next.js will throw useRouter can only be used in Client Components and fail to compile or run tests. Add 'use client'; before the imports so the page can render.

Useful? React with 👍 / 👎.

Copy link
Owner Author

@Nikhi-l Nikhi-l Sep 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@codex fix comments

Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Sep 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary

  • Marked the home page as a client component by adding the 'use client' directive so client-side hooks like useRouter can run during transitions app/page.tsxL1-L4
  • Allowed unauthenticated visitors to reach the marketing landing page by whitelisting /landing.html in the middleware’s public route list middleware.tsL35-L38

Testing

  • ✅ pnpm format app/page.tsx middleware.ts
  • ✅ pnpm exec biome lint app/page.tsx middleware.ts
  • ❌ pnpm lint (Do not shadow the global "escape" property; Forbidden non-null assertion)
  • ❌ pnpm test (This module cannot be imported from a Client Component module)

View task →

Comment on lines +10 to +15
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Sep 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P1] Landing transition is blocked by auth middleware

The new transition calls router.push('/landing.html'), but unauthenticated requests are only allowed for '/', '/login', and '/register' in middleware.ts. For logged‑out visitors the middleware immediately redirects /landing.html back to /login, so the fade animation always ends on the login screen instead of the marketing landing page. Either allow /landing.html in the middleware or push to a route that bypasses the redirect.

Useful? React with 👍 / 👎.

Copy link
Owner Author

@Nikhi-l Nikhi-l Sep 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@codex fix comments

Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Sep 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary

Testing

  • ✅ pnpm lint
  • ❌ pnpm test – This module cannot be imported from a Client Component module

View task →

};

useEffect(() => {
const handleWheel = () => startTransition();
window.addEventListener('wheel', handleWheel, { once: true });
return () => window.removeEventListener('wheel', handleWheel);
}, [transitioning]);

return (
<main className="relative h-screen w-screen">
<main
className={`relative h-screen w-screen transition-opacity duration-700 ${
transitioning ? 'opacity-0' : 'opacity-100'
}`}
onWheel={startTransition}
>
<Spline scene="https://prod.spline.design/DS0UgrDOifhNt9T6/scene.splinecode" />
<div className="absolute bottom-8 left-1/2 -translate-x-1/2">
<Button
asChild
onClick={startTransition}
className="bg-[hsl(246,82%,60%)] text-white hover:opacity-90"
>
<Link href="/login">cerch now</Link>
cerch now
</Button>
</div>
</main>
Expand Down
Loading