Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Boston Consulting Group | Bold Leadership. Lasting Impact.</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> | |
| <style> | |
| .mega-menu__content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| padding: 2rem; | |
| } | |
| .mega-menu__column { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .mega-menu__heading { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| color: #00838F; | |
| margin-bottom: 1rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 2px solid #f0f0f0; | |
| } | |
| .mega-menu__list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .mega-menu__link { | |
| display: block; | |
| padding: 0.5rem 0; | |
| color: #333; | |
| text-decoration: none; | |
| transition: color 0.2s ease; | |
| } | |
| .mega-menu__link:hover { | |
| color: #00838F; | |
| } | |
| .mobile-only { | |
| padding: 1rem; | |
| display: none; | |
| } | |
| @media (max-width: 767px) { | |
| .mobile-only { | |
| display: block; | |
| } | |
| } | |
| .topbar__search-form { | |
| display: none; | |
| } | |
| body[menu-search-is-open] .topbar__search-form { | |
| display: flex; | |
| width: 100%; | |
| padding: 1rem; | |
| background: white; | |
| } | |
| body[menu-search-is-open] .header-view-search-button { | |
| display: none; | |
| } | |
| @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .nav-link:hover { | |
| color: #00838F; | |
| border-bottom: 2px solid #00838F; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(90deg, #00838F 0%, #006269 100%); | |
| } | |
| .bcg-teal { | |
| color: #00838F; | |
| } | |
| .bg-bcg-teal { | |
| background-color: #00838F; | |
| } | |
| .border-bcg-teal { | |
| border-color: #00838F; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md"> | |
| <div id="mobile-search"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <img class="h-8 w-auto" src="https://www.bcg.com/assets/images/BCG-logo.svg" alt="BCG Logo"> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="nav-link text-gray-700 font-medium">Industries</a> | |
| <a href="#" class="nav-link text-gray-700 font-medium">Capabilities</a> | |
| <a href="#" class="nav-link text-gray-700 font-medium">Featured Insights</a> | |
| <a href="#" class="nav-link text-gray-700 font-medium">Careers</a> | |
| <a href="#" class="nav-link text-gray-700 font-medium">About</a> | |
| </div> | |
| <!-- Search and Menu --> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Search Component --> | |
| <div class="hidden md:flex items-center"> | |
| <form class="flex items-center" action="https://www.bcg.com/search" method="get"> | |
| <input type="text" name="q" placeholder="Search..." | |
| class="px-4 py-1 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"/> | |
| <button type="submit" class="ml-2 p-1 rounded-full text-gray-500 hover:text-gray-600 focus:outline-none"> | |
| <i data-feather="search"></i> | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Burger Menu --> | |
| <div class="flex items-center"> | |
| <button type="button" | |
| class="p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none" | |
| onclick="openMobileMenu()"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu Modal --> | |
| <div id="mobile-menu" class="fixed inset-0 z-50 hidden overflow-y-scroll bg-white"> | |
| <div class="mega-menu__positionWrapper"> | |
| <!-- Mobile Menu Header --> | |
| <div class="flex justify-between items-center p-4 border-b border-gray-200"> | |
| <img class="h-6 w-auto" src="https://www.bcg.com/assets/images/BCG-logo.svg" alt="BCG Logo"> | |
| <button type="button" | |
| class="p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none" | |
| onclick="closeMobileMenu()"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu Content --> | |
| <section class="mega-menu__body"> | |
| <div class="global-navigation"> | |
| <div class="mega-menu__content"> | |
| <div class="mega-menu__column"> | |
| <h3 class="mega-menu__heading">Industries</h3> | |
| <ul class="mega-menu__list"> | |
| <li><a href="#" class="mega-menu__link">Aerospace & Defense</a></li> | |
| <li><a href="#" class="mega-menu__link">Automotive & Mobility</a></li> | |
| <li><a href="#" class="mega-menu__link">Consumer Products</a></li> | |
| <li><a href="#" class="mega-menu__link">Energy</a></li> | |
| <li><a href="#" class="mega-menu__link">Financial Institutions</a></li> | |
| <li><a href="#" class="mega-menu__link">Health Care</a></li> | |
| </ul> | |
| </div> | |
| <div class="mega-menu__column"> | |
| <h3 class="mega-menu__heading">Capabilities</h3> | |
| <ul class="mega-menu__list"> | |
| <li><a href="#" class="mega-menu__link">Digital Transformation</a></li> | |
| <li><a href="#" class="mega-menu__link">Sustainability</a></li> | |
| <li><a href="#" class="mega-menu__link">AI & Analytics</a></li> | |
| <li><a href="#" class="mega-menu__link">Corporate Finance</a></li> | |
| <li><a href="#" class="mega-menu__link">People & Organization</a></li> | |
| <li><a href="#" class="mega-menu__link">Operations</a></li> | |
| </ul> | |
| </div> | |
| <div class="mega-menu__column"> | |
| <h3 class="mega-menu__heading">Featured Insights</h3> | |
| <ul class="mega-menu__list"> | |
| <li><a href="#" class="mega-menu__link">Global Insights</a></li> | |
| <li><a href="#" class="mega-menu__link">BCG Perspectives</a></li> | |
| <li><a href="#" class="mega-menu__link">Case Studies</a></li> | |
| <li><a href="#" class="mega-menu__link">Podcasts & Videos</a></li> | |
| </ul> | |
| </div> | |
| <div class="mega-menu__column"> | |
| <h3 class="mega-menu__heading">Careers</h3> | |
| <ul class="mega-menu__list"> | |
| <li><a href="#" class="mega-menu__link">Why BCG</a></li> | |
| <li><a href="#" class="mega-menu__link">Students</a></li> | |
| <li><a href="#" class="mega-menu__link">Experienced Professionals</a></li> | |
| <li><a href="#" class="mega-menu__link">Diversity & Inclusion</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <!-- Script for Menu Functionality --> | |
| <script> | |
| function openMobileMenu() { | |
| document.getElementById('mobile-menu').classList.remove('hidden'); | |
| } | |
| function closeMobileMenu() { | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| } | |
| // Close menu when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const menu = document.getElementById('mobile-menu'); | |
| if (!event.target.closest('#mobile-menu') && !event.target.closest('[onclick="openMobileMenu()"]')) { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| <!-- Hero Section --> | |
| <div class="hero-gradient text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6"> | |
| Bold Leadership. Lasting Impact. | |
| </h1> | |
| <p class="text-xl max-w-3xl mb-8"> | |
| We work with business and society to solve their most important challenges and capture their greatest opportunities. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-white bcg-teal px-6 py-3 rounded-md text-sm font-medium hover:bg-opacity-90 focus:outline-none transition-colors"> | |
| Explore Our Impact | |
| </a> | |
| <a href="#" class="border-2 border-white text-white px-6 py-3 rounded-md text-sm font-medium hover:bg-white hover:bg-opacity-10 focus:outline-none transition-colors"> | |
| Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 lg:mt-0"> | |
| <img class="rounded-lg shadow-xl" src="http://static.photos/office/1200x630/42" alt="BCG Team"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Insights --> | |
| <div class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base bcg-teal font-semibold tracking-wide uppercase">Featured Insights</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Latest Thinking from BCG | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition-transform hover:scale-105"> | |
| <img class="w-full h-48 object-cover" src="http://static.photos/technology/640x360/1" alt="Insight 1"> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm bcg-teal font-semibold">Report</div> | |
| <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:text-bcg-teal transition-colors">The Future of Work in the Digital Era</a> | |
| <p class="mt-2 text-gray-500">How businesses can adapt to the rapidly changing digital landscape.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition-transform hover:scale-105"> | |
| <img class="w-full h-48 object-cover" src="http://static.photos/finance/640x360/2" alt="Insight 2"> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm bcg-teal font-semibold">Article</div> | |
| <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:text-bcg-teal transition-colors">Sustainable Business Practices That Pay Off</a> | |
| <p class="mt-2 text-gray-500">Exploring the financial benefits of environmentally conscious business models.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition-transform hover:scale-105"> | |
| <img class="w-full h-48 object-cover" src="http://static.photos/health/640x360/3" alt="Insight 3"> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm bcg-teal font-semibold">Interview</div> | |
| <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:text-bcg-teal transition-colors">Leadership in Times of Crisis</a> | |
| <p class="mt-2 text-gray-500">CEOs share their strategies for navigating uncertain economic times.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="border-2 border-bcg-teal bcg-teal px-6 py-3 rounded-md text-sm font-medium hover:bg-bcg-teal hover:text-white focus:outline-none"> | |
| View All Insights | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Our Capabilities --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base bcg-teal font-semibold tracking-wide uppercase">Our Capabilities</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Solving Today's Greatest Challenges | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-lg transition-transform hover:scale-105"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-bcg-teal text-white mb-4"> | |
| <i data-feather="bar-chart-2"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Digital Transformation</h3> | |
| <p class="text-gray-500"> | |
| Helping businesses leverage technology to drive growth and innovation. | |
| </p> | |
| <a href="#" class="mt-4 inline-flex items-center bcg-teal text-sm font-medium hover:opacity-80 transition-opacity"> | |
| Learn more <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg transition-transform hover:scale-105"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-bcg-teal text-white mb-4"> | |
| <i data-feather="globe"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Sustainability</h3> | |
| <p class="text-gray-500"> | |
| Creating strategies that benefit both business and the environment. | |
| </p> | |
| <a href="#" class="mt-4 inline-flex items-center bcg-teal text-sm font-medium hover:opacity-80 transition-opacity"> | |
| Learn more <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg transition-transform hover:scale-105"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-bcg-teal text-white mb-4"> | |
| <i data-feather="users"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Organization</h3> | |
| <p class="text-gray-500"> | |
| Building agile, resilient organizations for the future of work. | |
| </p> | |
| <a href="#" class="mt-4 inline-flex items-center bcg-teal text-sm font-medium hover:opacity-80 transition-opacity"> | |
| Learn more <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider">About BCG</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Our Story</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Leadership</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Diversity & Inclusion</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Sustainability</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider">Careers</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Why BCG</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Explore Jobs</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Students</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Experienced Professionals</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider">Connect</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Subscribe</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Newsletter</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Social Media</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider">Legal</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Terms of Use</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Cookie Policy</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Accessibility</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| <p class="mt-4 md:mt-0 text-gray-400 text-sm"> | |
| © 2023 Boston Consulting Group. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script type="text/babel"> | |
| const MobileSearch = () => { | |
| return ( | |
| <section className="mega-menu__mobile-items mobile-only"> | |
| <div className="Page-headerSearch topbar__search"> | |
| <div className="header-search-button-wrapper"> | |
| <button className="header-view-search-button" | |
| onClick={() => document.querySelector('body').toggleAttribute('menu-search-is-open')} | |
| aria-label="Open BCG site search input"> | |
| <i data-feather="search"></i> | |
| </button> | |
| </div> | |
| <form className="topbar__search-form" action="https://www.bcg.com/search" method="get"> | |
| <fieldset> | |
| <div className="header-search-button-wrapper"> | |
| <button className="header-submit-search-button" type="submit" aria-label="Button to submit search on BCG site"> | |
| <i data-feather="search"></i> | |
| </button> | |
| </div> | |
| <div className="typeahead-standalone"> | |
| <input className="topbar__search-input topbar_search-input tt-input w-full px-4 py-2 border border-gray-300 rounded-md" | |
| name="q" | |
| autoComplete="off" | |
| type="text" | |
| placeholder="Type to search" | |
| data-list="General" | |
| data-autosuggesturl="https://www.bcg.com/search-api/prod-autocomplete/_suggest" /> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| ReactDOM.render(<MobileSearch />, document.getElementById('mobile-search')); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |