# VorinVista Business Voriny Template

A professional, modern business strategy template customized with VorinVista's brand identity. Perfect for agencies, consultancies, and professional services.

## ✓ Features

- **Responsive Design**: Bootstrap 5 framework ensures perfect display on all devices
- **Dark Theme**: Modern dark color scheme with VorinVista brand colors
- **Multiple Pages**: Index, portfolio details, service details, and starter page included
- **Smooth Animations**: AOS (Animate On Scroll) library integrated
- **Portfolio Showcase**: Beautiful portfolio grid with lightbox gallery
- **Team Section**: Showcase your team with style
- **Contact Forms**: Ready-to-use contact form templates
- **Modern Components**: Cards, buttons, and UI elements styled to perfection

## 📁 File Structure

```
Strategy/
├── index.html                 # Main homepage
├── inAway.html               # Alternative homepage layout
├── portfolio-details.html    # Portfolio detail page
├── service-details.html      # Service detail page
├── starter-page.html         # Blank starter template
├── README.md                 # This file
├── Readme.txt               # Original credits
├── assets/
│   ├── css/
│   │   └── main.css         # Main stylesheet (customized for VorinVista)
│   ├── img/                 # Image assets (replace with your own)
│   ├── js/
│   │   └── main.js          # JavaScript functionality
│   ├── scss/                # SCSS source files
│   └── vendor/              # Third-party libraries
│       ├── bootstrap/
│       ├── bootstrap-icons/
│       ├── aos/
│       ├── glightbox/
│       └── swiper/
└── forms/                   # PHP contact form handler
```

## 🎨 VorinVista Brand Colors

This template has been customized with VorinVista's signature color palette:

- **Primary Background**: `#011538` (Deep navy blue)
- **Surface Color**: `#0B409C` (VorinVista blue)
- **Accent Color**: `#F17020` (VorinVista orange)
- **Heading Color**: `#F3F7FB` (Light blue-white)
- **Text Color**: `rgba(255, 255, 255, 0.85)` (Soft white)

### Customizing Colors

To adjust the color scheme, edit [assets/css/main.css](assets/css/main.css) lines 20-28:

```css
:root { 
  --background-color: #011538;
  --default-color: rgba(255, 255, 255, 0.85);
  --heading-color: #F3F7FB;
  --accent-color: #F17020;
  --surface-color: #0B409C;
  --contrast-color: #ffffff;
}
```

## 🚀 Quick Start

### Option 1: Direct Use
1. Extract the template files
2. Open `index.html` in your browser
3. Replace placeholder images in `assets/img/` with your own
4. Customize text content throughout the HTML files
5. Upload to your web hosting

### Option 2: Local Development Server
```bash
# Using Python
python -m http.server 8000

# Using Node.js
npx http-server

# Then open http://localhost:8000
```

### Option 3: Deploy to Netlify/Vercel
1. Drag and drop the entire folder to Netlify Drop
2. Or connect your Git repository to Vercel
3. Deploy instantly - no build process required

## 🔧 Customization Guide

### Updating Business Name
Replace "VorinVista" in all HTML files (5 files total):
- [index.html](index.html) line 49
- [inAway.html](inAway.html) line 49
- [portfolio-details.html](portfolio-details.html) line 49
- [service-details.html](service-details.html) line 49
- [starter-page.html](starter-page.html) line 49

### Adding Your Logo
Uncomment line 48 in each HTML file and add your logo:
```html
<img src="assets/img/logo.png" alt="Your Company">
```

### Replacing Images
Replace these placeholder images with your own:
- `assets/img/hero-bg.jpg` - Hero section background
- `assets/img/about.jpg` - About section image
- `assets/img/portfolio/*` - Portfolio items
- `assets/img/team/*` - Team member photos
- `assets/img/favicon.png` - Browser favicon (32×32px)
- `assets/img/apple-touch-icon.png` - iOS icon (180×180px)

### Meta Tags & SEO
Update meta tags in the `<head>` section of each page:
```html
<title>Your Business Name - Professional Services</title>
<meta name="description" content="Your business description">
<meta name="keywords" content="your, keywords, here">
```

### Contact Form Setup
The contact form uses PHP. Configure `forms/contact.php`:
1. Update the recipient email address
2. Upload to a PHP-enabled server
3. Or integrate with services like Formspree, FormSubmit, or Web3Forms

## 📱 Pages Included

1. **index.html** - Main homepage with:
   - Hero section with CTA
   - About section
   - Services grid
   - Portfolio gallery
   - Team showcase
   - Testimonials
   - Contact form

2. **inAway.html** - Alternative homepage layout

3. **portfolio-details.html** - Individual portfolio project page

4. **service-details.html** - Individual service page

5. **starter-page.html** - Blank template for new pages

## 🌐 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## ⚡ Performance

- Optimized CSS and JavaScript
- Lazy loading ready
- Minified vendor libraries
- Mobile-first responsive design

## 📄 License

This template is based on the Voriny template by vorinvista.com.  
**License**: https://vorinvista.com/license/

**Customization**: VorinVista  
**Base Template**: Voriny by vorinvista.com  
**Bootstrap Version**: 5.3.6

### Usage Terms
✓ Use for personal projects  
✓ Use for client projects  
✓ Modify and customize  
✗ Redistribute as-is  
✗ Create template marketplace products  

## 🛠️ Tech Stack

- **Framework**: Bootstrap 5.3.6
- **Icons**: Bootstrap Icons
- **Animations**: AOS (Animate On Scroll)
- **Lightbox**: GLightbox
- **Slider**: Swiper
- **Fonts**: Google Fonts (Roboto, Raleway, Nunito Sans)

## 💡 Support

For VorinVista Voriny template customization questions:
- Visit: https://vorinvista.com
- Contact: Through VorinVista website

For original template support:
- Visit: https://vorinvista.com/voriny-bootstrap-agency-template/

## 🎯 Credits

- **Template Design**: vorinvista.com
- **Bootstrap Framework**: Twitter Bootstrap
- **Icons**: Bootstrap Icons
- **Animations**: Michał Sajnóg (AOS)
- **Lightbox**: biati digital (GLightbox)
- **Slider**: Vladimir Kharlampidi (Swiper)
- **Customization**: VorinVista

---

**VorinVista Business Voriny Template** - Customized for professional excellence.
