Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions apps/docs/app/(home)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,11 +74,11 @@ export default async function HomePage() {
</Section>

<Section
className="border-border border-t border-b bg-background/50 py-8 sm:py-10 lg:py-12"
className="border-border border-t border-b "
customPaddings
id="trust"
>
<div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="mx-auto w-full max-w-400 px-4 sm:px-6 lg:px-8">
<TrustedBy />
</div>
</Section>
Expand Down
37 changes: 36 additions & 1 deletion apps/docs/app/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
}

.dark {
--background: #19191D;
--background: #27282D;
--foreground: #E7E8EB;
--card: #1E1E23;
--card-foreground: #E7E8EB;
Expand Down Expand Up @@ -701,3 +701,38 @@ body {
.animate-marquee {
animation: marquee 25s linear infinite;
}

/* FAQ section hover and open state styles */
.accordion-item {
position: relative;
border-top: 1px solid var(--border);
background: color-mix(in oklab, var(--background) 50%, transparent);
transition: background 0.2s;
}

.accordion-item:hover {
background: color-mix(in oklab, var(--background) 80%, transparent);
}

.accordion-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 3px;
background: linear-gradient(
to bottom,
#facc15,
#ec4899,
#6366f1
);

opacity: 0;
transition: opacity 0.2s;
}

.accordion-item:hover::before,
.accordion-item[data-state="open"]::before {
opacity: 1;
}
8 changes: 4 additions & 4 deletions apps/docs/components/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { NewsletterForm } from "./newsletter-form";
export function Footer() {
return (
<footer className="border-border border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
<div className="mx-auto max-w-7xl px-4 pt-10 sm:px-6 lg:px-8">
<div className="mx-auto max-w-360 px-4 pt-10 sm:px-6 lg:px-8">
{/* CTA Section */}
<div className="mb-12 text-center">
<h2 className="mb-6 font-medium text-2xl leading-tight sm:text-3xl">
Expand All @@ -29,12 +29,12 @@ export function Footer() {
</div>
</div>

<div className="mb-10 flex flex-col items-start justify-between gap-4 border border-border bg-card/30 p-5 sm:flex-row sm:items-center sm:p-6">
<div className="mb-10 flex flex-col items-start justify-between gap-4 rounded-lg border border-border bg-card/30 p-5 sm:flex-row sm:items-center sm:p-6">
<div className="space-y-1">
<p className="font-medium text-foreground text-sm">
<p className="font-medium text-2xl text-foreground">
Get product updates
</p>
<p className="text-muted-foreground text-xs">
<p className="text-base text-muted-foreground">
New features, tips, and privacy-first analytics insights. No spam.
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/github-nav-mark.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export type GithubStarsBadgeProps = { stars: number };
export function GithubStarsBadge({ stars }: GithubStarsBadgeProps) {
return (
<span
className="rounded-full border border-border/50 bg-muted/50 px-2.5 py-0.5 font-medium text-foreground/90 text-xs"
className="rounded-full px-1 py-1 font-medium text-base text-foreground"
title="GitHub stars"
Comment on lines 29 to 31
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 Redundant padding utilities on GithubStarsBadge

py-0.5 sets both top and bottom padding to 0.125rem, but pt-1 then overrides the top to 0.25rem. While CSS cascade makes this work, it is confusing to read. Prefer explicit pb-0.5 pt-1 to make the intent clear:

Suggested change
<span
className="rounded-full border border-border/50 bg-muted/50 px-2.5 py-0.5 font-medium text-foreground/90 text-xs"
className="rounded-full px-1 py-0.5 pt-1 font-medium text-foreground text-md"
title="GitHub stars"
<span
className="rounded-full pb-0.5 pt-1 px-1 font-medium text-foreground text-base"
title="GitHub stars"
>

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

>
{stars.toLocaleString()} ★
Expand Down
158 changes: 158 additions & 0 deletions apps/docs/components/landing/backgroundFlow.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
const backgroundFlow = () => {
return (
<div className="pointer-events-none absolute -top-20 right-0 bottom-0 left-0 mx-auto overflow-hidden">
<svg
className="h-full w-full"
fill="none"
preserveAspectRatio="none"
viewBox="0 0 2215 1865"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_f_163_6)">
<path
d="M2209.09 140.6C2186.01 292.573 2037.51 644.522 1746.1 748.229C1381.83 877.863 228.596 931.229 250.096 2230.23"
stroke="#E3A514"
strokeWidth="257"
/>
</g>
<g filter="url(#filter1_f_163_6)">
<path
d="M2208.74 150.229C2185.66 302.202 1885.24 802.522 1616.74 842.022C368.707 1025.63 335.243 1733.02 356.743 2230.52"
stroke="#CD5F20"
strokeWidth="194"
/>
</g>
<g filter="url(#filter2_f_163_6)">
<path
d="M2234.1 143.729C2211.01 295.702 2027.6 797.813 1614.6 911.694C519.948 1213.53 509.096 1756.19 509.096 2228.69"
stroke="#B24A7E"
strokeWidth="225"
/>
</g>
<g filter="url(#filter3_f_163_6)">
<path
d="M2261.1 149.229C2237.04 301.202 2199.59 791.522 1895.99 895.229C1660.88 975.538 1132.31 1207.7 1041.67 1264.23C652.019 1507.23 669.209 2035.23 669.209 2230.23"
stroke="#714075"
strokeWidth="200"
/>
</g>
<g filter="url(#filter4_f_163_6)">
<path
d="M2286.6 154.729C2263.51 306.702 2190.87 903.816 1899.46 1007.52C1705.38 1076.59 1621.96 1081.7 1317.96 1202.36C794.957 1348.06 781.457 1996.06 794.957 2228.06"
stroke="#483C7B"
strokeWidth="166"
/>
</g>
<defs>
<filter
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
height="2353.66"
id="filter0_f_163_6"
width="2457.44"
x="4.57764e-05"
y="1.52588e-05"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
mode="normal"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_163_6"
stdDeviation="60.65"
/>
</filter>
<filter
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
height="2341.65"
id="filter1_f_163_6"
width="2291.19"
x="134.752"
y="14.3603"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
mode="normal"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_163_6"
stdDeviation="60.65"
/>
</filter>
<filter
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
height="2344.46"
id="filter2_f_163_6"
width="2191.32"
x="275.296"
y="5.53233"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
mode="normal"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_163_6"
stdDeviation="60.65"
/>
</filter>
<filter
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
height="2339.23"
id="filter3_f_163_6"
width="2033.39"
x="447.775"
y="12.2962"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
mode="normal"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_163_6"
stdDeviation="60.65"
/>
</filter>
<filter
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
height="2333.22"
id="filter4_f_163_6"
width="1902.16"
x="587.793"
y="20.963"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
mode="normal"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_163_6"
stdDeviation="60.65"
/>
</filter>
</defs>
</svg>
</div>
);
};

export default backgroundFlow;
63 changes: 31 additions & 32 deletions apps/docs/components/landing/faq-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,39 +27,38 @@ export function FaqSection({
className,
}: FaqSectionProps) {
return (
<div className={cn("mx-auto w-full max-w-3xl", className)}>
<div
className={cn(
"mb-8 text-center sm:mb-10",
subtitle ? "space-y-2" : undefined
)}
>
<h2 className="text-balance font-semibold text-2xl tracking-tight sm:text-3xl">
{title}
</h2>
{subtitle ? (
<p className="text-pretty text-muted-foreground text-sm sm:text-base">
{subtitle}
</p>
) : null}
</div>
<div className={cn("mx-auto w-full max-w-5xl", className)}>
<div className="flex flex-col gap-10 sm:flex-row sm:gap-16">
{/* Left: sticky title block */}
<div className="sm:sticky sm:top-8 sm:w-64 sm:shrink-0 sm:self-start">
<h2 className="text-balance font-semibold text-2xl tracking-tight sm:text-4xl">
{title}
</h2>
{subtitle ? (
<p className="mt-2 text-pretty text-muted-foreground text-sm sm:text-base">
{subtitle}
</p>
) : null}
</div>

<Accordion className="w-full" collapsible type="single">
{items.map((faq) => (
<AccordionItem
className="border-l-4 border-l-transparent bg-background/50 duration-200 hover:border-l-primary/20 hover:bg-background/80"
key={faq.question}
value={faq.question}
>
<AccordionTrigger className="px-5 py-4 text-left font-normal text-sm hover:no-underline sm:px-6 sm:py-5 sm:text-base">
{faq.question}
</AccordionTrigger>
<AccordionContent className="px-5 pb-4 text-muted-foreground text-sm leading-relaxed sm:px-6 sm:pb-5">
{faq.answer}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
{/* Right: accordion */}
<Accordion className="w-full min-w-0" collapsible type="single">
{items.map((faq) => (
<AccordionItem
className="accordion-item"
key={faq.question}
value={faq.question}
>
<AccordionTrigger className="px-5 py-4 text-left font-normal text-sm hover:no-underline sm:px-6 sm:py-5 sm:text-base">
{faq.question}
</AccordionTrigger>
<AccordionContent className="px-5 pb-4 text-muted-foreground text-sm leading-relaxed sm:px-6 sm:pb-5">
{faq.answer}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
</div>
);
}
Loading