VOID-SaaS-Template — Vite SaaS模板

SHA-256: 5709d39d50527ab7ce2a0ca06e442e0b9344329527e7a311af7822dc23d786dd

2026-10-17T10:29:03.814Z

# V O I D .

> Simplicity is ruthless.

**VOID** is an anti-boring, relentlessly minimalist open-source SaaS landing page template built for maximum performance and conversion. Engineered for modern web standards, it strips away the bloat and leaves only what matters: speed, aesthetics, and architectural precision.

---

## ⚡ Architecture Map

```
VOID/
├── public/                 # Static assets (Favicon)
├── src/
│   ├── components/         # Modular layout segments
│   │   ├── Header.tsx      # Global Nav & Language Toggler
│   │   ├── Hero.tsx        # WebGL Parallax Typography
│   │   ├── Features.tsx    # Stagger Reveal Bento Grid
│   │   ├── Integrations.tsx# SVG Drawing Timeline
│   │   ├── Testimonials.tsx# Horizontal Scrubbing Pin
│   │   └── Pricing.tsx     # Highlight Stack
│   ├── hooks/
│   │   ├── useSmoothScroll.ts # Lenis Smooth Scrolling Context
│   │   └── useWebGL.ts        # Custom Fragment/Vertex Shaders
│   ├── locales/
│   │   ├── en.json         # English Context
│   │   └── tr.json         # Professional Turkish Context
│   ├── App.tsx             # Main Component Assembler
│   ├── i18n.ts             # Globalization Configuration
│   └── main.ts             # React entry point 
└── tailwind.config.ts      # Tailwind design system constraints
```

## 🛠 Tech Stack

- **Framework:** React 18
- **Build Tool:** Vite
- **TypeScript:** Strict Mode Enabled (v5+)
- **Styling:** TailwindCSS
- **Animation Engine:** GSAP (ScrollTrigger / Context)
- **Smooth Scroll:** Lenis
- **WebGL:** Three.js (via custom vanilla canvas mounting)
- **Icons:** Lucide-React
- **Localization:** react-i18next (w/ `i18next-browser-languagedetector`)

## ✨ Key Features

1. **Experimental WebGL Core:** A custom vertex/fragment shader runs strictly on the GPU yielding an interactive, organic fluid-smoke background mapped to the Hero component without threatening the main Javascript thread.
2. **GSAP ScrollTrigger Architecture:** All animations use `gsap.context()` for bulletproof cleanup and strict scope isolation. Includes pinned horizontal scrolls and sequential SVG path reveals.
3. **Linear Blur Masking:** The horizontal "Testimonials" timeline implements cutting-edge linear-gradient edge masking, dissolving overflow elements seamlessly into the abyss.
4. **Professional i18n:** Ship immediately to English and Turkish markets. Hardcoded data arrays map structurally to language nodes to allow for instant translations without sacrificing responsive DOM layouts.

## 🌍 Localization 

VOID ships with professional `EN` and `TR` locales mapped via `i18n.ts`. 
To add a new language:
1. Create a `src/locales/xx.json` file.
2. Copy the structure from `en.json` and translate the values.
3. Add the new resource map into `i18n.ts`:

```typescript
import xxTranslation from './locales/xx.json';

i18n.init({
  resources: {
    en: { translation: enTranslation },
    tr: { translation: trTranslation },
    xx: { translation: xxTranslation } // Add here
  }
})
```

## 🚀 Installation & Deployment

Be off the ground in 15 seconds.

```bash
# 1. Clone the void
git clone https://github.com/your-username/void-saas-template.git

# 2. Navigate 
cd void-saas-template

# 3. Install packages
npm install

# 4. Ignite development server
npm run dev

# 5. Build for production
npm run build
```

## 🛡 Performance & Accessibility

- **Memory Leaks Neutered:** Every interaction is bounded strictly by `useLayoutEffect` and `gsap.context()` teardown processes preventing timeline duplicates in React Strict Mode.
- **Accessible Color Math:** Global variables rely on absolute contrast. Black and White.
- **Cumulative Layout Shift (CLS):** Absolute positioning maps are scaled responsively using viewport `vw` mappings and standard Flex/Grid boundaries to guarantee 0 CLS loading sequences.