feat: Initial landing page for LetsBe Cloud
Static marketing site with: - Value proposition and feature showcase - 10 core tools listed with descriptions - Two pricing tiers (Starter $49/mo, Professional $79/mo) - Stripe Checkout integration for payments - Responsive design with Tailwind CSS - FAQ section and footer Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
commit
3b34eaabe3
|
|
@ -0,0 +1,6 @@
|
||||||
|
node_modules
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
.git
|
||||||
|
*.md
|
||||||
|
.env*
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
# Stage 1: Install dependencies
|
||||||
|
FROM node:20-alpine AS deps
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json package-lock.json* ./
|
||||||
|
RUN npm ci --prefer-offline 2>/dev/null || npm install
|
||||||
|
|
||||||
|
# Stage 2: Build the static export
|
||||||
|
FROM node:20-alpine AS builder
|
||||||
|
WORKDIR /app
|
||||||
|
COPY --from=deps /app/node_modules ./node_modules
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Build environment variables (Stripe checkout URLs)
|
||||||
|
ARG NEXT_PUBLIC_STRIPE_STARTER_URL
|
||||||
|
ARG NEXT_PUBLIC_STRIPE_PRO_URL
|
||||||
|
ENV NEXT_PUBLIC_STRIPE_STARTER_URL=$NEXT_PUBLIC_STRIPE_STARTER_URL
|
||||||
|
ENV NEXT_PUBLIC_STRIPE_PRO_URL=$NEXT_PUBLIC_STRIPE_PRO_URL
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Stage 3: Serve with nginx
|
||||||
|
FROM nginx:alpine AS runner
|
||||||
|
COPY --from=builder /app/out /usr/share/nginx/html
|
||||||
|
|
||||||
|
# Custom nginx config for SPA routing
|
||||||
|
RUN printf 'server {\n\
|
||||||
|
listen 80;\n\
|
||||||
|
server_name _;\n\
|
||||||
|
root /usr/share/nginx/html;\n\
|
||||||
|
index index.html;\n\
|
||||||
|
\n\
|
||||||
|
location / {\n\
|
||||||
|
try_files $uri $uri.html $uri/ /index.html;\n\
|
||||||
|
}\n\
|
||||||
|
\n\
|
||||||
|
# Cache static assets\n\
|
||||||
|
location /_next/static/ {\n\
|
||||||
|
expires 1y;\n\
|
||||||
|
add_header Cache-Control "public, immutable";\n\
|
||||||
|
}\n\
|
||||||
|
\n\
|
||||||
|
# Security headers\n\
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN" always;\n\
|
||||||
|
add_header X-Content-Type-Options "nosniff" always;\n\
|
||||||
|
add_header Referrer-Policy "strict-origin-when-cross-origin" always;\n\
|
||||||
|
}\n' > /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import type { NextConfig } from 'next'
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
output: 'export',
|
||||||
|
images: {
|
||||||
|
unoptimized: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default nextConfig
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"name": "letsbe-website",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-react": "^0.469.0",
|
||||||
|
"next": "^15.1.0",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.10.5",
|
||||||
|
"@types/react": "^19.0.4",
|
||||||
|
"@types/react-dom": "^19.0.2",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"postcss": "^8.4.49",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"typescript": "^5.7.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
/** @type {import('postcss-load-config').Config} */
|
||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default config
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--foreground: #171717;
|
||||||
|
--background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--foreground: #ededed;
|
||||||
|
--background: #0a0a0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: var(--foreground);
|
||||||
|
background: var(--background);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||||
|
'Helvetica Neue', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import type { Metadata } from 'next'
|
||||||
|
import './globals.css'
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'LetsBe Cloud - Your Business Tools, Your Server, Fully Managed',
|
||||||
|
description:
|
||||||
|
'Deploy 10+ essential business tools on your dedicated server in minutes. No vendor lock-in. Your data stays yours.',
|
||||||
|
openGraph: {
|
||||||
|
title: 'LetsBe Cloud',
|
||||||
|
description:
|
||||||
|
'Deploy 10+ essential business tools on your dedicated server in minutes.',
|
||||||
|
type: 'website',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body className="antialiased">{children}</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,489 @@
|
||||||
|
import {
|
||||||
|
Cloud,
|
||||||
|
Shield,
|
||||||
|
Server,
|
||||||
|
Mail,
|
||||||
|
Workflow,
|
||||||
|
Calendar,
|
||||||
|
BarChart3,
|
||||||
|
Activity,
|
||||||
|
Lock,
|
||||||
|
Container,
|
||||||
|
KeyRound,
|
||||||
|
MessageSquare,
|
||||||
|
Check,
|
||||||
|
ArrowRight,
|
||||||
|
ExternalLink,
|
||||||
|
ChevronRight,
|
||||||
|
} from 'lucide-react'
|
||||||
|
|
||||||
|
const TOOLS = [
|
||||||
|
{
|
||||||
|
name: 'Nextcloud',
|
||||||
|
description: 'Files, collaboration, and office suite',
|
||||||
|
icon: Cloud,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Keycloak',
|
||||||
|
description: 'Single sign-on and identity management',
|
||||||
|
icon: KeyRound,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Chatwoot',
|
||||||
|
description: 'Customer support and live chat',
|
||||||
|
icon: MessageSquare,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Poste.io',
|
||||||
|
description: 'Full-featured email server',
|
||||||
|
icon: Mail,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'n8n',
|
||||||
|
description: 'Workflow automation and integrations',
|
||||||
|
icon: Workflow,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Cal.com',
|
||||||
|
description: 'Scheduling and appointment booking',
|
||||||
|
icon: Calendar,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Umami',
|
||||||
|
description: 'Privacy-first web analytics',
|
||||||
|
icon: BarChart3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Uptime Kuma',
|
||||||
|
description: 'Service monitoring and alerting',
|
||||||
|
icon: Activity,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Vaultwarden',
|
||||||
|
description: 'Team password management',
|
||||||
|
icon: Lock,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Portainer',
|
||||||
|
description: 'Container management dashboard',
|
||||||
|
icon: Container,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const STARTER_FEATURES = [
|
||||||
|
'Dedicated server (yours, not shared)',
|
||||||
|
'10 core business tools pre-installed',
|
||||||
|
'Automated setup in under 30 minutes',
|
||||||
|
'SSL certificates for all services',
|
||||||
|
'Single sign-on across all tools',
|
||||||
|
'Daily automated backups',
|
||||||
|
'Email support',
|
||||||
|
]
|
||||||
|
|
||||||
|
const PRO_FEATURES = [
|
||||||
|
'Everything in Starter',
|
||||||
|
'Hub Dashboard with AI assistant',
|
||||||
|
'Integrated email client',
|
||||||
|
'Team calendar and scheduling',
|
||||||
|
'Task management system',
|
||||||
|
'Advanced analytics dashboard',
|
||||||
|
'Priority support',
|
||||||
|
]
|
||||||
|
|
||||||
|
// Replace with your actual Stripe Checkout URLs
|
||||||
|
const STRIPE_STARTER_URL =
|
||||||
|
process.env.NEXT_PUBLIC_STRIPE_STARTER_URL || '#pricing'
|
||||||
|
const STRIPE_PRO_URL =
|
||||||
|
process.env.NEXT_PUBLIC_STRIPE_PRO_URL || '#pricing'
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white dark:bg-gray-950">
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="fixed top-0 left-0 right-0 z-50 border-b border-gray-200 bg-white/80 backdrop-blur-md dark:border-gray-800 dark:bg-gray-950/80">
|
||||||
|
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Server className="h-6 w-6 text-brand-600" />
|
||||||
|
<span className="text-xl font-bold text-gray-900 dark:text-white">
|
||||||
|
LetsBe Cloud
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="hidden items-center gap-8 md:flex">
|
||||||
|
<a
|
||||||
|
href="#tools"
|
||||||
|
className="text-sm text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Tools
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#pricing"
|
||||||
|
className="text-sm text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Pricing
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href={STRIPE_STARTER_URL}
|
||||||
|
className="rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-brand-700"
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative overflow-hidden pt-32 pb-20 md:pt-40 md:pb-32">
|
||||||
|
{/* Background gradient */}
|
||||||
|
<div className="pointer-events-none absolute inset-0 -z-10">
|
||||||
|
<div className="absolute left-1/2 top-0 h-[600px] w-[900px] -translate-x-1/2 rounded-full bg-brand-100/50 blur-3xl dark:bg-brand-900/20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mx-auto max-w-4xl px-6 text-center">
|
||||||
|
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-4 py-1.5 text-sm text-brand-700 dark:border-brand-800 dark:bg-brand-950 dark:text-brand-300">
|
||||||
|
<Shield className="h-4 w-4" />
|
||||||
|
Your data never leaves your server
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="mb-6 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl dark:text-white">
|
||||||
|
Your business tools, on your own server,{' '}
|
||||||
|
<span className="text-brand-600">fully managed</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="mx-auto mb-10 max-w-2xl text-lg text-gray-600 md:text-xl dark:text-gray-400">
|
||||||
|
Deploy 10+ essential business tools on your dedicated server in
|
||||||
|
minutes. No vendor lock-in. Your data stays yours.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||||
|
<a
|
||||||
|
href={STRIPE_STARTER_URL}
|
||||||
|
className="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-brand-600/25 transition-all hover:bg-brand-700 hover:shadow-xl hover:shadow-brand-600/30"
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
<ArrowRight className="h-5 w-5" />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#tools"
|
||||||
|
className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-8 py-3.5 text-base font-semibold text-gray-700 transition-all hover:border-gray-400 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
|
||||||
|
>
|
||||||
|
See All Tools
|
||||||
|
<ChevronRight className="h-5 w-5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="mt-6 text-sm text-gray-500 dark:text-gray-500">
|
||||||
|
Starting at $49/month. No credit card required to explore.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Tools Section */}
|
||||||
|
<section id="tools" className="bg-gray-50 py-20 md:py-28 dark:bg-gray-900">
|
||||||
|
<div className="mx-auto max-w-6xl px-6">
|
||||||
|
<div className="mb-16 text-center">
|
||||||
|
<h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl dark:text-white">
|
||||||
|
Everything your business needs
|
||||||
|
</h2>
|
||||||
|
<p className="mx-auto max-w-2xl text-lg text-gray-600 dark:text-gray-400">
|
||||||
|
10 powerful open-source tools, pre-configured and ready to use.
|
||||||
|
All running on your dedicated server with single sign-on.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
|
||||||
|
{TOOLS.map((tool) => {
|
||||||
|
const Icon = tool.icon
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={tool.name}
|
||||||
|
className="group rounded-xl border border-gray-200 bg-white p-6 transition-all hover:border-brand-300 hover:shadow-lg hover:shadow-brand-100/50 dark:border-gray-800 dark:bg-gray-950 dark:hover:border-brand-700 dark:hover:shadow-brand-900/20"
|
||||||
|
>
|
||||||
|
<div className="mb-4 inline-flex rounded-lg bg-brand-50 p-2.5 text-brand-600 dark:bg-brand-950 dark:text-brand-400">
|
||||||
|
<Icon className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<h3 className="mb-1 font-semibold text-gray-900 dark:text-white">
|
||||||
|
{tool.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{tool.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 text-center">
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-500">
|
||||||
|
Plus 20+ additional tools available on request: Ghost, NocoDB,
|
||||||
|
Gitea, MinIO, Penpot, Typebot, and more.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* How It Works Section */}
|
||||||
|
<section className="py-20 md:py-28">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<div className="mb-16 text-center">
|
||||||
|
<h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl dark:text-white">
|
||||||
|
Up and running in three steps
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-8 md:grid-cols-3">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
step: '1',
|
||||||
|
title: 'Choose your plan',
|
||||||
|
description:
|
||||||
|
'Pick Starter or Professional based on your needs. Pay securely via Stripe.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: '2',
|
||||||
|
title: 'We provision your server',
|
||||||
|
description:
|
||||||
|
'Your dedicated server is set up automatically with all tools, SSL, and SSO configured.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: '3',
|
||||||
|
title: 'Start using your tools',
|
||||||
|
description:
|
||||||
|
'Access all your tools via your custom domain. Everything is ready to go.',
|
||||||
|
},
|
||||||
|
].map((item) => (
|
||||||
|
<div key={item.step} className="text-center">
|
||||||
|
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-600 text-lg font-bold text-white">
|
||||||
|
{item.step}
|
||||||
|
</div>
|
||||||
|
<h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Pricing Section */}
|
||||||
|
<section
|
||||||
|
id="pricing"
|
||||||
|
className="bg-gray-50 py-20 md:py-28 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<div className="mx-auto max-w-5xl px-6">
|
||||||
|
<div className="mb-16 text-center">
|
||||||
|
<h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl dark:text-white">
|
||||||
|
Simple, transparent pricing
|
||||||
|
</h2>
|
||||||
|
<p className="mx-auto max-w-xl text-lg text-gray-600 dark:text-gray-400">
|
||||||
|
No hidden fees. No per-user charges. One server, all tools
|
||||||
|
included.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-8 md:grid-cols-2">
|
||||||
|
{/* Starter Plan */}
|
||||||
|
<div className="rounded-2xl border border-gray-200 bg-white p-8 dark:border-gray-800 dark:bg-gray-950">
|
||||||
|
<h3 className="mb-1 text-lg font-semibold text-gray-900 dark:text-white">
|
||||||
|
Starter
|
||||||
|
</h3>
|
||||||
|
<p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
Everything you need to run your business
|
||||||
|
</p>
|
||||||
|
<div className="mb-8">
|
||||||
|
<span className="text-4xl font-bold text-gray-900 dark:text-white">
|
||||||
|
$49
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">/month</span>
|
||||||
|
</div>
|
||||||
|
<ul className="mb-8 space-y-3">
|
||||||
|
{STARTER_FEATURES.map((feature) => (
|
||||||
|
<li
|
||||||
|
key={feature}
|
||||||
|
className="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
<Check className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a
|
||||||
|
href={STRIPE_STARTER_URL}
|
||||||
|
className="block rounded-lg border border-gray-300 py-3 text-center text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-900"
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Professional Plan */}
|
||||||
|
<div className="relative rounded-2xl border-2 border-brand-600 bg-white p-8 dark:bg-gray-950">
|
||||||
|
<div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-brand-600 px-4 py-1 text-xs font-semibold text-white">
|
||||||
|
Most Popular
|
||||||
|
</div>
|
||||||
|
<h3 className="mb-1 text-lg font-semibold text-gray-900 dark:text-white">
|
||||||
|
Professional
|
||||||
|
</h3>
|
||||||
|
<p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
For teams that want the full experience
|
||||||
|
</p>
|
||||||
|
<div className="mb-8">
|
||||||
|
<span className="text-4xl font-bold text-gray-900 dark:text-white">
|
||||||
|
$79
|
||||||
|
</span>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">/month</span>
|
||||||
|
</div>
|
||||||
|
<ul className="mb-8 space-y-3">
|
||||||
|
{PRO_FEATURES.map((feature) => (
|
||||||
|
<li
|
||||||
|
key={feature}
|
||||||
|
className="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
<Check className="mt-0.5 h-4 w-4 shrink-0 text-brand-600" />
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a
|
||||||
|
href={STRIPE_PRO_URL}
|
||||||
|
className="block rounded-lg bg-brand-600 py-3 text-center text-sm font-semibold text-white transition-colors hover:bg-brand-700"
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Privacy / Trust Section */}
|
||||||
|
<section className="py-20 md:py-28">
|
||||||
|
<div className="mx-auto max-w-4xl px-6">
|
||||||
|
<div className="grid gap-12 md:grid-cols-3">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Your data, your server',
|
||||||
|
description:
|
||||||
|
'Everything runs on a dedicated server that you own. No shared infrastructure, no data mining.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Lock,
|
||||||
|
title: 'No vendor lock-in',
|
||||||
|
description:
|
||||||
|
'Built on open-source tools. Export your data anytime. Cancel anytime. No tricks.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Server,
|
||||||
|
title: 'Fully managed',
|
||||||
|
description:
|
||||||
|
'We handle setup, updates, SSL certificates, backups, and monitoring. You focus on your business.',
|
||||||
|
},
|
||||||
|
].map((item) => {
|
||||||
|
const Icon = item.icon
|
||||||
|
return (
|
||||||
|
<div key={item.title} className="text-center">
|
||||||
|
<div className="mx-auto mb-4 inline-flex rounded-xl bg-brand-50 p-3 text-brand-600 dark:bg-brand-950 dark:text-brand-400">
|
||||||
|
<Icon className="h-7 w-7" />
|
||||||
|
</div>
|
||||||
|
<h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<section className="bg-brand-600 py-16 md:py-20 dark:bg-brand-800">
|
||||||
|
<div className="mx-auto max-w-3xl px-6 text-center">
|
||||||
|
<h2 className="mb-4 text-3xl font-bold text-white md:text-4xl">
|
||||||
|
Ready to own your business infrastructure?
|
||||||
|
</h2>
|
||||||
|
<p className="mb-8 text-lg text-brand-100">
|
||||||
|
Get your dedicated server with 10+ tools set up in under 30 minutes.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href={STRIPE_STARTER_URL}
|
||||||
|
className="inline-flex items-center gap-2 rounded-xl bg-white px-8 py-3.5 text-base font-semibold text-brand-600 shadow-lg transition-all hover:bg-brand-50"
|
||||||
|
>
|
||||||
|
Get Started Now
|
||||||
|
<ExternalLink className="h-5 w-5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="border-t border-gray-200 bg-white py-12 dark:border-gray-800 dark:bg-gray-950">
|
||||||
|
<div className="mx-auto max-w-6xl px-6">
|
||||||
|
<div className="grid gap-8 md:grid-cols-4">
|
||||||
|
{/* Brand */}
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<div className="mb-4 flex items-center gap-2">
|
||||||
|
<Server className="h-5 w-5 text-brand-600" />
|
||||||
|
<span className="text-lg font-bold text-gray-900 dark:text-white">
|
||||||
|
LetsBe Cloud
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="max-w-sm text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
Your business tools, on your own server, fully managed. Built
|
||||||
|
for SMBs and solopreneurs who value data ownership and privacy.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Links */}
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
|
||||||
|
Product
|
||||||
|
</h4>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#tools"
|
||||||
|
className="text-sm text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Tools
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#pricing"
|
||||||
|
className="text-sm text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
Pricing
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact */}
|
||||||
|
<div>
|
||||||
|
<h4 className="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
|
||||||
|
Contact
|
||||||
|
</h4>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="mailto:hello@letsbe.cloud"
|
||||||
|
className="text-sm text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
hello@letsbe.cloud
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 border-t border-gray-200 pt-8 text-center text-sm text-gray-400 dark:border-gray-800">
|
||||||
|
© {new Date().getFullYear()} LetsBe Cloud. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import type { Config } from 'tailwindcss'
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
content: [
|
||||||
|
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
],
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
50: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#3b82f6',
|
||||||
|
600: '#2563eb',
|
||||||
|
700: '#1d4ed8',
|
||||||
|
800: '#1e40af',
|
||||||
|
900: '#1e3a8a',
|
||||||
|
950: '#172554',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
export default config
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [{ "name": "next" }],
|
||||||
|
"paths": { "@/*": ["./src/*"] }
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue