Spaces:

icosajim
/

baa-1

Running

App Files Files Community

icosajim commited on Aug 7, 2025

Commit

cbee043

verified ·

1 Parent(s): 728573e

🏠 Homepage Content Plan for Black Artists Archive ✅ Goals of the Homepage: Instantly communicate BAA's purpose and values Invite engagement: exploring the archive, joining programs, supporting the mission Establish credibility and cultural relevance Prioritize community voice and accessibility 1. Hero Section (Full-width banner) Headline: Preserving Black Artistic Legacies. Empowering Future Voices. Subhead: The Black Artists Archive is a living, evolving record of Black creativity from Detroit and beyond—honoring artists, curators, and cultural stewards through archival storytelling, education, and community action. Primary CTA Buttons: 🔍 Explore the Archive 🎓 Learn about BCI (Black Curatorial Institute) Background Image: A collage of archival photos, art pieces, or Detroit-based Black art scenes. 2. About Us Snapshot Headline: What We Stand For Body Copy: The Black Artists Archive (BAA) is a community-rooted initiative focused on preserving, amplifying, and celebrating Black artistic contributions—especially from Detroit and the Midwest. Through our digital and physical archive, educational programs, and cultural events, we aim to foster a more equitable and representative art historical record. CTA (link style): → Learn more about our mission 3. Featured Initiative: Black Curatorial Institute Headline: Curating with Care and Purpose Body Copy: The Black Curatorial Institute (BCI) is a groundbreaking program equipping the next generation of curators, scholars, and cultural workers. BCI centers community-responsive practices, ethical curation, and the elevation of Black perspectives within the arts. CTA Button: 🎓 Join or Support the BCI 4. Spotlight: Recent Additions to the Archive Headline: New Voices, Rediscovered Histories Format: 3–4 image tiles with artist name, medium, and a short description or quote Example Copy (for tile): Elaine Sanford (b. 1946) “Textile artist and social historian whose quilts captured the changing neighborhoods of 1960s Detroit.” CTA: → Browse the full Archive 5. Upcoming Events / Workshops Headline: Engage With the Archive in Action List Format (upcoming 3 events/workshops): [Date] – Community Oral History Night [Date] – Workshop: Caring for Your Own Creative Legacy [Date] – Pop-up Exhibit: “Black Futures in Print” CTA Button: 📅 View All Events 6. How You Can Support Headline: Be Part of the Movement Body Copy: This archive thrives through community support—whether by contributing materials, participating in our programs, or donating to fund our work. 3 CTAs with Icons: 📥 Submit to the Archive 💬 Volunteer or Share Your Story 💖 Donate to Support 7. Footer Sections: Quick Links: Archive | BCI | Events | About | Contact Contact Info: Email, Social Media, Location Newsletter Signup: “Get updates on artists, events, and archive news.” - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +300 -233

index.html CHANGED Viewed

@@ -3,344 +3,411 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Black Artists Archive | Preserving Black Artistic Legacies</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap');
         body {
-            font-family: 'Poppins', sans-serif;
         }
         .hero-bg {
-            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1400&q=80');
             background-size: cover;
             background-position: center;
         }
-        .artist-tile {
-            transition: all 0.3s ease;
         }
-        .artist-tile:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-        }
-        .event-card {
-            transition: all 0.3s ease;
         }
-        .event-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
-        .support-card {
             transition: all 0.3s ease;
         }
-        .support-card:hover {
             transform: scale(1.03);
         }
     </style>
 </head>
-<body class="bg-gray-50 text-gray-900">
     <!-- Navigation -->
-    <nav class="bg-black text-white py-4 px-6 shadow-md">
         <div class="container mx-auto flex justify-between items-center">
-            <div class="flex items-center space-x-2">
-                <i class="fas fa-archive text-2xl text-yellow-400"></i>
-                <span class="text-xl font-bold">Black Artists Archive</span>
-            </div>
             <div class="hidden md:flex space-x-8">
-                <a href="#" class="hover:text-yellow-400 transition">Archive</a>
-                <a href="#" class="hover:text-yellow-400 transition">BCI</a>
                 <a href="#" class="hover:text-yellow-400 transition">Events</a>
-                <a href="#" class="hover:text-yellow-400 transition">About</a>
                 <a href="#" class="hover:text-yellow-400 transition">Contact</a>
             </div>
-            <button class="md:hidden text-2xl">
-                <i class="fas fa-bars"></i>
-            </button>
         </div>
     </nav>
     <!-- Hero Section -->
-    <section class="hero-bg text-white py-24 px-6">
-        <div class="container mx-auto max-w-4xl text-center">
-            <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">Preserving Black Artistic Legacies. Empowering Future Voices.</h1>
-            <p class="text-xl md:text-2xl mb-10 leading-relaxed">The Black Artists Archive is a living, evolving record of Black creativity from Detroit and beyond—honoring artists, curators, and cultural stewards through archival storytelling, education, and community action.</p>
-            <div class="flex flex-col sm:flex-row justify-center gap-4">
-                <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-3 px-8 rounded-full transition flex items-center justify-center gap-2">
-                    <i class="fas fa-search"></i> Explore the Archive
-                </button>
-                <button class="bg-transparent hover:bg-white hover:text-black border-2 border-white text-white font-bold py-3 px-8 rounded-full transition flex items-center justify-center gap-2">
-                    <i class="fas fa-graduation-cap"></i> Learn about BCI
-                </button>
-            </div>
         </div>
     </section>
-    <!-- About Us Snapshot -->
-    <section class="py-16 px-6 bg-white">
-        <div class="container mx-auto max-w-4xl">
-            <h2 class="text-3xl font-bold mb-8 text-center font-serif">What We Stand For</h2>
-            <p class="text-lg mb-8 text-center leading-relaxed">
-                The Black Artists Archive (BAA) is a community-rooted initiative focused on preserving, amplifying, and celebrating Black artistic contributions—especially from Detroit and the Midwest. Through our digital and physical archive, educational programs, and cultural events, we aim to foster a more equitable and representative art historical record.
-            </p>
             <div class="text-center">
-                <a href="#" class="inline-flex items-center text-black font-bold hover:text-yellow-600 transition">
-                    Learn more about our mission <i class="fas fa-arrow-right ml-2"></i>
-                </a>
             </div>
         </div>
     </section>
-    <!-- Featured Initiative: Black Curatorial Institute -->
-    <section class="py-16 px-6 bg-gray-100">
-        <div class="container mx-auto max-w-4xl">
-            <div class="flex flex-col md:flex-row items-center gap-8">
-                <div class="md:w-1/2">
-                    <img src="https://images.unsplash.com/photo-1562564055-71e051d33c19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Black Curatorial Institute" class="rounded-lg shadow-lg w-full">
                 </div>
-                <div class="md:w-1/2">
-                    <h2 class="text-3xl font-bold mb-6 font-serif">Curating with Care and Purpose</h2>
-                    <p class="text-lg mb-6 leading-relaxed">
-                        The Black Curatorial Institute (BCI) is a groundbreaking program equipping the next generation of curators, scholars, and cultural workers. BCI centers community-responsive practices, ethical curation, and the elevation of Black perspectives within the arts.
                     </p>
-                    <button class="bg-black hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-full transition flex items-center gap-2">
-                        <i class="fas fa-graduation-cap"></i> Join or Support the BCI
-                    </button>
                 </div>
             </div>
         </div>
     </section>
-    <!-- Spotlight: Recent Additions to the Archive -->
-    <section class="py-16 px-6 bg-white">
         <div class="container mx-auto">
-            <h2 class="text-3xl font-bold mb-12 text-center font-serif">New Voices, Rediscovered Histories</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                <!-- Artist 1 -->
-                <div class="artist-tile bg-white rounded-lg overflow-hidden shadow-md">
-                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Elaine Sanford" class="w-full h-48 object-cover">
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Elaine Sanford (b. 1946)</h3>
-                        <p class="text-gray-600 mb-4">"Textile artist and social historian whose quilts captured the changing neighborhoods of 1960s Detroit."</p>
-                        <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">View Work →</a>
-                    </div>
-                </div>
-                <!-- Artist 2 -->
-                <div class="artist-tile bg-white rounded-lg overflow-hidden shadow-md">
-                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Marcus Johnson" class="w-full h-48 object-cover">
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Marcus Johnson (1932-2009)</h3>
-                        <p class="text-gray-600 mb-4">Painter and muralist known for his vibrant depictions of Detroit's jazz scene and urban landscapes.</p>
-                        <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">View Work →</a>
-                    </div>
-                </div>
-                <!-- Artist 3 -->
-                <div class="artist-tile bg-white rounded-lg overflow-hidden shadow-md">
-                    <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Aisha Thompson" class="w-full h-48 object-cover">
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Aisha Thompson (b. 1978)</h3>
-                        <p class="text-gray-600 mb-4">Mixed-media artist exploring themes of identity, migration, and African diaspora through sculpture.</p>
-                        <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">View Work →</a>
                     </div>
                 </div>
-                <!-- Artist 4 -->
-                <div class="artist-tile bg-white rounded-lg overflow-hidden shadow-md">
-                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="James Watkins" class="w-full h-48 object-cover">
-                    <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">James Watkins (1955-2017)</h3>
-                        <p class="text-gray-600 mb-4">Photographer documenting Detroit's underground music scene and political movements.</p>
-                        <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">View Work →</a>
                     </div>
                 </div>
             </div>
-            <div class="text-center mt-12">
-                <button class="bg-black hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-full transition">
-                    Browse the full Archive
-                </button>
-            </div>
         </div>
     </section>
-    <!-- Upcoming Events / Workshops -->
-    <section class="py-16 px-6 bg-gray-100">
-        <div class="container mx-auto max-w-4xl">
-            <h2 class="text-3xl font-bold mb-12 text-center font-serif">Engage With the Archive in Action</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <!-- Event 1 -->
-                <div class="event-card bg-white rounded-lg overflow-hidden shadow-md">
-                    <div class="bg-yellow-400 text-black py-3 px-6">
-                        <p class="font-bold">June 15, 2023</p>
-                    </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-4">Community Oral History Night</h3>
-                        <p class="text-gray-600 mb-4">Join us for an evening of storytelling as we record and preserve personal narratives from Detroit's creative community.</p>
-                        <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">Learn More →</a>
                     </div>
                 </div>
-                <!-- Event 2 -->
-                <div class="event-card bg-white rounded-lg overflow-hidden shadow-md">
-                    <div class="bg-yellow-400 text-black py-3 px-6">
-                        <p class="font-bold">July 8, 2023</p>
-                    </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-4">Workshop: Caring for Your Own Creative Legacy</h3>
-                        <p class="text-gray-600 mb-4">Learn archival best practices to preserve your artwork, writings, and creative materials for future generations.</p>
-                        <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">Learn More →</a>
                     </div>
                 </div>
-                <!-- Event 3 -->
-                <div class="event-card bg-white rounded-lg overflow-hidden shadow-md">
-                    <div class="bg-yellow-400 text-black py-3 px-6">
-                        <p class="font-bold">August 22, 2023</p>
-                    </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-4">Pop-up Exhibit: "Black Futures in Print"</h3>
-                        <p class="text-gray-600 mb-4">Exploring the radical printmaking traditions of Detroit's Black artists and their visions for the future.</p>
-                        <a href="#" class="text-yellow-600 hover:text-yellow-800 font-medium">Learn More →</a>
                     </div>
                 </div>
             </div>
-            <div class="text-center mt-12">
-                <button class="bg-black hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-full transition flex items-center gap-2 mx-auto">
-                    <i class="far fa-calendar-alt"></i> View All Events
                 </button>
             </div>
         </div>
     </section>
-    <!-- How You Can Support -->
-    <section class="py-16 px-6 bg-black text-white">
-        <div class="container mx-auto max-w-4xl">
-            <h2 class="text-3xl font-bold mb-12 text-center font-serif">Be Part of the Movement</h2>
-            <p class="text-xl mb-12 text-center leading-relaxed">
-                This archive thrives through community support—whether by contributing materials, participating in our programs, or donating to fund our work.
-            </p>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <!-- Support Option 1 -->
-                <div class="support-card bg-gray-900 rounded-lg p-8 text-center">
-                    <div class="text-4xl mb-4 text-yellow-400">
-                        <i class="fas fa-inbox"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-4">Submit to the Archive</h3>
-                    <p class="mb-6">Share your artwork, documents, or family collections to help expand our historical record.</p>
-                    <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-2 px-6 rounded-full transition">
-                        Learn How
-                    </button>
-                </div>
-                <!-- Support Option 2 -->
-                <div class="support-card bg-gray-900 rounded-lg p-8 text-center">
-                    <div class="text-4xl mb-4 text-yellow-400">
-                        <i class="fas fa-comments"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-4">Volunteer or Share Your Story</h3>
-                    <p class="mb-6">Contribute your time, skills, or personal experiences to our growing community.</p>
-                    <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-2 px-6 rounded-full transition">
-                        Get Involved
-                    </button>
                 </div>
-                <!-- Support Option 3 -->
-                <div class="support-card bg-gray-900 rounded-lg p-8 text-center">
-                    <div class="text-4xl mb-4 text-yellow-400">
-                        <i class="fas fa-heart"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-4">Donate to Support</h3>
-                    <p class="mb-6">Your financial contributions help sustain our programs and preserve Black artistic heritage.</p>
-                    <button class="bg-yellow-400 hover:bg-yellow-500 text-black font-bold py-2 px-6 rounded-full transition">
-                        Give Now
-                    </button>
                 </div>
             </div>
         </div>
     </section>
     <!-- Footer -->
-    <footer class="bg-gray-100 py-12 px-6">
-        <div class="container mx-auto max-w-6xl">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <!-- Quick Links -->
                 <div>
-                    <h3 class="text-lg font-bold mb-4">Quick Links</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="hover:text-yellow-600 transition">Archive</a></li>
-                        <li><a href="#" class="hover:text-yellow-600 transition">BCI</a></li>
-                        <li><a href="#" class="hover:text-yellow-600 transition">Events</a></li>
-                        <li><a href="#" class="hover:text-yellow-600 transition">About</a></li>
-                        <li><a href="#" class="hover:text-yellow-600 transition">Contact</a></li>
                     </ul>
                 </div>
-                <!-- Contact Info -->
                 <div>
-                    <h3 class="text-lg font-bold mb-4">Contact Us</h3>
-                    <ul class="space-y-2">
-                        <li class="flex items-center gap-2">
-                            <i class="fas fa-envelope text-yellow-600"></i>
-                            <a href="mailto:info@blackartistsarchive.org" class="hover:text-yellow-600 transition">info@blackartistsarchive.org</a>
-                        </li>
-                        <li class="flex items-center gap-2">
-                            <i class="fas fa-map-marker-alt text-yellow-600"></i>
-                            <span>Detroit, MI</span>
-                        </li>
                     </ul>
-                    <div class="mt-4 flex space-x-4">
-                        <a href="#" class="text-gray-700 hover:text-black transition"><i class="fab fa-twitter text-xl"></i></a>
-                        <a href="#" class="text-gray-700 hover:text-black transition"><i class="fab fa-instagram text-xl"></i></a>
-                        <a href="#" class="text-gray-700 hover:text-black transition"><i class="fab fa-facebook text-xl"></i></a>
-                    </div>
                 </div>
-                <!-- Newsletter -->
-                <div class="md:col-span-2">
-                    <h3 class="text-lg font-bold mb-4">Get updates on artists, events, and archive news.</h3>
-                    <form class="flex flex-col sm:flex-row gap-2">
-                        <input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-400">
-                        <button type="submit" class="bg-black hover:bg-gray-800 text-white font-bold py-2 px-6 rounded transition">
-                            Subscribe
-                        </button>
-                    </form>
-                    <p class="text-sm mt-2 text-gray-600">We respect your privacy. Unsubscribe at any time.</p>
                 </div>
             </div>
-            <div class="border-t border-gray-300 mt-12 pt-8 text-center text-gray-600">
-                <p>© 2023 Black Artists Archive. All rights reserved.</p>
             </div>
         </div>
     </footer>
     <script>
-        // Mobile menu toggle functionality
-        document.querySelector('button.md\\:hidden').addEventListener('click', function() {
-            const navLinks = document.querySelector('.md\\:flex.space-x-8');
-            navLinks.classList.toggle('hidden');
-            navLinks.classList.toggle('flex');
-            navLinks.classList.toggle('flex-col');
-            navLinks.classList.toggle('absolute');
-            navLinks.classList.toggle('top-16');
-            navLinks.classList.toggle('right-6');
-            navLinks.classList.toggle('bg-black');
-            navLinks.classList.toggle('p-4');
-            navLinks.classList.toggle('rounded');
-            navLinks.classList.toggle('shadow-lg');
-            navLinks.classList.toggle('space-y-4');
-            navLinks.classList.toggle('space-x-0');
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=icosajim/baa-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Black Artists Archive</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');
         body {
+            font-family: 'Roboto', sans-serif;
+        }
+        .title-font {
+            font-family: 'Playfair Display', serif;
         }
         .hero-bg {
+            background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80');
             background-size: cover;
             background-position: center;
         }
+        .marquee {
+            animation: scroll 30s linear infinite;
+            white-space: nowrap;
         }
+        @keyframes scroll {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
         }
+        .pillar-card:hover {
             transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
         }
+        .resource-card {
             transition: all 0.3s ease;
         }
+        .resource-card:hover {
             transform: scale(1.03);
         }
     </style>
 </head>
+<body class="bg-gray-50">
     <!-- Navigation -->
+    <nav class="bg-black text-white py-4 px-6 sticky top-0 z-50 shadow-md">
         <div class="container mx-auto flex justify-between items-center">
+            <div class="text-2xl font-bold title-font">Black Artists Archive</div>
             <div class="hidden md:flex space-x-8">
+                <a href="#" class="hover:text-yellow-400 transition">About Us</a>
+                <a href="#" class="hover:text-yellow-400 transition">Brand Pillars</a>
                 <a href="#" class="hover:text-yellow-400 transition">Events</a>
+                <a href="#" class="hover:text-yellow-400 transition">Library & Research</a>
                 <a href="#" class="hover:text-yellow-400 transition">Contact</a>
             </div>
+            <div class="md:hidden">
+                <button id="menu-toggle" class="text-white focus:outline-none">
+                    <i class="fas fa-bars text-2xl"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Mobile Menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-black py-4 px-6 absolute left-0 right-0">
+            <a href="#" class="block py-2 hover:text-yellow-400">About Us</a>
+            <a href="#" class="block py-2 hover:text-yellow-400">Brand Pillars</a>
+            <a href="#" class="block py-2 hover:text-yellow-400">Events</a>
+            <a href="#" class="block py-2 hover:text-yellow-400">Library & Research</a>
+            <a href="#" class="block py-2 hover:text-yellow-400">Contact</a>
         </div>
     </nav>
     <!-- Hero Section -->
+    <section class="hero-bg text-white py-32 px-6">
+        <div class="container mx-auto text-center">
+            <h1 class="title-font text-4xl md:text-6xl font-bold mb-6">A community-centered space</h1>
+            <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Dedicated to the preservation and celebration of Black art & cultural history.</p>
+            <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
+                Learn More
+            </button>
         </div>
     </section>
+    <!-- Mission Section -->
+    <section class="py-20 px-6 bg-white">
+        <div class="container mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="title-font text-3xl md:text-4xl font-bold mb-4">Our Mission</h2>
+                <p class="text-gray-600 max-w-4xl mx-auto text-lg">
+                    We strive to create dynamic spaces where we empower to engage & contribute to the vibrancy of Black artistic expressions.
+                </p>
+            </div>
             <div class="text-center">
+                <button class="border-2 border-black hover:bg-black hover:text-white font-bold py-3 px-8 rounded-full transition duration-300">
+                    Explore More
+                </button>
             </div>
         </div>
     </section>
+    <!-- Brand Pillars -->
+    <section class="py-20 px-6 bg-gray-100">
+        <div class="container mx-auto">
+            <h2 class="title-font text-3xl md:text-4xl font-bold mb-16 text-center">Our Brand Pillars</h2>
+            <div class="grid md:grid-cols-3 gap-10">
+                <!-- Pillar 1 -->
+                <div class="pillar-card bg-white p-8 rounded-lg shadow-md transition duration-300">
+                    <div class="text-yellow-500 text-4xl mb-4">
+                        <i class="fas fa-archive"></i>
+                    </div>
+                    <h3 class="title-font text-2xl font-bold mb-4">The Archive</h3>
+                    <p class="text-gray-600 mb-6">
+                        BAA's primary foundational center is our archive, which consists of both a digital and physical repository that documents, collects, and preserves the legacies of Black artists from Detroit & the Midwest region.
+                    </p>
+                    <a href="#" class="text-black font-semibold hover:text-yellow-500 transition flex items-center">
+                        Learn More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
                 </div>
+                <!-- Pillar 2 -->
+                <div class="pillar-card bg-white p-8 rounded-lg shadow-md transition duration-300">
+                    <div class="text-yellow-500 text-4xl mb-4">
+                        <i class="fas fa-landmark"></i>
+                    </div>
+                    <h3 class="title-font text-2xl font-bold mb-4">Black Curatorial Institute</h3>
+                    <p class="text-gray-600 mb-6">
+                        The Black Curatorial Institute (BCI) creates a new professional development opportunity for arts professionals unlike any currently available in the sector. It is a new learning center advancing the curatorial experience.
                     </p>
+                    <a href="#" class="text-black font-semibold hover:text-yellow-500 transition flex items-center">
+                        Learn More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
+                </div>
+                <!-- Pillar 3 -->
+                <div class="pillar-card bg-white p-8 rounded-lg shadow-md transition duration-300">
+                    <div class="text-yellow-500 text-4xl mb-4">
+                        <i class="fas fa-users"></i>
+                    </div>
+                    <h3 class="title-font text-2xl font-bold mb-4">DUO Incubatory Residency</h3>
+                    <p class="text-gray-600 mb-6">
+                        Our third foundational initiative is DUO, a year-long artist/curator residency at the Black Artists Archive that sustains an artist/curator pair interested in experimental and contemporary praxis based in Black cultural frameworks.
+                    </p>
+                    <a href="#" class="text-black font-semibold hover:text-yellow-500 transition flex items-center">
+                        Explore More <i class="fas fa-arrow-right ml-2"></i>
+                    </a>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Events Section -->
+    <section class="py-20 px-6 bg-white">
         <div class="container mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center mb-16">
+                <h2 class="title-font text-3xl md:text-4xl font-bold">Keep Up-to-Date with Our Latest Events</h2>
+                <button class="mt-6 md:mt-0 border-2 border-black hover:bg-black hover:text-white font-bold py-3 px-8 rounded-full transition duration-300">
+                    Learn More
+                </button>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="bg-gray-100 p-8 rounded-lg">
+                    <div class="flex items-center mb-6">
+                        <div class="bg-black text-white text-center py-2 px-4 rounded mr-6">
+                            <div class="text-2xl font-bold">20</div>
+                            <div class="text-sm">SEP</div>
+                        </div>
+                        <div>
+                            <h3 class="title-font text-xl font-bold">Angles & Archives: Culinary Edition</h3>
+                            <p class="text-gray-600">Exploring the intersection of food and art in Black culture</p>
+                        </div>
                     </div>
+                    <button class="bg-black hover:bg-gray-800 text-white font-bold py-2 px-6 rounded-full transition duration-300">
+                        Learn More
+                    </button>
                 </div>
+                <div class="bg-gray-100 p-8 rounded-lg">
+                    <div class="flex items-center mb-6">
+                        <div class="bg-black text-white text-center py-2 px-4 rounded mr-6">
+                            <div class="text-2xl font-bold">15</div>
+                            <div class="text-sm">OCT</div>
+                        </div>
+                        <div>
+                            <h3 class="title-font text-xl font-bold">Soundscapes of Resistance</h3>
+                            <p class="text-gray-600">A musical journey through Black protest art</p>
+                        </div>
                     </div>
+                    <button class="bg-black hover:bg-gray-800 text-white font-bold py-2 px-6 rounded-full transition duration-300">
+                        Learn More
+                    </button>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Resources Section -->
+    <section class="py-20 px-6 bg-black text-white">
+        <div class="container mx-auto">
+            <h2 class="title-font text-3xl md:text-4xl font-bold mb-4 text-center">Discover Knowledge at Your Fingertips</h2>
+            <p class="text-gray-300 text-center mb-16 max-w-3xl mx-auto">
+                Access curated resources, rare collections, and archival materials celebrating Black artists in Detroit.
+            </p>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Resource 1 -->
+                <div class="resource-card bg-gray-900 rounded-lg overflow-hidden shadow-lg">
+                    <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
                     <div class="p-6">
+                        <h3 class="title-font text-xl font-bold mb-2">Music in The Black Canon</h3>
+                        <p class="text-gray-300 mb-4">Vinyl Legacies</p>
+                        <a href="#" class="text-yellow-400 font-semibold hover:text-yellow-300 transition flex items-center">
+                            Learn More <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
                     </div>
                 </div>
+                <!-- Resource 2 -->
+                <div class="resource-card bg-gray-900 rounded-lg overflow-hidden shadow-lg">
+                    <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
                     <div class="p-6">
+                        <h3 class="title-font text-xl font-bold mb-2">Illuminating Artists</h3>
+                        <p class="text-gray-300 mb-4">Plain Sight Archive</p>
+                        <a href="#" class="text-yellow-400 font-semibold hover:text-yellow-300 transition flex items-center">
+                            Learn More <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
                     </div>
                 </div>
+                <!-- Resource 3 -->
+                <div class="resource-card bg-gray-900 rounded-lg overflow-hidden shadow-lg">
+                    <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1580130732473-4371105c1c73?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"></div>
                     <div class="p-6">
+                        <h3 class="title-font text-xl font-bold mb-2">Archiving Black Detroit</h3>
+                        <p class="text-gray-300 mb-4">Black Bottom Archives</p>
+                        <a href="#" class="text-yellow-400 font-semibold hover:text-yellow-300 transition flex items-center">
+                            Learn More <i class="fas fa-arrow-right ml-2"></i>
+                        </a>
                     </div>
                 </div>
             </div>
+            <div class="text-center mt-16">
+                <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-8 rounded-full transition duration-300">
+                    Explore Resources
                 </button>
             </div>
         </div>
     </section>
+    <!-- Marquee Section -->
+    <section class="bg-yellow-500 py-6 overflow-hidden">
+        <div class="marquee flex items-center">
+            <span class="text-2xl md:text-3xl font-bold mx-4">Ditch the Zoo Join the Farm!</span>
+            <span class="text-2xl md:text-3xl font-bold mx-4">Ditch the Zoo Join the Farm!</span>
+            <span class="text-2xl md:text-3xl font-bold mx-4">Ditch the Zoo Join the Farm!</span>
+            <span class="text-2xl md:text-3xl font-bold mx-4">Ditch the Zoo Join the Farm!</span>
+            <span class="text-2xl md:text-3xl font-bold mx-4">Ditch the Zoo Join the Farm!</span>
+            <span class="text-2xl md:text-3xl font-bold mx-4">Ditch the Zoo Join the Farm!</span>
+            <span class="text-2xl md:text-3xl font-bold mx-4">Ditch the Zoo Join the Farm!</span>
+        </div>
+    </section>
+    <!-- Donate Section -->
+    <section class="py-16 px-6 bg-white">
+        <div class="container mx-auto text-center">
+            <button class="bg-black hover:bg-gray-800 text-white font-bold py-4 px-12 rounded-full text-lg transition duration-300 transform hover:scale-105">
+                Donate
+            </button>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section class="py-20 px-6 bg-gray-100">
+        <div class="container mx-auto">
+            <div class="grid md:grid-cols-2 gap-16">
+                <div>
+                    <h2 class="title-font text-3xl md:text-4xl font-bold mb-6">Have questions? <br>Get in Touch!</h2>
+                    <p class="text-gray-600 text-lg mb-8">
+                        Your voice matters. Let's build the archive together.
+                    </p>
+                    <div class="space-y-6">
+                        <div class="flex items-center">
+                            <i class="fas fa-envelope text-yellow-500 text-xl mr-4"></i>
+                            <a href="mailto:info@blackartistsarchive.org" class="hover:text-yellow-500 transition">info@blackartistsarchive.org</a>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-phone text-yellow-500 text-xl mr-4"></i>
+                            <a href="tel:313-263-6400" class="hover:text-yellow-500 transition">313-263-6400</a>
+                        </div>
                     </div>
                 </div>
+                <div>
+                    <form class="space-y-6">
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <label for="first-name" class="block text-gray-700 mb-2">First Name</label>
+                                <input type="text" id="first-name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
+                            </div>
+                            <div>
+                                <label for="last-name" class="block text-gray-700 mb-2">Last Name</label>
+                                <input type="text" id="last-name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
+                            </div>
+                        </div>
+                        <div>
+                            <label for="email" class="block text-gray-700 mb-2">Email</label>
+                            <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
+                        </div>
+                        <div>
+                            <label for="message" class="block text-gray-700 mb-2">Message</label>
+                            <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"></textarea>
+                        </div>
+                        <button type="submit" class="bg-black hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-full transition duration-300">
+                            Send Message
+                        </button>
+                    </form>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Newsletter -->
+    <section class="py-16 px-6 bg-black text-white">
+        <div class="container mx-auto text-center">
+            <h3 class="title-font text-2xl md:text-3xl font-bold mb-4">Get monthly updates</h3>
+            <div class="max-w-md mx-auto flex">
+                <input type="email" placeholder="Email" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-black">
+                <button class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 px-6 rounded-r-lg transition duration-300">
+                    Subscribe
+                </button>
+            </div>
+        </div>
+    </section>
     <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12 px-6">
+        <div class="container mx-auto">
+            <div class="grid md:grid-cols-4 gap-10">
                 <div>
+                    <h4 class="title-font text-xl font-bold mb-6">About Us</h4>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="hover:text-yellow-400 transition">Mission</a></li>
+                        <li><a href="#" class="hover:text-yellow-400 transition">History</a></li>
+                        <li><a href="#" class="hover:text-yellow-400 transition">Team</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="title-font text-xl font-bold mb-6">Brand Pillars</h4>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="hover:text-yellow-400 transition">The Archive</a></li>
+                        <li><a href="#" class="hover:text-yellow-400 transition">Black Curatorial Institute</a></li>
+                        <li><a href="#" class="hover:text-yellow-400 transition">DUO Incubatory Residency</a></li>
                     </ul>
                 </div>
+                <div>
+                    <h4 class="title-font text-xl font-bold mb-6">Connect</h4>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="hover:text-yellow-400 transition">Events</a></li>
+                        <li><a href="#" class="hover:text-yellow-400 transition">Library & Research</a></li>
+                        <li><a href="#" class="hover:text-yellow-400 transition">Contact Us</a></li>
+                        <li><a href="#" class="hover:text-yellow-400 transition">Press</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="title-font text-xl font-bold mb-6">Legal</h4>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="hover:text-yellow-400 transition">Terms and Conditions</a></li>
+                        <li><a href="#" class="hover:text-yellow-400 transition">Privacy Policy</a></li>
+                    </ul>
                 </div>
             </div>
+            <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
+                <p>&copy; 2023 Black Artists Archive. All rights reserved.</p>
             </div>
         </div>
     </footer>
     <script>
+        // Mobile menu toggle
+        document.getElementById('menu-toggle').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                }
+            });
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=icosajim/baa-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>