LightWeb

A lightweight, less-bloat landing page starter. Built with Vite+ and Tailwind CSS v4.

Prerequisites

This template uses Vite+ (vp). Install it first if you don't have it:

# macOS / Linux
curl -fsSL https://vite.plus | bash

# Windows PowerShell
irm https://vite.plus/ps1 | iex

Then open a new terminal and verify:

vp help

Vite+ manages Node.js and your package manager. If you already have your own setup, run vp env off to opt out. See the Vite+ docs for details.

Features

• Vite+ — unified toolchain (Vite, Rolldown, Vitest, Oxlint)
• Tailwind CSS v4 — utility-first styling
• TypeScript — strict mode, full type safety
• Valibot — schema validation for forms
• Geist Sans — premium typography by Vercel
• Lucide — clean, consistent icons
• Scroll reveal — IntersectionObserver-based entrance animations
• Responsive — mobile-first layout with staggered animations
• Form validation — real-time per-field blur + submit validation

Getting Started

Clone this repo and re-initialize for a new project:

git clone https://github.com/nami2111/light-web.git my-app
cd my-app
vp install

Then start the dev server:

vp dev

Open localhost:5173.

Scripts

Command	Description
vp dev	Start dev server with HMR
vp build	Type-check and build for production
vp preview	Preview the production build
vp check	Lint, format, and type-check all files

Project Structure

src/
├── components/     # UI components (Navbar, Hero, Features, etc.)
├── layout/         # Layout helpers (Container, Grid, Stack)
├── lib/            # Utilities (validation, icons, scroll reveal)
├── styles/         # Global CSS (main.css with Tailwind + design tokens)
└── main.ts         # App entry point — wiring and rendering

Customization

Colors

Edit the accent color in src/styles/main.css:

@theme {
  --color-accent: #1d4ed8;
}

Changing this updates buttons, icons, links, and highlights across the entire site.

Content

Each component in src/components/ holds its own data (feature cards, testimonials, etc.). Edit those arrays to swap in your content.

Sections

Add or remove sections in src/main.ts:

${Navbar()}
${Hero()}
${FeaturesSection()}
${TestimonialsSection()}
${CTASection()}
${ContactSection()}
${Footer()}

Design Tokens

The CSS includes reusable utility classes:

Class	Purpose
.btn-primary	Primary CTA button with hover physics
.btn-ghost	Secondary outline button
.card	Container with diffusion shadow and hover lift
.glass	Frosted glass navbar with inner refraction
.reveal	Scroll-triggered fade-in animation
.reveal-stagger	Staggered children reveal using --i

Deployment

vp build

The output goes to dist/. Deploy as a static site to any host (Void, Cloudflare Pages, Netlify, Vercel, etc.).

Deploy to Void

This project is compatible with Void. To deploy:

# pnpm
pnpm add -D void
# npm
npm install -D void
# bun
bun add -D void

Add voidPlugin() to vite.config.ts, then:

npx void init
npx void deploy
# or: pnpm void init && pnpm void deploy
# or: bunx void init && bunx void deploy

Your site will be live at https://<your-slug>.void.app.

License

MIT