✨ Thank You for Choosing Startify!

🚀 Introduction

Startify is a premium Bootstrap 5 template built for modern startups, SaaS products, and tech companies. It includes AI-powered components, investor-ready dashboards, and growth analytics tools.

✨ Key Features

📁 File Structure

After unzipping the package, you'll see this organized structure:

startify-pro/
│
├── 📄 index.html                # Main HTML file
│
├── 📁 assets/
│   ├── 📁 css/
│   │   ├── main.css                 # Main CSS (compiled)
│   │   └── bootstrap.min.css        # Bootstrap 5 core
│   │
│   ├── 📁 js/
│   │   ├── app.js                   # Custom JS
│   │   └── bootstrap.min.js         # Bootstrap JS
│   │
│   ├── 📁 scss/
│   │   ├── main.scss                # Main SCSS source
│   │   ├── _variables.scss          # Colors & variables
│   │   ├── _components.scss         # Reusable components
│   │   └── _more.scss                # Dark mode + styles
│   │
│   └── 📁 images/                    # All images & icons
│       └── All Images
│
└── 📁 documentation/             # This documentation

🎨 Customization (SCSS)

1️⃣ Change Primary Colors

Open assets/scss/_variables.scss and modify these values:

// _variables.scss - Your Brand Colors
$primary: #2563EB;         // Royal Blue
$primary-light: #3b82f6;   // Light blue
$primary-dark: #1d4ed8;    // Dark blue
$accent: #4f46e5;          // Accent color for logo
$primary-gradient: linear-gradient(135deg, $primary, $accent);

// Other brand colors
$secondary: #10b981;         // Success green
$danger: #ef4444;            // Error red
$dark: #111827;              // Dark background
$light: #f9fafb;             // Light background

2️⃣ Compile SCSS to CSS

If you're using SCSS (recommended), compile with:

# Using command line
cd startify-pro
sass --watch assets/scss/main.scss:assets/css/main.css

# Or use VS Code extension "Live Sass Compiler"

3️⃣ Direct CSS Override

Quick color change without SCSS (in assets/css/main.css):

:root {
  --primary: #2563EB;
  --accent: #4f46e5;
  --primary-gradient: linear-gradient(135deg, #2563EB, #4f46e5);
}

🧩 Core Components (From Live Demo)

Startify comes with 50+ reusable components. Here are the main components from the live template:

📌 1. Header with Logo & Mobile Menu

<!-- Startify Header Component with Your Logo -->
<header class="startify-header">
  <div class="container">
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <!-- Logo with SVG (Your Startify Logo) -->
        <a class="navbar-brand logo" href="/">
          <div class="logo-icon">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
              <circle cx="16" cy="16" r="12" fill="url(#logoGradient)"/>
              <path d="M12 12H20V14H14V16H18V20H12V18H16V16H12V12Z" fill="white"/>
              <defs>
                <linearGradient id="logoGradient" x1="4" y1="4" x2="28" y2="28">
                  <stop stop-color="var(--primary)"/>
                  <stop offset="1" stop-color="var(--accent)"/>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <span class="logo-text">Start<span class="logo-highlight">ify</span></span>
        </a>

        <!-- Desktop Navigation -->
        <div class="collapse navbar-collapse">
          <ul class="navbar-nav mx-auto">
            <li><a class="nav-link" href="#home">Home</a></li>
            <li><a class="nav-link" href="#features">Features</a></li>
            <li><a class="nav-link" href="#templates">Templates</a></li>
            <li><a class="nav-link" href="#pricing">Pricing</a></li>
            <li><a class="nav-link" href="#team">Team</a></li>
            <li><a class="nav-link" href="#contact">Contact</a></li>
          </ul>
        </div>

        <!-- Theme Toggle & Actions -->
        <div class="header-actions">
          <button class="theme-toggle" id="themeToggle">
            <i class="ri-sun-line light-icon"></i>
            <i class="ri-moon-line dark-icon"></i>
          </button>
          <a href="#" class="btn btn-ghost d-none d-lg-flex">Sign In</a>
          <a href="#" class="btn btn-primary d-none d-lg-flex">
            Get Started <i class="ri-arrow-right-line"></i>
          </a>
        </div>

        <!-- Mobile Toggle Button -->
        <button class="mobile-toggle" id="mobileToggle">
          <i class="ri-menu-line"></i>
        </button>
      </div>
    </nav>
  </div>

  <!-- Mobile Menu (Full Screen) -->
  <div class="mobile-menu" id="mobileMenu">
    <div class="mobile-menu-header">
      <div class="logo">
        <div class="logo-icon">
          <svg width="32" height="32" viewBox="0 0 32 32">
            <circle cx="16" cy="16" r="12" fill="url(#logoGradient)"/>
            <path d="M12 12H20V14H14V16H18V20H12V18H16V16H12V12Z" fill="white"/>
          </svg>
        </div>
        <span>Start<span class="logo-highlight">ify</span></span>
      </div>
      <button class="mobile-close" id="mobileClose">
        <i class="ri-close-line"></i>
      </button>
    </div>
    
    <div class="mobile-menu-body">
      <ul class="mobile-nav">
        <li><a href="#home"><i class="ri-home-line"></i>Home</a></li>
        <li><a href="#features"><i class="ri-rocket-line"></i>Features</a></li>
        <li><a href="#templates"><i class="ri-layout-line"></i>Templates</a></li>
        <li><a href="#pricing"><i class="ri-price-tag-3-line"></i>Pricing</a></li>
        <li><a href="#team"><i class="ri-team-line"></i>Team</a></li>
        <li><a href="#contact"><i class="ri-customer-service-line"></i>Contact</a></li>
      </ul>
      
      <div class="mobile-actions">
        <a href="#" class="btn btn-outline w-100"><i class="ri-user-line"></i>Sign In</a>
        <a href="#" class="btn btn-primary w-100"><i class="ri-rocket-2-line"></i>Get Started Free</a>
      </div>
    </div>
  </div>
</header>

🚀 2. Hero Section with Visual Card

<!-- Startify Hero Section -->
<section class="hero" id="home">
  <div class="hero-bg">
    <div class="gradient-sphere sphere-1"></div>
    <div class="gradient-sphere sphere-2"></div>
  </div>

  <div class="container">
    <div class="hero-grid">
      <!-- Left Content -->
      <div class="hero-content">
        <div class="live-badge-wrapper">
          <span class="live-badge">
            <span class="live-dot"></span>
            <span>2,500+ startups launched</span>
          </span>
        </div>

        <h1 class="hero-heading">
          Build your <span class="gradient-primary">dream startup</span><br>
          without writing code
        </h1>

        <p class="hero-subheading">
          From idea to $1M ARR in months, not years. Startify gives you 
          AI-powered tools, investor network, and expert mentorship.
        </p>

        <div class="cta-group">
          <a href="#" class="btn btn-primary">
            <i class="ri-rocket-2-line"></i>
            Start Free Trial
          </a>
          <a href="#" class="btn btn-ghost">
            <i class="ri-play-circle-line"></i>
            Watch Demo
          </a>
        </div>

        <div class="stats-row">
          <div class="stat-item">
            <span class="stat-number">10K+</span>
            <span class="stat-label">Active founders</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span class="stat-number">$2B+</span>
            <span class="stat-label">Funding raised</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span class="stat-number">94%</span>
            <span class="stat-label">Success rate</span>
          </div>
        </div>
      </div>

      <!-- Right Visual Card -->
      <div class="hero-visual">
        <div class="visual-card">
          <div class="card-header">
            <div class="card-title">
              <div class="brand-icon">
                <svg width="24" height="24" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="8" fill="white"/>
                  <path d="M8 8H16V9.5H11V11H14V15H8V13.5H12V11H8V8Z" fill="var(--primary)"/>
                </svg>
              </div>
              <div>
                <h4>Startify</h4>
                <p>Dashboard</p>
              </div>
            </div>
            <span class="status-badge">● Live</span>
          </div>

          <div class="metrics-grid">
            <div class="metric-box">
              <div class="metric-icon purple">
                <i class="ri-money-dollar-circle-line"></i>
              </div>
              <div>
                <span class="metric-label">MRR</span>
                <span class="metric-value">$45.2K</span>
              </div>
              <span class="metric-trend up">+28%</span>
            </div>
            <div class="metric-box">
              <div class="metric-icon pink">
                <i class="ri-user-line"></i>
              </div>
              <div>
                <span class="metric-label">Users</span>
                <span class="metric-value">2.8K</span>
              </div>
              <span class="metric-trend up">+45%</span>
            </div>
          </div>

          <div class="chart-container">
            <div class="chart-header">
              <span>Revenue growth</span>
              <span class="chart-period">Last 6 months</span>
            </div>
            <div class="chart-bars">
              <div class="bar" style="height: 40px"><span>Jan</span></div>
              <div class="bar" style="height: 55px"><span>Feb</span></div>
              <div class="bar" style="height: 65px"><span>Mar</span></div>
              <div class="bar" style="height: 50px"><span>Apr</span></div>
              <div class="bar" style="height: 70px"><span>May</span></div>
              <div class="bar" style="height: 75px"><span>Jun</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

⚡ 3. Feature Card (AI Engine Style)

<!-- Startify Feature Card with 3D Effect -->
<div class="feature-card" data-aos="flip-left">
  <div class="card-content">
    <div class="card-icon">
      <div class="icon-bg">
        <i class="ri-brain-line"></i>
      </div>
      <div class="icon-glow"></div>
    </div>
    
    <h3 class="card-title">AI Engine</h3>
    <p class="card-desc">
      Generate pitch decks, business plans, and marketing copy in seconds with our proprietary AI.
    </p>
    
    <div class="card-stats">
      <div class="stat">
        <span class="value">10x</span>
        <span class="label">faster</span>
      </div>
      <div class="stat">
        <span class="value">98%</span>
        <span class="label">accuracy</span>
      </div>
    </div>
    
    <a href="#" class="card-link">
      Learn more <i class="ri-arrow-right-up-line"></i>
    </a>
  </div>
  <div class="card-glow"></div>
</div>

💰 4. Pricing Card (Pro Plan)

<!-- Startify Pricing Card (Most Popular) -->
<div class="pricing-card glass-card popular">
  <div class="popular-badge">
    <i class="ri-crown-fill"></i>
    Most Popular
    <i class="ri-crown-fill"></i>
  </div>

  <div class="card-content">
    <div class="plan-icon">
      <i class="ri-rocket-2-fill"></i>
    </div>

    <h3 class="plan-name">Pro</h3>

    <div class="plan-price">
      <span class="price-amount monthly">$29</span>
      <span class="price-amount yearly">$23</span>
      <span class="price-period">/month</span>
    </div>

    <p class="plan-desc">Everything to launch & grow</p>

    <div class="plan-features">
      <div class="feature">
        <i class="ri-checkbox-circle-fill"></i>
        <span>5 startup projects</span>
      </div>
      <div class="feature">
        <i class="ri-checkbox-circle-fill"></i>
        <span>Advanced AI tools</span>
      </div>
      <div class="feature">
        <i class="ri-checkbox-circle-fill"></i>
        <span>50+ templates</span>
      </div>
      <div class="feature">
        <i class="ri-checkbox-circle-fill"></i>
        <span>Investor matching</span>
      </div>
    </div>

    <button class="btn-plan btn-primary w-100">
      <span>Start 14-day free trial</span>
      <i class="ri-arrow-right-line"></i>
    </button>

    <div class="plan-footer">
      <i class="ri-award-line"></i>
      <span>95% users recommend</span>
    </div>
  </div>
  <div class="card-glow"></div>
</div>

👥 5. Team Member Card

<!-- Startify Team/Founder Card -->
<div class="team-card glass-card">
  <div class="row g-0 h-100">
    <div class="col-md-5">
      <div class="team-image">
        <img src="assets/images/team/alex-chen.webp" alt="Alex Chen">
        <div class="image-badge">
          <i class="ri-crown-fill"></i>
          <span>CEO</span>
        </div>
      </div>
    </div>

    <div class="col-md-7">
      <div class="team-content p-4">
        <h3 class="team-name">Alex Chen</h3>
        <p class="team-role">CEO & Co-founder</p>

        <p class="team-bio">
          Former Google PM, exited 3 startups. Expert in scaling SaaS products to $100M+.
        </p>

        <div class="team-expertise">
          <span class="expertise-tag">SaaS Scaling</span>
          <span class="expertise-tag">Product Strategy</span>
          <span class="expertise-tag">Fundraising</span>
        </div>

        <div class="team-social">
          <a href="#" class="social-link"><i class="ri-linkedin-fill"></i></a>
          <a href="#" class="social-link"><i class="ri-twitter-fill"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="card-glow"></div>
</div>

📱 6. Template Card

<!-- Startify Template Card -->
<div class="template-card featured">
  <div class="card-media">
    <img src="assets/images/templates/saas-dashboard.webp" alt="SaaS Dashboard">
    <div class="media-overlay">
      <button class="overlay-btn">
        <i class="ri-eye-line"></i> Quick Preview
      </button>
    </div>
    <div class="media-badges">
      <span class="badge featured">⭐ Editor's Pick</span>
      <span class="badge hot">🔥 Hot</span>
    </div>
  </div>

  <div class="card-content">
    <div class="d-flex justify-content-between align-items-start mb-3">
      <div>
        <h3 class="card-title">SaaS Analytics Pro</h3>
        <div class="card-meta">
          <span><i class="ri-download-line"></i> 2.4k</span>
          <span><i class="ri-star-fill text-warning"></i> 4.8 (324)</span>
        </div>
      </div>
      <span class="category-tag">SaaS</span>
    </div>

    <p class="card-desc">
      Complete analytics dashboard with 20+ charts, user management & real-time updates.
    </p>

    <div class="card-tech">
      <span>React</span>
      <span>Tailwind</span>
      <span>TypeScript</span>
    </div>
  </div>
  <div class="card-glow"></div>
</div>

🎯 7. Footer with Newsletter & Logo

<!-- Startify Footer -->
<footer class="footer">
  <div class="footer-bg">
    <div class="gradient-orb orb-1"></div>
    <div class="gradient-orb orb-2"></div>
  </div>

  <div class="container position-relative">
    <!-- Main Footer Content -->
    <div class="footer-main">
      <div class="row g-5">
        <!-- Company Info with Logo -->
        <div class="col-lg-4">
          <div class="footer-brand">
            <a class="footer-logo" href="/">
              <div class="logo-icon">
                <svg width="32" height="32" viewBox="0 0 32 32">
                  <circle cx="16" cy="16" r="12" fill="url(#logoGradient)"/>
                  <path d="M12 12H20V14H14V16H18V20H12V18H16V16H12V12Z" fill="white"/>
                </svg>
              </div>
              <span class="logo-text">Start<span class="logo-highlight">ify</span></span>
            </a>

            <p class="footer-desc">
              The complete platform for modern startups. From idea validation to exit,
              we provide everything you need to build, launch, and scale your business.
            </p>

            <div class="footer-contact">
              <div class="contact-item">
                <i class="ri-mail-line"></i>
                <a href="mailto:hello@startify.com">hello@startify.com</a>
              </div>
              <div class="contact-item">
                <i class="ri-phone-line"></i>
                <a href="tel:+18005551234">+1 (800) 555-1234</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Links -->
        <div class="col-lg-8">
          <div class="row g-4">
            <div class="col-md-4 col-6">
              <div class="footer-links">
                <h3 class="footer-title">Company</h3>
                <ul class="footer-menu">
                  <li><a href="#home">Home</a></li>
                  <li><a href="#features">Features</a></li>
                  <li><a href="#templates">Templates</a></li>
                </ul>
              </div>
            </div>
            <div class="col-md-4 col-6">
              <div class="footer-links">
                <h3 class="footer-title">Resources</h3>
                <ul class="footer-menu">
                  <li><a href="#pricing">Pricing</a></li>
                  <li><a href="#success">Success Stories</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Newsletter -->
    <div class="newsletter-wrapper glass-card">
      <div class="row align-items-center">
        <div class="col-lg-7">
          <div class="newsletter-content">
            <h3>Join 50,000+ founders</h3>
            <p>Weekly insights on startup growth, funding, and product management.</p>
          </div>
        </div>
        <div class="col-lg-5">
          <form class="newsletter-form">
            <input type="email" class="form-control" placeholder="Enter your email">
            <button class="btn-submit" type="submit">Subscribe</button>
          </form>
        </div>
      </div>
    </div>

    <!-- Footer Bottom -->
    <div class="footer-bottom">
      <p>© 2026 Startify, Inc. All rights reserved.</p>
      <p class="design-credit">Design by <span>PriHarsh Design</span></p>
    </div>
  </div>

  <!-- Scroll to Top -->
  <button class="scroll-top" id="scrollTop">
    <i class="ri-arrow-up-line"></i>
  </button>
</footer>

🌓 Dark Mode Support

Startify comes with built-in dark mode. Toggle by changing the data-theme attribute:

🌞 Light Mode (Default)

<html data-theme="light">
  <!-- Your content automatically adjusts -->
</html>

🌙 Dark Mode

<html data-theme="dark">
  <!-- Your content automatically adjusts -->
</html>

🔄 Theme Toggle JavaScript

// assets/js/app.js
document.getElementById('themeToggle').addEventListener('click', function() {
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-theme');
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
  
  html.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});

// Load saved preference
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

🙏 Credits & Resources

🛟 Support

📝 Changelog