Spaces:

JoeSos
/

bcg-clone-craft

Running

App Files Files Community

JoeSos commited on Oct 9, 2025

Commit

63b1f08

verified ·

1 Parent(s): 2fa72c4

This is essentially the Menu experience I want to have. Can you integrate this such that is it works seamlessly with the other components.

Browse files

Files changed (2) hide show

index.html +11 -8
nav.js +91 -0

index.html CHANGED Viewed

@@ -5,9 +5,13 @@
     <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>
-    <style>
         @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;
@@ -31,9 +35,11 @@
     </style>
 </head>
 <body class="antialiased">
-    <!-- Navigation -->
-    <nav class="bg-white shadow-md">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex">
                     <div class="flex-shrink-0 flex items-center">
@@ -249,9 +255,6 @@
             </div>
         </div>
     </footer>
-    <script>
-        feather.replace();
-    </script>
 </body>
 </html>

     <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">
+    <!-- React and React DOM -->
+    <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/babel.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
+<style>
         @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;
     </style>
 </head>
 <body class="antialiased">
+    <!-- Root element for React -->
+    <div id="root"></div>
+    <!-- Navigation will be replaced by React component -->
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex">
                     <div class="flex-shrink-0 flex items-center">
             </div>
         </div>
     </footer>
+    <script src="/static/js/nav.js"></script>
 </body>
 </html>

nav.js ADDED Viewed

	@@ -0,0 +1,91 @@

+```html
+<script type="text/babel">
+const Nav = () => {
+    const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+    const toggleMobileMenu = () => {
+        setMobileMenuOpen(!mobileMenuOpen);
+    };
+    return (
+        <nav className="bg-white shadow-md">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="flex justify-between h-16">
+                    <div className="flex">
+                        <div className="flex-shrink-0 flex items-center">
+                            <img className="h-8 w-auto" src="https://www.bcg.com/assets/images/BCG-logo.svg" alt="BCG Logo" />
+                        </div>
+                        <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                            <a href="#" className="nav-link border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Industries</a>
+                            <a href="#" className="nav-link border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Capabilities</a>
+                            <a href="#" className="nav-link border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Insights</a>
+                            <a href="#" className="nav-link border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Careers</a>
+                            <a href="#" className="nav-link border-transparent text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
+                        </div>
+                    </div>
+                    <div className="hidden sm:ml-6 sm:flex sm:items-center">
+                        <button className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
+                            <i data-feather="search"></i>
+                        </button>
+                        <button className="ml-4 bg-bcg-teal text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-opacity-90 focus:outline-none">
+                            Contact Us
+                        </button>
+                    </div>
+                    <div className="-mr-2 flex items-center sm:hidden">
+                        <button
+                            onClick={toggleMobileMenu}
+                            type="button"
+                            className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"
+                            aria-controls="mobile-menu"
+                            aria-expanded="false"
+                        >
+                            <i data-feather={mobileMenuOpen ? "x" : "menu"}></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            {/* Mobile menu */}
+            {mobileMenuOpen && (
+                <div className="sm:hidden" id="mobile-menu">
+                    <div className="pt-2 pb-3 space-y-1">
+                        <a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-bcg-teal text-base font-medium text-gray-700">Industries</a>
+                        <a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:text-gray-700">Capabilities</a>
+                        <a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:text-gray-700">Insights</a>
+                        <a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:text-gray-700">Careers</a>
+                        <a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:text-gray-700">About</a>
+                    </div>
+                    <div className="pt-4 pb-3 border-t border-gray-200">
+                        <div className="flex items-center px-4 space-x-3">
+                            <button className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
+                                <i data-feather="search"></i>
+                            </button>
+                            <button className="bg-bcg-teal text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-opacity-90 focus:outline-none">
+                                Contact Us
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </nav>
+    );
+};
+const App = () => {
+    return (
+        <div className="antialiased">
+            <Nav />
+            {/* Rest of your components will go here */}
+        </div>
+    );
+};
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);
+// Initialize feather icons after render
+document.addEventListener('DOMContentLoaded', function() {
+    feather.replace();
+});
+</script>
+>>>>>>> REPLACE