Design System
8 Blöcke · ganze Seite
1280pxStandalone ↗
Akzent · global

Fertige React-Seite zum Kopieren — eigenständiges .tsx mit Tailwind & lucide-react, ohne Abhängigkeit von diesem Repo. Einzelne Sektionen findest du unter Blöcke.

page.tsx
1import { ArrowRight, ArrowUpRight, Cable, Layers3, Sparkles, Square, Users, Zap } from "lucide-react";
2
3function Hero() {
4 return (
5 <section className="bg-background text-foreground py-24 md:py-32">
6 <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2">
7 <div className="flex flex-col">
8 <span className="inline-flex w-fit items-center rounded-full border px-3 py-1 text-xs font-medium text-muted-foreground">Coming soon</span>
9 <h1 className="mt-5 text-4xl font-semibold tracking-tight sm:text-5xl md:text-6xl">Get More Done. Without the Stress.</h1>
10 <p className="mt-6 max-w-xl text-lg text-muted-foreground">Plan, track, and complete your tasks in one simple, powerful workspace. Stay focused, collaborate better, and never miss a deadline again.</p>
11 <div className="mt-8 flex flex-wrap gap-3">
12 <a href="#" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Download now <ArrowRight className="size-4" /></a>
13 <a href="#features" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors border hover:bg-muted">Learn more</a>
14 </div>
15 </div>
16 <img
17 src="/img/nexbit-hero.jpg"
18 alt="Nexbit task app on a smartphone with floating task cards"
19 width={768}
20 height={1024}
21 className="w-full rounded-xl border bg-card shadow-2xl"
22 />
23 </div>
24 </section>
25 );
26}
27
28function Logos() {
29 const logos = [
30 { name: "Network", Icon: Cable },
31 { name: "Flash", Icon: Zap },
32 { name: "Cactus", Icon: Sparkles },
33 { name: "Vision", Icon: Square },
34 { name: "Core", Icon: Layers3 },
35 ];
36 return (
37 <section className="bg-muted/40 text-foreground py-16 md:py-20">
38 <div className="mx-auto max-w-7xl px-6">
39 <p className="text-center text-xs font-medium uppercase tracking-widest text-muted-foreground">Trusted by fast-moving teams worldwide</p>
40 <div className="mt-10 flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
41 {logos.map((logo) => (
42 <div key={logo.name} className="flex items-center gap-2.5 text-foreground/60">
43 {logo.Icon && <logo.Icon className="size-5" />}
44 <span className="text-lg font-semibold tracking-tight">{logo.name}</span>
45 </div>
46 ))}
47 </div>
48 </div>
49 </section>
50 );
51}
52
53function Impact() {
54 const stats = [
55 { value: "10k+", label: "Active users managing daily work" },
56 { value: "4.9/5", label: "Average user rating" },
57 { value: "99.9%", label: "Uptime for reliable performance" },
58 { value: "3×", label: "Faster project completion" },
59 ];
60 return (
61 <section className="bg-primary text-primary-foreground py-20 md:py-28">
62 <div className="mx-auto max-w-7xl px-6">
63 <div className="mx-auto max-w-2xl text-center">
64 <p className="text-sm font-semibold uppercase tracking-wider text-primary">Our impact</p>
65 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Real Results. Real Impact.</h2>
66 <p className="mt-4 text-lg text-primary-foreground/75">See how thousands of users are transforming the way they work — from faster project completion to fewer missed deadlines.</p>
67 </div>
68 <dl className="mt-14 grid grid-cols-2 gap-x-8 gap-y-12 lg:grid-cols-4">
69 {stats.map((stat) => (
70 <div key={stat.label} className="text-center">
71 <dd className="text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl">{stat.value}</dd>
72 <dt className="mt-2 text-sm text-primary-foreground/75">{stat.label}</dt>
73 </div>
74 ))}
75 </dl>
76 </div>
77 </section>
78 );
79}
80
81function Features() {
82 const items = [
83 { src: "/img/nexbit-feature-1.jpg", alt: "Task list with priority labels", title: "Smart Task Organization", description: "Create, prioritize, and categorize tasks with ease. Use tags, due dates, and custom lists to stay on top of everything.", Icon: Square },
84 { src: "/img/nexbit-feature-2.jpg", alt: "Kanban board and progress chart", title: "Visual Progress Tracking", description: "Kanban boards, timelines, and progress charts help you see what's done, what's next, and what needs attention.", Icon: Square },
85 { src: "/img/nexbit-feature-3.jpg", alt: "Goals and time tracking screen", title: "Smart Reminders & Notifications", description: "Never miss a deadline again. Get notified at the right time, on the right device, without the noise.", Icon: Square },
86 { src: "/img/nexbit-feature-4.jpg", alt: "Team collaboration screen with avatars", title: "Team Collaboration", description: "Assign tasks, leave comments, share files, and track progress in real time — no more endless back-and-forth.", Icon: Users },
87 ];
88 return (
89 <section className="bg-background text-foreground py-20 md:py-28">
90 <div className="mx-auto max-w-7xl px-6">
91 <div className="mx-auto text-center flex max-w-2xl flex-col">
92 <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-primary">Our features</p>
93 <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Features designed to keep you <mark className="rounded-[0.2em] bg-primary/10 px-[0.14em] text-primary">focused</mark> and on track</h2>
94 </div>
95 <div className="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2">
96 {items.map((item) => (
97 <article key={item.title} className="group flex h-full flex-col overflow-hidden rounded-2xl border border-border bg-card">
98 <div className="relative aspect-[16/10] overflow-hidden border-b border-border bg-muted/40">
99 <img src={item.src} alt={item.alt} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" />
100 </div>
101 <div className="flex flex-1 flex-col p-6">
102 {item.Icon && (
103 <div className="mb-4 flex size-9 items-center justify-center rounded-lg border border-border bg-muted/40 text-primary">
104 <item.Icon className="size-4.5" />
105 </div>
106 )}
107 <h3 className="text-lg font-semibold tracking-tight">{item.title}</h3>
108 <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{item.description}</p>
109 </div>
110 </article>
111 ))}
112 </div>
113 </div>
114 </section>
115 );
116}
117
118function How() {
119 const steps = [
120 { n: "01", Icon: Square, title: "Download the app", description: "Nexbit is available on the App Store and Google Play — install in seconds." },
121 { n: "02", Icon: Square, title: "Set up your account", description: "Easily create your profile, connect your team, and start adding tasks." },
122 { n: "03", Icon: Square, title: "Get to work", description: "Organize your tasks, track progress, and achieve more — every single day." },
123 ];
124 return (
125 <section className="bg-muted/40 text-foreground py-20 md:py-28">
126 <div className="mx-auto max-w-7xl px-6">
127 <div className="mx-auto max-w-2xl text-center">
128 <p className="text-sm font-semibold uppercase tracking-wider text-primary">How it works</p>
129 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Three steps and you're on track</h2>
130 </div>
131 <ol className="mt-16 grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
132 {steps.map((step) => (
133 <li key={step.title} className="flex flex-col items-start">
134 <div className="flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-lg font-semibold text-primary">
135 {step.Icon ? <step.Icon className="size-6" /> : step.n}
136 </div>
137 <h3 className="mt-6 text-lg font-semibold tracking-tight">{step.title}</h3>
138 <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
139 </li>
140 ))}
141 </ol>
142 </div>
143 </section>
144 );
145}
146
147function Blog() {
148 const items = [
149 { src: "/img/nexbit-blog-1.jpg", alt: "Tidy desk with a productivity app", title: "3 Proven Productivity Hacks to Get Done in Less Time", category: "January 14, 2026", year: "", href: "#" },
150 { src: "/img/nexbit-blog-2.jpg", alt: "Hand holding a phone with a to-do app", title: "How to Effectively Manage Your Daily To-Do List", category: "January 14, 2026", year: "", href: "#" },
151 { src: "/img/nexbit-blog-3.jpg", alt: "Planner, pen and phone flat lay", title: "The Power of Focus: How Small Teams Win", category: "January 14, 2026", year: "", href: "#" },
152 ];
153 return (
154 <section className="bg-background text-foreground py-20 md:py-28">
155 <div className="mx-auto max-w-7xl px-6">
156 <div className="flex max-w-2xl flex-col">
157 <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-primary">Blog and articles</p>
158 <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Stories, Tips & Smart Workflows</h2>
159 <p className="mt-4 text-lg text-muted-foreground">Explore ideas, tools, and real-life stories to help you work better and live easier.</p>
160 </div>
161 <div className="mt-14 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
162 {items.map((item) => (
163 <a key={item.title} href={item.href || undefined} className="group flex flex-col gap-4">
164 <div className="relative aspect-[4/3] overflow-hidden rounded-2xl border">
165 <img src={item.src} alt={item.alt} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]" />
166 </div>
167 <div className="flex items-start justify-between gap-4">
168 <div className="flex min-w-0 flex-col gap-1">
169 <h3 className="inline-flex items-center gap-1.5 text-lg font-semibold tracking-tight">
170 {item.title}
171 {item.href && <ArrowUpRight className="size-4 opacity-0 transition-opacity group-hover:opacity-100" />}
172 </h3>
173 {item.category && <span className="text-sm text-muted-foreground">{item.category}</span>}
174 </div>
175 {item.year && <span className="shrink-0 font-mono text-xs text-muted-foreground">[{item.year}]</span>}
176 </div>
177 </a>
178 ))}
179 </div>
180 </div>
181 </section>
182 );
183}
184
185function Cta() {
186 return (
187 <section className="bg-primary text-primary-foreground py-24 md:py-28">
188 <div className="mx-auto flex max-w-3xl flex-col items-center px-6 text-center">
189 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">Simplify your workflow. Get more done.</h2>
190 <p className="mt-4 max-w-xl text-lg text-primary-foreground/75">Collaborate with your team and get more done — all in one app.</p>
191 <div className="mt-8 flex flex-wrap justify-center gap-3">
192 <a href="#" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-background text-foreground hover:bg-background/90">Download now <ArrowRight className="size-4" /></a>
193 <a href="#features" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors border border-white/25 text-current hover:bg-white/10">See all features</a>
194 </div>
195 </div>
196 </section>
197 );
198}
199
200function FooterMark() {
201 return (
202 <section className="bg-neutral-950 text-neutral-50 py-14 md:py-20">
203 <div className="mx-auto max-w-7xl overflow-hidden px-6">
204 <div className="flex flex-col gap-6 items-center text-center border-t border-white/15 pt-12 md:pt-16">
205 <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-neutral-300">All your work, in one app</p>
206 <span className="block w-full select-none text-[clamp(3.25rem,18vw,16rem)] font-semibold leading-[0.82] tracking-[-0.04em]">Nexbit</span>
207 </div>
208 </div>
209 </section>
210 );
211}
212
213export default function Page() {
214 return (
215 <main>
216 <Hero />
217 <Logos />
218 <Impact />
219 <Features />
220 <How />
221 <Blog />
222 <Cta />
223 <FooterMark />
224 </main>
225 );
226}