A stunning, modern landing page built with React and Vite, showcasing the ZeroTrace data wiping tool. Features a cyber-security aesthetic with neon accents, smooth animations, and responsive design.
Visit zerotrace.vercel.app to see it in action!
✅ Modern Cyber-Security Aesthetic
- Dark theme with neon blue/purple gradients
- Glassmorphism effects
- Smooth hover animations
- Responsive mobile-first design
✅ Premium UI Elements
- Hero section with animated badge
- Feature cards with icons
- Multi-platform download buttons
- Sticky navigation (if implemented)
✅ Micro-Interactions
- Hover effects on buttons
- Card elevation on hover
- Smooth scroll animations
- Responsive transitions
- ✅ Desktop (1920px+)
- ✅ Laptop (1024px - 1920px)
- ✅ Tablet (768px - 1024px)
- ✅ Mobile (320px - 768px)
| Package | Version | Purpose |
|---|---|---|
| React | 18.2.0 | UI library |
| React-DOM | 18.2.0 | DOM rendering |
| Vite | 4.4.0 | Build tool & dev server |
- Primary: Inter (Google Fonts)
- Fallback: system-ui, -apple-system, BlinkMacSystemFont
- Node.js (v16.0.0 or higher)
- npm or yarn
# Clone repository
git clone https://github.com/yourusername/zerotrace.git
cd zerotrace/website
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:5173 to see the site!
{
"dev": "vite", // Start dev server
"build": "vite build", // Build for production
"preview": "vite preview" // Preview production build
}Vercel is the perfect platform for React apps:
✅ Zero Configuration
- Auto-detects Vite/React
- Optimizes builds automatically
- No setup required
✅ Lightning Fast
- Global CDN (Edge Network)
- Sub-second cold starts
- HTTP/3 support
✅ Developer Experience
- Git integration (auto-deploy on push)
- Preview deployments for PRs
- Instant rollbacks
✅ Free Tier Includes:
- ✅ Unlimited deployments
- ✅ 100GB bandwidth/month
- ✅ Automatic HTTPS
- ✅ Custom domains
- ✅ Analytics
-
Push to GitHub:
git init git add . git commit -m "Initial commit" git remote add origin https://github.com/yourusername/zerotrace.git git push -u origin main
-
Connect to Vercel:
- Go to vercel.com
- Click "New Project"
- Import your GitHub repository
- Select
website/as root directory - Click Deploy!
-
Done!
- Your site is live at
https://zerotrace.vercel.app - Every push to
mainauto-deploys - Preview URLs for each PR
- Your site is live at
# Install Vercel CLI
npm install -g vercel
# Navigate to website folder
cd website
# Deploy
vercel
# Follow prompts:
# - Link to existing project? No
# - Project name: zerotrace
# - Directory: ./
# - Build command: npm run build
# - Output directory: distClick this button:
Create vercel.json in website/ folder:
{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"devCommand": "npm run dev",
"installCommand": "npm install",
"framework": "vite",
"rewrites": [{ "source": "/(.*)", "destination": "/" }]
}- Go to Vercel Dashboard → Your Project
- Settings → Domains
- Add your domain (e.g.,
zerotrace.com) - Update DNS records as instructed
- HTTPS enabled automatically!
src/
├── App.jsx # Main app container
├── index.css # Global styles & design tokens
└── components/
├── Hero.jsx # Hero section with title & CTA
├── Features.jsx # Feature grid (3 cards)
├── DownloadSection.jsx # Platform download buttons
└── Footer.jsx # Copyright & credits
Purpose: First impression - captures attention
Features:
- Large title with gradient text
- "Open Source" badge with pulse animation
- Subtitle explaining the product
- Primary CTA button ("Download for Windows")
- Background gradient overlay
Key CSS:
.hero-title {
font-size: 4rem;
background: linear-gradient(to right, #00d9ff, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Purpose: Showcase key benefits in scannable format
Structure:
┌─────────────────────────────────────┐
│ FEATURES SECTION │
├──────────┬──────────┬───────────────┤
│ Card 1 │ Card 2 │ Card 3 │
│ 🔒 │ 📜 │ 🌐 │
│ Secure │ Proof │ Cross- │
│ Erase │ │ Platform │
└──────────┴──────────┴───────────────┘
Each Card Includes:
- Icon (emoji or SVG)
- Title
- Description
- Hover effect (elevation + glow)
Key Features:
- Grid layout (3 columns on desktop, stacks on mobile)
- Card design with backdrop blur
- Smooth hover animations
Purpose: Clear CTAs for each platform
Platforms:
┌─────────────────┬─────────────────┬─────────────────┐
│ 🪟 Windows │ 🐧 Linux │ 📱 Android │
│ Download MSI │ Coming Soon │ Coming Soon │
└─────────────────┴─────────────────┴─────────────────┘
Button States:
- Active (Windows): Primary blue with hover effect
- Disabled (Linux/Android): Grayed out with "Coming Soon"
Features:
- Platform icons
- File size/version info
- Responsive stacking on mobile
Purpose: Credits and legal info
Content:
- Copyright notice
- Year auto-update
- Optional links (Privacy, Terms, GitHub)
:root {
/* Primary Colors */
--primary-bg: #0a0a0f; /* Deep space black */
--secondary-bg: #1a1a2e; /* Dark navy */
--accent-blue: #00d9ff; /* Neon cyan */
--accent-purple: #a78bfa; /* Soft purple */
/* Text Colors */
--text-primary: #ffffff; /* White */
--text-secondary: #94a3b8; /* Muted gray */
/* UI Elements */
--card-bg: rgba(26, 26, 46, 0.6); /* Semi-transparent */
--border-color: rgba(0, 217, 255, 0.2);
/* Gradients */
--gradient-primary: linear-gradient(135deg, #00d9ff 0%, #a78bfa 100%);
--gradient-glow: radial-gradient(
circle,
rgba(0, 217, 255, 0.1) 0%,
transparent 70%
);
}/* Headings */
h1 {
font-size: 3.5rem;
font-weight: 800;
}
h2 {
font-size: 2.5rem;
font-weight: 700;
}
h3 {
font-size: 1.75rem;
font-weight: 600;
}
/* Body */
body {
font-size: 1rem;
line-height: 1.6;
}--space-xs: 0.5rem; /* 8px */
--space-sm: 1rem; /* 16px */
--space-md: 1.5rem; /* 24px */
--space-lg: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-2xl: 4rem; /* 64px *//* Button Hover */
.cta-button {
transition: all 0.3s ease;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 40px rgba(0, 217, 255, 0.4);
}
/* Card Hover */
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 217, 255, 0.15);
}@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.badge {
animation: pulse 2s ease-in-out infinite;
}Already implemented in index.html:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="ZeroTrace - Professional data wiping tool with military-grade security"
/>
<meta
name="keywords"
content="data wipe, secure erase, DoD, NIST, data destruction"
/>
<meta property="og:title" content="ZeroTrace - Secure Data Wiping" />
<meta
property="og:description"
content="Professional data destruction software"
/>
<meta property="og:type" content="website" />
<title>ZeroTrace - Secure Data Wiping Tool</title>
</head>- ✅ Fast initial load (<1s on Vercel)
- ✅ Semantic HTML5 elements
- ✅ Descriptive alt text for images
- ✅ Clean URL structure
- ✅ Mobile-responsive (Google ranking factor)
Performance: 95+ 🟢
Accessibility: 95+ 🟢
Best Practices: 100 🟢
SEO: 100 🟢
✅ Code Splitting
- Vite automatically splits vendor and app code
- Lazy loading for components
✅ Asset Optimization
- Minified CSS/JS
- Tree-shaking (unused code removed)
- Gzip compression on Vercel
✅ Caching
- Vercel CDN caches static assets
- Browser caching headers
✅ Font Optimization
- Google Fonts with
font-display: swap - Preconnect to fonts.googleapis.com
npm install @vercel/analytics// src/main.jsx
import { inject } from "@vercel/analytics";
inject();Get Insights:
- Page views
- User locations
- Performance metrics
- Real user monitoring
Edit src/index.css:
:root {
--accent-blue: #your-color-here;
--accent-purple: #your-color-here;
}Create new component:
// src/components/Testimonials.jsx
export default function Testimonials() {
return <section className="testimonials">{/* Your content */}</section>;
}Import in App.jsx:
import Testimonials from "./components/Testimonials";
// In JSX:
<Testimonials />;# Clear cache
rm -rf node_modules
npm install
npm run devCheck:
- Build command:
npm run build - Output directory:
dist - Node version: 16.x or higher
MIT License - See LICENSE file
- Fork the repo
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
- 🌐 Website: zerotrace.vercel.app
- 📧 Email: support@zerotrace.com
- 💬 Discord: Join our server
