6 Blöcke · ganze Seite
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
| 1 | import { ArrowRight, BarChart3, BrainCircuit, Cable, Layers3, Server, Square, Workflow, Zap } from "lucide-react"; |
| 2 | |
| 3 | function Hero() { |
| 4 | return ( |
| 5 | <section className="bg-background text-foreground 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-muted-foreground">Introducing · Lamatic 3</span> |
| 9 | <h1 className="mt-5 text-4xl font-semibold tracking-tight sm:text-5xl md:text-6xl">Turn Domain Expertise into Reliable <mark className="rounded-[0.2em] bg-primary/10 px-[0.14em] text-primary">AI Agents</mark></h1> |
| 10 | <p className="mt-6 max-w-xl text-lg text-muted-foreground">AI middleware for teams to build agents visually, deploy on serverless, and optimize continuously while we handle the rest.</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-primary text-primary-foreground hover:bg-primary/90">Talk to Sales <ArrowRight className="size-4" /></a> |
| 13 | <a href="#" 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">Watch Video</a> |
| 14 | </div> |
| 15 | </div> |
| 16 | <img |
| 17 | src="/img/lamatic-hero.jpg" |
| 18 | alt="Lamatic AI prompt input interface on a dotted grid" |
| 19 | width={1024} |
| 20 | height={768} |
| 21 | className="mt-12 max-w-4xl w-full rounded-xl border bg-card shadow-2xl" |
| 22 | /> |
| 23 | </div> |
| 24 | </section> |
| 25 | ); |
| 26 | } |
| 27 | |
| 28 | function Logos() { |
| 29 | const logos = [ |
| 30 | { name: "Logoipsum", Icon: Layers3 }, |
| 31 | { name: "Acme AI", Icon: BrainCircuit }, |
| 32 | { name: "Northwind", Icon: Server }, |
| 33 | { name: "Vertex", Icon: BarChart3 }, |
| 34 | { name: "Coraline", Icon: Cable }, |
| 35 | { name: "Helios", Icon: Zap }, |
| 36 | ]; |
| 37 | return ( |
| 38 | <section className="bg-muted/40 text-foreground py-16 md:py-20"> |
| 39 | <div className="mx-auto max-w-7xl px-6"> |
| 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 | |
| 53 | function Product() { |
| 54 | return ( |
| 55 | <section className="bg-background text-foreground py-20 md:py-28"> |
| 56 | <div className="mx-auto max-w-7xl px-6"> |
| 57 | <div className="relative mx-auto mt-14 w-full max-w-5xl"> |
| 58 | <div aria-hidden className="pointer-events-none absolute -inset-x-12 -top-12 bottom-0 -z-10 bg-[radial-gradient(60%_55%_at_50%_0%,var(--primary),transparent_70%)] opacity-25 blur-2xl" /> |
| 59 | <div className="relative overflow-hidden rounded-2xl border bg-card shadow-2xl"> |
| 60 | <div className="flex items-center gap-1.5 border-b px-4 py-3 border-border bg-muted/40"> |
| 61 | <span className="size-2.5 rounded-full bg-current/15" /> |
| 62 | <span className="size-2.5 rounded-full bg-current/15" /> |
| 63 | <span className="size-2.5 rounded-full bg-current/15" /> |
| 64 | <span className="ml-2 h-4 flex-1 rounded bg-current/[0.06]" /> |
| 65 | </div> |
| 66 | <img src="/img/lamatic-dashboard.jpg" alt="Lamatic agent workflow builder with connected nodes" className="h-auto w-full" /> |
| 67 | </div> |
| 68 | <div className="absolute hidden items-center gap-2.5 rounded-xl border bg-card px-3.5 py-2.5 text-card-foreground shadow-xl md:flex left-0 top-16 -translate-x-1/4"> |
| 69 | <span className="flex size-7 items-center justify-center rounded-lg bg-primary/10 text-primary"><Workflow className="size-4" /></span> |
| 70 | <div className="flex flex-col leading-tight"> |
| 71 | <span className="text-sm font-semibold tabular-nums tracking-tight">Visual</span> |
| 72 | <span className="text-xs text-muted-foreground">Flow builder</span> |
| 73 | </div> |
| 74 | </div> |
| 75 | <div className="absolute hidden items-center gap-2.5 rounded-xl border bg-card px-3.5 py-2.5 text-card-foreground shadow-xl md:flex right-0 top-1/3 translate-x-1/4"> |
| 76 | <span className="flex size-7 items-center justify-center rounded-lg bg-primary/10 text-primary"><Server className="size-4" /></span> |
| 77 | <div className="flex flex-col leading-tight"> |
| 78 | <span className="text-sm font-semibold tabular-nums tracking-tight">Serverless</span> |
| 79 | <span className="text-xs text-muted-foreground">Deploy anywhere</span> |
| 80 | </div> |
| 81 | </div> |
| 82 | <div className="absolute hidden items-center gap-2.5 rounded-xl border bg-card px-3.5 py-2.5 text-card-foreground shadow-xl md:flex bottom-12 left-1/3 -translate-x-1/2"> |
| 83 | <span className="flex size-7 items-center justify-center rounded-lg bg-primary/10 text-primary"><Square className="size-4" /></span> |
| 84 | <div className="flex flex-col leading-tight"> |
| 85 | <span className="text-sm font-semibold tabular-nums tracking-tight">Auto</span> |
| 86 | <span className="text-xs text-muted-foreground">Continuous tuning</span> |
| 87 | </div> |
| 88 | </div> |
| 89 | </div> |
| 90 | </div> |
| 91 | </section> |
| 92 | ); |
| 93 | } |
| 94 | |
| 95 | function Usecases() { |
| 96 | const items = [ |
| 97 | { src: "/img/lamatic-rag.jpg", alt: "Document retrieval interface with avatars", title: "RAG (Retrieval-Augmented)", description: "Generate accurate responses using large volumes of structured and unstructured data.", Icon: Square }, |
| 98 | { src: "/img/lamatic-doc.jpg", alt: "Extracted document data interface", title: "Document Processing", description: "Extract valuable insights from documents and unstructured information at scale.", Icon: Square }, |
| 99 | { src: "/img/lamatic-search.jpg", alt: "Semantic search results interface", title: "Semantic Search", description: "Perform natural language search across structured and unstructured data effortlessly.", Icon: Square }, |
| 100 | { src: "/img/lamatic-assistant.jpg", alt: "Internal AI assistant chat interface", title: "Internal Assistant AI", description: "Build an internal chatbot that finds precise answers within your company's knowledge base.", Icon: Square }, |
| 101 | ]; |
| 102 | return ( |
| 103 | <section className="bg-background text-foreground py-20 md:py-28"> |
| 104 | <div className="mx-auto max-w-7xl px-6"> |
| 105 | <div className="mx-auto text-center flex max-w-2xl flex-col"> |
| 106 | <p className="font-mono text-xs font-medium uppercase tracking-[0.2em] text-primary">Use cases</p> |
| 107 | <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">AgentKit — Pick it, tweak it, ship it.</h2> |
| 108 | <p className="mt-4 text-lg text-muted-foreground">Go live in minutes with pre-built AI solutions that you can fine-tune for your needs. Streamline workflows, delight users, and cut delivery times — as you go.</p> |
| 109 | </div> |
| 110 | <div className="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2"> |
| 111 | {items.map((item) => ( |
| 112 | <article key={item.title} className="group flex h-full flex-col overflow-hidden rounded-2xl border border-border bg-card"> |
| 113 | <div className="relative aspect-[16/10] overflow-hidden border-b border-border bg-muted/40"> |
| 114 | <img src={item.src} alt={item.alt} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]" /> |
| 115 | </div> |
| 116 | <div className="flex flex-1 flex-col p-6"> |
| 117 | {item.Icon && ( |
| 118 | <div className="mb-4 flex size-9 items-center justify-center rounded-lg border border-border bg-muted/40 text-primary"> |
| 119 | <item.Icon className="size-4.5" /> |
| 120 | </div> |
| 121 | )} |
| 122 | <h3 className="text-lg font-semibold tracking-tight">{item.title}</h3> |
| 123 | <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{item.description}</p> |
| 124 | </div> |
| 125 | </article> |
| 126 | ))} |
| 127 | </div> |
| 128 | </div> |
| 129 | </section> |
| 130 | ); |
| 131 | } |
| 132 | |
| 133 | function Integrate() { |
| 134 | return ( |
| 135 | <section className="bg-background text-foreground py-20 md:py-28"> |
| 136 | <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2"> |
| 137 | <div className=""> |
| 138 | <p className="text-sm font-semibold uppercase tracking-wider text-primary">Now build fast</p> |
| 139 | <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Integrate in a click</h2> |
| 140 | <p className="mt-4 text-lg leading-relaxed text-muted-foreground">Plug seamlessly into the tools and data you already use, making integration a one-click step instead of a month-long project. Scale effortlessly for speed, flexibility, and real-world growth — no delays, no performance drops. Launch faster, demand more, and grow without worrying about technical limits.</p> |
| 141 | <div className="mt-8 flex flex-wrap gap-3"> |
| 142 | <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">Explore all <ArrowRight className="size-4" /></a> |
| 143 | <a href="#" 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">Read the docs</a> |
| 144 | </div> |
| 145 | </div> |
| 146 | <img |
| 147 | src="/img/saas-integrations.jpg" |
| 148 | alt="Constellation of connected integration nodes" |
| 149 | width={1280} |
| 150 | height={960} |
| 151 | className="w-full rounded-xl border bg-card shadow-2xl" |
| 152 | /> |
| 153 | </div> |
| 154 | </section> |
| 155 | ); |
| 156 | } |
| 157 | |
| 158 | function Cta() { |
| 159 | return ( |
| 160 | <section className="bg-muted/40 text-foreground py-24 md:py-28"> |
| 161 | <div className="mx-auto flex max-w-3xl flex-col items-center px-6 text-center"> |
| 162 | <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">Let's turn your expertise into <mark className="rounded-[0.2em] bg-primary/10 px-[0.14em] text-primary">AI Agents</mark> together</h2> |
| 163 | <p className="mt-4 max-w-xl text-lg text-muted-foreground">Book a demo to see how Lamatic can turn your pain point or idea into a reliable agentic application.</p> |
| 164 | <div className="mt-8 flex flex-wrap justify-center gap-3"> |
| 165 | <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">Start Risk Free <ArrowRight className="size-4" /></a> |
| 166 | <a href="#" 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">Read the docs</a> |
| 167 | </div> |
| 168 | </div> |
| 169 | </section> |
| 170 | ); |
| 171 | } |
| 172 | |
| 173 | export default function Page() { |
| 174 | return ( |
| 175 | <main> |
| 176 | <Hero /> |
| 177 | <Logos /> |
| 178 | <Product /> |
| 179 | <Usecases /> |
| 180 | <Integrate /> |
| 181 | <Cta /> |
| 182 | </main> |
| 183 | ); |
| 184 | } |