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>
|
</div>
|
||||||
</section>
|
</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 -->
|
<!-- Portfolio Section -->
|
||||||
<section id="portfolio" class="section-padding section-alt">
|
<section id="portfolio" class="section-padding">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Portfolio</h2>
|
<h2>Portfolio</h2>
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
@@ -376,7 +451,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Testimonials Section -->
|
<!-- Testimonials Section -->
|
||||||
<section id="testimonials" class="section-padding">
|
<section id="testimonials" class="section-padding section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Testimonials</h2>
|
<h2>Testimonials</h2>
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
@@ -408,7 +483,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section id="contact" class="section-padding section-alt">
|
<section id="contact" class="section-padding">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Contact Us</h2>
|
<h2>Contact Us</h2>
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
|
|||||||
68
styles.css
68
styles.css
@@ -358,6 +358,74 @@ footer {
|
|||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Process Section */
|
||||||
|
.process-card {
|
||||||
|
background-color: var(--bg-body); /* Contrast against section-alt */
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
z-index: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-alt .process-card {
|
||||||
|
background-color: var(--bg-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: var(--shadow-soft);
|
||||||
|
border-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-number {
|
||||||
|
position: absolute;
|
||||||
|
top: -15px;
|
||||||
|
right: -10px;
|
||||||
|
font-size: 5rem;
|
||||||
|
font-weight: 900;
|
||||||
|
color: var(--color-coffee-medium);
|
||||||
|
opacity: 0.08;
|
||||||
|
line-height: 1;
|
||||||
|
z-index: 0;
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-icon-wrapper {
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: color-mix(in srgb, var(--color-primary), transparent 90%);
|
||||||
|
color: var(--color-primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-title {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
color: var(--text-body);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-desc {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--text-body);
|
||||||
|
opacity: 0.85;
|
||||||
|
margin-bottom: 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
/* Animations */
|
/* Animations */
|
||||||
@keyframes fade-in-up {
|
@keyframes fade-in-up {
|
||||||
from {
|
from {
|
||||||
|
|||||||
Reference in New Issue
Block a user