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: #18181C;
--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;
}
56 changes: 38 additions & 18 deletions apps/docs/components/footer.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

import Image from "next/image";
import Link from "next/link";
import { FaDiscord, FaXTwitter } from "react-icons/fa6";
import { IoMdMail } from "react-icons/io";
Expand All @@ -13,28 +14,47 @@ 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 flex max-w-360 flex-col gap-8 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">
You're just one click away.
</h2>
<div className="flex items-center justify-center gap-3">
<SciFiButton asChild>
<a href="https://app.databuddy.cc/login">START FREE</a>
</SciFiButton>
<SciFiButton asChild>
<Link href="/contact">CONTACT US</Link>
</SciFiButton>
<div
className="relative flex h-80 w-full items-start rounded-lg bg-center bg-cover"
style={{
backgroundImage: "url('/brand/gradients/cta-bg.png')",
}}
>
<Image
alt="logo"
className="pointer-events-none absolute top-1/2 right-16 hidden -translate-y-1/2 opacity-80 lg:block"
height={180}
src="/brand/logomark/white.svg"
width={180}
/>
<div className="max-w-5xl px-8 pt-16 sm:px-16">
<h2 className="mb-2 text-left font-medium text-2xl leading-tight sm:text-4xl">
All the analytics you need. One click away
</h2>

<p className="mb-6 text-lg text-muted-foreground">
Events, errors, and feature flags in a single privacy-first
script.
</p>
<div className="flex gap-4">
<SciFiButton asChild>
<a href="https://app.databuddy.cc/login">START FREE</a>
</SciFiButton>

<SciFiButton asChild>
<Link href="/contact">CONTACT US</Link>
</SciFiButton>
</div>
</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 Expand Up @@ -179,14 +199,14 @@ export function Footer() {
<div className="flex items-center gap-6">
<Link
aria-label="CCPA Compliance"
className="text-muted-foreground/90 transition-colors hover:text-muted-foreground"
className="text-foreground transition-colors hover:text-muted-foreground"
href="/"
>
<CCPAIcon className="size-9" />
</Link>
<Link
aria-label="GDPR Compliance"
className="text-muted-foreground/90 transition-colors hover:text-muted-foreground"
className="text-foreground transition-colors hover:text-muted-foreground"
href="/"
>
<GDPRIcon className="size-11" />
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
20 changes: 20 additions & 0 deletions apps/docs/components/icons/section-bullet.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
type SectionBulletProps = {
color: string;
};

export function SectionBullet({ color }: SectionBulletProps) {
return (
<div>
<svg
className="h-6 w-4 sm:h-7 sm:w-5 md:h-8 md:w-6"
fill="none"
viewBox="0 0 26 39"
xmlns="http://www.w3.org/2000/svg"
>
<rect fill={color} height="13" width="13" />
<rect fill={color} height="13" width="13" x="13" y="13" />
<rect fill={color} height="13" width="13" y="26" />
</svg>
</div>
);
}
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">
<svg
className="h-full w-full"
fill="none"
preserveAspectRatio="xMinYMid slice"
viewBox="200 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;
Loading