Overview #

Veridian Labs is a static, front-end website template for a technology consulting firm. It features two homepage variants, service showcases, a portfolio/project section, a team directory, blog layouts, an FAQ page, a resource shop, and a contact page with Google Maps integration.

The site is designed with a professional, corporate technology aesthetic — clean layouts, teal accent colours, scroll-triggered animations, and inline SVG icons for crisp rendering at any resolution.

Branding Details #

Technology Stack #

Installation #

Prerequisites

• A web server (Apache, Nginx, or any static file server) to serve HTML files.
• PHP — required only for the contact form email functionality via inc/sendemail.php.
• A Google Maps API key — needed for the styled map on the contact page.

Quick Start

1. Clone the repository

   git clone https://github.com/your-username/veridian-labs.git
   cd veridian-labs

2. Start a local server

   # Python 3
   python -m http.server 8000
   
   # Node.js
   npx http-server .
   
   # PHP (enables contact form)
   php -S localhost:8000

3. Open in your browser

   http://localhost:8000/index.html

Configuration #

All Pages #

Homepage #

The primary landing page (index.html) features the following sections:

1. Hero Slider
   Full-width Camera.js image slider with 3 slides and animated captions — "Empowering businesses through digital innovation" / "We Build Your Digital Future".
2. Top Features Carousel
   Owl Carousel showcasing 4 pillars with inline SVG icons: Cloud Architecture, Smart Automation, Tech Innovation, Growth Analytics.
3. About Company
   Split layout with image and description. Lists Vision, Missions, and Goals with Flaticon icons.
4. Feature Banner
   Full-width parallax call-to-action: "We deliver enterprise-grade digital solutions & innovative technology for scalable growth."
5. Services Grid
   Six service cards with image thumbnails and short descriptions linking to detail pages.
6. Testimonial Slider
   Owl Carousel with 3 client quotes from Rachel Foster, Daniel Kim, and Priya Sharma.
7. Team Section
   Four team member cards with photo, role, hover overlay, and social links.
8. Counter Stats
   Animated counters triggered on scroll: 30+ Years in Technology, 100% Client Retention, 53k Projects Delivered, 24 Tech Experts.
9. Consultation Form
   Fields: Name, Phone, Email, Service dropdown (Digital Strategy, Cloud Computing, Data Analytics, AI & ML), Message.
10. Partners / Clients Banner
    Scrolling partner logo carousel with 5 partner logos.

About Page #

Company overview page with inner banner, breadcrumb navigation, and detailed company information including mission statement, core values, and team philosophy.

Services #

Two service page variants (service.html and service-v2.html) showcase six core offerings:

Each service links to a detail page (service-details.html) with an in-depth description, process breakdown, and sidebar navigation.

Portfolio / Projects #

A filterable project showcase grid (project.html) displaying completed works with images, categories, and hover overlays. Individual case study pages (project-details.html) contain project specifics, galleries, and related projects.

Team #

Full team directory (team.html). Featured members on the homepage:

Each card includes a photo, role label, hover overlay, and social media links (Facebook, Twitter, LinkedIn, Pinterest).

Blog #

Blog content is available in three layouts:

• List view (blog.html) — posts in a vertical list with sidebar.
• Grid view (blog-grid.html) — posts in a responsive card grid.
• Detail view (blog-details.html) — full post with author info, comments, sidebar widgets, and related posts.

Contact Page #

• Styled Google Map using Snazzy Maps with custom colour theme.
• Contact form with AJAX submission and jQuery Validate validation (Name, Phone, Email, Website, Message).
• Four branch addresses: San Francisco (HQ), Melbourne, Berlin, London.

FAQ #

Bootstrap accordion (faq.html) with 6 expandable questions covering:

• Client engagement process
• Project timelines
• Dedicated teams
• Technology stacks used
• Data privacy & compliance
• Agile project approach

Resources / Shop #

A product/resource listing grid (shop.html) with image thumbnails, prices, and add-to-cart functionality. Individual detail pages (shop-details.html) include image gallery, description, quantity selector, and related products.

404 Error Page #

A custom error page (404.html) with a large "404" heading, a "Go Home" button linking back to the homepage, and a search input field.

Project Structure #

Navigation Map #

The site's main menu shared across all pages:

Site-Wide Features #

Color Palette #

Typography #

Visual Style #

• Aesthetic: Modern, clean, corporate technology look.
• Footer: Dark teal-green gradient background with light text.
• Icons: Inline SVG icons throughout service sections for crisp rendering at any resolution.
• Backgrounds: Parallax fixed backgrounds on feature/CTA banners.
• Hover effects: Overlay reveals on team and portfolio cards.
• CTA buttons: Consistent .theme-button-one class across all call-to-action elements.
• SVG icon style: Teal stroke (#0d9488) with low-opacity fills (rgba(13,148,136, 0.04–0.15)).

JavaScript Plugins & Libraries #

Theme.js Reference #

The main js/theme.js file initialises all interactive components:

Contact Form #

Client-Side

• Validation: jQuery Validate plugin with required rules for Name, Email, Phone, and Message fields.
• Submission: AJAX via jQuery Form plugin — submits to inc/sendemail.php.
• Feedback: Success / error alert divs displayed inline with close buttons.

Server-Side

The backend handler at inc/sendemail.php uses PHP's native mail() function.

Consultation Form (Homepage)

The homepage also includes a consultation form with fields: Name, Phone, Email, Service dropdown (Digital Strategy, Cloud Computing, Data Analytics, AI & ML), and Message.

Browser Support #

Credits & License #

Credits

License

This project is a front-end template. Please refer to the individual vendor/plugin licenses in their respective directories for third-party code usage terms.