Skip to content
Merged
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
6 changes: 0 additions & 6 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import { HowItWorks } from "@/components/landing/how-it-works";
import { LiveDemoCta } from "@/components/landing/live-demo-cta";
import { DemoVideo } from "@/components/landing/demo-video";
import { Features } from "@/components/landing/features";
import { KeywordPositioning } from "@/components/landing/keyword-positioning";
import { StylingShowcase } from "@/components/landing/styling-showcase";
import { QuickStart } from "@/components/landing/quick-start";
import { ConfigTable } from "@/components/landing/config-table";
import { TryCallout } from "@/components/landing/try-callout";
import { JsonLd } from "@/components/json-ld";
import {
Expand Down Expand Up @@ -76,10 +73,7 @@ export default function Home() {
<LiveDemoCta />
<HowItWorks />
<Features />
<KeywordPositioning />
<StylingShowcase />
<QuickStart />
<ConfigTable />
<TryCallout />
</main>
);
Expand Down
71 changes: 33 additions & 38 deletions src/components/landing/features.tsx
Original file line number Diff line number Diff line change
@@ -1,65 +1,60 @@
import { SectionHeading } from "./section-heading";
import Link from "next/link";
import { ArrowRight, Camera, GitPullRequest, Zap } from "lucide-react";

const features = [
{
icon: "📸",
title: "Screenshot Capture",
description: "Full page or element-specific screenshots with automatic capture.",
href: "/docs/configuration",
},
{
icon: "🎨",
title: "Annotation Tools",
description: "Draw, arrows, and rectangles to highlight exactly what's wrong.",
Icon: Camera,
title: "Visual bug reports",
description:
"Capture screenshots, annotations, browser context, and privacy redactions so every report starts with useful evidence.",
href: "/use-cases/visual-bug-reporting",
},
{
icon: "⬛",
title: "Screenshot Redaction",
Icon: GitPullRequest,
title: "GitHub-native triage",
description:
"Users can cover sensitive regions, and developers can mask private UI with data-bugdrop-mask.",
href: "/docs/security#screenshot-masking",
"Turn feedback into structured GitHub Issues with labels and metadata instead of sending your team into another dashboard.",
href: "/use-cases/github-issues-feedback",
},
{
icon: "🏷️",
title: "Feedback Categories",
description: "Bug, Feature, or Question — automatically tagged with GitHub labels.",
href: "/docs/configuration",
},
{
icon: "💻",
title: "System Info",
description: "Browser, OS, viewport, and more captured automatically for debugging.",
href: "/docs/faq#how-does-bugdrop-work",
},
{
icon: "🎯",
title: "Fully Stylable",
description: "Fonts, colors, borders, shadows, radius — match any design system with data attributes.",
href: "/docs/styling",
},
{
icon: "🔒",
title: "Privacy First",
description: "No tracking, no cookies. URLs, passwords, and credit-card fields are protected by default.",
href: "/docs/security",
Icon: Zap,
title: "Lightweight by default",
description:
"Install with one script tag, customize the widget to match your site, and self-host when your team wants full control.",
href: "/docs/installation",
},
];

export function Features() {
return (
<section className="mb-20">
<SectionHeading>Features</SectionHeading>
<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6">
<SectionHeading>Why Teams Use BugDrop</SectionHeading>
<div className="grid grid-cols-3 gap-6 max-lg:grid-cols-1">
{features.map((feature, i) => (
<Link key={feature.title} href={feature.href} className="bg-bg-surface border border-border rounded-2xl p-7 transition-all duration-400 hover:-translate-y-1 hover:border-accent-warm hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] animate-fade-up no-underline" style={{ animationDelay: `${0.1 + i * 0.05}s` }}>
<span className="text-[1.75rem] mb-4 block">{feature.icon}</span>
<feature.Icon className="mb-4 size-7 text-accent-warm" aria-hidden="true" />
<h3 className="text-base font-semibold mb-2 text-text-primary">{feature.title}</h3>
<p className="text-sm text-text-subtle leading-relaxed">{feature.description}</p>
</Link>
))}
</div>
<div className="mt-6 rounded-2xl border border-accent-cyan/25 bg-accent-cyan/10 p-6 text-center animate-fade-up max-sm:pb-20" style={{ animationDelay: "0.3s" }}>
<p className="mx-auto mb-4 max-w-[760px] text-sm leading-relaxed text-text-subtle">
Looking for a lighter alternative to Userback, Marker.io, BugHerd,
Usersnap, Canny, or Sentry User Feedback? BugDrop keeps the workflow
focused on visual reports that land where developers already work.
</p>
<Link
href="/compare"
data-analytics-event="compare_index_click"
data-analytics-label="Compare BugDrop alternatives"
className="inline-flex items-center gap-2 rounded-[10px] border border-accent-cyan/40 bg-bg-deep/40 px-4 py-2 text-sm font-medium text-accent-cyan no-underline transition-all hover:-translate-y-0.5 hover:border-accent-cyan max-sm:flex max-sm:mr-auto max-sm:w-[190px] max-sm:justify-center"
>
Compare alternatives
<ArrowRight className="size-4" aria-hidden="true" />
</Link>
</div>
</section>
);
}
5 changes: 2 additions & 3 deletions src/components/landing/hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,8 @@ export function Hero() {
</strong>
</h1>
<p className="text-xl text-text-subtle max-w-[600px] mx-auto mb-10 max-sm:mb-7 max-sm:text-lg">
BugDrop is an open-source website feedback widget for visual bug
reporting. Capture screenshots, annotations, browser metadata, and
privacy redactions, then create GitHub Issues from one script tag.
Capture screenshots, annotations, and browser context, then turn user
feedback into GitHub Issues, all from one script tag.
</p>
<div className="mx-auto mb-7 flex max-w-[720px] flex-wrap justify-center gap-2 text-xs font-medium text-text-muted">
<span className="rounded border border-border bg-bg-surface px-3 py-1.5">
Expand Down
Loading