<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Corporate Consulting Hero Template with Bar-Chart Loader</title>
<meta name="description" content="Free GSAP corporate consulting landing page hero from ToolsWaves" />
<meta name="generator" content="ToolsWaves - https://toolswaves.in/landing-pages" />
<!-- Open Graph -->
<meta property="og:title" content="Free Corporate Consulting Hero Template with Bar-Chart Loader" />
<meta property="og:description" content="Free GSAP corporate consulting landing page hero from ToolsWaves" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://toolswaves.in/og?title=Free%20Corporate%20Consulting%20Hero%20Template%20with%20Bar-Chart%20Loader&category=Landing%20Page&icon=%F0%9F%93%84" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Free Corporate Consulting Hero Template with Bar-Chart Loader" />
<meta name="twitter:description" content="Free GSAP corporate consulting landing page hero from ToolsWaves" />
<meta name="twitter:image" content="https://toolswaves.in/og?title=Free%20Corporate%20Consulting%20Hero%20Template%20with%20Bar-Chart%20Loader&category=Landing%20Page&icon=%F0%9F%93%84" />
<!-- Bootstrap (used by template — replace with your own framework if you prefer) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--ink: #0d1b3d;
--navy: #1a2b5c;
--navy-deep: #0d3172;
--blue: #2a6fdc;
--blue-soft: #5a8de8;
--muted: rgba(13, 27, 61, 0.6);
--line: rgba(13, 27, 61, 0.1);
--bg: #ffffff;
--bg-soft: #f3f6fb;
}
html, body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--ink);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.back-link {
position: fixed;
bottom: 0.75rem;
left: 0.75rem;
z-index: 1000;
color: var(--ink);
text-decoration: none;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.12em;
padding: 0.45rem 0.9rem;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: 0 4px 12px rgba(13, 27, 61, 0.08);
opacity: 0.85;
transition: opacity 0.3s, transform 0.3s;
}
.back-link:hover { opacity: 1; transform: translateY(-2px); }
/* =========================================================
LOADER — Growing chart
========================================================= */
.loader {
position: fixed;
inset: 0;
z-index: 999;
background: var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
.loader__chart {
width: min(340px, 75vw);
padding: 1rem;
}
.loader__svg { width: 100%; height: auto; display: block; }
.loader__meta {
display: flex;
gap: 1.25rem;
align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.25em;
color: var(--muted);
}
.loader__counter {
color: var(--blue);
font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 3ch;
}
/* =========================================================
CONSULTING SECTION
========================================================= */
.consulting {
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
background: var(--bg);
}
/* ---------- Top info bar ---------- */
.topbar {
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 2rem;
font-size: 0.75rem;
color: var(--muted);
}
.topbar__note { font-weight: 500; }
.topbar__pill b { color: var(--blue); margin-right: 0.25rem; }
/* ---------- Main nav ---------- */
.mainnav {
position: relative;
z-index: 20;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.mainnav__top {
display: flex;
align-items: center;
gap: 2rem;
padding: 1rem 2rem;
border-bottom: 1px solid var(--line);
}
.mainnav__logo {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: var(--ink);
font-weight: 700;
font-size: 1.35rem;
letter-spacing: -0.01em;
will-change: transform;
}
.mainnav__logo-mark { width: 34px; height: 34px; }
.mainnav__logo-mark svg { width: 100%; height: 100%; display: block; }
.mainnav__infos {
margin-left: auto;
display: flex;
gap: 2rem;
}
.mainnav__info {
display: inline-flex;
align-items: center;
gap: 0.65rem;
will-change: transform;
cursor: pointer;
}
.mainnav__info-icon {
width: 38px; height: 38px;
background: var(--bg-soft);
color: var(--blue);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.3s, color 0.3s;
}
.mainnav__info-icon svg { width: 18px; height: 18px; }
.mainnav__info:hover .mainnav__info-icon { background: var(--blue); color: #fff; }
.mainnav__info-label {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 0.15rem;
}
.mainnav__info-value {
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
}
.mainnav__bottom {
display: flex;
align-items: center;
gap: 2rem;
padding: 0.75rem 2rem;
}
.mainnav__links {
display: flex;
gap: 2rem;
}
.mainnav__links a {
position: relative;
color: var(--ink);
text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.1em;
padding: 0.3rem 0;
display: inline-flex;
align-items: center;
gap: 0.25rem;
will-change: transform;
}
.mainnav__links a.is-active { color: var(--blue); }
.mainnav__links a::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 100%; height: 2px;
background: var(--blue);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.mainnav__links a:hover::after,
.mainnav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.caret { font-size: 0.7em; opacity: 0.7; transition: transform 0.3s; }
.mainnav__links a:hover .caret { transform: translateY(2px); }
.mainnav__arrows {
margin-left: auto;
display: flex;
gap: 0.5rem;
}
.mainnav__arrow {
width: 38px; height: 38px;
border: 1px solid var(--line);
background: var(--bg);
color: var(--ink);
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
will-change: transform;
transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.mainnav__arrow svg { width: 16px; height: 16px; }
.mainnav__arrow:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
/* ---------- Hero ---------- */
.hero {
position: relative;
height: 620px;
overflow: hidden;
background: var(--bg);
}
/* Dark navy angled shape */
.hero__angle {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 58%;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
clip-path: polygon(0 0, 85% 0, 65% 100%, 0 100%);
z-index: 2;
will-change: transform;
}
.hero__angle-dots {
position: absolute;
top: 10%;
left: 5%;
width: 120px;
height: auto;
}
.hero__circle-pattern {
position: absolute;
top: 20%;
left: 15%;
width: 200px; height: 200px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
opacity: 0.6;
}
.hero__circle-pattern::before,
.hero__circle-pattern::after {
content: '';
position: absolute;
inset: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
}
.hero__circle-pattern::after { inset: 50px; }
/* Background rotated text */
.hero__backtext {
position: absolute;
top: 5%;
left: 35%;
z-index: 3;
width: 65%;
font-family: 'Inter', sans-serif;
font-weight: 900;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.2;
color: rgba(255, 255, 255, 0.08);
letter-spacing: -0.02em;
text-transform: uppercase;
white-space: nowrap;
display: flex;
overflow: hidden;
pointer-events: none;
}
.hero__backtext span { display: inline-block; padding-right: 1rem; }
/* Photo on right side */
.hero__photo {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 55%;
overflow: hidden;
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
z-index: 4;
will-change: transform;
}
.hero__photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 30%;
user-select: none;
will-change: transform;
}
.hero__photo-overlay {
position: absolute;
inset: 0;
background: linear-gradient(270deg, transparent 60%, rgba(26, 43, 92, 0.4) 100%);
pointer-events: none;
}
/* Content */
.hero__content {
position: relative;
z-index: 10;
padding: 4rem 2rem 4rem 4rem;
max-width: 640px;
color: #fff;
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 0.4rem 0.9rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.25em;
color: #fff;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
}
.hero__eyebrow-mark {
display: inline-flex;
gap: 3px;
}
.hero__eyebrow-mark i {
display: block;
width: 4px; height: 4px;
background: var(--blue-soft);
border-radius: 50%;
}
.hero__title {
font-weight: 800;
font-size: clamp(2rem, 4.5vw, 3.75rem);
line-height: 1.08;
letter-spacing: -0.02em;
color: #fff;
margin-bottom: 1.25rem;
}
.hero__line {
display: block;
overflow: hidden;
padding-bottom: 0.04em;
}
.hero__char {
display: inline-block;
will-change: transform, color;
transition: color 0.3s ease;
}
.hero__char.is-space { width: 0.25em; }
.hero__desc {
font-size: 0.95rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 2rem;
max-width: 460px;
}
.hero__cta-row {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--blue);
color: #fff;
text-decoration: none;
padding: 0.95rem 1.75rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.15em;
overflow: hidden;
will-change: transform;
box-shadow: 0 10px 22px rgba(42, 111, 220, 0.4);
}
.cta__label, .cta__arrow { position: relative; z-index: 2; }
.cta__arrow svg { width: 14px; height: 14px; transition: transform 0.4s; }
.cta::before {
content: '';
position: absolute;
inset: 0;
background: #0f3a8c;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
z-index: 1;
}
.cta:hover::before { transform: scaleX(1); transform-origin: left; }
.cta:hover .cta__arrow svg { transform: translateX(4px); }
.hero__stats {
display: flex;
gap: 1.5rem;
}
.hero__stat {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.hero__stat b {
font-size: 1.5rem;
font-weight: 800;
color: #fff;
font-variant-numeric: tabular-nums;
}
.hero__stat b em {
font-style: normal;
color: var(--blue-soft);
font-size: 0.8em;
font-weight: 600;
}
.hero__stat span {
font-size: 0.7rem;
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
}
/* Pagination */
.hero__pages {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.75);
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
letter-spacing: 0.15em;
margin-top: 0.5rem;
}
.hero__pages-current { color: #fff; font-weight: 600; }
.hero__pages-bar {
position: relative;
width: 80px;
height: 2px;
background: rgba(255, 255, 255, 0.25);
display: inline-block;
}
.hero__pages-bar span {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 33%;
background: #fff;
transform-origin: left;
}
/* ---------- Initial states ---------- */
[data-magnetic], [data-link], [data-fade], [data-title-line] .hero__char, [data-eyebrow], [data-stats], [data-photo], [data-angle], [data-info], [data-topbar] {
opacity: 0;
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.mainnav__infos { display: none; }
.hero__angle { width: 100%; clip-path: none; }
.hero__photo { width: 100%; clip-path: none; opacity: 0.3; }
.hero__content { padding: 3rem 2rem; max-width: 100%; }
.hero { height: 580px; }
}
@media (max-width: 760px) {
.topbar { padding: 0.4rem 1rem; font-size: 0.65rem; }
.topbar__note { display: none; }
.mainnav__top { padding: 0.75rem 1rem; }
.mainnav__bottom { padding: 0.5rem 1rem; flex-wrap: wrap; gap: 0.75rem; }
.mainnav__links { gap: 1rem; font-size: 0.75rem; }
.mainnav__links a { font-size: 0.75rem; }
.hero__backtext { display: none; }
.hero__content { padding: 2rem 1.25rem; }
.hero { height: 520px; }
.hero__cta-row { gap: 1rem; }
.hero__stats { flex-direction: row; gap: 1rem; }
.hero__stat b { font-size: 1.2rem; }
}
@media (max-width: 480px) {
.mainnav__links a { font-size: 0.7rem; }
.caret { display: none; }
.hero__stats { display: none; }
.hero { height: 500px; }
}
</style>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner — Corporate Consulting</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="banner-corporate-consulting.css">
</head>
<body>
<!-- ========== LOADER — Growing business chart ========== -->
<div class="loader" id="loader">
<div class="loader__chart">
<svg class="loader__svg" viewBox="0 0 340 200" aria-hidden="true">
<!-- Baseline -->
<line x1="10" y1="180" x2="330" y2="180" stroke="#cbd5e1" stroke-width="1"/>
<!-- Bars (populated by JS) -->
<g id="chart-bars"></g>
<!-- Trend line -->
<path id="chart-line" d="M 30 160 L 80 140 L 130 120 L 180 95 L 230 70 L 280 40"
fill="none" stroke="#2a6fdc" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Arrow at tip -->
<g id="chart-arrow">
<circle cx="280" cy="40" r="6" fill="#2a6fdc"/>
<path d="M 275 45 L 280 40 L 280 45 M 280 40 L 285 40" stroke="#fff" stroke-width="1.5" fill="none" stroke-linecap="round"/>
</g>
<!-- Dots on each bar top -->
<g id="chart-dots"></g>
</svg>
</div>
<div class="loader__meta">
<span class="loader__label" id="loader-label">ANALYZING METRICS</span>
<span class="loader__counter" id="loader-counter">0%</span>
</div>
</div>
<section class="consulting" id="consulting">
<!-- Top info bar -->
<div class="topbar">
<span class="topbar__left" data-topbar>
<span class="topbar__note">Now hiring. Are you looking for best consultancy service?</span>
</span>
<span class="topbar__right">
<span class="topbar__pill" data-topbar><b>⏱</b> Office Hours: 08:00am – 6:00pm</span>
</span>
</div>
<!-- Main nav -->
<header class="mainnav">
<div class="mainnav__top">
<a href="#" class="mainnav__logo" data-magnetic>
<span class="mainnav__logo-mark">
<svg viewBox="0 0 40 40" aria-hidden="true">
<path d="M8 10 L 20 5 L 32 10 L 32 18 L 20 23 L 8 18 Z" fill="#2a6fdc"/>
<path d="M8 18 L 20 23 L 32 18 L 32 28 L 20 33 L 8 28 Z" fill="#1a4aa0"/>
<path d="M20 23 L 20 33" stroke="#0d3172" stroke-width="1"/>
</svg>
</span>
<span class="mainnav__logo-text">Brand</span>
</a>
<div class="mainnav__infos">
<div class="mainnav__info" data-info>
<span class="mainnav__info-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<path d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1 1 .3 1.9.6 2.8a2 2 0 01-.5 2.1L8.1 10a16 16 0 006 6l1.3-1.3a2 2 0 012.1-.4 12.8 12.8 0 002.8.7 2 2 0 011.7 2z"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<div>
<div class="mainnav__info-label">CALL US 24/7</div>
<div class="mainnav__info-value">+(269) 2156 2145</div>
</div>
</div>
<div class="mainnav__info" data-info>
<span class="mainnav__info-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<rect x="3" y="5" width="18" height="14" rx="2"/>
<path d="M3 7l9 7 9-7"/>
</svg>
</span>
<div>
<div class="mainnav__info-label">MAIL FOR SUPPORT</div>
<div class="mainnav__info-value">info@brandmail.com</div>
</div>
</div>
<div class="mainnav__info" data-info>
<span class="mainnav__info-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<path d="M12 22s-8-7.6-8-13a8 8 0 1116 0c0 5.4-8 13-8 13z"/>
<circle cx="12" cy="9" r="3"/>
</svg>
</span>
<div>
<div class="mainnav__info-label">OFFICE ADDRESS</div>
<div class="mainnav__info-value">259 HQS, Holland, USA</div>
</div>
</div>
</div>
</div>
<div class="mainnav__bottom">
<nav class="mainnav__links">
<a href="#" class="is-active" data-magnetic data-link>HOME</a>
<a href="#" data-magnetic data-link>PAGES <span class="caret">▾</span></a>
<a href="#" data-magnetic data-link>SERVICES <span class="caret">▾</span></a>
<a href="#" data-magnetic data-link>BLOG</a>
<a href="#" data-magnetic data-link>CONTACT</a>
</nav>
<div class="mainnav__arrows">
<button class="mainnav__arrow" id="prev-btn" data-magnetic aria-label="Previous">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M15 6l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="mainnav__arrow" id="next-btn" data-magnetic aria-label="Next">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</div>
</header>
<!-- ========== HERO ========== -->
<div class="hero" id="hero">
<!-- Angled dark blue shape on left -->
<div class="hero__angle" data-angle>
<svg class="hero__angle-dots" viewBox="0 0 100 200" aria-hidden="true">
<g fill="rgba(255,255,255,0.15)">
<circle cx="10" cy="10" r="1.5"/><circle cx="25" cy="10" r="1.5"/><circle cx="40" cy="10" r="1.5"/><circle cx="55" cy="10" r="1.5"/><circle cx="70" cy="10" r="1.5"/>
<circle cx="10" cy="25" r="1.5"/><circle cx="25" cy="25" r="1.5"/><circle cx="40" cy="25" r="1.5"/><circle cx="55" cy="25" r="1.5"/><circle cx="70" cy="25" r="1.5"/>
<circle cx="10" cy="40" r="1.5"/><circle cx="25" cy="40" r="1.5"/><circle cx="40" cy="40" r="1.5"/><circle cx="55" cy="40" r="1.5"/>
<circle cx="10" cy="55" r="1.5"/><circle cx="25" cy="55" r="1.5"/><circle cx="40" cy="55" r="1.5"/>
<circle cx="10" cy="70" r="1.5"/><circle cx="25" cy="70" r="1.5"/>
</g>
</svg>
<div class="hero__circle-pattern" aria-hidden="true"></div>
</div>
<!-- Big background rotated text -->
<div class="hero__backtext" id="backtext">
<span>MAKE IT GREAT. MAKE IT BIG. MAKE IT WORK. MAKE IT AWESOME. MAKE IT SOAR. MAKE IT HAPPEN. MAKE IT SIMPLE. MAKE IT BRILLIANT. </span>
<span aria-hidden="true">MAKE IT GREAT. MAKE IT BIG. MAKE IT WORK. MAKE IT AWESOME. MAKE IT SOAR. MAKE IT HAPPEN. MAKE IT SIMPLE. MAKE IT BRILLIANT. </span>
</div>
<!-- Right side image -->
<div class="hero__photo" id="photo" data-photo>
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1100&q=80"
alt="" draggable="false" onerror="this.style.display='none'">
<div class="hero__photo-overlay"></div>
</div>
<!-- Content -->
<div class="hero__content">
<span class="hero__eyebrow" data-eyebrow>
<span class="hero__eyebrow-mark"><i></i><i></i><i></i></span>
WELCOME TO OUR COMPANY
</span>
<h1 class="hero__title" aria-label="Need A Custom Plan Ask About Enterprise">
<span class="hero__line" data-title-line>Need A Custom</span>
<span class="hero__line" data-title-line>Plan? Ask About</span>
<span class="hero__line" data-title-line>Enterprise</span>
</h1>
<p class="hero__desc" data-fade>
We specialize in providing comprehensive solutions to help businesses
tackle their most pressing issues and unlock new opportunities for growth.
</p>
<div class="hero__cta-row" data-fade>
<a href="#" class="cta" data-magnetic data-cta>
<span class="cta__label">CONTACT WITH US</span>
<span class="cta__arrow">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M5 12h14M13 6l6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</a>
<div class="hero__stats" data-stats>
<div class="hero__stat"><b>15<em>+</em></b><span>Years Experience</span></div>
<div class="hero__stat"><b>4.9<em>/5</em></b><span>Client Rating</span></div>
</div>
</div>
<!-- Slide pagination -->
<div class="hero__pages" id="pages" data-fade>
<span class="hero__pages-current" id="page-current">01</span>
<span class="hero__pages-bar"><span id="page-bar"></span></span>
<span class="hero__pages-total">03</span>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="banner-corporate-consulting.js"></script>
</body>
</html>
</body>
</html>JS banner-corporate-consulting.js — GSAP animation timeline
(() => {
const root = document.getElementById('consulting');
if (!root) return;
// -------------------------------------------------------------------
// SPLIT TITLE
// -------------------------------------------------------------------
const titleLines = root.querySelectorAll('[data-title-line]');
titleLines.forEach((line) => {
const text = line.textContent;
line.textContent = '';
[...text].forEach((ch) => {
const span = document.createElement('span');
span.className = 'hero__char';
if (ch === ' ') { span.classList.add('is-space'); span.innerHTML = ' '; }
else span.textContent = ch;
line.appendChild(span);
});
});
// -------------------------------------------------------------------
// BUILD LOADER CHART BARS
// -------------------------------------------------------------------
const barsG = document.getElementById('chart-bars');
const dotsG = document.getElementById('chart-dots');
const BAR_HEIGHTS = [25, 50, 75, 110, 140, 170];
const BAR_X = [20, 70, 120, 170, 220, 270];
const barEls = [];
const dotEls = [];
BAR_HEIGHTS.forEach((h, i) => {
const x = BAR_X[i];
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', x);
rect.setAttribute('y', 180);
rect.setAttribute('width', 30);
rect.setAttribute('height', 0);
rect.setAttribute('fill', i === BAR_HEIGHTS.length - 1 ? '#2a6fdc' : '#cbd5e1');
rect.setAttribute('rx', 2);
barsG.appendChild(rect);
barEls.push({ el: rect, targetH: h, x });
const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
dot.setAttribute('cx', x + 15);
dot.setAttribute('cy', 180);
dot.setAttribute('r', 3);
dot.setAttribute('fill', '#2a6fdc');
dot.setAttribute('opacity', 0);
dotsG.appendChild(dot);
dotEls.push(dot);
});
// -------------------------------------------------------------------
// REFERENCES
// -------------------------------------------------------------------
const loader = document.getElementById('loader');
const loaderCounter = document.getElementById('loader-counter');
const loaderLabel = document.getElementById('loader-label');
const chartLine = document.getElementById('chart-line');
const chartArrow = document.getElementById('chart-arrow');
const magnetics = root.querySelectorAll('[data-magnetic]');
const titleChars = root.querySelectorAll('.hero__char');
const fades = root.querySelectorAll('[data-fade]');
const infos = root.querySelectorAll('[data-info]');
const topbarCells = root.querySelectorAll('[data-topbar]');
const eyebrow = root.querySelector('[data-eyebrow]');
const stats = root.querySelector('[data-stats]');
const photo = document.getElementById('photo');
const photoImg = photo.querySelector('img');
const angle = root.querySelector('[data-angle]');
const backtext = document.getElementById('backtext');
const pageCurrent = document.getElementById('page-current');
const pageBar = document.getElementById('page-bar');
// -------------------------------------------------------------------
// INITIAL STATES
// -------------------------------------------------------------------
gsap.set(topbarCells, { y: -10, opacity: 0 });
gsap.set(magnetics, { y: -15, opacity: 0 });
gsap.set(infos, { y: -15, opacity: 0 });
gsap.set(angle, { xPercent: -100, opacity: 0 });
gsap.set(photo, { xPercent: 100, opacity: 0 });
gsap.set(photoImg, { scale: 1.15 });
gsap.set(eyebrow, { y: 20, opacity: 0 });
gsap.set(titleChars, { yPercent: 110, opacity: 0 });
gsap.set(fades, { y: 20, opacity: 0 });
gsap.set(stats, { y: 20, opacity: 0 });
gsap.set(backtext, { opacity: 0 });
const chartLineLen = chartLine.getTotalLength();
gsap.set(chartLine, { strokeDasharray: chartLineLen, strokeDashoffset: chartLineLen });
gsap.set(chartArrow, { scale: 0, transformOrigin: '280px 40px' });
// -------------------------------------------------------------------
// LOADER TIMELINE
// -------------------------------------------------------------------
const loaderTl = gsap.timeline({ onComplete: playScene });
// Bars grow in sequence
barEls.forEach((b, i) => {
loaderTl.to(b.el, {
attr: { y: 180 - b.targetH, height: b.targetH },
duration: 0.5,
ease: 'power3.out',
}, i * 0.12);
});
// Dots pop on bar tops
barEls.forEach((b, i) => {
loaderTl.to(dotEls[i], {
attr: { cy: 180 - b.targetH },
opacity: 1,
duration: 0.3,
ease: 'back.out(2)',
}, 0.2 + i * 0.12);
});
// Trend line draws
loaderTl.to(chartLine, {
strokeDashoffset: 0,
duration: 1,
ease: 'power2.inOut',
}, 0.4);
// Arrow pops
loaderTl.to(chartArrow, {
scale: 1,
duration: 0.5,
ease: 'back.out(2.5)',
}, 1.2);
// Counter + labels
const p = { v: 0 };
loaderTl.to(p, {
v: 100,
duration: 1.8,
ease: 'power1.inOut',
onUpdate: () => {
loaderCounter.textContent = Math.floor(p.v) + '%';
if (p.v > 25 && loaderLabel.textContent === 'ANALYZING METRICS') loaderLabel.textContent = 'PROJECTING GROWTH';
if (p.v > 65 && loaderLabel.textContent === 'PROJECTING GROWTH') loaderLabel.textContent = 'FINALIZING REPORT';
if (p.v > 95 && loaderLabel.textContent === 'FINALIZING REPORT') loaderLabel.textContent = 'READY';
},
}, 0);
// Exit
loaderTl.to([loaderCounter, loaderLabel], {
y: -10, opacity: 0, duration: 0.3, stagger: 0.05,
}, '+=0.3');
loaderTl.to('.loader__chart', {
y: -40, scale: 0.95, opacity: 0,
duration: 0.6, ease: 'power3.in',
}, '-=0.2');
loaderTl.to(loader, {
opacity: 0, duration: 0.4, ease: 'power2.inOut',
}, '-=0.3');
loaderTl.set(loader, { display: 'none' });
// -------------------------------------------------------------------
// MAIN SCENE ENTRANCE
// -------------------------------------------------------------------
function playScene() {
const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });
// Top bar + nav info
tl.to(topbarCells, { y: 0, opacity: 1, duration: 0.5, stagger: 0.08 }, 0);
tl.to(infos, { y: 0, opacity: 1, duration: 0.6, stagger: 0.1 }, 0.2);
// Logo + nav links + arrows
tl.to(magnetics, { y: 0, opacity: 1, duration: 0.6, stagger: 0.04 }, 0.3);
// Angled shape slides in from left
tl.to(angle, {
xPercent: 0, opacity: 1,
duration: 1.1,
ease: 'power4.out',
}, 0.4);
// Photo slides in from right + zoom settle
tl.to(photo, {
xPercent: 0, opacity: 1,
duration: 1.2,
ease: 'power4.out',
}, 0.5);
tl.to(photoImg, {
scale: 1,
duration: 1.6,
ease: 'power3.out',
}, 0.6);
// Background rotated text
tl.to(backtext, {
opacity: 1,
duration: 1.2,
}, 0.8);
// Eyebrow
tl.to(eyebrow, { y: 0, opacity: 1, duration: 0.6 }, 1);
// Title chars
tl.to(titleChars, {
yPercent: 0, opacity: 1,
duration: 1,
stagger: 0.02,
ease: 'expo.out',
}, 1.1);
// Desc + CTA row
tl.to(fades, { y: 0, opacity: 1, duration: 0.7, stagger: 0.15 }, 1.5);
tl.to(stats, { y: 0, opacity: 1, duration: 0.7 }, 1.7);
tl.call(startContinuous, null, 2);
tl.call(enableInteractions, null, 2);
}
// -------------------------------------------------------------------
// CONTINUOUS
// -------------------------------------------------------------------
let backtextAnim = null;
function startContinuous() {
// Background text scrolls horizontally continuously
const spans = backtext.querySelectorAll('span');
const spanWidth = spans[0].offsetWidth;
backtextAnim = gsap.to(backtext, {
x: -spanWidth,
duration: 40,
ease: 'none',
repeat: -1,
modifiers: { x: gsap.utils.unitize(x => parseFloat(x) % spanWidth) },
});
}
// -------------------------------------------------------------------
// INTERACTIONS
// -------------------------------------------------------------------
function enableInteractions() {
// ---- Magnetic ----
magnetics.forEach((el) => {
const strength = el.classList.contains('cta') ? 0.35
: el.classList.contains('mainnav__arrow') ? 0.4
: el.classList.contains('mainnav__logo') ? 0.2
: 0.22;
el.addEventListener('mousemove', (e) => {
const r = el.getBoundingClientRect();
const cx = r.left + r.width / 2;
const cy = r.top + r.height / 2;
gsap.to(el, {
x: (e.clientX - cx) * strength,
y: (e.clientY - cy) * strength,
duration: 0.4, ease: 'power3.out',
});
});
el.addEventListener('mouseleave', () => {
gsap.to(el, { x: 0, y: 0, duration: 0.6, ease: 'elastic.out(1, 0.4)' });
});
});
// ---- Info cards: icon rotate + lift on hover ----
infos.forEach((info) => {
const icon = info.querySelector('.mainnav__info-icon');
info.addEventListener('mouseenter', () => {
gsap.to(icon, { rotation: 360, duration: 0.6, ease: 'power2.inOut' });
gsap.to(info, { y: -3, duration: 0.3 });
});
info.addEventListener('mouseleave', () => {
gsap.set(icon, { rotation: 0 });
gsap.to(info, { y: 0, duration: 0.4 });
});
});
// ---- Title char proximity + hover ----
const hero = document.getElementById('hero');
let tmx = -9999, tmy = -9999;
hero.addEventListener('mousemove', (e) => { tmx = e.clientX; tmy = e.clientY; });
hero.addEventListener('mouseleave', () => {
tmx = -9999; tmy = -9999;
titleChars.forEach((c) => gsap.to(c, { y: 0, duration: 0.5, ease: 'power3.out' }));
});
gsap.ticker.add(() => {
if (tmx < 0) return;
titleChars.forEach((c) => {
const r = c.getBoundingClientRect();
if (r.width === 0) return;
const cx = r.left + r.width / 2;
const cy = r.top + r.height / 2;
const dx = tmx - cx, dy = tmy - cy;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 140) gsap.set(c, { y: -(1 - dist / 140) * 14 });
else gsap.set(c, { y: 0 });
});
});
titleChars.forEach((c) => {
c.addEventListener('mouseenter', () => gsap.to(c, { color: '#5a8de8', duration: 0.2 }));
c.addEventListener('mouseleave', () => gsap.to(c, { color: '#ffffff', duration: 0.4 }));
});
// ---- Photo parallax + tilt ----
let pX = 0, pY = 0, pcX = 0, pcY = 0;
hero.addEventListener('mousemove', (e) => {
const r = hero.getBoundingClientRect();
pX = ((e.clientX - r.left) / r.width - 0.5) * 2;
pY = ((e.clientY - r.top) / r.height - 0.5) * 2;
});
hero.addEventListener('mouseleave', () => { pX = 0; pY = 0; });
gsap.ticker.add(() => {
pcX += (pX - pcX) * 0.05;
pcY += (pY - pcY) * 0.05;
gsap.set(photoImg, {
scale: 1.05,
x: pcX * 20,
y: pcY * 12,
});
gsap.set(angle, { x: -pcX * 15, y: -pcY * 8 });
gsap.set(backtext, { y: pcY * 8 });
});
// ---- Slider arrows: mock slide transition ----
let idx = 1;
const prev = document.getElementById('prev-btn');
const next = document.getElementById('next-btn');
const advance = (dir) => {
idx = ((idx - 1 + dir + 3) % 3) + 1;
pageCurrent.textContent = String(idx).padStart(2, '0');
gsap.fromTo(pageBar,
{ width: '33%', x: ((idx - 1) * 33) + '%' },
{ width: '33%', x: ((idx - 1) * 33) + '%', duration: 0.4, ease: 'power3.out' }
);
// Flash content shift
gsap.fromTo('.hero__content',
{ x: 30 * dir, opacity: 0.3 },
{ x: 0, opacity: 1, duration: 0.6, ease: 'power3.out' }
);
gsap.fromTo(photoImg,
{ scale: 1.1, opacity: 0.7 },
{ scale: 1.05, opacity: 1, duration: 0.7, ease: 'power3.out' }
);
};
next.addEventListener('click', () => advance(1));
prev.addEventListener('click', () => advance(-1));
// ---- CTA button click = press pulse ----
const cta = root.querySelector('[data-cta]');
cta.addEventListener('click', (e) => {
e.preventDefault();
gsap.fromTo(cta,
{ scale: 1 },
{ scale: 0.96, duration: 0.1, yoyo: true, repeat: 1, ease: 'sine.inOut' }
);
});
// ---- Backtext hover: invert color temporarily ----
backtext.addEventListener('mouseenter', () => {
gsap.to(backtext, { color: 'rgba(255, 255, 255, 0.25)', duration: 0.4 });
if (backtextAnim) gsap.to(backtextAnim, { timeScale: 3, duration: 0.5 });
});
backtext.addEventListener('mouseleave', () => {
gsap.to(backtext, { color: 'rgba(255, 255, 255, 0.08)', duration: 0.6 });
if (backtextAnim) gsap.to(backtextAnim, { timeScale: 1, duration: 0.5 });
});
}
})();