Updated Doormile website
This commit is contained in:
R-Bharathraj
150
includes/sections/about/our-team.php
Normal file
150
includes/sections/about/our-team.php
Normal file
@@ -0,0 +1,150 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Modular Team Section Component
|
||||
* Usage: include 'includes/our-team.php';
|
||||
* Depends on: head.php being included in the parent page for global styles.
|
||||
*/
|
||||
?>
|
||||
<style>
|
||||
/* Scope safety: ensured by wrapping elementor-63 container below */
|
||||
.elementor-element-bf5fff2 {
|
||||
--margin-top: 100px !important;
|
||||
/* Slightly reduced for about page */
|
||||
--margin-bottom: 80px !important;
|
||||
}
|
||||
|
||||
.elementor-element-57c7653 .logico-title {
|
||||
font-size: 50px !important;
|
||||
/* Adjusted for better visibility */
|
||||
line-height: 1.2 !important;
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
/* Fix for overlapping text seen in screenshot */
|
||||
.elementor-element-bf5fff2 {
|
||||
clear: both;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="elementor elementor-63">
|
||||
<div class="elementor-element elementor-element-bf5fff2 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="bf5fff2" data-element_type="container">
|
||||
<div class="e-con-inner">
|
||||
<div class="elementor-element elementor-element-5a54148 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5a54148" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-94ebf2e elementor-widget elementor-widget-logico_heading" data-id="94ebf2e" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-title">/ team /</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-57c7653 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-logico_heading" data-id="57c7653" data-element_type="widget" data-settings="{"_animation":"logico_heading_animation"}" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<h3 class="logico-title">Meet our the best crew</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-138c81a elementor-widget elementor-widget-logico_team_listing" data-id="138c81a" data-element_type="widget" data-widget_type="logico_team_listing.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-team-listing-widget">
|
||||
<div class="archive-listing" data-ajax='{"post_type":"team","post_status":"publish","ignore_sticky_posts":true,"suppress_filters":true,"orderby":"post__in","order":"desc","link_base":"https:\/\/demo.artureanec.com\/themes\/logico-rounded\/home-3","post__in":["2807","2850","2855"],"posts_per_page":3,"columns_number":3,"paged":1}' data-widget='{"item_class":"team-item-wrapper","columns_number":3,"listing_type":"grid","show_media":"yes","show_title":"yes","show_position":"yes","show_socials":"yes","show_pagination":""}'>
|
||||
<div class="archive-listing-wrapper team-listing-wrapper team-grid-listing columns-3">
|
||||
<div class="team-item-wrapper post-2807 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div class="team-item">
|
||||
<div class="team-item-media">
|
||||
<div class="post-media">
|
||||
<a href="#">
|
||||
<picture>
|
||||
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 480w">
|
||||
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 660w">
|
||||
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 840w">
|
||||
<img decoding="async" alt="team-pic-1" title="team-pic-1" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-680x680.jpg" class="attachment-medium size-medium wp-post-image" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<div class="post-title">
|
||||
<a href="#">Samuel Peterson</a>
|
||||
</div>
|
||||
<div class="team-item-position">CEO Logico</div>
|
||||
<div class="team-item-socials">
|
||||
<ul class="team-socials wrapper-socials">
|
||||
<li><a href="#" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
|
||||
<li><a href="#" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
|
||||
<li><a href="#" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
|
||||
<li><a href="#" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-wrapper post-2850 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div class="team-item">
|
||||
<div class="team-item-media">
|
||||
<div class="post-media">
|
||||
<a href="#">
|
||||
<picture>
|
||||
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 480w">
|
||||
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 660w">
|
||||
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 840w">
|
||||
<img decoding="async" alt="team-pic-2" title="team-pic-2" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-680x680.jpg" class="attachment-medium size-medium wp-post-image" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<div class="post-title">
|
||||
<a href="#">Andrew McDickens</a>
|
||||
</div>
|
||||
<div class="team-item-position">Manager</div>
|
||||
<div class="team-item-socials">
|
||||
<ul class="team-socials wrapper-socials">
|
||||
<li><a href="#" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
|
||||
<li><a href="#" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
|
||||
<li><a href="#" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
|
||||
<li><a href="#" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-wrapper post-2855 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div class="team-item">
|
||||
<div class="team-item-media">
|
||||
<div class="post-media">
|
||||
<a href="#">
|
||||
<picture>
|
||||
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 480w">
|
||||
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 660w">
|
||||
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 840w">
|
||||
<img decoding="async" alt="team-pic-3" title="team-pic-3" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3.jpg" class="attachment-medium size-medium wp-post-image" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<div class="post-title">
|
||||
<a href="#">Samantha Powers</a>
|
||||
</div>
|
||||
<div class="team-item-position">HR Specialist</div>
|
||||
<div class="team-item-socials">
|
||||
<ul class="team-socials wrapper-socials">
|
||||
<li><a href="#" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
|
||||
<li><a href="#" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
|
||||
<li><a href="#" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
|
||||
<li><a href="#" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
98
includes/sections/about/our_office.php
Normal file
98
includes/sections/about/our_office.php
Normal file
@@ -0,0 +1,98 @@
|
||||
|
||||
<style>
|
||||
/* Our Office Component Styles */
|
||||
.offices-section-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
.offices-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1180px;
|
||||
padding: 80px 32px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.offices-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.offices-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 26px;
|
||||
}
|
||||
.office-card {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 18px rgba(17,20,25,0.07);
|
||||
transition: transform 0.42s ease, box-shadow 0.42s ease;
|
||||
}
|
||||
.office-card:hover { transform: translateY(-10px); box-shadow: 0 28px 60px rgba(192,32,42,0.14); }
|
||||
.map-container { height: 220px; overflow: hidden; }
|
||||
.card-body { padding: 28px 30px 32px; }
|
||||
.card-tag { font-size: 0.67rem; color: #C0202A; margin-bottom: 8px; }
|
||||
.card-city { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 700; margin-bottom: 10px; }
|
||||
.card-desc { font-size: 0.92rem; color: #4d5261; line-height: 1.72; }
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.offices-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.offices-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="offices-section-wrapper">
|
||||
<section class="offices-section">
|
||||
<header class="offices-header">
|
||||
<div class="offices-eyebrow">Where We Are</div>
|
||||
<h2 class="offices-title">Our Offices</h2>
|
||||
<p class="offices-subtitle">Strategically located to serve businesses across India</p>
|
||||
</header>
|
||||
|
||||
<div class="offices-grid">
|
||||
<!-- Coimbatore -->
|
||||
<article class="office-card">
|
||||
<div class="map-container">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d62617.64038696284!2d76.92516!3d11.01680!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba859af2f971cb5%3A0x2fc1c81e183ed282!2sCoimbatore%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1700000000000" width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-tag">Headquarters</p>
|
||||
<h4 class="card-city">Coimbatore</h4>
|
||||
<p class="card-desc">Our innovation hub where MileTruth™ AI was born</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Bengaluru -->
|
||||
<article class="office-card">
|
||||
<div class="map-container">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d124416.29!2d77.5007!3d12.9716!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1670c9b44e6d%3A0xf8dfc3e8517e4fe0!2sBengaluru%2C%20Karnataka!5e0!3m2!1sen!2sin!4v1700000000001" width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-tag">Technology Center</p>
|
||||
<h4 class="card-city">Bengaluru</h4>
|
||||
<p class="card-desc">Engineering excellence and product development</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Hyderabad -->
|
||||
<article class="office-card">
|
||||
<div class="map-container">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d121684.68!2d78.3674!3d17.3850!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb99daeaebd2c7%3A0xae93b78392bafbc2!2sHyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1700000000002" width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-tag">Operations Hub</p>
|
||||
<h4 class="card-city">Hyderabad</h4>
|
||||
<p class="card-desc">Scaling logistics operations across India</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
290
includes/sections/about/our_values.php
Normal file
290
includes/sections/about/our_values.php
Normal file
@@ -0,0 +1,290 @@
|
||||
<style>
|
||||
/* Our Values Component Styles — matched to Vision section style */
|
||||
.values-section-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #1F1F1F;
|
||||
position: relative;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
color: #ffffff;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.values-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
padding-top: 80px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
.values-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.values-eyebrow {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #C0202A;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.values-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.values-subtitle {
|
||||
color: #cfcfd6;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.values-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 80px;
|
||||
align-items: stretch;
|
||||
height: 68vh;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 28px;
|
||||
padding: 40px 36px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
|
||||
transition: transform 0.44s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.44s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #cfcfd6;
|
||||
/* default card text color for contrast on dark bg */
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.value-card:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
/* icon */
|
||||
.value-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.value-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.value-icon--1 {
|
||||
background: #C0202A;
|
||||
}
|
||||
|
||||
.value-icon--2 {
|
||||
background: #17A2A2;
|
||||
}
|
||||
|
||||
.value-icon--3 {
|
||||
background: #FF8C42;
|
||||
}
|
||||
|
||||
/* large, subtle numeric background for each card */
|
||||
.value-number {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 20px;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 9rem;
|
||||
line-height: 0.85;
|
||||
font-weight: 800;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.value-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
display: inline-block;
|
||||
background: #ffffff;
|
||||
color: #C0202A;
|
||||
font-weight: 700;
|
||||
font-size: 0.78rem;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 12px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.8;
|
||||
color: #cfcfd6;
|
||||
}
|
||||
|
||||
/* Ensure headings and paragraphs inside cards use readable colors */
|
||||
.value-card h1,
|
||||
.value-card h2,
|
||||
.value-card h3,
|
||||
.value-card h4,
|
||||
.value-card h5,
|
||||
.value-card p, {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* background image layer and overlay */
|
||||
.value-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgb(0, 0, 0), rgb(0, 0, 0));
|
||||
z-index: 1;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* subtle colored gradients per card to add visual depth */
|
||||
.value-card--1::before {
|
||||
background: linear-gradient(180deg, rgb(192, 32, 43), rgb(0, 0, 0));
|
||||
}
|
||||
|
||||
.value-card--2::before {
|
||||
background: linear-gradient(180deg, rgb(23, 162, 162), rgb(0, 0, 0));
|
||||
}
|
||||
|
||||
.value-card--3::before {
|
||||
background: linear-gradient(180deg, rgb(255, 138, 66), rgb(0, 0, 0));
|
||||
}
|
||||
|
||||
.value-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
transform: scale(1.03);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.value-card--1::after {
|
||||
background-image: url('assets/images/value-1.jpg');
|
||||
}
|
||||
|
||||
.value-card--2::after {
|
||||
background-image: url('assets/images/value-2.jpg');
|
||||
}
|
||||
|
||||
.value-card--3::after {
|
||||
background-image: url('assets/images/value-3.jpg');
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.values-grid {
|
||||
height: 72vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.values-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
height: 75vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.values-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
height: auto;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
min-height: 40vh;
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
.value-card::before {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.value-number {
|
||||
font-size: 3.6rem;
|
||||
right: 16px;
|
||||
top: 10px;
|
||||
color: rgb(255, 255, 255);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="values-section-wrapper">
|
||||
<section class="values-section">
|
||||
<header class="values-header">
|
||||
<div class="values-eyebrow">Who We Are</div>
|
||||
<h2 class="values-title" style="color: #ffffff;font-weight: 700;">Our Values</h2>
|
||||
<p class="values-subtitle">The principles that drive everything we do</p>
|
||||
</header>
|
||||
|
||||
<div class="values-grid">
|
||||
<article class="value-card value-card--1">
|
||||
<div class="value-number" aria-hidden="true">01</div>
|
||||
<div class="value-content">
|
||||
<p class="card-label">Purpose</p>
|
||||
<h4 class="card-title" style="color: #ffffff;font-weight: 700;">Mission-Driven</h4>
|
||||
<p class="card-desc">Transforming logistics with transparency and accountability at every mile.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="value-card value-card--2">
|
||||
<div class="value-number" aria-hidden="true">02</div>
|
||||
<div class="value-content">
|
||||
<p class="card-label">Culture</p>
|
||||
<h4 class="card-title" style="color: #ffffff;font-weight: 700;">People First</h4>
|
||||
<p class="card-desc">Empowering delivery partners and supporting women entrepreneurs.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="value-card value-card--3">
|
||||
<div class="value-number" aria-hidden="true">03</div>
|
||||
<div class="value-content">
|
||||
<p class="card-label">Standards</p>
|
||||
<h4 class="card-title" style="color: #ffffff;font-weight: 700;">Excellence</h4>
|
||||
<p class="card-desc">Setting new standards in logistics technology and service delivery.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
218
includes/sections/about/vision.php
Normal file
218
includes/sections/about/vision.php
Normal file
@@ -0,0 +1,218 @@
|
||||
<style>
|
||||
/* Vision & Mission Component Styles */
|
||||
.vm-section-wrapper {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #1F1F1F;
|
||||
position: relative;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.vm-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
padding-top: 90px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
.vm-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
align-items: stretch;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
|
||||
.vm-card {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
/* image layer rendered in ::after */
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 28px;
|
||||
padding: 52px 48px 44px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
|
||||
transition: transform 0.44s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.44s ease;
|
||||
}
|
||||
|
||||
.vm-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 30px 64px rgba(192, 32, 42, 0.18);
|
||||
}
|
||||
|
||||
.vm-icon-wrap {
|
||||
width: 100%;
|
||||
margin: 0 0 20px 0;
|
||||
background: transparent;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vm-icon-img {
|
||||
opacity: 0.2;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* dark overlay for readability */
|
||||
.vm-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
|
||||
z-index: 1;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
/* background-image layer with blur and opacity (beneath overlay) */
|
||||
.vm-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
filter: blur(1px) saturate(0.95);
|
||||
transform: scale(1.03);
|
||||
opacity: 0.80;
|
||||
transition: filter 200ms ease, opacity 200ms ease;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.vm-card>* {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Per-card background images (replace with real paths as needed) */
|
||||
.vm-card--vision::after {
|
||||
background-image: url('assets/images/vision.png');
|
||||
}
|
||||
|
||||
.vm-card--mission::after {
|
||||
background-image: url('assets/images/mission.png');
|
||||
}
|
||||
|
||||
.vm-tag {
|
||||
font-size: 0.67rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #C0202A;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.vm-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.vm-title em {
|
||||
font-style: italic;
|
||||
color: #C0202A;
|
||||
}
|
||||
|
||||
.vm-body {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 300;
|
||||
color: #cfcfd6;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.vm-section {
|
||||
min-height: 78vh;
|
||||
padding-bottom: 90px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vm-grid {
|
||||
height: auto;
|
||||
min-height: 520px;
|
||||
}
|
||||
|
||||
.vm-card {
|
||||
min-height: 520px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.vm-section-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.vm-section {
|
||||
padding: 70px 24px;
|
||||
}
|
||||
|
||||
.vm-grid {
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.vm-card {
|
||||
min-height: 360px;
|
||||
padding: 40px 34px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.vm-section {
|
||||
padding: 56px 16px;
|
||||
}
|
||||
|
||||
.vm-card {
|
||||
min-height: 320px;
|
||||
padding: 30px 24px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.vm-title {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.vm-body {
|
||||
font-size: 1rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="vm-section-wrapper">
|
||||
<section class="vm-section">
|
||||
<div class="vm-grid">
|
||||
<article class="vm-card vm-card--vision">
|
||||
<p class="vm-tag">Vision</p>
|
||||
<h3 class="vm-title" style="color: white;">Our <em>Vision</em></h3>
|
||||
<p class="vm-body">To become India's most trusted connected logistics platform, where every package travels on a single, transparent timeline.</p>
|
||||
</article>
|
||||
<article class="vm-card vm-card--mission">
|
||||
<p class="vm-tag">Mission</p>
|
||||
<h3 class="vm-title" style="color: white;">Our <em>Mission</em></h3>
|
||||
<p class="vm-body">To eliminate the chaos of fragmented logistics by unifying first, mid, and last miles with MileTruth™ AI.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
715
includes/sections/about/women-entrepreneurship.php
Normal file
715
includes/sections/about/women-entrepreneurship.php
Normal file
@@ -0,0 +1,715 @@
|
||||
<?php
|
||||
/**
|
||||
* Women Entrepreneurship Section
|
||||
* Designed to be included in about-us.php or other pages.
|
||||
*/
|
||||
?>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--we-primary: #c01227;
|
||||
--we-primary-light: #e62e45;
|
||||
--we-secondary: #222222;
|
||||
--we-accent: #f8f9fa;
|
||||
--we-text: #333333;
|
||||
--we-text-light: #666666;
|
||||
--we-white: #ffffff;
|
||||
--we-glass: rgba(255, 255, 255, 0.9);
|
||||
--we-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
||||
--we-radius: 24px;
|
||||
--we-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.we-section {
|
||||
font-family: 'Inter', 'Manrope', sans-serif;
|
||||
color: var(--we-text);
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
background: var(--we-white);
|
||||
}
|
||||
|
||||
.we-container {
|
||||
max-width: 1320px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* ─── HERO SECTION ─── */
|
||||
.we-hero {
|
||||
position: relative;
|
||||
padding: 120px 0 80px;
|
||||
background: radial-gradient(circle at top right, rgba(192, 18, 39, 0.05), transparent 40%),
|
||||
radial-gradient(circle at bottom left, rgba(192, 18, 39, 0.03), transparent 30%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.we-hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 20px;
|
||||
background: rgba(192, 18, 39, 0.1);
|
||||
color: var(--we-primary);
|
||||
border-radius: 100px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 32px;
|
||||
animation: fadeInDown 0.8s ease-out;
|
||||
}
|
||||
|
||||
.we-hero-badge svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.we-hero-title {
|
||||
font-size: clamp(40px, 6vw, 72px);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 24px;
|
||||
color: var(--we-secondary);
|
||||
animation: fadeInUp 0.8s ease-out 0.2s both;
|
||||
}
|
||||
|
||||
.we-hero-title em {
|
||||
font-style: normal;
|
||||
color: var(--we-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.we-hero-title em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: rgba(192, 18, 39, 0.1);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.we-hero-sub {
|
||||
max-width: 800px;
|
||||
margin: 0 auto 48px;
|
||||
font-size: 20px;
|
||||
color: var(--we-text-light);
|
||||
animation: fadeInUp 0.8s ease-out 0.4s both;
|
||||
}
|
||||
|
||||
.we-hero-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 18px 40px;
|
||||
background: var(--we-primary);
|
||||
color: var(--we-white);
|
||||
border-radius: 100px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: var(--we-transition);
|
||||
box-shadow: 0 10px 30px rgba(192, 18, 39, 0.3);
|
||||
animation: fadeInUp 0.8s ease-out 0.6s both;
|
||||
}
|
||||
|
||||
.we-hero-cta:hover {
|
||||
background: var(--we-primary-light);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 40px rgba(192, 18, 39, 0.4);
|
||||
}
|
||||
|
||||
.we-hero-cta svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.we-hero-cta:hover svg {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
/* ─── STATS SECTION ─── */
|
||||
.we-stats {
|
||||
padding: 60px 0;
|
||||
background: var(--we-secondary);
|
||||
color: var(--we-white);
|
||||
margin-top: -40px;
|
||||
border-radius: var(--we-radius);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
box-shadow: var(--we-shadow);
|
||||
}
|
||||
|
||||
.we-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.we-stat-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.we-stat-item:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.we-stat-num {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 8px;
|
||||
color: var(--we-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.we-stat-num span {
|
||||
color: var(--we-primary);
|
||||
}
|
||||
|
||||
.we-stat-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* ─── INITIATIVES SECTION ─── */
|
||||
.we-initiatives {
|
||||
padding: 120px 0;
|
||||
}
|
||||
|
||||
.we-section-header {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 80px;
|
||||
}
|
||||
|
||||
.we-eyebrow {
|
||||
color: var(--we-primary);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.we-title {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
color: var(--we-secondary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.we-init-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.we-init-card {
|
||||
padding: 48px;
|
||||
background: var(--we-white);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-radius: var(--we-radius);
|
||||
transition: var(--we-transition);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.we-init-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--we-shadow);
|
||||
border-color: rgba(192, 18, 39, 0.1);
|
||||
}
|
||||
|
||||
.we-init-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--we-primary);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.we-init-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.we-init-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.we-init-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
color: var(--we-secondary);
|
||||
}
|
||||
|
||||
.we-init-desc {
|
||||
color: var(--we-text-light);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* ─── SUCCESS STORIES ─── */
|
||||
.we-stories {
|
||||
padding: 120px 0;
|
||||
background: #f8f9fa;
|
||||
border-radius: 60px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
.we-story-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.we-story-card {
|
||||
background: var(--we-white);
|
||||
border-radius: var(--we-radius);
|
||||
overflow: hidden;
|
||||
transition: var(--we-transition);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.we-story-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--we-shadow);
|
||||
}
|
||||
|
||||
.we-story-img-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.we-story-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.we-story-card:hover .we-story-img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.we-story-body {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.we-story-role {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--we-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.we-story-name {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12px;
|
||||
color: var(--we-secondary);
|
||||
}
|
||||
|
||||
.we-story-location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--we-text-light);
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.we-story-location svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--we-primary);
|
||||
}
|
||||
|
||||
.we-story-quote {
|
||||
font-size: 17px;
|
||||
font-style: italic;
|
||||
color: var(--we-text);
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
border-left: 3px solid var(--we-primary);
|
||||
}
|
||||
|
||||
/* ─── CALL TO ACTION ─── */
|
||||
.we-cta {
|
||||
position: relative;
|
||||
padding: 100px 0;
|
||||
background: var(--we-primary);
|
||||
color: var(--we-white);
|
||||
border-radius: var(--we-radius);
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
.we-cta-inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.we-cta-title {
|
||||
font-size: clamp(32px, 4vw, 56px);
|
||||
font-weight: 800;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.we-cta-title em {
|
||||
font-style: normal;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.we-cta-sub {
|
||||
font-size: 20px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto 40px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.we-cta-btns {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-we-primary {
|
||||
background: var(--we-white);
|
||||
color: var(-we-primary);
|
||||
padding: 18px 48px;
|
||||
border-radius: 100px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: var(--we-transition);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-we-primary:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-we-outline {
|
||||
background: transparent;
|
||||
color: var(--we-white);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 18px 48px;
|
||||
border-radius: 100px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: var(--we-transition);
|
||||
}
|
||||
|
||||
.btn-we-outline:hover {
|
||||
border-color: var(--we-white);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ─── ANIMATIONS ─── */
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from { opacity: 0; transform: translateY(-30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.we-hero { padding: 80px 0 60px; }
|
||||
.we-hero-sub { font-size: 18px; }
|
||||
.we-stats { margin-top: 0; border-radius: 0; }
|
||||
.we-stat-item:not(:last-child)::after { display: none; }
|
||||
.we-title { font-size: 36px; }
|
||||
.we-init-card { padding: 32px; }
|
||||
.we-story-body { padding: 32px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="we-section">
|
||||
<!-- ═══ HERO ═══ -->
|
||||
<div class="we-hero">
|
||||
<div class="we-container">
|
||||
<div class="we-hero-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
|
||||
</svg>
|
||||
ESG Initiative
|
||||
</div>
|
||||
<h1 class="we-hero-title">Empowering <em>Women</em><br>in Logistics</h1>
|
||||
<p class="we-hero-sub">At Doormile, we believe in creating equal opportunities. Our Women Entrepreneurship program is dedicated to training, supporting, and celebrating women who are transforming the last-mile delivery ecosystem.</p>
|
||||
<a href="#" class="we-hero-cta" style="color: white; text-decoration: none">
|
||||
Join Our Program
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ═══ STATS ═══ -->
|
||||
<div style="margin-top: 30px;" class="elementor-element elementor-element-86f3204 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="86f3204" data-element_type="container" data-e-type="container">
|
||||
<div class="elementor-element elementor-element-8e5c81e e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="8e5c81e" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div class="e-con-inner">
|
||||
<div class="elementor-element elementor-element-628123a e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="628123a" data-element_type="container" data-e-type="container">
|
||||
<!-- <div class="elementor-element elementor-element-d6bdc87 elementor-widget elementor-widget-counter" data-id="d6bdc87" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="elementor-counter">
|
||||
<div class="elementor-counter-title">Delivered packages</div>
|
||||
<div class="elementor-counter-number-wrapper">
|
||||
<span class="elementor-counter-number-prefix"></span>
|
||||
<span class="elementor-counter-number" data-duration="2000" data-to-value="99.9" data-from-value="0" data-delimiter=".">1</span>
|
||||
<span class="elementor-counter-number-suffix"> %</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="elementor-counter">
|
||||
<div class="elementor-counter-title">Women Trained</div>
|
||||
<div class="elementor-counter-number-wrapper">
|
||||
<!-- <span class="elementor-counter-number-prefix">2.</span> -->
|
||||
<span class="elementor-counter-number" style="color: #ffffff;" data-duration="2000" data-to-value="500" data-from-value="250" data-delimiter=".">250</span>
|
||||
<span class="elementor-counter-number-suffix"> +</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="elementor-counter">
|
||||
<div class="elementor-counter-title">Fleet Partners</div>
|
||||
<div class="elementor-counter-number-wrapper">
|
||||
<!-- <span class="elementor-counter-number-prefix">2.</span> -->
|
||||
<span class="elementor-counter-number" style="color: #ffffff;" data-duration="2000" data-to-value="35" data-from-value="1" data-delimiter=".">1</span>
|
||||
<span class="elementor-counter-number-suffix"> %</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="elementor-counter">
|
||||
<div class="elementor-counter-title">Earnings Generated</div>
|
||||
<div class="elementor-counter-number-wrapper">
|
||||
<span class="elementor-counter-number-prefix" style="color: #ffffff;">₹</span>
|
||||
<span class="elementor-counter-number" style="color: #ffffff;" data-duration="2000" data-to-value="2" data-from-value="0" data-delimiter=".">0</span>
|
||||
<span class="elementor-counter-number-suffix"> Cr+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-a1cf3d4 elementor-widget elementor-widget-counter" data-id="a1cf3d4" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="elementor-counter">
|
||||
<div class="elementor-counter-title">Cities Covered</div>
|
||||
<div class="elementor-counter-number-wrapper">
|
||||
<span class="elementor-counter-number-prefix"></span>
|
||||
<span class="elementor-counter-number" style="color: #ffffff;" data-duration="2000" data-to-value="15" data-from-value="1" data-delimiter=".">15</span>
|
||||
<span class="elementor-counter-number-suffix"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="we-container">
|
||||
<div class="we-stats reveal">
|
||||
<div class="we-stats-grid">
|
||||
<div class="we-stat-item">
|
||||
<div class="we-stat-num">500 <span>+</span></div>
|
||||
<div class="we-stat-label">Women Trained</div>
|
||||
</div>
|
||||
<div class="we-stat-item">
|
||||
<div class="we-stat-num">35 <span>%</span></div>
|
||||
<div class="we-stat-label">Fleet Partners</div>
|
||||
</div>
|
||||
<div class="we-stat-item">
|
||||
<div class="we-stat-num">₹2 <span>Cr+</span></div>
|
||||
<div class="we-stat-label">Earnings Generated</div>
|
||||
</div>
|
||||
<div class="we-stat-item">
|
||||
<div class="we-stat-num">15 </div>
|
||||
<div class="we-stat-label">Cities Covered</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- ═══ INITIATIVES ═══ -->
|
||||
<!-- <div class="we-initiatives">
|
||||
<div class="we-container">
|
||||
<div class="we-section-header reveal">
|
||||
<span class="we-eyebrow">What We Offer</span>
|
||||
<h2 class="we-title">Our Initiatives</h2>
|
||||
<p class="we-text-light">Comprehensive programs designed to support women at every stage of their entrepreneurship journey.</p>
|
||||
</div>
|
||||
<div class="we-init-grid">
|
||||
<div class="we-init-card reveal">
|
||||
<span class="we-init-icon">📚</span>
|
||||
<h3 class="we-init-title">Training & Development</h3>
|
||||
<p class="we-init-desc">Comprehensive training programs designed to equip women with logistics management skills, from route planning to customer service excellence.</p>
|
||||
</div>
|
||||
<div class="we-init-card reveal">
|
||||
<span class="we-init-icon">💼</span>
|
||||
<h3 class="we-init-title">Business Support</h3>
|
||||
<p class="we-init-desc">Access to micro-financing, business mentorship, and operational support to help women entrepreneurs build sustainable delivery businesses.</p>
|
||||
</div>
|
||||
<div class="we-init-card reveal">
|
||||
<span class="we-init-icon">🏆</span>
|
||||
<h3 class="we-init-title">Recognition Programs</h3>
|
||||
<p class="we-init-desc">Annual awards and recognition for top-performing women entrepreneurs, celebrating their achievements and inspiring others across the network.</p>
|
||||
</div>
|
||||
<div class="we-init-card reveal">
|
||||
<span class="we-init-icon">🎯</span>
|
||||
<h3 class="we-init-title">Impact Tracking</h3>
|
||||
<p class="we-init-desc">Data-driven approach to track progress, set ambitious targets, and measure the real impact of our women empowerment initiatives.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- ═══ SUCCESS STORIES ═══ -->
|
||||
<div class="we-stories">
|
||||
<div class="we-container">
|
||||
<div class="we-section-header reveal">
|
||||
<span class="we-eyebrow">Success Stories</span>
|
||||
<h2 class="we-title">Women Leading the Way</h2>
|
||||
<p class="we-text-light">Meet the inspiring women who are redefining logistics in India.</p>
|
||||
</div>
|
||||
<div class="we-story-grid">
|
||||
<div class="we-story-card reveal">
|
||||
<div class="we-story-img-container">
|
||||
<img src="assets/images/women_story_1.png" alt="Lakshmi Devi" class="we-story-img">
|
||||
</div>
|
||||
<div class="we-story-body">
|
||||
<p class="we-story-role">Fleet Owner, Coimbatore</p>
|
||||
<h3 class="we-story-name">Lakshmi Devi</h3>
|
||||
<div class="we-story-location">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>
|
||||
Tamil Nadu, Coimbatore
|
||||
</div>
|
||||
<p class="we-story-quote">"Started with one e-rickshaw, now manages a fleet of 12 vehicles serving local businesses across the city."</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="we-story-card reveal">
|
||||
<div class="we-story-img-container">
|
||||
<img src="assets/images/women_story_2.png" alt="Priya Sharma" class="we-story-img">
|
||||
</div>
|
||||
<div class="we-story-body">
|
||||
<p class="we-story-role">Delivery Partner, Bengaluru</p>
|
||||
<h3 class="we-story-name">Priya Sharma</h3>
|
||||
<div class="we-story-location">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>
|
||||
Karnataka, Bengaluru
|
||||
</div>
|
||||
<p class="we-story-quote">"A single mother who found financial independence through Doormile's delivery network, now mentoring 30+ women."</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="we-story-card reveal">
|
||||
<div class="we-story-img-container">
|
||||
<img src="assets/images/women_story_3.png" alt="Fatima Khan" class="we-story-img">
|
||||
</div>
|
||||
<div class="we-story-body">
|
||||
<p class="we-story-role">Hub Manager, Hyderabad</p>
|
||||
<h3 class="we-story-name">Fatima Khan</h3>
|
||||
<div class="we-story-location">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>
|
||||
Telangana, Hyderabad
|
||||
</div>
|
||||
<p class="we-story-quote">"From delivery rider to managing a regional hub with 50+ partners in just 2 years through sheer determination."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ CTA ═══ -->
|
||||
<div class="we-container">
|
||||
<div class="we-cta reveal">
|
||||
<div class="we-cta-inner">
|
||||
<h2 class="we-cta-title">Ready to Start<br><em>Your Journey?</em></h2>
|
||||
<p class="we-cta-sub">Join our Women Entrepreneurship program and become part of <br>
|
||||
India's fastest-growing logistics network.</p>
|
||||
<div class="we-cta-btns">
|
||||
<a href="#" class="btn-we-primary" style="text-decoration: none;">
|
||||
Apply Now
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</svg>
|
||||
</a>
|
||||
<!-- <a href="#" class="btn-we-outline">Learn More</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Intersection Observer for scroll reveals
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const revealEls = document.querySelectorAll('.reveal');
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
entries.forEach(e => {
|
||||
if (e.isIntersecting) {
|
||||
e.target.classList.add('active');
|
||||
io.unobserve(e.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
|
||||
revealEls.forEach(el => io.observe(el));
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user