coded/index.html at main · emma-ant/coded · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mensah | Crafted for the Exceptional</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Unbounded:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body data-page="home">
  <div class="page-shell">
    <header class="site-header">
      <div class="brand-mark">
        <a href="index.html"><img src="image.png" alt="Mensah logo" class="logo-image" /></a>
      </div>
      <nav class="site-nav">
        <a href="index.html">Home</a>
        <a href="shop.html">Collections</a>
        <a href="#bespoke">Bespoke</a>
        <a href="cart.html" class="nav-cta">Cart <span class="cart-count">0</span></a>
      </nav>
    </header>

    <main>
      <section class="hero-panel">
        <div class="hero-copy">
          <span class="eyebrow">NEW ARRIVALS</span>
          <h1>Tailoring that moves with quiet confidence.</h1>
          <p>Mensah blends precision cut tailoring with modern luxury for the discerning gentleman. Discover our curated ready-to-wear collection or design your own bespoke fit.</p>
          <div class="hero-actions">
            <a href="shop.html" class="button button-primary">Shop the Collection</a>
            <a href="#bespoke" class="button button-secondary">Request Custom</a>
          </div>
        </div>
        <div class="hero-visual"></div>
      </section>

      <section id="collections" class="section-block">
        <div class="section-intro">
          <p class="section-label">Featured</p>
          <h2>Signature pieces built to last.</h2>
          <p>Explore our most refined shapes, crafted in natural fibres with precision finishes and thoughtful details.</p>
        </div>

        <div class="product-grid" id="productGrid"></div>
      </section>

      <section id="campaignBanner" class="campaign-strip">
        <div class="campaign-copy">
          <p class="section-label">Campaign</p>
          <h2 id="campaignTitle">Loading campaign story...</h2>
          <p id="campaignCopy">Please wait while we fetch the latest offer.</p>
          <a href="shop.html" class="button button-primary">Shop this look</a>
        </div>
        <div class="campaign-visual" id="campaignVisual"></div>
      </section>

      <section id="story" class="section-block brand-panel">
        <div class="brand-copy">
          <p class="section-label">Brand Story</p>
          <h2>Designed with restraint, executed with care.</h2>
          <p>Mensah creates quiet luxury for the man who values precision, texture, and timeless confidence.</p>
          <a href="#contact" class="button button-secondary">Book a Consultation</a>
        </div>
        <div class="brand-highlights">
          <article>
            <span>Obsidian</span>
            <p>Deep tonal foundations for every season.</p>
          </article>
          <article>
            <span>Ivory</span>
            <p>Soft natural textures that soften the look.</p>
          </article>
          <article>
            <span>Gold</span>
            <p>Accent details that signal refined taste.</p>
          </article>
        </div>
      </section>

      <section id="bespoke" class="section-block split-panel bespoke-panel">
        <div class="split-copy">
          <p class="section-label">Bespoke</p>
          <h2>Custom request, delivered through WhatsApp.</h2>
          <p>Submit your bespoke request and receive a personal consultation from the Mensah tailoring team.</p>
        </div>
        <div class="split-form">
          <form id="bespokeForm" class="bespoke-form">
            <div class="form-row">
              <div class="form-group"><label for="name">Full Name</label><input id="name" name="name" type="text" placeholder="Your full name" required /></div>
              <div class="form-group"><label for="phone">Phone</label><input id="phone" name="phone" type="tel" placeholder="e.g. +233 24 000 0000" required /></div>
            </div>
            <div class="form-row">
              <div class="form-group"><label for="fit">Preferred fit</label><select id="fit" name="fit" required><option value="">Select fit</option><option value="Slim">Slim</option><option value="Regular">Regular</option><option value="Relaxed">Relaxed</option></select></div>
              <div class="form-group"><label for="notes">Style Notes</label><input id="notes" name="notes" type="text" placeholder="Optional design notes" /></div>
            </div>
            <button type="submit" class="button button-primary">Send to WhatsApp</button>
            <p class="form-note">We will message you with the next steps and final order confirmation.</p>
          </form>
        </div>
      </section>
    </main>

    <footer class="site-footer" id="contact">
      <div>
        <p class="footer-brand">MENSAH</p>
        <p>Crafted for the Exceptional.</p>
      </div>
      <div class="footer-links">
        <a href="shop.html">Collections</a>
        <a href="shop.html#bespoke">Bespoke</a>
        <a href="https://instagram.com/mensahbrand" target="_blank" rel="noreferrer">Instagram</a>
        <a href="https://www.google.com/maps/search/?api=1&query=Mensah+Tailoring" target="_blank" rel="noreferrer">Find us</a>
      </div>
    </footer>
  </div>

  <div class="modal" id="productModal" aria-hidden="true">
    <div class="modal-panel">
      <button class="modal-close" id="closeModal" aria-label="Close product detail">×</button>
      <div class="modal-grid">
        <div class="modal-image-panel">
          <img id="modalImage" src="" alt="Product image" />
          <div class="image-thumbs" id="modalThumbs"></div>
        </div>
        <div class="modal-details">
          <p class="section-label" id="modalCategory">Ready-to-Wear</p>
          <h2 id="modalTitle"></h2>
          <p class="modal-price" id="modalPrice"></p>
          <p class="modal-copy" id="modalCopy"></p>
          <p class="stock-status" id="modalStock"></p>

          <div class="form-group">
            <label for="productSizeSelect">Size</label>
            <select id="productSizeSelect"></select>
          </div>

          <div class="button-row">
            <button class="button button-primary" id="addToCartBtn">Add to Cart</button>
            <button class="button button-secondary" id="orderCustomBtn">Order Custom Size</button>
          </div>

          <div class="sizing-flow hidden" id="sizingFlow">
            <div class="sizing-step" id="sizingStep1">
              <h3>Step 1 — Measurements</h3>
              <div class="form-grid">
                <div class="form-group"><label for="measureChest">Chest (cm)</label><input id="measureChest" type="number" min="0" /></div>
                <div class="form-group"><label for="measureWaist">Waist (cm)</label><input id="measureWaist" type="number" min="0" /></div>
                <div class="form-group"><label for="measureHips">Hips (cm)</label><input id="measureHips" type="number" min="0" /></div>
                <div class="form-group"><label for="measureShoulder">Shoulder Width (cm)</label><input id="measureShoulder" type="number" min="0" /></div>
                <div class="form-group"><label for="measureSleeve">Sleeve Length (cm)</label><input id="measureSleeve" type="number" min="0" /></div>
                <div class="form-group"><label for="measureInseam">Inseam (cm)</label><input id="measureInseam" type="number" min="0" /></div>
                <div class="form-group"><label for="measureHeight">Height (cm)</label><input id="measureHeight" type="number" min="0" /></div>
                <div class="form-group"><label for="measureWeight">Weight (kg)</label><input id="measureWeight" type="number" min="0" /></div>
                <div class="form-group full-width"><label for="measureNotes">Special Notes</label><textarea id="measureNotes" rows="3" placeholder="Relaxed fit, longer hem, roomier chest"></textarea></div>
              </div>
              <div class="button-row"><button class="button button-primary" id="toStep2">Continue</button></div>
            </div>

            <div class="sizing-step hidden" id="sizingStep2">
              <h3>Step 2 — Fit Preferences</h3>
              <div class="form-group"><label for="fitStyle">Fit style</label><select id="fitStyle"><option value="Slim">Slim</option><option value="Regular">Regular</option><option value="Relaxed">Relaxed</option></select></div>
              <div class="form-group"><label for="customStyle">Custom style</label><select id="customStyle"><option value="">Select a custom style</option><option value="Minimal">Minimal</option><option value="Structured">Structured</option><option value="Modern">Modern</option><option value="Classic">Classic</option></select></div>
              <div class="form-group"><label for="fabricPreference">Fabric preference</label><input id="fabricPreference" type="text" placeholder="Light wool, heavy cotton, linen" /></div>
              <div class="form-group full-width"><label for="referencePhoto">Optional reference photo</label><input id="referencePhoto" type="file" accept="image/*" /></div>
              <div class="image-preview" id="referencePreview"></div>
              <div class="button-row">
                <button class="button button-secondary" id="backToStep1">Back</button>
                <button class="button button-primary" id="toStep3">Review Order</button>
              </div>
            </div>

            <div class="sizing-step hidden" id="sizingStep3">
              <h3>Step 3 — Order Review</h3>
              <div class="review-summary" id="orderSummary"></div>
              <p class="form-note">Pricing fee confirmed via WhatsApp after review with our tailoring team.</p>
              <div class="button-row">
                <button class="button button-secondary" id="backToStep2">Back</button>
                <button class="button button-primary" id="submitCustomOrder">Submit Custom Order via WhatsApp</button>
              </div>
            </div>

            <div class="sizing-step hidden" id="sizingStep4">
              <h3>Step 4 — WhatsApp Handoff</h3>
              <p>Your request has been compiled. Tap the button below to continue with Mensah on WhatsApp.</p>
              <div class="button-row"><button class="button button-primary" id="confirmCustomOrder">Continue to WhatsApp</button></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <a class="whatsapp-float" id="floatingWhatsapp" href="#" target="_blank" rel="noreferrer" aria-label="Chat on WhatsApp">💬</a>
  <script src="script.js"></script>
</body>
</html>