Skip to content

Commit bf769a1

Browse files
imswarnilimswarnil
authored
as
1 parent f0227e0 commit bf769a1

File tree

2 files changed

+218
-0
lines changed

2 files changed

+218
-0
lines changed

‎index.md‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,3 +291,216 @@ description: "An open-source Jekyll theme crafted using the Bulma CSS framework.
291291
</div>
292292
</section>
293293
</div>
294+
295+
<!-- =============================================================================
296+
// COMPONENT: PROFESSIONAL LEARNING PATH
297+
// A responsive, grid-based component showcasing a structured course curriculum.
298+
// ============================================================================= -->
299+
300+
<style>
301+
/* --- Main Section Wrapper --- */
302+
.learning-path-section {
303+
background-color: var(--spruce-footer-color-background);
304+
border-top: 1px solid var(--spruce-base-color-border);
305+
border-bottom: 1px solid var(--spruce-base-color-border);
306+
}
307+
308+
/* --- Grid Layout --- */
309+
.learning-path-grid {
310+
--columns: 1; /* Mobile First */
311+
display: grid;
312+
gap: clamp(1.5rem, 3vw, 2rem);
313+
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
314+
}
315+
@media(min-width: 48em) { .learning-path-grid { --columns: 2; } }
316+
@media(min-width: 80em) { .learning-path-grid { --columns: 3; } }
317+
318+
/* --- The Learning Card --- */
319+
.learning-card {
320+
display: flex;
321+
flex-direction: column;
322+
height: 100%;
323+
position: relative;
324+
overflow: hidden;
325+
background-color: var(--spruce-card-color-background);
326+
border: 1px solid var(--spruce-base-color-border);
327+
border-radius: var(--spruce-border-radius-lg);
328+
box-shadow: 0 4px 10px hsla(200, 30%, 20%, 0.03);
329+
transition: transform var(--spruce-duration) var(--spruce-timing-function),
330+
box-shadow var(--spruce-duration) var(--spruce-timing-function);
331+
animation: card-fade-in 0.5s var(--spruce-timing-function) both;
332+
}
333+
.learning-card:hover {
334+
transform: translateY(-6px);
335+
box-shadow: var(--spruce-box-shadow);
336+
}
337+
338+
/* Staggered Animation Delay */
339+
.learning-path-grid > :nth-child(2) { animation-delay: 0.1s; }
340+
.learning-path-grid > :nth-child(3) { animation-delay: 0.2s; }
341+
342+
@keyframes card-fade-in {
343+
from { opacity: 0; transform: translateY(20px); }
344+
to { opacity: 1; transform: translateY(0); }
345+
}
346+
347+
/* Decorative Background Icon */
348+
.learning-card__bg-icon {
349+
position: absolute;
350+
bottom: 0;
351+
right: 0;
352+
font-size: 7rem;
353+
line-height: 1;
354+
color: var(--spruce-base-color-border);
355+
opacity: 0.8;
356+
pointer-events: none;
357+
transform: translate(25%, 25%) rotate(10deg);
358+
transition: transform 0.4s ease, color 0.4s ease;
359+
z-index: 1;
360+
}
361+
.learning-card:hover .learning-card__bg-icon {
362+
color: var(--spruce-base-color-primary);
363+
transform: translate(15%, 15%) rotate(-5deg);
364+
}
365+
366+
/* Content inside the card */
367+
.learning-card__content {
368+
padding: 1.5rem;
369+
flex-grow: 1;
370+
display: flex;
371+
flex-direction: column;
372+
position: relative;
373+
z-index: 2;
374+
}
375+
.learning-card__number {
376+
position: absolute;
377+
top: 1.5rem;
378+
right: 1.5rem;
379+
font-size: 1rem;
380+
font-weight: 800;
381+
color: var(--spruce-base-color-text);
382+
background-color: var(--spruce-footer-color-background);
383+
border: 1px solid var(--spruce-base-color-border);
384+
border-radius: 50px;
385+
line-height: 1;
386+
padding: 0.35rem 0.65rem;
387+
}
388+
389+
.learning-card__title {
390+
font-size: 1.3rem;
391+
margin-block: 0 0.5rem;
392+
}
393+
.learning-card__description {
394+
color: var(--spruce-base-color-text);
395+
line-height: var(--spruce-line-height-md);
396+
margin-block-end: 1.5rem;
397+
}
398+
399+
/* Meta Information Bar */
400+
.learning-card__meta {
401+
display: flex;
402+
flex-wrap: wrap;
403+
gap: 1rem;
404+
padding-block: 1rem;
405+
margin-top: auto; /* Pushes meta bar to the bottom */
406+
border-top: 1px solid var(--spruce-base-color-border);
407+
font-size: 0.8rem;
408+
color: var(--spruce-base-color-text);
409+
}
410+
.learning-card__meta-item {
411+
display: inline-flex;
412+
align-items: center;
413+
gap: 0.4rem;
414+
}
415+
.learning-card__meta-item i {
416+
font-size: 1.1em;
417+
color: var(--spruce-base-color-primary);
418+
}
419+
</style>
420+
421+
<section class="section learning-path-section">
422+
<div class="container">
423+
<div class="section-title">
424+
<h2 class="h1">The Complete Learning Path</h2>
425+
<p class="lead">Follow our structured curriculum to master CRM Analytics, from the absolute basics to advanced, real-world applications.</p>
426+
</div>
427+
<div class="learning-path-grid l-card">
428+
<!-- Card 1: Foundations -->
429+
<article class="learning-card">
430+
<i class="ph-bold ph-flag-checkered learning-card__bg-icon"></i>
431+
<div class="learning-card__content">
432+
<span class="learning-card__number">01</span>
433+
<h3 class="learning-card__title">Analytics Foundations</h3>
434+
<p class="learning-card__description">Start with the core concepts, navigate the platform, and build your first powerful dashboard from scratch.</p>
435+
<div class="learning-card__meta">
436+
<span class="learning-card__meta-item"><i class="ph-bold ph-video"></i> 12 Lessons</span>
437+
<span class="learning-card__meta-item"><i class="ph-bold ph-clock"></i> ~1.5 Hours</span>
438+
<span class="learning-card__meta-item"><i class="ph-bold ph-student"></i> Beginner</span>
439+
</div>
440+
</div>
441+
</article>
442+
<!-- Card 2: Data Integration -->
443+
<article class="learning-card">
444+
<i class="ph-bold ph-arrows-clockwise learning-card__bg-icon"></i>
445+
<div class="learning-card__content">
446+
<span class="learning-card__number">02</span>
447+
<h3 class="learning-card__title">Data Integration & Prep</h3>
448+
<p class="learning-card__description">Learn to connect and transform data from multiple sources using Data Manager and Recipes.</p>
449+
<div class="learning-card__meta">
450+
<span class="learning-card__meta-item"><i class="ph-bold ph-video"></i> 15 Lessons</span>
451+
<span class="learning-card__meta-item"><i class="ph-bold ph-clock"></i> ~2 Hours</span>
452+
<span class="learning-card__meta-item"><i class="ph-bold ph-student"></i> Intermediate</span>
453+
</div>
454+
</div>
455+
</article>
456+
<!-- Card 3: Advanced Dashboards -->
457+
<article class="learning-card">
458+
<i class="ph-bold ph-chart-line-up learning-card__bg-icon"></i>
459+
<div class="learning-card__content">
460+
<span class="learning-card__number">03</span>
461+
<h3 class="learning-card__title">Advanced Dashboards</h3>
462+
<p class="learning-card__description">Master complex queries (SAQL), bindings, and interactive components to create dynamic analytics.</p>
463+
<div class="learning-card__meta">
464+
<span class="learning-card__meta-item"><i class="ph-bold ph-video"></i> 18 Lessons</span>
465+
<span class="learning-card__meta-item"><i class="ph-bold ph-clock"></i> ~3 Hours</span>
466+
<span class="learning-card__meta-item"><i class="ph-bold ph-student"></i> Advanced</span>
467+
</div>
468+
</div>
469+
</article>
470+
<!-- Ad Placeholder Card -->
471+
<div class="special-card special-card--ad">
472+
<span class="icon"><i class="ph-bold ph-megaphone" style="color: var(--spruce-base-color-border);"></i></span>
473+
<h3 class="h5" style="color: var(--spruce-base-color-text);">Our Sponsors</h3>
474+
<p style="font-size: 0.9rem; color: var(--spruce-base-color-text);">Advertisements help keep this content free for everyone.</p>
475+
</div>
476+
<!-- Card 4: AI & Predictive -->
477+
<article class="learning-card">
478+
<i class="ph-bold ph-brain learning-card__bg-icon"></i>
479+
<div class="learning-card__content">
480+
<span class="learning-card__number">04</span>
481+
<h3 class="learning-card__title">AI & Predictive Insights</h3>
482+
<p class="learning-card__description">Explore Einstein Discovery to uncover patterns and make powerful predictions directly within your data.</p>
483+
<div class="learning-card__meta">
484+
<span class="learning-card__meta-item"><i class="ph-bold ph-video"></i> 10 Lessons</span>
485+
<span class="learning-card__meta-item"><i class="ph-bold ph-clock"></i> ~2.5 Hours</span>
486+
<span class="learning-card__meta-item"><i class="ph-bold ph-student"></i> Advanced</span>
487+
</div>
488+
</div>
489+
</article>
490+
<!-- Card 5: Final Project -->
491+
<article class="learning-card">
492+
<i class="ph-bold ph-medal learning-card__bg-icon"></i>
493+
<div class="learning-card__content">
494+
<span class="learning-card__number">05</span>
495+
<h3 class="learning-card__title">Capstone Project</h3>
496+
<p class="learning-card__description">Apply everything you've learned by building a comprehensive, end-to-end analytics solution for a real-world business case.</p>
497+
<div class="learning-card__meta">
498+
<span class="learning-card__meta-item"><i class="ph-bold ph-folder"></i> 1 Project</span>
499+
<span class="learning-card__meta-item"><i class="ph-bold ph-clock"></i> ~5 Hours</span>
500+
<span class="learning-card__meta-item"><i class="ph-bold ph-student"></i> Expert</span>
501+
</div>
502+
</div>
503+
</article>
504+
</div>
505+
</div>
506+
</section>

‎start.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
layout: start
3+
title: Start
4+
permalink: /start
5+
---

0 commit comments

Comments
 (0)