Demo Pages Configuration

Demo Pages Overview

Basic Structure

---
layout: demo14
title: Demo Layout 14
permalink: /demo14/

# Hero Section
hero:
  title: Creative. Smart. Awesome.
  subtitle: We are an award winning digital agency that strongly believes in the power of creative ideas.
  button:
    text: Read More
    url: /about
    
# Projects Section
projects:
  title: Our Projects
  subtitle: Check out some of our awesome projects with creative ideas.
---

Include Structure

_includes/
  └── components/
      └── sections/
          ├── demo1/
          │   ├── hero.html
          │   ├── about.html
          │   └── projects.html
          ├── demo2/
          │   ├── header.html
          │   └── portfolio.html
          └── demo3/
              ├── services.html
              └── testimonials.html

Common Section Types

Hero Sections

hero:
  style: "carousel"  # Options: basic, video, carousel
  title: "Welcome to Sandbox"
  subtitle: "Build better websites with Sandbox"
  background_image: "/assets/img/photos/bg1.webp"
  buttons:
    - text: "Get Started"
      url: "/contact"
      style: "primary"
    - text: "Learn More"
      url: "/about"
      style: "outline"

Project Showcases

projects:
  title: "Latest Projects"
  title_class: "fs-16 text-uppercase text-muted mb-3"
  main_title: "Check out some of our awesome projects"
  project_items:
    - image: "/assets/img/photos/pd1.webp"
      category: "Development"
      title: "Project Title"
      url: "/single-project.html"

Layout Customization

Color Schemes

colors:
  primary: "purple"
  secondary: "yellow"
  background: "light"
  
sections:
  about:
    background_color: "soft-primary"
    text_color: "primary"
  services:
    background_color: "gray"
    text_color: "dark"

Common Components

Navigation

navigation:
  style: "transparent"  # Options: solid, transparent, sticky
  color: "light"        # Options: light, dark
  button:
    text: "Contact"
    url: "/contact"
    style: "primary"

Footer Styles

footer:
  style: "widget"  # Options: simple, widget, extended
  background: "dark"
  logo: "/assets/img/logo-light.webp"
  widgets:
    - title: "About Us"
      content: "Company description here"
    - title: "Contact Info"
      contact_details: true

Demo Categories

Corporate Demos (Demo1-Demo8)

{% include components/sections/demo1/services.html %}
{% include components/sections/demo1/team.html %}
{% include components/sections/demo1/solutions.html %}

# Common sections in corporate demos:
- Hero with business messaging
- Service offerings
- Team showcase
- Client testimonials
- Case studies/portfolio
- Contact information

Creative Agency Demos (Demo9-Demo15)

portfolio:
  style: "grid"  # Options: grid, masonry, carousel
  items_per_row: 3
  show_filters: true
  categories:
    - Branding
    - Digital
    - Motion
  items:
    - title: "Project Name"
      category: "Branding"
      image: "/assets/img/portfolio/1.webp"

Product/App Demos (Demo16-Demo23)

features:
  layout: "grid"  # Options: grid, tabs, accordion
  items:
    - icon: "uil-mobile-android"
      title: "Mobile Ready"
      description: "Responsive design that works on all devices"
      
pricing:
  period_toggle: true  # Enable monthly/yearly toggle
  plans:
    - name: "Basic"
      price: 
        monthly: 19
        yearly: 199
      features:
        - "5 Projects"
        - "100 GB Storage"

Landing Pages (Demo24-Demo34)

cta:
  style: "fullwidth"  # Options: fullwidth, boxed, split
  background: "primary"
  title: "Ready to get started?"
  button:
    text: "Sign Up Now"
    url: "/signup"
    
testimonials:
  style: "carousel"
  autoplay: true
  items:
    - author: "John Doe"
      company: "Company Name"
      content: "Testimonial text here"

Advanced Customization

Custom Section Creation

# File: _includes/components/sections/demo1/custom-section.html

  
    
      
        {{ page.custom_section.title }}
        {{ page.custom_section.content }}

Component Variations

hero_variations:
  - style: "basic"
    classes: "bg-light"
  - style: "video"
    video_url: "path/to/video.mp4"
  - style: "carousel"
    interval: 5000
  - style: "parallax"
    image: "background.webp"

Best Practices

Performance Optimization

• Use appropriate image sizes and formats
• Minimize custom JavaScript
• Leverage built-in lazy loading
• Utilize CSS utility classes

Responsive Design Guidelines

• Use Bootstrap grid system consistently
• Test on multiple device sizes
• Implement mobile-first approach
• Consider touch interfaces