admin/35591-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4

Browse Source
This commit is contained in:
Flatlogic Bot 2025-11-13 09:22:48 +00:00
parent 97cbe8f10f
commit 93410c3389
2 changed files with 97 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
assets/css/custom.css
View File

@ -723,3 +723,71 @@ input:checked + .slider:before { transform: translateX(24px); }
background: var(--surface-color); background: var(--surface-color);
color: var(--color-primary); color: var(--color-primary);
} }
/* --- How It Works Section --- */
.how-it-works {
padding: calc(var(--base-spacing) * 4) 0;
background-color: var(--bg-color);
}
.how-it-works .section-header {
text-align: center;
margin-bottom: calc(var(--base-spacing) * 3);
}
.how-it-works .section-header h2 {
font-size: 2.5rem;
}
.how-it-works .section-header p {
font-size: 1.1rem;
color: var(--subtle-text-color);
max-width: 500px;
margin: 0.5rem auto 0;
}
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: calc(var(--base-spacing) * 2.5);
}
.step-card {
background-color: var(--surface-color);
border-radius: var(--border-radius);
padding: calc(var(--base-spacing) * 2);
text-align: center;
border: 1px solid var(--border-color);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
.step-icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--gradient);
margin-bottom: calc(var(--base-spacing) * 1.5);
color: white;
}
.step-icon-wrapper svg {
width: 36px;
height: 36px;
}
.step-content h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.step-content p {
color: var(--subtle-text-color);
}

43
index.php
View File

@ -94,22 +94,37 @@ require_once 'includes/header.php';
<section class="how-it-works"> <section class="how-it-works">
<div class="container"> <div class="container">
<h2><?php echo t('how_it_works_title'); ?></h2> <div class="section-header">
<div class="steps"> <h2><?php echo t('how_it_works_title'); ?></h2>
<div class="step"> <p>Our platform simplifies content creation into three easy steps.</p>
<div class="step-icon"><i data-feather="upload-cloud"></i></div> </div>
<h3><?php echo t('step1_title'); ?></h3> <div class="steps-container">
<p><?php echo t('step1_desc'); ?></p> <div class="step-card">
<div class="step-icon-wrapper">
<i data-feather="upload-cloud"></i>
</div>
<div class="step-content">
<h3><?php echo t('step1_title'); ?></h3>
<p><?php echo t('step1_desc'); ?></p>
</div>
</div> </div>
<div class="step"> <div class="step-card">
<div class="step-icon"><i data-feather="edit-3"></i></div> <div class="step-icon-wrapper">
<h3><?php echo t('step2_title'); ?></h3> <i data-feather="edit-3"></i>
<p><?php echo t('step2_desc'); ?></p> </div>
<div class="step-content">
<h3><?php echo t('step2_title'); ?></h3>
<p><?php echo t('step2_desc'); ?></p>
</div>
</div> </div>
<div class="step"> <div class="step-card">
<div class="step-icon"><i data-feather="zap"></i></div> <div class="step-icon-wrapper">
<h3><?php echo t('step3_title'); ?></h3> <i data-feather="zap"></i>
<p><?php echo t('step3_desc'); ?></p> </div>
<div class="step-content">
<h3><?php echo t('step3_title'); ?></h3>
<p><?php echo t('step3_desc'); ?></p>
</div>
</div> </div>
</div> </div>
</div> </div>