Skip to content

fix: update landing page for issue 110 #111

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

Merged
devarshishimpi merged 3 commits into from
Sep 18, 2026
+60 −150
Merged

fix: update landing page for issue 110 #111

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b5a3f5
fix: update landing page for issue 110
ananth-kn Sep 18, 2026
345ff4c
fix: use Codra icon on login page
ananth-kn Sep 18, 2026
340e960
fix: update legal statement
ananth-kn Sep 18, 2026
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
210 changes: 60 additions & 150 deletions apps/dashboard/src/pages/landing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,177 +1,87 @@
import { Button, GithubMark, LinkButton } from '@codraoss/ui';
import { Sun, Moon, ExternalLink } from 'lucide-react';
import { Sun, Moon } from 'lucide-react';
import { useTheme } from '@codraoss/ui/theme';
import codraDark from '@/assets/codra-fullicon-dark.svg';
import codraLight from '@/assets/codra-fullicon-light.svg';

const FEATURES = [
{
title: 'Understands your codebase',
desc: 'Reviews diffs with full context from the surrounding code, not just the changed lines.',
},
{
title: 'Flags real issues',
desc: 'Security vulnerabilities, logic errors, and pattern violations - surfaced before merge.',
},
{
title: 'Configurable per repo',
desc: 'Set review depth, model chain, and strictness from the dashboard. No config files.',
},
];
const TERMS_URL = 'https://codra.run/terms';
const PRIVACY_URL = 'https://codra.run/privacy';

/** Faint dotted-grid texture, faded out toward the bottom - the "control panel" backdrop. */
const dotGrid = {
backgroundImage:
'radial-gradient(circle, color-mix(in oklch, var(--ui-line) 75%, transparent) 1px, transparent 1px)',
'radial-gradient(circle, var(--ui-line) 1px, transparent 1.5px)',
backgroundSize: '22px 22px',
maskImage: 'radial-gradient(ellipse 90% 80% at 30% 0%, black, transparent 80%)',
WebkitMaskImage: 'radial-gradient(ellipse 90% 80% at 30% 0%, black, transparent 80%)',
maskImage:
'radial-gradient(ellipse 85% 75% at 50% 45%, black 35%, rgba(0, 0, 0, 0.35) 100%)',
WebkitMaskImage:
'radial-gradient(ellipse 85% 75% at 50% 45%, black 35%, rgba(0, 0, 0, 0.35) 100%)',
};

function DotGrid() {
return <div aria-hidden className="pointer-events-none absolute inset-0" style={dotGrid} />;
}

const legalLink =
'rounded-sm text-ui-default underline-offset-2 transition-colors hover:text-ui-strong hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-brand';

export function LandingPage() {
const { theme, toggleTheme } = useTheme();

return (
<div className="flex min-h-svh flex-col bg-ui-canvas text-ui-default">

<header className="sticky top-0 z-40 border-b border-ui-line bg-ui-base">
<div className="flex h-14 w-full items-center justify-between px-4 sm:px-6 lg:px-8">
<img
src={theme === 'dark' ? codraDark : codraLight}
className="h-6 w-auto sm:h-7"
alt="Codra"
/>
<div className="flex items-center gap-2 sm:gap-3">
<LinkButton
variant="secondary"
size="sm"
shape="square"
href="https://github.com/devarshishimpi/codra"
external
aria-label="Codra on GitHub"
className="hidden sm:flex"
>
<GithubMark size={14} />
</LinkButton>
<Button
variant="secondary"
size="sm"
shape="square"
onClick={toggleTheme}
aria-label="Toggle theme"
>
{theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
</Button>
<LinkButton
variant="primary"
size="sm"
href="/auth/github"
>
Sign in
</LinkButton>
</div>
</div>
</header>

<main className="grid flex-1 grid-cols-1 lg:grid-cols-[1fr_440px]">

<div className="relative flex flex-col justify-between overflow-hidden border-b border-ui-line bg-ui-base px-8 py-14 sm:px-14 sm:py-20 lg:border-b-0 lg:border-r">
<DotGrid />
<div className="relative flex min-h-svh items-center justify-center overflow-hidden bg-ui-canvas px-4 py-16 text-ui-default sm:px-6">
<DotGrid />

<Button
variant="secondary"
size="sm"
shape="square"
onClick={toggleTheme}
aria-label="Toggle theme"
className="absolute right-4 top-4 z-10 sm:right-6 sm:top-6"
>
{theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
</Button>

<main className="relative z-10 w-full max-w-[26rem]">
<div className="rounded-2xl border border-ui-line bg-ui-base px-6 py-10 shadow-[0_24px_64px_-24px_rgba(0,0,0,0.55)] sm:px-10 sm:py-10">
<div className="flex flex-col items-center text-center">
<div className="flex h-14 w-14 items-center justify-center overflow-hidden rounded-full border border-ui-line bg-ui-canvas">
<img
src={theme === 'dark' ? '/icons/codra-icon-dark.svg' : '/icons/codra-icon-light.svg'}
alt="Codra"
className="h-14 w-14"
/>
</div>

<div className="relative max-w-xl space-y-8">
<h1 className="font-display text-[2.75rem] font-semibold leading-[1.04] tracking-tight text-ui-strong sm:text-6xl">
AI code review<br />
on every PR.
<h1 className="mt-6 font-display text-2xl font-semibold tracking-tight text-ui-strong sm:text-[1.75rem]">
Sign in to Codra
</h1>

<p className="max-w-md text-[0.95rem] leading-relaxed text-ui-subtle">
Codra reviews pull requests automatically, checking for bugs,
security issues, and code patterns specific to your repository.
<p className="mt-2 text-sm text-ui-subtle">
Use your GitHub account to open the dashboard.
</p>

<div className="flex flex-wrap items-center gap-3">
<LinkButton
variant="primary"
size="base"
href="/auth/github"
icon={<GithubMark size={15} />}
className="!rounded-sm"
>
Get started with GitHub
</LinkButton>
<LinkButton
variant="secondary"
size="base"
href="https://github.com/devarshishimpi/codra#readme"
external
className="!rounded-sm"
>
Read the docs
</LinkButton>
</div>
</div>

<div className="relative mt-16 flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-ui-line pt-8 font-mono text-[0.7rem] uppercase tracking-[0.12em] text-ui-subtle">
<a
href="https://codra.run"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 transition-colors hover:text-ui-brand"
>
<ExternalLink size={11} />
codra.run
</a>
<span className="text-ui-line">/</span>
<a
href="https://github.com/devarshishimpi/codra"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 transition-colors hover:text-ui-brand"
>
<ExternalLink size={11} />
GitHub
<LinkButton
variant="primary"
size="base"
href="/auth/github"
icon={<GithubMark size={16} />}
className="mt-8 !h-11 !w-full !justify-center"
>
Continue with GitHub
</LinkButton>

<p className="mt-8 text-center text-xs leading-relaxed text-ui-subtle">
By continuing, you agree to Codra&apos;s{' '}
<a href={TERMS_URL} className={legalLink}>
Terms of Service
</a>{' '}
and{' '}
<a href={PRIVACY_URL} className={legalLink}>
Privacy Statement
</a>
</div>
.
</p>
</div>

<div className="relative flex flex-col justify-center gap-5 overflow-hidden border-t border-ui-line bg-ui-canvas px-8 py-14 sm:px-12 sm:py-20 lg:border-t-0">
<DotGrid />

<div className="relative flex items-center gap-3">
<span className="font-mono text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-ui-subtle">
What it does
</span>
<span className="h-px flex-1 bg-ui-line" />
</div>

<div className="relative flex flex-col gap-3">
{FEATURES.map((item, i) => (
<div
key={item.title}
className="group relative overflow-hidden rounded-xl border border-ui-line bg-ui-base p-4 transition-colors duration-200 hover:border-ui-brand/40"
>
<span className="absolute inset-y-0 left-0 w-[2px] scale-y-95 bg-ui-brand opacity-0 transition-[transform,opacity] duration-200 group-hover:scale-y-100 group-hover:opacity-100" />

<div className="flex items-center gap-3">
<span className="font-mono text-[0.72rem] font-semibold tabular-nums text-ui-brand">
{String(i + 1).padStart(2, '0')}
</span>
<h3 className="text-sm font-semibold text-ui-strong">{item.title}</h3>
</div>

<p className="mt-2 pl-[calc(0.72rem+0.75rem)] text-[0.82rem] leading-relaxed text-ui-subtle">
{item.desc}
</p>
</div>
))}
</div>
</div>

</main>
</div>
);
}
}
Loading