组件库

一套精心打磨的生产级组件。按类别浏览,快速找到适合你项目的搭建模块。

20+ 个组件
多个分类
即开即用

功能区块

用精美、响应式的布局展示产品卖点:从经典网格到创意 Bento,以及交互式 3D 卡片。

1

Grid Layout

Classic card grid with colorful icons and smooth hover effects

主题切换
支持深色和浅色模式,自动检测系统偏好
国际化
使用 next-intl 实现多语言支持
UI 组件
来自 shadcn/ui 的生产就绪组件
TypeScript
完整的类型安全和智能提示支持
2

Bento Grid

Asymmetric grid inspired by Apple - creates visual hierarchy

Placeholder

主题切换

支持深色和浅色模式,自动检测系统偏好

Placeholder

国际化

使用 next-intl 实现多语言支持

Placeholder

UI 组件

来自 shadcn/ui 的生产就绪组件

Placeholder

TypeScript

完整的类型安全和智能提示支持

查看更多 3 个 功能区块
Minimal GridSplit LayoutFloating 3D Cards

Hero 区块

第一印象很重要:多种 Hero 布局,支持置中、左右分栏、视频背景等。

1

Hero Section

Modern hero section with gradient background and animations

✨ NewNow optimized for AI coding agents

Build What You Vibe With

The beginner-friendly Next.js starter

Designed for newcomers and AI coding assistants. Build modern web apps without the overwhelm.

Action Items from Product Sync
1.
Finalize pricing update
Owner:
Alex
Next step:Share revised doc by Friday
2.
Prepare onboarding FAQ
Owner:
Unassigned
Next step:Assign owner
2

Hero Variant A

Professional & clean variant with subtle animations

Now optimized for AI coding agents

Build What You Vibe With
vibe for coding

The beginner-friendly Next.js starter optimized for AI assistants like Cursor and Claude Code.

查看更多 2 个 Hero 区块
Hero Variant BHero Variant C

CTA 区块

提升转化的行动召唤模块:从简洁横幅到更复杂的转化型设计。

1

CTA Section

Call-to-action section to drive conversions

Ready to Start Building?

Join developers building modern apps with AI assistance. Less overwhelm, more creating.

2

Enhanced CTA

Enhanced CTA with additional visual elements

Get Started Today

Level up your workflowVibe with vibeany.io

A polished Next.js starter with i18n, auth, payments, and delightful UI components.

Learn More
One-time purchase
Lifetime updates
AI-optimized code

内容区块

丰富的内容呈现:优势、常见问题、对比滑块等,助你清晰阐述产品。

1

Benefits Section

Highlight product or service benefits

优势

marketing.home.benefits.subtitle.beforeBrand vibeany.io marketing.home.benefits.subtitle.afterBrand

节省时间

减少 90% 的会议跟进时间。

提高责任感

每个任务都有明确的负责人。

更好的执行

立即将讨论转化为行动。

2

Comparison Slider

Before/after comparison slider

Before and after comparison - After
After
Before and after comparison - Before
Before

价格方案

清晰有力的价格展示:折扣、用量计费、对比表格等多种样式。

1

Pricing Preview

Compact pricing preview for landing pages

价格

简单的计划

免费版
适合个人使用
$
0
.
0
0
//月
热门
专业版
适合重度用户
$
1
5
.
0
0
//月
2

Discount Pricing

Show original prices with discount badges and savings

⏰ Flash Sale - Ends Dec 31, 2025

Special Discount Pricing

Limited time offer - Save up to 40% on all plans

40% OFF
Starter
Perfect for side projects and small apps
$49
SAVE $20
$29/month
  • 10,000 API requests/month
  • Basic analytics
  • Email support
  • 99.9% uptime SLA
40% OFF
Professional
For growing businesses and teams
$129
SAVE $50
$79/month
  • 100,000 API requests/month
  • Advanced analytics
  • Priority support
  • 99.95% uptime SLA
  • Custom integrations
33% OFF
Enterprise
For large-scale applications
$299
SAVE $100
$199/month
  • Unlimited API requests
  • White-label solution
  • 24/7 phone support
  • 99.99% uptime SLA
  • Dedicated account manager
  • Custom SLA
查看更多 3 个 价格方案
Comparison TableUsage-Based PricingSeasonal Promotion

账户与认证

登录与注册表单,灵活配置社交登录变体。

1

Login (Email + Social)

Sign-in form with email/password and Google/GitHub buttons

登录
输入您的邮箱和密码登录您的账户
或继续使用
忘记密码?

还没有账户? 注册

2

Register

Email-based account creation with terms consent

创建账户
输入您的信息创建账户

已有账户? 登录

查看更多 3 个 认证
Login (Email Only)Login (GitHub Only)Login (Google Only)