waco-html-theme-preview/about.html at main · coowinit/waco-html-theme-preview · 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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WACO About Page</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" href="assets/css/waco-pages.css?v=2.2.0" />
</head>
<body>

  <!--
    WACO ABOUT PAGE v2.1.0
    - No header / navigation / footer
    - Data strength with number rolling animation
    - Product advantages: 4 cards with icons, reveal stagger and floating icon effect
    - Why choose us: left accordion + right image switching
    - Testimonials: Swiper carousel, 3 columns on desktop
  -->

  <main class="waco-page waco-about-page">

    <!-- 01. Inner Page Banner -->
    <section
      class="waco-inner-hero waco-about-inner-hero"
      style="background: linear-gradient(90deg, rgba(14, 24, 19, 0.82) 0%, rgba(14, 24, 19, 0.58) 50%, rgba(14, 24, 19, 0.22) 100%), url('assets/images/about/about-hero.jpg') center / cover no-repeat;"
    >
      <div class="waco-container">
        <div class="waco-inner-hero-content waco-reveal">
          <nav class="waco-breadcrumb" aria-label="Breadcrumb">
            <a href="/">Home</a>
            <span>/</span>
            <span>About</span>
          </nav>
          <h1>About Us</h1>
        </div>
      </div>
    </section>

    <!-- 02. Company Story -->
    <section class="waco-section waco-about-story-section">
      <div class="waco-container">
        <div class="waco-about-story-grid">
          <div class="waco-about-story-content waco-reveal">
            <span class="waco-eyebrow">Company Profile</span>
            <h2>About layout title placeholder for brand introduction.</h2>
            <p>
              Company introduction placeholder. This area can introduce brand background, manufacturing experience, product categories and long-term commitment to outdoor building materials.
            </p>
            <p>
              Additional paragraph placeholder. Use this section to explain your market focus, product development direction, service process and the value you provide to customers.
            </p>
            <div class="waco-btn-group">
              <a class="waco-btn waco-btn-primary" href="products.html">View Products</a>
              <a class="waco-btn waco-btn-secondary" href="contact.html">Contact Us</a>
            </div>
          </div>

          <div class="waco-about-story-media waco-reveal" style="background: url('assets/images/about/about-story.jpg') center / cover no-repeat;"></div>
        </div>
      </div>
    </section>

    <!-- 03. Data Strength -->
    <section class="waco-section waco-about-stats-section">
      <div class="waco-container">
        <div class="waco-section-heading waco-heading-split waco-reveal">
          <div>
            <span class="waco-eyebrow">Data Strength</span>
            <h2>Company strength layout title placeholder.</h2>
          </div>
          <p>
            Data description placeholder. Use numbers to present experience, production capacity, project coverage and service capability.
          </p>
        </div>

        <div class="waco-about-stats-grid" data-waco-counter-section>
          <article class="waco-about-stat-card waco-reveal">
            <strong><span data-waco-counter data-target="25" data-duration="1500">0</span>+</strong>
            <p>Years experience placeholder</p>
          </article>

          <article class="waco-about-stat-card waco-reveal">
            <strong><span data-waco-counter data-target="80" data-duration="1600">0</span>+</strong>
            <p>Export regions placeholder</p>
          </article>

          <article class="waco-about-stat-card waco-reveal">
            <strong><span data-waco-counter data-target="1200" data-duration="1800">0</span>+</strong>
            <p>Completed projects placeholder</p>
          </article>

          <article class="waco-about-stat-card waco-reveal">
            <strong><span data-waco-counter data-target="98" data-duration="1600">0</span>%</strong>
            <p>Service satisfaction placeholder</p>
          </article>
        </div>
      </div>
    </section>

    <!-- 04. Product Advantages -->
    <section class="waco-section waco-about-advantage-section">
      <div class="waco-container">
        <div class="waco-section-heading waco-heading-split waco-reveal">
          <div>
            <span class="waco-eyebrow">Product Advantages</span>
            <h2>Product advantage layout title placeholder.</h2>
          </div>
          <p>
            Advantage description placeholder. Present key selling points such as durability, surface finish, easy maintenance and outdoor application.
          </p>
        </div>

        <div class="waco-about-advantage-grid">
          <article class="waco-about-advantage-card waco-reveal">
            <div class="waco-about-floating-icon">◆</div>
            <h3>Weather Resistant</h3>
            <p>Feature description placeholder for outdoor exposure, moisture resistance and stable daily performance.</p>
          </article>

          <article class="waco-about-advantage-card waco-reveal">
            <div class="waco-about-floating-icon">✦</div>
            <h3>Low Maintenance</h3>
            <p>Feature description placeholder for easier cleaning, reduced upkeep and long-term practical use.</p>
          </article>

          <article class="waco-about-advantage-card waco-reveal">
            <div class="waco-about-floating-icon">◈</div>
            <h3>Rich Surface Options</h3>
            <p>Feature description placeholder for colours, textures, finishes and different project design requirements.</p>
          </article>

          <article class="waco-about-advantage-card waco-reveal">
            <div class="waco-about-floating-icon">✓</div>
            <h3>Application Friendly</h3>
            <p>Feature description placeholder for decking, cladding, balconies, gardens and commercial outdoor areas.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- 05. Why Choose Us -->
    <section class="waco-section waco-about-why-section">
      <div class="waco-container">
        <div class="waco-section-heading waco-heading-split waco-reveal">
          <div>
            <span class="waco-eyebrow">Why Choose Us</span>
            <h2>Why choose us layout title placeholder.</h2>
          </div>
          <p>
            This module uses an accordion-style interaction. The first item is open by default, and clicking another item switches the description and image.
          </p>
        </div>

        <div class="waco-about-why-layout waco-reveal" data-waco-why-choose>
          <div class="waco-about-why-list">
            <button class="waco-about-why-item is-active" type="button" data-why-index="0">
              <span>01</span>
              <strong>Reliable Manufacturing Capacity</strong>
              <p>
                Description placeholder. Explain production capability, stable supply, quality control process and the ability to support different project needs.
              </p>
            </button>

            <button class="waco-about-why-item" type="button" data-why-index="1">
              <span>02</span>
              <strong>Professional Product Support</strong>
              <p>
                Description placeholder. Explain how the team supports product selection, sample comparison, installation questions and project recommendations.
              </p>
            </button>

            <button class="waco-about-why-item" type="button" data-why-index="2">
              <span>03</span>
              <strong>Flexible Project Solutions</strong>
              <p>
                Description placeholder. Present project adaptability for residential gardens, balconies, commercial terraces and facade applications.
              </p>
            </button>

            <button class="waco-about-why-item" type="button" data-why-index="3">
              <span>04</span>
              <strong>Long-Term Service Mindset</strong>
              <p>
                Description placeholder. Highlight communication, after-sales support, resource downloads and long-term customer relationship management.
              </p>
            </button>
          </div>

          <div class="waco-about-why-image-wrap">
            <div
              class="waco-about-why-image is-active"
              data-why-image="0"
              style="background: url('assets/images/about/reason-01.jpg') center / cover no-repeat;"
            ></div>
            <div
              class="waco-about-why-image"
              data-why-image="1"
              style="background: url('assets/images/about/reason-02.jpg') center / cover no-repeat;"
            ></div>
            <div
              class="waco-about-why-image"
              data-why-image="2"
              style="background: url('assets/images/about/reason-03.jpg') center / cover no-repeat;"
            ></div>
            <div
              class="waco-about-why-image"
              data-why-image="3"
              style="background: url('assets/images/about/reason-04.jpg') center / cover no-repeat;"
            ></div>
          </div>
        </div>
      </div>
    </section>

    <!-- 06. Testimonials -->
    <section class="waco-section waco-about-testimonial-section">
      <div class="waco-container">
        <div class="waco-section-heading waco-heading-split waco-reveal">
          <div>
            <span class="waco-eyebrow">Customer Reviews</span>
            <h2>Customer testimonial layout title placeholder.</h2>
          </div>
          <p>
            Testimonial description placeholder. Use this area to show customer feedback, cooperation experience and project satisfaction.
          </p>
        </div>

        <div class="swiper waco-testimonial-swiper waco-reveal" data-waco-testimonial-swiper>
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <article class="waco-testimonial-card">
                <div class="waco-testimonial-stars">★★★★★</div>
                <p>
                  “Customer review placeholder. The product presentation, sample support and project communication were clear and helpful.”
                </p>
                <div class="waco-testimonial-author">
                  <span>JD</span>
                  <div>
                    <strong>John D.</strong>
                    <em>Project Buyer</em>
                  </div>
                </div>
              </article>
            </div>

            <div class="swiper-slide">
              <article class="waco-testimonial-card">
                <div class="waco-testimonial-stars">★★★★★</div>
                <p>
                  “Customer review placeholder. The materials worked well for our outdoor project, and the support team helped us compare options.”
                </p>
                <div class="waco-testimonial-author">
                  <span>AL</span>
                  <div>
                    <strong>Anna L.</strong>
                    <em>Landscape Designer</em>
                  </div>
                </div>
              </article>
            </div>

            <div class="swiper-slide">
              <article class="waco-testimonial-card">
                <div class="waco-testimonial-stars">★★★★★</div>
                <p>
                  “Customer review placeholder. The catalogue, colour samples and installation resources made the project planning easier.”
                </p>
                <div class="waco-testimonial-author">
                  <span>MK</span>
                  <div>
                    <strong>Mark K.</strong>
                    <em>Contractor</em>
                  </div>
                </div>
              </article>
            </div>

            <div class="swiper-slide">
              <article class="waco-testimonial-card">
                <div class="waco-testimonial-stars">★★★★★</div>
                <p>
                  “Customer review placeholder. The final outdoor space looks clean and modern, and the product maintenance is simple.”
                </p>
                <div class="waco-testimonial-author">
                  <span>SR</span>
                  <div>
                    <strong>Sophia R.</strong>
                    <em>Homeowner</em>
                  </div>
                </div>
              </article>
            </div>

            <div class="swiper-slide">
              <article class="waco-testimonial-card">
                <div class="waco-testimonial-stars">★★★★★</div>
                <p>
                  “Customer review placeholder. We received useful guidance for product selection, colours and application details.”
                </p>
                <div class="waco-testimonial-author">
                  <span>TN</span>
                  <div>
                    <strong>Thomas N.</strong>
                    <em>Distributor</em>
                  </div>
                </div>
              </article>
            </div>

            <div class="swiper-slide">
              <article class="waco-testimonial-card">
                <div class="waco-testimonial-stars">★★★★★</div>
                <p>
                  “Customer review placeholder. The project reference images and sample process helped our customer make decisions faster.”
                </p>
                <div class="waco-testimonial-author">
                  <span>EC</span>
                  <div>
                    <strong>Emma C.</strong>
                    <em>Retail Partner</em>
                  </div>
                </div>
              </article>
            </div>
          </div>

          <div class="waco-testimonial-controls">
            <div class="waco-testimonial-pagination"></div>
            <div class="waco-slider-arrows">
              <button class="waco-testimonial-prev" type="button" aria-label="Previous testimonial">←</button>
              <button class="waco-testimonial-next" type="button" aria-label="Next testimonial">→</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 07. CTA -->
    <section class="waco-section waco-cta-section">
      <div class="waco-container">
        <div class="waco-cta-box waco-reveal">
          <div class="waco-cta-content">
            <h2>Ready to explore product solutions?</h2>
            <p>
              CTA description placeholder. Guide users to request samples, compare products or contact the team for project recommendations.
            </p>
            <div class="waco-btn-group">
              <a class="waco-btn waco-btn-light" href="products.html">View Products</a>
              <a class="waco-btn waco-btn-ghost-light" href="contact.html">Contact Us</a>
            </div>
          </div>
          <div class="waco-cta-side">
            <div class="waco-cta-panel">
              <ul class="waco-check-list">
                <li>Product support placeholder</li>
                <li>Sample request placeholder</li>
                <li>Project consultation placeholder</li>
                <li>Installation guide placeholder</li>
              </ul>
            </div>
            <div class="waco-cta-image" style="background: url('assets/images/about/about-cta.jpg') center / cover no-repeat;"></div>
          </div>
        </div>
      </div>
    </section>

  </main>

  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="assets/js/waco-pages.js?v=2.2.0"></script>
</body>
</html>