Design System
10 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, BrainCircuit, Cable, Check, ChevronDown, Headset, Layers3, Server, Square, Users, Workflow, Zap } from "lucide-react";
2
3function Hero() {
4 return (
5 <section className="bg-neutral-950 text-neutral-50 py-24 md:py-32">
6 <div className="mx-auto flex max-w-3xl flex-col items-center px-6">
7 <div className="flex flex-col items-center text-center">
8 <span className="inline-flex w-fit items-center rounded-full border px-3 py-1 text-xs font-medium text-neutral-300">AI Customer Support</span>
9 <h1 className="mt-5 text-4xl font-semibold tracking-tight sm:text-5xl md:text-6xl">AI Customer Support That <mark className="rounded-[0.2em] bg-primary/10 px-[0.14em] text-primary">Never Sleeps</mark></h1>
10 <p className="mt-6 max-w-xl text-lg text-neutral-300">Automate your customer support with an AI-powered chatbot that answers instantly and reduces support costs.</p>
11 <div className="mt-8 flex flex-wrap gap-3 justify-center">
12 <a href="#cta" 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">Book a Demo <ArrowRight className="size-4" /></a>
13 </div>
14 </div>
15 <img
16 src="/img/helixa-hero.jpg"
17 alt="Glowing electric-blue AI support chat interface on black"
18 width={1024}
19 height={768}
20 className="mt-12 max-w-4xl w-full rounded-xl border bg-card shadow-2xl"
21 />
22 </div>
23 </section>
24 );
25}
26
27function Logos() {
28 const logos = [
29 { name: "Logoipsum", Icon: Layers3 },
30 { name: "Loopsum", Icon: Cable },
31 { name: "Liteflow", Icon: Zap },
32 { name: "Nimbus", Icon: Server },
33 { name: "Cortex", Icon: BrainCircuit },
34 ];
35 return (
36 <section className="bg-neutral-950 text-neutral-50 py-16 md:py-20">
37 <div className="mx-auto max-w-7xl px-6">
38 <div className="mt-10 flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
39 {logos.map((logo) => (
40 <div key={logo.name} className="flex items-center gap-2.5 text-foreground/60">
41 {logo.Icon && <logo.Icon className="size-5" />}
42 <span className="text-lg font-semibold tracking-tight">{logo.name}</span>
43 </div>
44 ))}
45 </div>
46 </div>
47 </section>
48 );
49}
50
51function Features() {
52 const items = [
53 { src: "/img/helixa-feature-1.jpg", alt: "Glowing chat integration interface", title: "Seamless Integrations", description: "Integrate Slack, HubSpot, Zendesk & more — automate data flow instantly.", Icon: Cable },
54 { src: "/img/helixa-feature-2.jpg", alt: "Glowing AI conversation bubbles", title: "AI-Powered Conversations", description: "Create records, assign tasks, and queue emails with a simple prompt in seconds.", Icon: Square },
55 { src: "/img/helixa-feature-3.jpg", alt: "Glowing voice control orb", title: "Voice Control", description: "Control your chatbot effortlessly with simple voice commands for faster service.", Icon: Square },
56 { src: "/img/helixa-blog-1.jpg", alt: "Abstract glowing network", title: "Automated Workflows", description: "Support customers anywhere in the world with automatic language detection.", Icon: Workflow },
57 ];
58 return (
59 <section className="bg-neutral-950 text-neutral-50 py-20 md:py-28">
60 <div className="mx-auto max-w-7xl px-6">
61 <div className="mx-auto text-center flex max-w-2xl flex-col">
62 <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Everything You Need to Automate Customer Support</h2>
63 <p className="mt-4 text-lg text-neutral-300">From AI-powered chat responses to workflow automation and analytics.</p>
64 </div>
65 <div className="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2">
66 {items.map((item) => (
67 <article key={item.title} className="group flex h-full flex-col overflow-hidden rounded-2xl border border-white/12 bg-white/[0.03]">
68 <div className="relative aspect-[16/10] overflow-hidden border-b border-white/10 bg-white/[0.04]">
69 <img src={item.src} alt={item.alt} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" />
70 </div>
71 <div className="flex flex-1 flex-col p-6">
72 {item.Icon && (
73 <div className="mb-4 flex size-9 items-center justify-center rounded-lg border border-white/15 bg-white/5 text-current">
74 <item.Icon className="size-4.5" />
75 </div>
76 )}
77 <h3 className="text-lg font-semibold tracking-tight">{item.title}</h3>
78 <p className="mt-2 text-sm leading-relaxed text-neutral-300">{item.description}</p>
79 </div>
80 </article>
81 ))}
82 </div>
83 </div>
84 </section>
85 );
86}
87
88function Segments() {
89 const features = [
90 { Icon: Server, title: "SaaS Companies", description: "Automate onboarding and support with AI. Provide instant 24/7 assistance as you grow." },
91 { Icon: Square, title: "E-commerce Stores", description: "Answer product questions, order status, and returns instantly." },
92 { Icon: Users, title: "For Agencies", description: "Capture leads and qualify prospects automatically, around the clock." },
93 { Icon: Headset, title: "Customer Support Teams", description: "Reduce ticket volume and response time by up to 70%." },
94 ];
95 return (
96 <section className="bg-neutral-950 text-neutral-50 py-20 md:py-28">
97 <div className="mx-auto max-w-7xl px-6">
98 <div className="mx-auto max-w-2xl text-center">
99 <p className="text-sm font-semibold uppercase tracking-wider text-primary">Built for every type of business</p>
100 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">From startups to enterprises, Helixa scales with you</h2>
101 </div>
102 <div className="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-2">
103 {features.map((feature) => (
104 <div key={feature.title} className="rounded-2xl border bg-card p-6">
105 <div className="flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary">
106 <feature.Icon className="size-5" />
107 </div>
108 <h3 className="mt-5 text-lg font-semibold tracking-tight">{feature.title}</h3>
109 <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
110 </div>
111 ))}
112 </div>
113 </div>
114 </section>
115 );
116}
117
118function Voice() {
119 const testimonials = [
120 { quote: "Implementing this AI chatbot completely transformed our support operations. We reduced first response time by over 70% within the first month. The system understands user intent incredibly well and resolves the majority.", author: "Michael Thompson", role: "VP of Customer Experience" },
121 { quote: "Setup took an afternoon and our CSAT went up the same week. It just works.", author: "Priya Anand", role: "Head of Support" },
122 { quote: "The voice control alone changed how our team handles peak hours.", author: "Leon Vasquez", role: "Operations Lead" },
123 ];
124 return (
125 <section className="bg-neutral-950 text-neutral-50 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 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">What our customers love about Helixa</h2>
129 </div>
130 <div className="mt-14 grid grid-cols-1 gap-6 md:grid-cols-3">
131 {testimonials.map((item) => (
132 <figure key={item.author} className="flex flex-col rounded-2xl border bg-card p-6">
133 <blockquote className="flex-1 text-[0.95rem] leading-relaxed">&ldquo;{item.quote}&rdquo;</blockquote>
134 <figcaption className="mt-6 flex items-center gap-3 border-t pt-4">
135 <div className="flex size-9 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
136 {item.author.charAt(0)}
137 </div>
138 <div>
139 <div className="text-sm font-medium">{item.author}</div>
140 {item.role && <div className="text-sm text-muted-foreground">{item.role}</div>}
141 </div>
142 </figcaption>
143 </figure>
144 ))}
145 </div>
146 </div>
147 </section>
148 );
149}
150
151function Pricing() {
152 const tiers = [
153 {
154 name: "Starter",
155 price: "$5",
156 period: "/ project",
157 description: "For small teams getting started.",
158 features: ["1 AI chatbot", "Up to 2,000 conversations / month", "Website knowledge base training", "Basic customization", "Email support"],
159 cta: { label: "Get started", href: "#" },
160 featured: false,
161 },
162 {
163 name: "Most Popular",
164 price: "$29",
165 period: "/ project",
166 description: "For growing teams that need more control.",
167 features: ["Unlimited conversations", "Advanced AI training", "CRM integrations", "Multilingual support", "Advanced analytics & reports"],
168 cta: { label: "Upgrade to Popular", href: "#" },
169 featured: true,
170 },
171 {
172 name: "Enterprise",
173 price: "Custom",
174 period: "",
175 description: "For larger teams and organizations.",
176 features: ["Unlimited AI chatbots", "Dedicated onboarding", "Custom AI training & workflows", "API access", "Enterprise-grade security", "SLA & uptime guarantee"],
177 cta: { label: "Talk to sales", href: "#" },
178 featured: false,
179 },
180 ];
181 return (
182 <section className="bg-neutral-950 text-neutral-50 py-20 md:py-28">
183 <div className="mx-auto max-w-7xl px-6">
184 <div className="mx-auto max-w-2xl text-center">
185 <p className="text-sm font-semibold uppercase tracking-wider text-primary">Pricing</p>
186 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Select a plan that suits your business</h2>
187 <p className="mt-4 text-lg text-neutral-300">Select from pricing plans that grow with your business.</p>
188 </div>
189 <div className="mx-auto mt-14 grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
190 {tiers.map((tier) => (
191 <div
192 key={tier.name}
193 className={"flex flex-col rounded-2xl border bg-card p-6 " + (tier.featured ? "ring-2 ring-primary shadow-lg" : "")}
194 >
195 {tier.featured && (
196 <span className="mb-4 inline-flex w-fit rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground">
197 Beliebt
198 </span>
199 )}
200 <h3 className="text-lg font-semibold">{tier.name}</h3>
201 {tier.description && <p className="mt-1 text-sm text-muted-foreground">{tier.description}</p>}
202 <div className="mt-4 flex items-baseline gap-1">
203 <span className="text-4xl font-semibold tracking-tight">{tier.price}</span>
204 {tier.period && <span className="text-sm text-muted-foreground">{tier.period}</span>}
205 </div>
206 <ul className="mt-6 flex flex-1 flex-col gap-3 text-sm">
207 {tier.features.map((feature) => (
208 <li key={feature} className="flex items-start gap-2.5">
209 <Check className="mt-0.5 size-4 shrink-0 text-primary" />
210 <span>{feature}</span>
211 </li>
212 ))}
213 </ul>
214 <a
215 href={tier.cta.href}
216 className={"mt-6 inline-flex items-center justify-center rounded-md px-5 py-2.5 text-sm font-medium transition-colors " + (tier.featured ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border hover:bg-muted")}
217 >
218 {tier.cta.label}
219 </a>
220 </div>
221 ))}
222 </div>
223 </div>
224 </section>
225 );
226}
227
228function Faq() {
229 const faqs = [
230 { question: "What is an AI Customer Support Chatbot?", answer: "It's an AI assistant trained on your knowledge base that answers customer questions instantly, around the clock, and escalates to a human when needed." },
231 { question: "How do I apply for a job at Helixa?", answer: "Visit our careers page, pick a role, and submit your details — our team reviews every application." },
232 { question: "Can I update or change my profile information?", answer: "Yes. Log in, open settings, and update your profile information at any time." },
233 { question: "How do I contact Helixa's support team if I need help?", answer: "Reach us via the in-app chat or email — most queries are answered within a few hours." },
234 { question: "Is my personal information secure on Helixa?", answer: "All data is encrypted in transit and at rest, and we are SOC 2 compliant with enterprise-grade controls." },
235 ];
236 return (
237 <section className="bg-neutral-950 text-neutral-50 py-20 md:py-28">
238 <div className="mx-auto max-w-3xl px-6">
239 <div className="mx-auto max-w-2xl text-center">
240 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Frequently asked questions</h2>
241 <p className="mt-4 text-lg text-neutral-300">Got any questions? Let us know. Reach out and our team will get right back to you.</p>
242 </div>
243 <div className="mt-12 divide-y rounded-2xl border bg-card">
244 {faqs.map((faq) => (
245 <details key={faq.question} className="group p-5 [&_summary]:list-none">
246 <summary className="flex cursor-pointer items-center justify-between gap-4 font-medium">
247 {faq.question}
248 <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180" />
249 </summary>
250 <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{faq.answer}</p>
251 </details>
252 ))}
253 </div>
254 </div>
255 </section>
256 );
257}
258
259function Insights() {
260 const items = [
261 { src: "/img/helixa-blog-1.jpg", alt: "Abstract glowing network", title: "The Future of AI Customer Support in 2026", category: "March 8, 2026", year: "", href: "#" },
262 { src: "/img/helixa-blog-2.jpg", alt: "Abstract blue light waves", title: "AI-Powered Support and Scalable Service Innovation", category: "March 8, 2026", year: "", href: "#" },
263 { src: "/img/helixa-blog-3.jpg", alt: "Abstract neural particle sphere", title: "Building Scalable Systems with AI and Live Agents", category: "March 8, 2026", year: "", href: "#" },
264 ];
265 return (
266 <section className="bg-neutral-950 text-neutral-50 py-20 md:py-28">
267 <div className="mx-auto max-w-7xl px-6">
268 <div className="flex max-w-2xl flex-col">
269 <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-primary">Blog</p>
270 <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Our Insights on Technology</h2>
271 <p className="mt-4 text-lg text-neutral-300">Latest thoughts on design, strategy and innovation.</p>
272 </div>
273 <div className="mt-14 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
274 {items.map((item) => (
275 <a key={item.title} href={item.href || undefined} className="group flex flex-col gap-4">
276 <div className="relative aspect-[4/3] overflow-hidden rounded-2xl border">
277 <img src={item.src} alt={item.alt} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]" />
278 </div>
279 <div className="flex items-start justify-between gap-4">
280 <div className="flex min-w-0 flex-col gap-1">
281 <h3 className="inline-flex items-center gap-1.5 text-lg font-semibold tracking-tight">
282 {item.title}
283 {item.href && <ArrowUpRight className="size-4 opacity-0 transition-opacity group-hover:opacity-100" />}
284 </h3>
285 {item.category && <span className="text-sm text-neutral-300">{item.category}</span>}
286 </div>
287 {item.year && <span className="shrink-0 font-mono text-xs text-neutral-300">[{item.year}]</span>}
288 </div>
289 </a>
290 ))}
291 </div>
292 </div>
293 </section>
294 );
295}
296
297function Cta() {
298 return (
299 <section className="bg-primary text-primary-foreground py-24 md:py-28">
300 <div className="mx-auto flex max-w-3xl flex-col items-center px-6 text-center">
301 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">Let's talk.</h2>
302 <p className="mt-4 max-w-xl text-lg text-primary-foreground/75">Launch your AI chatbot in minutes and transform how you handle customer conversations.</p>
303 <div className="mt-8 flex flex-wrap justify-center gap-3">
304 <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">Book a Demo <ArrowRight className="size-4" /></a>
305 <a href="#pricing" 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 pricing</a>
306 </div>
307 </div>
308 </section>
309 );
310}
311
312function FooterMark() {
313 return (
314 <section className="bg-neutral-950 text-neutral-50 py-14 md:py-20">
315 <div className="mx-auto max-w-7xl overflow-hidden px-6">
316 <div className="flex flex-col gap-6 items-center text-center border-t border-white/15 pt-12 md:pt-16">
317 <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-neutral-300">Your always-on AI support assistant</p>
318 <span className="block w-full select-none text-[clamp(3.25rem,18vw,16rem)] font-semibold leading-[0.82] tracking-[-0.04em]">Helixa</span>
319 </div>
320 </div>
321 </section>
322 );
323}
324
325export default function Page() {
326 return (
327 <main>
328 <Hero />
329 <Logos />
330 <Features />
331 <Segments />
332 <Voice />
333 <Pricing />
334 <Faq />
335 <Insights />
336 <Cta />
337 <FooterMark />
338 </main>
339 );
340}