Add working frontend prototype with edit-in-place functionality
✨ Features implemented: - Complete demo website (Acme Consulting Services) - Core insertr.js library with edit-in-place functionality - Support for simple text and rich markdown content - Mock authentication system (login/logout simulation) - Edit mode toggle for client interface - Local storage persistence - Visual feedback for saving content - Multi-page support (index.html, about.html) - Responsive design with clean UI 🎯 Three user experiences: - Customer: Clean website with no edit interface - Client: Same website + edit buttons when authenticated - Developer: Simple class-based integration 🏗️ Architecture: - Vanilla JavaScript (no framework dependencies) - Alpine.js ready for enhanced interactivity - CSS-only styling for edit indicators - Mock API structure for backend planning Next: Connect to Go backend with real persistence
This commit is contained in:
125
demo-site/about.html
Normal file
125
demo-site/about.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>About - Acme Consulting Services</title>
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<link rel="stylesheet" href="insertr/insertr.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="insertr" data-content-id="nav-logo">
|
||||
<h1 class="logo">Acme Consulting</h1>
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
<!-- Authentication controls -->
|
||||
<div class="auth-controls">
|
||||
<button id="auth-toggle" class="btn-secondary">Login as Client</button>
|
||||
<button id="edit-mode-toggle" class="btn-primary" style="display: none;">Edit Mode: Off</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="insertr" data-content-id="about-hero" data-content-type="rich">
|
||||
<h1>About Acme Consulting</h1>
|
||||
<p class="lead">We're a team of experienced consultants dedicated to helping small businesses thrive in today's competitive marketplace.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Story Section -->
|
||||
<section class="services">
|
||||
<div class="container">
|
||||
<div class="insertr" data-content-id="our-story" data-content-type="rich">
|
||||
<h2>Our Story</h2>
|
||||
<p>Founded in 2020, Acme Consulting emerged from a simple observation: small businesses needed access to the same high-quality strategic advice that large corporations receive, but in a format that was accessible, affordable, and actionable.</p>
|
||||
|
||||
<p>Our founders, with combined experience of over 30 years in business strategy, operations, and technology, recognized that the traditional consulting model wasn't serving the needs of growing businesses. We set out to change that.</p>
|
||||
|
||||
<p>Today, we've helped over 200 businesses streamline their operations, clarify their strategy, and achieve sustainable growth. Our approach combines proven methodologies with a deep understanding of the unique challenges facing small to medium-sized businesses.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<div class="insertr" data-content-id="team-section">
|
||||
<h2>Our Team</h2>
|
||||
<p>We're a diverse group of strategists, operators, and technology experts united by our passion for helping businesses succeed.</p>
|
||||
</div>
|
||||
|
||||
<div class="services-grid" style="margin-top: 3rem;">
|
||||
<div class="service-card">
|
||||
<div class="insertr" data-content-id="team-member-1" data-content-type="rich">
|
||||
<h3>Sarah Chen</h3>
|
||||
<p><strong>Founder & CEO</strong></p>
|
||||
<p>Former McKinsey consultant with 15 years of experience in strategy and operations. MBA from Stanford.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="insertr" data-content-id="team-member-2" data-content-type="rich">
|
||||
<h3>Michael Rodriguez</h3>
|
||||
<p><strong>Head of Operations</strong></p>
|
||||
<p>20 years in manufacturing and supply chain optimization. Expert in lean methodologies and process improvement.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="insertr" data-content-id="team-member-3" data-content-type="rich">
|
||||
<h3>Emma Thompson</h3>
|
||||
<p><strong>Digital Strategy Lead</strong></p>
|
||||
<p>Former tech startup founder turned consultant. Specializes in digital transformation and technology adoption.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Values Section -->
|
||||
<section class="testimonial">
|
||||
<div class="container">
|
||||
<div class="insertr" data-content-id="values-section" data-content-type="rich">
|
||||
<h2 style="margin-bottom: 2rem;">Our Values</h2>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; text-align: left;">
|
||||
<div>
|
||||
<h3>Client-First</h3>
|
||||
<p>Every recommendation we make is designed with your specific business context and goals in mind.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Practical Solutions</h3>
|
||||
<p>We believe in strategies that you can actually implement with your current resources and capabilities.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Long-term Partnership</h3>
|
||||
<p>We're not just consultants; we're partners in your business success for the long haul.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="insertr" data-content-id="footer-info">
|
||||
<p>© 2024 Acme Consulting Services. All rights reserved.</p>
|
||||
<p>📧 info@acmeconsulting.com | 📞 (555) 123-4567</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Insertr JavaScript Library -->
|
||||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<script src="insertr/insertr.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user