feat(ui): add process and approach section with coffee-themed steps
This commit is contained in:
81
index.html
81
index.html
@@ -247,8 +247,83 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<section id="process" class="section-padding section-alt">
|
||||
<div class="container">
|
||||
<h2>Our Brewing Process</h2>
|
||||
<div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3">
|
||||
<!-- Phase 1 -->
|
||||
<div class="col">
|
||||
<div class="process-card">
|
||||
<span class="process-number">01</span>
|
||||
<div class="process-icon-wrapper">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
|
||||
</div>
|
||||
<h3 class="process-title">Discovery (The Roast)</h3>
|
||||
<p class="process-desc">We start by selecting the finest beans—gathering your requirements, understanding your goals, and defining the scope of the project.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phase 2 -->
|
||||
<div class="col">
|
||||
<div class="process-card">
|
||||
<span class="process-number">02</span>
|
||||
<div class="process-icon-wrapper">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg>
|
||||
</div>
|
||||
<h3 class="process-title">Design (The Grind)</h3>
|
||||
<p class="process-desc">We prepare the perfect grind consistency. This involves creating wireframes, designing the UI/UX, and prototyping the visual experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phase 3 -->
|
||||
<div class="col">
|
||||
<div class="process-card">
|
||||
<span class="process-number">03</span>
|
||||
<div class="process-icon-wrapper">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
|
||||
</div>
|
||||
<h3 class="process-title">Development (The Brew)</h3>
|
||||
<p class="process-desc">The magic happens here. We write clean, efficient code to bring the designs to life, ensuring everything functions perfectly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phase 4 -->
|
||||
<div class="col">
|
||||
<div class="process-card">
|
||||
<span class="process-number">04</span>
|
||||
<div class="process-icon-wrapper">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
||||
</div>
|
||||
<h3 class="process-title">Testing (The Taste Test)</h3>
|
||||
<p class="process-desc">Quality assurance is key. We rigorously test for bugs, performance issues, and responsiveness across all devices and browsers.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phase 5 -->
|
||||
<div class="col">
|
||||
<div class="process-card">
|
||||
<span class="process-number">05</span>
|
||||
<div class="process-icon-wrapper">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
|
||||
</div>
|
||||
<h3 class="process-title">Launch (The Pour)</h3>
|
||||
<p class="process-desc">It's serving time. We handle the deployment, DNS settings, and final checks to ensure a smooth go-live experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Phase 6 -->
|
||||
<div class="col">
|
||||
<div class="process-card">
|
||||
<span class="process-number">06</span>
|
||||
<div class="process-icon-wrapper">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
|
||||
</div>
|
||||
<h3 class="process-title">Support (The Refill)</h3>
|
||||
<p class="process-desc">We don't just leave you with the cup. We offer ongoing maintenance, updates, and support to keep your site fresh.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<section id="portfolio" class="section-padding section-alt">
|
||||
<section id="portfolio" class="section-padding">
|
||||
<div class="container">
|
||||
<h2>Portfolio</h2>
|
||||
<div class="row g-4">
|
||||
@@ -376,7 +451,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section id="testimonials" class="section-padding">
|
||||
<section id="testimonials" class="section-padding section-alt">
|
||||
<div class="container">
|
||||
<h2>Testimonials</h2>
|
||||
<div class="row g-4">
|
||||
@@ -408,7 +483,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="section-padding section-alt">
|
||||
<section id="contact" class="section-padding">
|
||||
<div class="container">
|
||||
<h2>Contact Us</h2>
|
||||
<div class="row justify-content-center">
|
||||
|
||||
Reference in New Issue
Block a user