Files
insertr/demo-site/about.html
Joakim 72bd31b626 feat: implement collision-free lightweight hierarchical ID generation
- Replace content-hash based ID generation with position-based algorithm
- Use file + element identity + position index + hash for unique IDs
- Generate human-readable prefixes (e.g. index-lead-, index-p-2-)
- Add collision-resistant hash suffixes for guaranteed uniqueness
- Update Generate() to accept filePath parameter for context
- Fix ID collisions where hero and footer elements shared same ID
- Clean demo site files removing all data-content-id attributes
- Preserve insertr-gate elements for authentication functionality

Results: Hero gets 'index-lead-2-fc31f2', footer gets 'index-p-13-99fd13'
No more content cross-contamination between different elements.
2025-09-11 17:38:15 +02:00

137 lines
7.6 KiB
HTML

<!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"/>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<h1 class="logo insertr" data-content-id="about-logo-bf9558" data-content-type="text">Acme Consulting</h1>
<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>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1 class="insertr" data-content-id="about-h1-b0851a" data-content-type="text">About Acme Consulting</h1>
<p class="lead insertr" data-content-id="about-lead-ccc316" data-content-type="markdown">We&#39;re a team of experienced consultants dedicated to helping small businesses thrive in today&#39;s competitive marketplace.</p>
</div>
</section>
<!-- Story Section -->
<section class="services">
<div class="container">
<h2 class="insertr" data-content-id="about-h2-246854" data-content-type="text">Our Story</h2>
<div class="insertr-group">
<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&#39;t serving the needs of growing businesses. We set out to change that.</p>
<p>Today, we&#39;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">
<h2 class="insertr" data-content-id="about-h2-2-f16ab1" data-content-type="text">Our Team</h2>
<p class="insertr" data-content-id="about-p-0e26bc" data-content-type="markdown">We&#39;re a diverse group of strategists, operators, and technology experts united by our passion for helping businesses succeed.</p>
<div class="services-grid" style="margin-top: 3rem;">
<div class="service-card">
<div class="insertr">
<h3>Sarah Chen</h3>
<p><strong>Founder &amp; CEO</strong></p>
<p>Former <strong>McKinsey consultant</strong> with 15 years of experience in strategy and operations. MBA from Stanford.</p>
</div>
</div>
<div class="service-card">
<div class="insertr">
<h3>Michael Rodriguez</h3>
<p><strong>Head of Operations</strong></p>
<p>20 years in manufacturing and supply chain optimization. Expert in <strong>lean methodologies</strong> and process improvement.</p>
</div>
</div>
<div class="service-card">
<div class="insertr">
<h3>Emma Thompson</h3>
<p><strong>Digital Strategy Lead</strong></p>
<p>Former tech startup founder turned consultant. Specializes in <em>digital transformation</em> and technology adoption.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section class="testimonial">
<div class="container">
<h2 class="insertr" style="margin-bottom: 2rem;" data-content-id="about-h2-3-893efa" data-content-type="text">Our Values</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; text-align: left;">
<div>
<h3 class="insertr" data-content-id="about-h3-4-07ce1b" data-content-type="text">Client-First</h3>
<p class="insertr" data-content-id="about-p-2-9f60dd" data-content-type="markdown">Every recommendation we make is designed with your specific business context and goals in mind.</p>
</div>
<div>
<h3 class="insertr" data-content-id="about-h3-5-07ce1b" data-content-type="text">Practical Solutions</h3>
<p class="insertr" data-content-id="about-p-3-9f60dd" data-content-type="markdown">We believe in strategies that you can actually implement with your current resources and capabilities.</p>
</div>
<div>
<h3 class="insertr" data-content-id="about-h3-6-07ce1b" data-content-type="text">Long-term Partnership</h3>
<p class="insertr" data-content-id="about-p-4-9f60dd" data-content-type="markdown">We&#39;re not just consultants; we&#39;re partners in your business success for the long haul.</p>
</div>
</div>
</div>
</section>
<!-- Test Section for Insertr Features -->
<section class="testimonial">
<div class="container">
<h2 class="insertr" data-content-id="about-h2-4-893efa" data-content-type="text">Feature Tests</h2>
<!-- Test 1: .insertr container expansion (should make each p individually editable) -->
<div style="margin-bottom: 2rem;">
<h3>Test 1: Container Expansion (.insertr)</h3>
<div class="insertr" style="border: 2px dashed #ccc; padding: 1rem;">
<p>This paragraph should be individually editable with a textarea.</p>
<p>This second paragraph should also be individually editable.</p>
<p>Each paragraph should get its own modal when clicked.</p>
</div>
</div>
<!-- Test 2: .insertr-group collective editing (should edit all together) -->
<div>
<h3>Test 2: Group Editing (.insertr-group)</h3>
<div class="insertr-group" style="border: 2px solid #007cba; padding: 1rem;">
<p>This paragraph is part of a <strong>group</strong>.</p>
<p>Clicking anywhere should open one markdown editor with <em>rich formatting</em>.</p>
<p>All content should be <strong>editable together</strong> as markdown with proper <em>HTML conversion</em>.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="insertr" data-content-id="about-p-8-c093f3" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="about-p-9-c093f3" data-content-type="markdown">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | <button class="insertr-gate" style="background: none; border: 1px solid #ccc; padding: 4px 8px; margin-left: 10px; border-radius: 3px; font-size: 11px;">🔧 Edit</button></p>
</div>
</footer>
<!-- Insertr JavaScript Library -->
<script type="text/javascript" src="insertr.js"></script>
</body></html>