Landing Page Pro
Editor.tsx - IDEKIT
Explorer
components
VibeEditor.tsx
Sidebar.tsx
app
tsVibeEditor.tsx
1import React from "react";
2
3export function VibeEditor() {
4return (
5<div className="vibe-station">
6Hello World
7</div>
8);
9}
main*0 errorsLn 5, Col 24UTF-8TypeScript React

Included Snippets

Hero Centered

Centered hero section

hero-centered
1<section class="min-h-screen flex items-center justify-center px-6 py-20">
2 <div class="max-w-4xl mx-auto text-center">
3 <h1 class="text-5xl md:text-7xl font-bold mb-6">${1:Headline}</h1>
4 <p class="text-xl text-white/60 mb-12">${2:Subheadline}</p>
5 <button class="px-8 py-4 bg-blue-500 rounded-xl font-semibold">${3:CTA}</button>
6 </div>
7</section>

Pricing Table

Pricing table component

pricing-table
1<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
2 <div class="p-8 bg-white/5 border border-white/10 rounded-2xl">
3 <div class="text-4xl font-bold mb-4">$${1:9}/mo</div>
4 <button class="w-full py-3 bg-white/10 rounded-xl">Get Started</button>
5 </div>
6</div>

Testimonial Card

Testimonial card with avatar

testimonial
1<div class="p-6 bg-white/5 border border-white/10 rounded-2xl">
2 <p class="text-white/80 mb-6">"${1:Quote}"</p>
3 <div class="flex items-center gap-3">
4 <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full"></div>
5 <div>
6 <div class="font-medium">${2:Name}</div>
7 <div class="text-sm text-white/40">${3:Role}</div>
8 </div>
9 </div>
10</div>

Stats Section

Stats/metrics section

stats
1<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
2 <div>
3 <div class="text-4xl font-bold text-blue-400">${1:10K+}</div>
4 <div class="text-white/60 mt-2">${2:Users}</div>
5 </div>
6</div>

FAQ Accordion

FAQ accordion item

faq
1<details class="p-6 bg-white/5 border border-white/10 rounded-xl group">
2 <summary class="flex items-center justify-between cursor-pointer font-medium">
3 ${1:Question?}
4 <span class="text-white/40 group-open:rotate-45 transition-transform">+</span>
5 </summary>
6 <p class="mt-4 text-white/60">${2:Answer}</p>
7</details>
PRO KITby IdeKit

Landing Page Pro

A library of high-conversion landing page components for React and Next.js. Includes pre-designed hero sections, pricing tables, and testimonial carousels optimized for sales.

$19
One-time payment
Availability
127 / 150 left

Secured by Stripe

Recommended Extensions

bradlc.vscode-tailwindcssesbenp.prettier-vscodeformulahendry.auto-rename-tagpranaygp.vscode-css-peek