Skip to content

Commit a0e9379

Browse files
imswarnilimswarnil
authored
as
1 parent 300e6db commit a0e9379

File tree

1 file changed

+301
-12
lines changed

1 file changed

+301
-12
lines changed

‎_layouts/home.html‎

Lines changed: 301 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,318 @@
11
---
22
layout: default
33
---
4+
<!--
5+
================================================================================
6+
Homepage for CRM Analytics Academy
7+
================================================================================
8+
This file contains the complete HTML structure and embedded CSS for the homepage.
9+
It uses SpruceCSS classes and variables for a consistent design system.
10+
-->
11+
12+
<style>
13+
/*
14+
==========================================================================
15+
PAGE-SPECIFIC STYLES: HOME
16+
==========================================================================
17+
*/
18+
19+
/* --- General Section Styling --- */
20+
.section {
21+
padding-block: clamp(4rem, 8vw, 6rem);
22+
}
23+
.section-title {
24+
text-align: center;
25+
max-width: 60ch;
26+
margin-inline: auto;
27+
margin-block-end: 3rem;
28+
}
29+
.section-title h2 {
30+
font-size: clamp(1.8rem, 4vw, 2.5rem);
31+
margin-bottom: 0.75rem;
32+
}
33+
.section-title p {
34+
font-size: var(--spruce-font-size-lead);
35+
color: var(--spruce-base-color-text);
36+
max-width: 50ch;
37+
margin-inline: auto;
38+
}
39+
40+
/* --- 1. Hero Section --- */
41+
.hero-section {
42+
padding-block: clamp(3rem, 7vw, 5rem);
43+
text-align: center;
44+
}
45+
.hero-grid {
46+
display: grid;
47+
align-items: center;
48+
gap: 3rem;
49+
grid-template-columns: 1fr; /* Mobile first */
50+
}
51+
.hero-image-wrapper {
52+
display: none; /* Hidden on mobile */
53+
}
54+
.hero-image-attribution {
55+
font-size: 0.75rem;
56+
margin-top: 1rem;
57+
opacity: 0.7;
58+
}
59+
.hero-image-attribution a {
60+
color: inherit;
61+
text-decoration: none;
62+
}
63+
.hero-image-attribution a:hover {
64+
text-decoration: underline;
65+
}
66+
67+
@media (min-width: 64em) {
68+
.hero-section {
69+
text-align: left;
70+
}
71+
.hero-grid {
72+
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
73+
}
74+
.hero-grid .post-heading__actions {
75+
justify-content: flex-start;
76+
}
77+
.hero-image-wrapper {
78+
display: flex;
79+
flex-direction: column;
80+
justify-content: center;
81+
align-items: center;
82+
}
83+
.hero-image-wrapper img {
84+
max-width: 100%;
85+
height: auto;
86+
}
87+
}
88+
89+
/* --- 2. Features Section --- */
90+
.features-grid {
91+
display: grid;
92+
gap: 1.5rem;
93+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
94+
}
95+
.feature-card {
96+
text-align: center;
97+
padding: 2rem 1.5rem;
98+
background-color: var(--spruce-footer-color-background);
99+
border: 1px solid var(--spruce-base-color-border);
100+
border-radius: var(--spruce-border-radius-lg);
101+
}
102+
.feature-card__icon {
103+
display: inline-flex;
104+
align-items: center;
105+
justify-content: center;
106+
block-size: 3.5rem;
107+
inline-size: 3.5rem;
108+
margin-bottom: 1.5rem;
109+
border-radius: 50%;
110+
background-color: hsla(var(--spruce-base-color-primary), 0.1);
111+
color: var(--spruce-base-color-primary);
112+
}
113+
.feature-card__icon svg {
114+
block-size: 1.75rem;
115+
inline-size: 1.75rem;
116+
}
117+
.feature-card h3 {
118+
font-size: 1.25rem;
119+
margin-bottom: 0.5rem;
120+
}
121+
.feature-card p {
122+
line-height: var(--spruce-line-height-md);
123+
}
124+
125+
/* --- 3. Learning Path (Timeline) --- */
126+
.timeline {
127+
position: relative;
128+
max-width: 750px;
129+
margin: 0 auto;
130+
padding: 2rem 0;
131+
}
132+
.timeline::after {
133+
content: '';
134+
position: absolute;
135+
width: 3px;
136+
background-color: var(--spruce-base-color-border);
137+
top: 0;
138+
bottom: 0;
139+
left: 50%;
140+
margin-left: -1.5px;
141+
}
142+
.timeline-container {
143+
padding: 10px 40px;
144+
position: relative;
145+
background-color: inherit;
146+
width: 50%;
147+
}
148+
.timeline-container.left {
149+
left: 0;
150+
}
151+
.timeline-container.right {
152+
left: 50%;
153+
}
154+
.timeline-container::after {
155+
content: '';
156+
position: absolute;
157+
width: 25px;
158+
height: 25px;
159+
right: -12.5px;
160+
background-color: var(--spruce-base-color-background);
161+
border: 4px solid var(--spruce-base-color-primary);
162+
top: 15px;
163+
border-radius: 50%;
164+
z-index: 1;
165+
}
166+
.timeline-container.right::after {
167+
left: -12.5px;
168+
}
169+
.timeline-content {
170+
padding: 20px 30px;
171+
background-color: var(--spruce-card-color-background);
172+
position: relative;
173+
border-radius: var(--spruce-border-radius);
174+
border: 1px solid var(--spruce-base-color-border);
175+
}
176+
.timeline-content h3 {
177+
margin-top: 0;
178+
color: var(--spruce-base-color-primary);
179+
}
180+
@media screen and (max-width: 600px) {
181+
.timeline::after {
182+
left: 31px;
183+
}
184+
.timeline-container {
185+
width: 100%;
186+
padding-left: 70px;
187+
padding-right: 25px;
188+
}
189+
.timeline-container.right, .timeline-container.left {
190+
left: 0%;
191+
}
192+
.timeline-container.left::after,
193+
.timeline-container.right::after {
194+
left: 18px;
195+
}
196+
}
197+
198+
/* --- 4. Final CTA Section --- */
199+
.cta-section {
200+
background-color: var(--spruce-footer-color-background);
201+
text-align: center;
202+
}
203+
</style>
4204

5205
<main id="content">
6-
<!-- HERO SECTION -->
206+
207+
<!-- ======================= -->
208+
<!-- 1. HERO SECTION -->
209+
<!-- ======================= -->
7210
<section class="hero-section">
8211
<div class="container">
9212
<div class="hero-grid">
10213
<div class="post-heading">
11-
<span class="post-heading__headline">For Every Job Seeker Who Feels Lost</span>
12-
<h1 class="post-heading__title">Your Degree is in Hand. Your Future Isn't.</h1>
214+
<span class="post-heading__headline">CRM ANALYTICS ACADEMY</span>
215+
<h1 class="post-heading__title">Master Salesforce CRM Analytics</h1>
13216
<p class="post-heading__description">
14-
This is not just another job portal. It’s a real, honest guide built on the experience of failure, for every student and graduate in India who feels stuck, confused, and alone on their career journey.
217+
Go from beginner to expert with our step-by-step tutorials, hands-on projects, and career-focused training. Turn complex data into powerful business insights.
15218
</p>
16219
<div class="post-heading__actions">
17-
<a href="{{ '/categories/the-beginning/' | relative_url }}" class="btn btn--primary btn--lg btn--primary-shadow">Start My Story</a>
18-
<a href="{{ '/categories/' | relative_url }}" class="btn btn--outline-primary btn--lg">Explore All Guides</a>
220+
<a href="{{ '/courses/' | relative_url }}" class="btn btn--primary btn--lg btn--primary-shadow">Start Learning Now</a>
221+
<a href="{{ '/tutorials/' | relative_url }}" class="btn btn--outline-primary btn--lg">View Free Tutorials</a>
19222
</div>
20223
</div>
21224
<div class="hero-image-wrapper">
22-
<img src="{{ '/assets/hero.svg' | relative_url }}" alt="Illustration of a person looking at a road map for their career.">
23-
<span>
24-
<a href="https://storyset.com/business">Business illustrations by Storyset</a>
25-
</span>
225+
<img src="{{ '/assets/hero.svg' | relative_url }}" alt="Illustration of a person analyzing charts and data on a dashboard.">
226+
<p class="hero-image-attribution">
227+
<a href="https://storyset.com/business" target="_blank" rel="noopener">Business illustrations by Storyset</a>
228+
</p>
26229
</div>
27230
</div>
28-
</section>
29-
</main>
231+
</div>
232+
</section>
233+
234+
<!-- ======================= -->
235+
<!-- 2. FEATURES SECTION -->
236+
<!-- ======================= -->
237+
<section class="section features-section">
238+
<div class="container">
239+
<div class="features-grid">
240+
<div class="feature-card">
241+
<div class="feature-card__icon">
242+
<svg xmlns="http://www.w3.org/2000/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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
243+
</div>
244+
<h3>Step-by-Step Curriculum</h3>
245+
<p>Follow a structured learning path designed to build your skills logically from the ground up.</p>
246+
</div>
247+
<div class="feature-card">
248+
<div class="feature-card__icon">
249+
<svg xmlns="http://www.w3.org/2000/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 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"></path><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path></svg>
250+
</div>
251+
<h3>Hands-On Projects</h3>
252+
<p>Apply what you learn with real-world projects that build a portfolio you can be proud of.</p>
253+
</div>
254+
<div class="feature-card">
255+
<div class="feature-card__icon">
256+
<svg xmlns="http://www.w3.org/2000/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 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"></path><circle cx="12" cy="10" r="3"></circle></svg>
257+
</div>
258+
<h3>Expert-Led Training</h3>
259+
<p>Learn from certified professionals with years of industry experience in Salesforce and data analytics.</p>
260+
</div>
261+
</div>
262+
</div>
263+
</section>
264+
265+
<!-- ======================= -->
266+
<!-- 3. LEARNING PATH -->
267+
<!-- ======================= -->
268+
<section class="section learning-path-section" style="background-color: var(--spruce-footer-color-background);">
269+
<div class="container">
270+
<div class="section-title">
271+
<h2>Your Learning Journey</h2>
272+
<p>We'll guide you through every essential topic to ensure you have a complete and practical skill set.</p>
273+
</div>
274+
<div class="timeline">
275+
<div class="timeline-container left">
276+
<div class="timeline-content">
277+
<h3>Module 1: Analytics Foundations</h3>
278+
<p>Get started with the core concepts, navigate the platform, and build your first dashboard.</p>
279+
</div>
280+
</div>
281+
<div class="timeline-container right">
282+
<div class="timeline-content">
283+
<h3>Module 2: Data Integration & Prep</h3>
284+
<p>Learn to connect and transform data from various sources using Data Manager and Recipes.</p>
285+
</div>
286+
</div>
287+
<div class="timeline-container left">
288+
<div class="timeline-content">
289+
<h3>Module 3: Advanced Dashboards</h3>
290+
<p>Master complex queries (SAQL), bindings, and interactive components to create dynamic analytics.</p>
291+
</div>
292+
</div>
293+
<div class="timeline-container right">
294+
<div class="timeline-content">
295+
<h3>Module 4: AI & Predictive Insights</h3>
296+
<p>Explore Einstein Discovery to uncover patterns and make predictions directly within your data.</p>
297+
</div>
298+
</div>
299+
</div>
300+
</div>
301+
</section>
302+
303+
<!-- ======================= -->
304+
<!-- 4. FINAL CTA -->
305+
<!-- ======================= -->
306+
<section class="section cta-section">
307+
<div class="container">
308+
<div class="section-title">
309+
<h2>Ready to Become a Data Expert?</h2>
310+
<p>Your journey to a high-demand career in analytics starts now. Join hundreds of students who have transformed their skills with our training.</p>
311+
<div class="post-heading__actions" style="justify-content: center; margin-top: 2rem;">
312+
<a href="{{ '/courses/' | relative_url }}" class="btn btn--primary btn--lg btn--primary-shadow">Explore All Courses</a>
313+
</div>
314+
</div>
315+
</div>
316+
</section>
317+
318+
</main>

0 commit comments

Comments
 (0)