<!-- GOOGLE FONTS: paste this in page HEAD if Systeme.io allows it -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--sm-blue: #102A71;
--sm-magenta: #C0265C;
--sm-bg: #f5f7fb;
--sm-text: #111827;
--sm-muted: #6B7280;
--radius-card: 24px;
--radius-pill: 999px;
--shadow-soft: 0 18px 60px rgba(15, 23, 42, 0.08);
--max-width: 1120px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: radial-gradient(circle at top left, #ffe5f1 0, #f5f7fb 40%, #e3f3ff 100%);
color: var(--sm-text);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
.page {
min-height: 100vh;
}
.wrapper {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 20px;
}
/* NAVBAR */
.nav {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.75);
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
max-width: var(--max-width);
margin: 0 auto;
}
.nav-left {
display: flex;
align-items: center;
gap: 10px;
}
.nav-logo {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--sm-magenta), var(--sm-blue));
}
.nav-brand {
font-family: 'Poppins', system-ui, sans-serif;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 16px;
color: var(--sm-blue);
}
.nav-links {
display: flex;
align-items: center;
gap: 26px;
font-size: 14px;
color: var(--sm-muted);
}
.nav-links a:hover {
color: var(--sm-blue);
}
.nav-cta {
padding: 8px 18px;
border-radius: var(--radius-pill);
background: var(--sm-magenta);
color: #fff;
font-size: 13px;
font-weight: 500;
box-shadow: 0 10px 30px rgba(192, 38, 92, 0.35);
}
/* HERO */
.hero {
padding: 80px 0 60px;
}
.hero-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 40px 24px 56px;
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-soft);
border-radius: 32px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 48px;
}
.hero-overline {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--sm-magenta);
margin-bottom: 14px;
}
.hero-title {
font-family: 'Poppins', system-ui, sans-serif;
font-size: 42px;
line-height: 1.1;
font-weight: 700;
color: var(--sm-blue);
margin-bottom: 18px;
}
.hero-subtitle {
font-size: 18px;
line-height: 1.6;
color: var(--sm-muted);
max-width: 520px;
margin-bottom: 28px;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 10px;
}
.btn-primary {
padding: 13px 24px;
border-radius: var(--radius-pill);
background: var(--sm-blue);
color: #fff;
font-size: 15px;
font-weight: 600;
border: none;
box-shadow: 0 14px 40px rgba(16, 42, 113, 0.4);
cursor: pointer;
}
.btn-secondary {
padding: 13px 22px;
border-radius: var(--radius-pill);
background: #fff;
color: var(--sm-blue);
font-size: 15px;
font-weight: 500;
border: 1px solid rgba(148, 163, 184, 0.6);
cursor: pointer;
}
.hero-micro {
font-size: 13px;
color: var(--sm-muted);
}
.hero-right {
position: relative;
}
.hero-main-card {
background: linear-gradient(135deg, #ffffff, #f1f5f9);
border-radius: 28px;
padding: 20px;
box-shadow: var(--shadow-soft);
height: 260px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
color: var(--sm-muted);
}
.hero-float {
position: absolute;
width: 150px;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.15);
padding: 10px 12px;
font-size: 12px;
color: var(--sm-muted);
}
.hero-float:nth-child(2) {
top: -18px;
right: -10px;
}
.hero-float:nth-child(3) {
bottom: -18px;
left: 0;
}
.hero-float:nth-child(4) {
bottom: 20px;
right: -26px;
}
.hero-float-label {
font-weight: 600;
font-size: 12px;
margin-bottom: 4px;
color: var(--sm-blue);
}
/* GENERIC SECTION */
section {
padding: 70px 0;
}
.section-header {
text-align: center;
margin-bottom: 34px;
}
.section-title {
font-family: 'Poppins', system-ui, sans-serif;
font-size: 30px;
font-weight: 600;
color: var(--sm-blue);
margin-bottom: 12px;
}
.section-body {
max-width: 740px;
margin: 0 auto;
font-size: 17px;
line-height: 1.7;
color: var(--sm-muted);
}
/* PROBLEM IMAGES */
.problem-images {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 36px;
}
.image-card {
background: #ffffff;
border-radius: 20px;
padding: 14px;
box-shadow: 0 10px 26px rgba(148, 163, 184, 0.3);
text-align: center;
font-size: 13px;
color: var(--sm-muted);
}
.image-placeholder {
background: linear-gradient(135deg, #e5ecff, #ffe5f1);
border-radius: 16px;
height: 120px;
margin-bottom: 10px;
}
/* SOLUTION */
.solution-card {
max-width: var(--max-width);
margin: 0 auto;
background: #ffffff;
border-radius: var(--radius-card);
box-shadow: var(--shadow-soft);
padding: 40px 30px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 40px;
}
.solution-text p {
font-size: 17px;
line-height: 1.7;
color: var(--sm-muted);
margin-bottom: 10px;
}
.solution-image {
border-radius: 26px;
background: linear-gradient(135deg, #ffffff, #e5f1ff);
box-shadow: var(--shadow-soft);
height: 260px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
color: var(--sm-muted);
}
/* THREE PILLARS */
.pillars {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.pillar-card {
background: #ffffff;
border-radius: var(--radius-card);
padding: 22px 20px 20px;
box-shadow: 0 14px 40px rgba(148, 163, 184, 0.35);
display: flex;
flex-direction: column;
gap: 10px;
}
.pillar-icon {
width: 40px;
height: 40px;
border-radius: 999px;
background: radial-gradient(circle at top left, var(--sm-magenta), var(--sm-blue));
opacity: 0.95;
margin-bottom: 10px;
}
.pillar-title {
font-family: 'Poppins', system-ui, sans-serif;
font-size: 18px;
font-weight: 600;
color: var(--sm-blue);
}
.pillar-body {
font-size: 15px;
line-height: 1.7;
color: var(--sm-muted);
}
.pillar-image {
margin-top: 10px;
border-radius: 18px;
background: linear-gradient(135deg, #e5e7eb, #eef2ff);
height: 120px;
}
/* WHY DIFFERENT */
.split {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
}
.bullet-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
font-size: 16px;
color: var(--sm-muted);
}
.bullet-list span {
font-weight: 600;
color: var(--sm-blue);
}
.stack-images {
display: flex;
flex-direction: column;
gap: 18px;
}
.stack-card {
background: #ffffff;
border-radius: 20px;
padding: 18px;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
height: 130px;
font-size: 14px;
color: var(--sm-muted);
}
/* WHO FOR */
.who-bg {
background: #f3f4ff;
}
.who-grid {
max-width: var(--max-width);
margin: 30px auto 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.who-card {
background: #ffffff;
border-radius: var(--radius-card);
padding: 22px 20px;
box-shadow: 0 10px 32px rgba(148, 163, 184, 0.35);
}
.who-title {
font-family: 'Poppins';
font-size: 18px;
font-weight: 600;
color: var(--sm-blue);
margin-bottom: 10px;
}
.who-list {
padding-left: 18px;
font-size: 15px;
line-height: 1.8;
color: var(--sm-muted);
}
/* HOW IT WORKS */
.how {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
gap: 40px;
align-items: center;
}
.how-toggle {
display: inline-flex;
padding: 4px;
border-radius: var(--radius-pill);
background: #e5e7eb;
margin-bottom: 18px;
}
.how-toggle button {
border: none;
background: transparent;
padding: 8px 18px;
border-radius: var(--radius-pill);
font-size: 14px;
cursor: pointer;
color: var(--sm-muted);
}
.how-toggle button.active {
background: #ffffff;
color: var(--sm-blue);
box-shadow: 0 6px 18px rgba(148, 163, 184, 0.7);
}
.steps {
display: flex;
flex-direction: column;
gap: 18px;
}
.step {
display: flex;
gap: 14px;
align-items: flex-start;
}
.step-badge {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--sm-magenta), var(--sm-blue));
color: #fff;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 3px;
}
.step-content h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
}
.step-content p {
font-size: 14px;
color: var(--sm-muted);
}
.how-image {
border-radius: 28px;
background: linear-gradient(135deg, #ffffff, #e0f2fe);
box-shadow: var(--shadow-soft);
height: 280px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
color: var(--sm-muted);
}
/* IMPACT */
.impact-bg {
background: linear-gradient(135deg, #eef2ff, #fdf2ff);
}
.impact-grid {
max-width: var(--max-width);
margin: 30px auto 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.impact-card {
background: #ffffff;
border-radius: 20px;
padding: 18px 16px;
box-shadow: 0 14px 40px rgba(148, 163, 184, 0.4);
font-size: 14px;
color: var(--sm-muted);
}
.impact-card h4 {
font-size: 15px;
font-weight: 600;
color: var(--sm-blue);
margin-bottom: 6px;
}
.impact-banner {
max-width: var(--max-width);
margin: 30px auto 0;
border-radius: 22px;
padding: 18px 20px;
background: #111827;
color: #e5e7eb;
font-size: 15px;
line-height: 1.7;
text-align: center;
}
/* CREATOR CTA */
.cta-creator-bg {
background: radial-gradient(circle at top left, #ffe4f3, #f5f7fb);
}
.cta-split {
max-width: var(--max-width);
margin: 0 auto;
background: #ffffff;
border-radius: 30px;
box-shadow: var(--shadow-soft);
padding: 34px 30px;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 32px;
align-items: center;
}
.cta-body {
font-size: 16px;
line-height: 1.8;
color: var(--sm-muted);
margin-bottom: 18px;
}
.cta-subtext {
font-size: 13px;
color: var(--sm-muted);
margin-top: 6px;
}
.cta-image {
border-radius: 24px;
background: linear-gradient(135deg, #e0f2fe, #f9fafb);
height: 210px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
color: var(--sm-muted);
}
/* SUPPORTER CTA */
.cta-supporter-bg {
background: #f3f4ff;
}
.cta-center {
max-width: var(--max-width);
margin: 0 auto;
text-align: center;
}
.cta-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 18px;
}
.btn-magenta {
padding: 13px 24px;
border-radius: var(--radius-pill);
background: var(--sm-magenta);
color: #fff;
font-size: 15px;
font-weight: 600;
border: none;
box-shadow: 0 14px 40px rgba(192, 38, 92, 0.45);
cursor: pointer;
}
.btn-outline-dark {
padding: 13px 24px;
border-radius: var(--radius-pill);
background: transparent;
color: var(--sm-blue);
border: 1px solid rgba(15, 23, 42, 0.35);
font-size: 15px;
font-weight: 500;
cursor: pointer;
}
.cta-supporter-note {
margin-top: 12px;
font-size: 13px;
color: var(--sm-muted);
}
.supporter-image {
margin-top: 28px;
border-radius: 24px;
background: linear-gradient(135deg, #e5f3ff, #ffe5f0);
height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--sm-muted);
}
/* FOOTER */
footer {
background: #020617;
color: #e5e7eb;
padding: 40px 0 24px;
margin-top: 30px;
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 20px;
}
.footer-tagline {
font-size: 15px;
margin-bottom: 20px;
color: #f9fafb;
}
.footer-grid {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 26px;
font-size: 14px;
}
.footer-column h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-links a {
color: #9ca3af;
font-size: 13px;
}
.footer-bottom {
font-size: 12px;
color: #6b7280;
border-top: 1px solid rgba(55, 65, 81, 0.8);
padding-top: 14px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
/* RESPONSIVE */
@media (max-width: 960px) {
.hero-inner,
.solution-card,
.split,
.who-grid,
.how,
.impact-grid,
.cta-split {
grid-template-columns: minmax(0, 1fr);
}
.hero-right {
order: -1;
}
.hero-inner {
padding: 26px 22px 30px;
}
.hero-title {
font-size: 34px;
}
.pillars {
grid-template-columns: minmax(0, 1fr);
}
.problem-images {
grid-template-columns: minmax(0, 1fr);
}
.impact-grid {
grid-template-columns: minmax(0, 1fr);
}
.who-grid {
margin-top: 24px;
}
}
@media (max-width: 640px) {
.nav-links {
display: none;
}
.hero {
padding-top: 40px;
}
section {
padding: 52px 0;
}
}
</style>
<div class="page">
<!-- NAVBAR -->
<header class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="nav-logo"></div>
<div class="nav-brand">SOULMADE</div>
</div>
<nav class="nav-links">
<a href="#about">About</a>
<a href="#creators">Creators</a>
<a href="#supporters">Supporters</a>
<a href="#impact">Impact</a>
<a href="#contact">Contact</a>
<a href="#early-access" class="nav-cta">Get Early Access</a>
</nav>
</div>
</header>
<!-- HERO -->
<main>
<section class="hero" id="about">
<div class="hero-inner">
<div>
<div class="hero-overline">Inclusive marketplace for disabled creators</div>
<h1 class="hero-title">Soulmade – Where Every Order Tells a Story</h1>
<p class="hero-subtitle">
An inclusive platform where differently‑abled creators sell products, share skills, and offer services with dignity. This is not charity. This is business with a soul.
</p>
<div class="hero-buttons">
<button class="btn-primary">Become a Creator</button>
<button class="btn-secondary" id="early-access">Get Early Access</button>
</div>
<p class="hero-micro">
Built for artisans, teachers, and professionals with disabilities—open to buyers worldwide.
</p>
</div>
<div class="hero-right">
<div class="hero-main-card">
Hero mockup placeholder – add your platform screenshot or illustration here.
</div>
<div class="hero-float">
<div class="hero-float-label">Creator Spotlight</div>
<p>Drop an image of a disabled artisan and a quote here.</p>
</div>
<div class="hero-float">
<div class="hero-float-label">Product Card</div>
<p>Insert a product listing screenshot.</p>
</div>
<div class="hero-float">
<div class="hero-float-label">Profile Preview</div>
<p>Show a creator profile snippet and rating.</p>
</div>
</div>
</div>
</section>
<!-- PROBLEM -->
<section>
<div class="wrapper">
<div class="section-header">
<h2 class="section-title">Talent is everywhere. Opportunity isn’t.</h2>
<div class="section-body">
<p>
Across India and the world, people with disabilities craft beautiful products, cook incredible food, and master skills in art, music, tech, and more.
</p>
<p>
But most of them are invisible in the digital economy—blocked by inaccessible platforms, complex forms, and systems that treat them as charity, not as professionals.
</p>
<p>
Buyers want to support them, but don’t know where to find authentic, disability‑led businesses in one trusted place.
</p>
</div>
</div>
<div class="problem-images">
<div class="image-card">
<div class="image-placeholder"></div>
Talented creators working from homes, studios, and community centers.
</div>
<div class="image-card">
<div class="image-placeholder"></div>
Complex, inaccessible digital platforms that lock them out.
</div>
<div class="image-card">
<div class="image-placeholder"></div>
Supporters searching but unable to find disability‑led businesses easily.
</div>
</div>
</div>
</section>
<!-- SOULMADE SOLUTION -->
<section>
<div class="solution-card">
<div class="solution-text">
<h2 class="section-title" style="text-align:left;margin-bottom:14px;">
A home for disabled creators to sell, teach, and work.
</h2>
<p>Soulmade is a dedicated platform that puts differently‑abled creators at the centre.</p>
<p>Instead of others selling for them, Soulmade enables them to sell, teach, and get hired directly.</p>
<p>Every sale, course, and booking goes straight to the creator behind the work.</p>
</div>
<div class="solution-image">
Space for a Soulmade dashboard or collage of creators.
</div>
</div>
</section>
<!-- THREE PILLARS -->
<section>
<div class="wrapper">
<div class="section-header">
<h2 class="section-title">Three ways Soulmade empowers creators.</h2>
</div>
<div class="pillars">
<article class="pillar-card">
<div class="pillar-icon"></div>
<h3 class="pillar-title">Products</h3>
<p class="pillar-body">
Handicrafts, daily‑use essentials, art, and more—listed and sold by disabled creators themselves. Buyers discover unique, meaningful items while directly supporting the maker.
</p>
<div class="pillar-image"></div>
</article>
<article class="pillar-card">
<div class="pillar-icon"></div>
<h3 class="pillar-title">Creator Space</h3>
<p class="pillar-body">
A knowledge hub where creators turn their skills into income through tutorials, live classes, and courses. From jewellery making to music, they teach what they love—and get paid for it.
</p>
<div class="pillar-image"></div>
</article>
<article class="pillar-card">
<div class="pillar-icon"></div>
<h3 class="pillar-title">Job Board</h3>
<p class="pillar-body">
A clean profile space where disabled professionals showcase skills like editing, teaching, content writing, voice work, and more. Genuine clients reach out to collaborate and pay them as experts, not as charity cases.
</p>
<div class="pillar-image"></div>
</article>
</div>
</div>
</section>
<!-- WHY DIFFERENT -->
<section>
<div class="wrapper">
<div class="split">
<div>
<h2 class="section-title" style="text-align:left;margin-bottom:18px;">Not a marketplace. A movement.</h2>
<ul class="bullet-list">
<li><span>Disabled‑first, by design –</span> Only people with disabilities and disability‑led groups can list products, courses, or services.</li>
<li><span>Accessibility at the core –</span> Screen‑reader friendly layouts, clear navigation, and human onboarding support.</li>
<li><span>Real income, not sympathy –</span> Transparent payouts and fair pricing; creators set their own value.</li>
<li><span>Stories that matter –</span> Every creator has a profile telling their journey, turning purchases into powerful connections.</li>
</ul>
</div>
<div class="stack-images">
<div class="stack-card">
Creator story card placeholder – add an image and short quote about their journey.
</div>
<div class="stack-card">
Payout overview placeholder – visual for real income and transparent earnings.
</div>
</div>
</div>
</div>
</section>
<!-- WHO FOR -->
<section class="who-bg" id="creators">
<div class="wrapper">
<div class="section-header">
<h2 class="section-title">Who belongs on Soulmade?</h2>
</div>
<div class="who-grid">
<div class="who-card">
<h3 class="who-title">For Creators with Disabilities</h3>
<ul class="who-list">
<li>Artisans making handicrafts, chairs, soaps, agarbattis, decor, and daily‑use products.</li>
<li>Artists, dancers, singers, musicians, writers, designers, editors, and tutors.</li>
<li>Disability‑led NGOs and self‑help groups training and employing people with disabilities.</li>
</ul>
</div>
<div class="who-card" id="supporters">
<h3 class="who-title">For Conscious Supporters</h3>
<ul class="who-list">
<li>Individuals who want to buy with purpose, not just convenience.</li>
<li>Organizations, schools, and brands looking to source gifts, workshops, or talent from disabled professionals.</li>
<li>Anyone who believes inclusion should be normal—inside their home, office, and supply chain.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section>
<div class="wrapper">
<div class="section-header">
<h2 class="section-title">How it works</h2>
</div>
<div class="how">
<div>
<div class="how-toggle">
<button class="active" id="toggle-creators">For Creators</button>
<button id="toggle-buyers">For Buyers & Clients</button>
</div>
<div class="steps" id="steps-creators">
<div class="step">
<div class="step-badge">1</div>
<div class="step-content">
<h4>Apply as a Creator</h4>
<p>Share your details and skills; Soulmade helps you get onboarded.</p>
</div>
</div>
<div class="step">
<div class="step-badge">2</div>
<div class="step-content">
<h4>List Your Work</h4>
<p>Add products, courses, or service profiles with simple, guided steps.</p>
</div>
</div>
<div class="step">
<div class="step-badge">3</div>
<div class="step-content">
<h4>Earn with Dignity</h4>
<p>Receive orders, students, and clients who value your craft and pay fairly.</p>
</div>
</div>
</div>
<div class="steps" id="steps-buyers" style="display:none;">
<div class="step">
<div class="step-badge">1</div>
<div class="step-content">
<h4>Discover</h4>
<p>Browse products, courses, and skilled profiles by category.</p>
</div>
</div>
<div class="step">
<div class="step-badge">2</div>
<div class="step-content">
<h4>Choose & Support</h4>
<p>Purchase items, book a class, or contact a professional.</p>
</div>
</div>
<div class="step">
<div class="step-badge">3</div>
<div class="step-content">
<h4>See the Impact</h4>
<p>Know exactly who you’re supporting and how your money changes their life.</p>
</div>
</div>
</div>
</div>
<div class="how-image">
Visual placeholder for app screens that scroll with each step.
</div>
</div>
</div>
</section>
<!-- IMPACT -->
<section class="impact-bg" id="impact">
<div class="wrapper">
<div class="section-header">
<h2 class="section-title">Impact that goes beyond a single order.</h2>
<div class="section-body">
<p>Soulmade contributes to global goals that matter for disabled communities and their families.</p>
</div>
</div>
<div class="impact-grid">
<div class="impact-card">
<h4>Decent Work & Economic Growth</h4>
<p>Creating real, paid opportunities for people with disabilities.</p>
</div>
<div class="impact-card">
<h4>Reduced Inequalities</h4>
<p>Bringing disabled creators into mainstream commerce and culture.</p>
</div>
<div class="impact-card">
<h4>No Poverty</h4>
<p>Turning sidelined skills into consistent income streams for families.</p>
</div>
</div>
<div class="impact-banner">
Every new creator onboarded, every product sold, every skill booked moves the world closer to a future where disability is not a barrier to business.
</div>
</div>
</section>
<!-- CTA CREATORS -->
<section class="cta-creator-bg">
<div class="cta-split">
<div>
<h2 class="section-title" style="text-align:left;margin-bottom:14px;">
If you have a skill, Soulmade has a place for you.
</h2>
<p class="cta-body">
You might be making soaps from your kitchen, painting from your bedroom, or tutoring students online. With Soulmade, you don’t have to wait for someone else to “help” you. You step in as the creator, founder, and owner of your work.
</p>
<button class="btn-primary">Apply as a Creator</button>
<p class="cta-subtext">
We help you with onboarding, content, and tech—no previous e‑commerce experience needed.
</p>
</div>
<div class="cta-image">
Image placeholder for a creator at work.
</div>
</div>
</section>
<!-- CTA SUPPORTERS -->
<section class="cta-supporter-bg">
<div class="cta-center">
<h2 class="section-title">Be the customer that changes someone’s story.</h2>
<div class="section-body">
<p>
You already shop, gift, learn, and hire. Now you can do all of that while fueling the independence of disabled creators. One conscious order is stronger than a hundred sympathetic likes.
</p>
</div>
<div class="cta-buttons">
<button class="btn-magenta">Join the Soulmade Waitlist</button>
<button class="btn-outline-dark">Partner with Us (for NGOs / brands)</button>
</div>
<p class="cta-supporter-note">
Perfect for corporate gifting, school programs, NGOs, and conscious consumers.
</p>
<div class="supporter-image">
Visual placeholder for supporters around India and the world.
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer id="contact">
<div class="footer-inner">
<p class="footer-tagline">
Soulmade – Where Every Order Tells a Story. This is not charity. This is business, done right.
</p>
<div class="footer-grid">
<div class="footer-column">
<h4>Navigate</h4>
<ul class="footer-links">
<li><a href="#about">About</a></li>
<li><a href="#creators">Creators</a></li>
<li><a href="#supporters">Supporters</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Partners</h4>
<ul class="footer-links">
<li><a href="#impact">Impact</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">NGO Collaborations</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contact</h4>
<ul class="footer-links">
<li><a href="mailto:hello@soulmade.in">hello@soulmade.in</a></li>
<li><a href="#">Contact form</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year"></span> Soulmade. All rights reserved.</span>
<span>Built with love for differently‑abled creators.</span>
</div>
</div>
</footer>
</div>
<script>
// Year
var yearSpan = document.getElementById('year');
if (yearSpan) {
yearSpan.textContent = new Date().getFullYear();
}
// Toggle "How it works"
var toggleCreators = document.getElementById('toggle-creators');
var toggleBuyers = document.getElementById('toggle-buyers');
var stepsCreators = document.getElementById('steps-creators');
var stepsBuyers = document.getElementById('steps-buyers');
if (toggleCreators && toggleBuyers && stepsCreators && stepsBuyers) {
toggleCreators.addEventListener('click', function () {
toggleCreators.classList.add('active');
toggleBuyers.classList.remove('active');
stepsCreators.style.display = 'flex';
stepsBuyers.style.display = 'none';
});
toggleBuyers.addEventListener('click', function () {
toggleBuyers.classList.add('active');
toggleCreators.classList.remove('active');
stepsCreators.style.display = 'none';
stepsBuyers.style.display = 'flex';
});
}
</script>