303 lines
16 KiB
Vue
303 lines
16 KiB
Vue
<template>
|
|
<div class="landing">
|
|
<!-- Nav -->
|
|
<header class="nav">
|
|
<div class="nav-inner">
|
|
<div class="logo-wrap">
|
|
<span class="material-symbols-outlined" style="color:#d95c41;font-size:24px">terminal</span>
|
|
<span class="logo-text">FDSA</span>
|
|
</div>
|
|
<div class="nav-links">
|
|
<a href="/modules/m1-foundations">Course</a>
|
|
<a href="/labs/l1-first-agent">Labs</a>
|
|
<a href="/skills">Skills</a>
|
|
<a href="/blog">Blog</a>
|
|
<a href="/buy" class="nav-cta">Enroll</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero -->
|
|
<section class="hero-sec">
|
|
<div class="hero-grid"></div>
|
|
<div class="hero-glow"></div>
|
|
<div class="hero-inner">
|
|
<div class="hero-pill"><span class="pill-dot"></span>NOW ENROLLING</div>
|
|
<h1>Agentic Engineering</h1>
|
|
<p class="hero-sub">65 lessons, 13 labs, 20 skill kits. Build, deploy, and maintain production-grade AI agent systems.</p>
|
|
<div class="hero-actions">
|
|
<a href="/buy" class="btn-p btn-primary">Enroll Now — $97</a>
|
|
<a href="/modules/m1-foundations" class="btn-p btn-ghost">View Curriculum</a>
|
|
</div>
|
|
</div>
|
|
<div class="term-widget">
|
|
<div class="term-dots"><span class="td r"></span><span class="td y"></span><span class="td g"></span></div>
|
|
<div class="term-l c">INITIALIZING AGENT_PLANNER...</div>
|
|
<div class="term-l">FETCHING LLM CONTEXT: DONE</div>
|
|
<div class="term-l a">EXECUTING: search("agentic patterns")</div>
|
|
<div class="term-l">ANALYZING RESULT_SET: SUCCESS</div>
|
|
<div class="term-bar"><div class="term-fill"></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="sec">
|
|
<div class="sec-label">Core Capabilities</div>
|
|
<div class="feat-grid">
|
|
<div class="gc" v-for="f in features" :key="f.t">
|
|
<div class="gci"><span class="material-symbols-outlined">{{ f.icon }}</span></div>
|
|
<h3 class="gc-t">{{ f.t }}</h3>
|
|
<p class="gc-d">{{ f.d }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Bento Curriculum -->
|
|
<section class="sec">
|
|
<div class="sec-label">Engineering Curriculum</div>
|
|
<h2 class="sec-title">8 Modules. 65 Lessons. Zero Fluff.</h2>
|
|
<div class="bento">
|
|
<div v-for="(m, i) in modules" :key="i" class="bi" :class="m.s">
|
|
<div class="bi-n">{{ m.n }}</div>
|
|
<div class="bi-ic"><span class="material-symbols-outlined">{{ m.ic }}</span></div>
|
|
<h4 class="bi-t">{{ m.t }}</h4>
|
|
<p class="bi-d">{{ m.d }}</p>
|
|
<div class="bi-tags"><span v-for="t in m.tg" :key="t">{{ t }}</span></div>
|
|
<div v-if="m.p" class="bi-bar"><div class="bi-fill" :style="{width:m.p}"></div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing -->
|
|
<section class="sec pricing-sec">
|
|
<div class="pc gc">
|
|
<span class="material-symbols-outlined" style="font-size:36px;color:#d95c41;margin-bottom:8px">verified</span>
|
|
<h2 style="font-size:24px;font-weight:700;margin-bottom:4px">Full Course Access</h2>
|
|
<p style="color:#888;font-size:14px;margin-bottom:20px">Lifetime updates included</p>
|
|
<div style="font-size:48px;font-weight:800;color:#d95c41;margin-bottom:24px">$97</div>
|
|
<ul class="pu">
|
|
<li v-for="item in perks" :key="item"><span class="material-symbols-outlined" style="font-size:18px;color:#d95c41">check_circle</span>{{ item }}</li>
|
|
</ul>
|
|
<a href="/buy" class="btn-p btn-primary" style="width:100%;text-align:center">Enroll Now</a>
|
|
<div class="pg">30-Day Guarantee</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="ft">
|
|
<div class="ft-inner">
|
|
<div class="ft-l">FDSA</div>
|
|
<div class="ft-links">
|
|
<a href="/troubleshooting">FAQ</a>
|
|
<a href="/certificate">Certificate</a>
|
|
<a href="/buy">Pricing</a>
|
|
</div>
|
|
<div class="ft-c">FDSA Agency — Agentic Engineering Course</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<nav class="bn">
|
|
<a href="/" class="bn-i active"><span class="material-symbols-outlined">home</span><span>Home</span></a>
|
|
<a href="/modules/m1-foundations" class="bn-i"><span class="material-symbols-outlined">school</span><span>Modules</span></a>
|
|
<a href="/labs/l1-first-agent" class="bn-i"><span class="material-symbols-outlined">terminal</span><span>Labs</span></a>
|
|
<a href="/buy" class="bn-i"><span class="material-symbols-outlined">payments</span><span>Pricing</span></a>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const features = [
|
|
{ icon: 'settings_suggest', t: 'Agent Harness', d: 'Own your harness. 6-level security ladder, verifier pattern, hooks.' },
|
|
{ icon: 'speed', t: 'Software Factory', d: 'Systems that build systems. Agent chains, teams, mental models.' },
|
|
{ icon: 'psychology', t: 'Extensible Software', d: 'Pluggable, composable. Beyond MCP, tool design, CI/CD.' },
|
|
{ icon: 'all_inclusive', t: 'Always-On Agents', d: 'Autoresearch, heartbeat execution, meta-agents. Run 24/7.' },
|
|
{ icon: 'terminal', t: 'Agentic Access', d: 'API-first design, deployment modes, service connectors.' },
|
|
{ icon: 'forum', t: 'Tokenomics', d: 'Cascade routing, pass@k evals, 3x cost rule, optimization.' },
|
|
]
|
|
|
|
const modules = [
|
|
{ n:'01', ic:'psychology', t:'Foundations', d:'What agents are, harness vs model, decision frameworks.', tg:['LLM + Tools + Loop','Agent Loop','Trust'], p:'100%', s:'w8' },
|
|
{ n:'02', ic:'handyman', t:'Architecture', d:'Tools, context, memory, skills, codebase patterns.', tg:['4 Pillars','Tools','Memory'], s:'w4' },
|
|
{ n:'03', ic:'shield', t:'Safety & Security', d:'6-level ladder, hooks, verifier pattern, defense-in-depth.', tg:['L0-L5','Verifier','ACIP'], s:'w4' },
|
|
{ n:'04', ic:'hub', t:'Orchestration', d:'Multi-agent patterns, P-threads, P2P, CEO Board.', tg:['Teams','Chains','P2P'], s:'w8' },
|
|
{ n:'05', ic:'rocket_launch', t:'Production', d:'CI/CD, shadow deploys, observability, rollback.', tg:['Deploy','Monitor','Rollback'], s:'w6' },
|
|
{ n:'06', ic:'analytics', t:'Economics', d:'Model pricing, cascade routing, pass@k, cost optimization.', tg:['100x Range','3x Rule','Evals'], s:'w6' },
|
|
{ n:'07', ic:'architecture', t:'Advanced', d:'Autoresearch, meta-agents, beyond MCP, always-on.', tg:['Self-Improving','Meta-Agents'], s:'w4' },
|
|
{ n:'08', ic:'trophy', t:'Capstone', d:'Build a production-grade multi-agent system.', tg:['Brand Monitor','CEO Board','Pipeline'], s:'w8 hl' },
|
|
]
|
|
|
|
const perks = [
|
|
'65 lessons across 8 modules',
|
|
'13 scaffolded labs with solutions',
|
|
'56 quiz questions with answer keys',
|
|
'20 production-ready skill files (7 kits)',
|
|
'Lifetime access + future updates',
|
|
]
|
|
|
|
// Scroll reveal animations
|
|
onMounted(() => {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('revealed')
|
|
}
|
|
})
|
|
}, { threshold: 0.1 })
|
|
|
|
// Observe sections (skip hero — always visible)
|
|
document.querySelectorAll('.sec').forEach(el => {
|
|
el.classList.add('reveal')
|
|
observer.observe(el)
|
|
})
|
|
|
|
// Observe individual bento items with stagger
|
|
document.querySelectorAll('.bi').forEach((el, i) => {
|
|
el.style.transitionDelay = (i * 0.05) + 's'
|
|
el.classList.add('reveal')
|
|
observer.observe(el)
|
|
})
|
|
|
|
// Observe feature cards with stagger
|
|
document.querySelectorAll('.feat-grid .gc').forEach((el, i) => {
|
|
el.style.transitionDelay = (i * 0.08) + 's'
|
|
el.classList.add('reveal')
|
|
observer.observe(el)
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
|
|
.landing {
|
|
font-family: 'DM Sans', -apple-system, sans-serif;
|
|
background: #0a0a0a; color: #e8e8e8;
|
|
-webkit-font-smoothing: antialiased; min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Nav */
|
|
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,10,10,0.8);backdrop-filter:blur(16px);border-bottom:1px solid #1a1a1a}
|
|
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px}
|
|
.logo-wrap{display:flex;align-items:center;gap:8px}
|
|
.logo-text{font-weight:800;font-size:20px;letter-spacing:-0.5px;color:#e8e8e8}
|
|
.nav-links{display:flex;gap:28px;align-items:center}
|
|
.nav-links a{color:#888;text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
|
|
.nav-links a:hover{color:#e8e8e8}
|
|
.nav-cta{background:#d95c41;color:#fff!important;padding:8px 20px;border-radius:6px;font-weight:600}
|
|
.nav-cta:hover{background:#c44a30!important}
|
|
|
|
/* Hero */
|
|
.hero-sec{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:140px 24px 80px;text-align:center;position:relative;overflow:hidden}
|
|
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(217,92,65,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(217,92,65,0.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
|
|
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(217,92,65,0.08) 0%,transparent 60%);pointer-events:none}
|
|
.hero-inner{position:relative;z-index:1;max-width:680px}
|
|
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(217,92,65,0.1);border:1px solid rgba(217,92,65,0.3);padding:6px 16px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#d95c41;margin-bottom:24px}
|
|
.pill-dot{width:6px;height:6px;border-radius:50%;background:#d95c41;animation:pulse 2s ease-in-out infinite}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
|
|
.hero-sec h1{font-size:56px;font-weight:800;letter-spacing:-1.5px;line-height:1.05;color:#f0f0f0;margin-bottom:20px}
|
|
.hero-sub{font-size:18px;color:#888;line-height:1.6;margin-bottom:36px}
|
|
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
|
|
.btn-p{display:inline-block;padding:14px 32px;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none;transition:all .2s}
|
|
.btn-primary{background:#d95c41;color:#fff}
|
|
.btn-primary:hover{background:#c44a30;transform:translateY(-1px)}
|
|
.btn-ghost{color:#e8e8e8;border:1px solid #222}
|
|
.btn-ghost:hover{border-color:#555}
|
|
|
|
/* Terminal */
|
|
.term-widget{margin-top:48px;max-width:480px;width:100%;background:rgba(17,17,17,0.9);backdrop-filter:blur(12px);border:1px solid #222;border-radius:12px;padding:20px;text-align:left;position:relative;overflow:hidden}
|
|
.term-widget::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#d95c41,transparent);opacity:.5}
|
|
.term-dots{display:flex;gap:8px;margin-bottom:16px}
|
|
.td{width:10px;height:10px;border-radius:50%}
|
|
.td.r{background:#ef4444}.td.y{background:#eab308}.td.g{background:#22c55e}
|
|
.term-l{font-family:'DM Mono',monospace;font-size:12px;color:#888;line-height:2}
|
|
.term-l.c{color:#d95c41}.term-l.a{color:#7bd0ff}
|
|
.term-bar{margin-top:12px;height:4px;background:#1a1a1a;border-radius:2px;overflow:hidden}
|
|
.term-fill{height:100%;width:66%;background:linear-gradient(90deg,#d95c41,#e87d2f);border-radius:2px;animation:prog 3s ease-in-out infinite}
|
|
@keyframes prog{0%{width:20%;opacity:.6}50%{width:75%;opacity:1}100%{width:20%;opacity:.6}}
|
|
|
|
/* Section */
|
|
.sec{max-width:1280px;margin:0 auto;padding:80px 24px}
|
|
.sec-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#d95c41;text-align:center;margin-bottom:48px}
|
|
.sec-title{text-align:center;font-size:32px;font-weight:700;margin-bottom:48px;color:#f0f0f0}
|
|
|
|
/* Glass card */
|
|
.gc{background:rgba(17,17,17,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-top:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:28px 24px;transition:all .4s ease}
|
|
.gc:hover{border-color:rgba(217,92,65,0.3)}
|
|
|
|
/* Scroll reveal animation */
|
|
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
|
|
.reveal.revealed{opacity:1;transform:translateY(0)}
|
|
.bi.reveal{opacity:0;transform:translateY(16px)}
|
|
.bi.reveal.revealed{opacity:1;transform:translateY(0)}
|
|
.feat-grid .gc.reveal{opacity:0;transform:translateY(16px)}
|
|
.feat-grid .gc.reveal.revealed{opacity:1;transform:translateY(0)}
|
|
|
|
/* Feature grid */
|
|
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.03);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
|
|
.feat-grid .gc{border:none;border-radius:0}
|
|
.gci{width:48px;height:48px;border-radius:10px;background:rgba(217,92,65,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
|
|
.gci .material-symbols-outlined{color:#d95c41;font-size:24px}
|
|
.gc-t{font-size:15px;font-weight:700;color:#f0f0f0;margin-bottom:8px}
|
|
.gc-d{font-size:13px;color:#888;line-height:1.6}
|
|
|
|
/* Bento */
|
|
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
|
|
.bi{background:rgba(17,17,17,0.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.06);border-top:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:24px;position:relative;overflow:hidden;transition:all .3s}
|
|
.bi:hover{border-color:rgba(217,92,65,0.3)}
|
|
.bi.hl{border-color:rgba(217,92,65,0.2)}
|
|
.w8{grid-column:span 8}.w6{grid-column:span 6}.w4{grid-column:span 4}
|
|
.bi-n{position:absolute;top:12px;right:16px;font-size:40px;font-weight:800;opacity:0.06;color:#fff;user-select:none}
|
|
.bi-ic{width:36px;height:36px;border-radius:8px;background:rgba(217,92,65,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
|
|
.bi-ic .material-symbols-outlined{color:#d95c41;font-size:20px}
|
|
.bi-t{font-size:15px;font-weight:700;color:#f0f0f0;margin-bottom:6px}
|
|
.bi-d{font-size:13px;color:#888;line-height:1.5;margin-bottom:12px}
|
|
.bi-tags{display:flex;flex-wrap:wrap;gap:6px}
|
|
.bi-tags span{font-size:10px;font-weight:600;letter-spacing:.05em;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);color:#666}
|
|
.bi-bar{margin-top:16px;height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden}
|
|
.bi-fill{height:100%;background:linear-gradient(90deg,#d95c41,#e87d2f);border-radius:2px}
|
|
|
|
/* Pricing */
|
|
.pricing-sec{display:flex;justify-content:center}
|
|
.pc{max-width:420px;width:100%;text-align:center;padding:36px}
|
|
.pc:hover{box-shadow:0 0 30px rgba(217,92,65,0.08)}
|
|
.pu{list-style:none;text-align:left;margin-bottom:24px}
|
|
.pu li{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:14px;color:#888}
|
|
.pu li:last-child{border-bottom:none}
|
|
.pg{font-size:11px;color:#555;margin-top:16px;letter-spacing:.05em;text-transform:uppercase}
|
|
|
|
/* Footer */
|
|
.ft{border-top:1px solid #1a1a1a;padding:32px 24px;text-align:center}
|
|
.ft-inner{max-width:1280px;margin:0 auto}
|
|
.ft-l{font-size:18px;font-weight:800;color:#f0f0f0;margin-bottom:16px}
|
|
.ft-links{display:flex;justify-content:center;gap:24px;margin-bottom:16px}
|
|
.ft-links a{color:#555;text-decoration:none;font-size:13px;transition:color .2s}
|
|
.ft-links a:hover{color:#888}
|
|
.ft-c{font-size:12px;color:#444}
|
|
|
|
/* Bottom nav */
|
|
.bn{display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(10,10,10,0.85);backdrop-filter:blur(16px);border-top:1px solid #1a1a1a;height:64px;padding:4px 16px 12px;justify-content:space-around;align-items:center}
|
|
.bn-i{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#555;font-size:10px;font-weight:600;transition:color .2s}
|
|
.bn-i.active{color:#d95c41}.bn-i:hover{color:#888}
|
|
.bn-i .material-symbols-outlined{font-size:22px}
|
|
|
|
@media (max-width:768px){
|
|
.nav-links a:not(.nav-cta){display:none}
|
|
.hero-sec h1{font-size:32px}
|
|
.hero-sub{font-size:16px}
|
|
.feat-grid{grid-template-columns:1fr}
|
|
.w8,.w6,.w4{grid-column:span 12}
|
|
.bn{display:flex}
|
|
.landing{padding-bottom:64px}
|
|
.sec{padding:48px 16px}
|
|
}
|
|
@media(min-width:769px)and(max-width:1024px){
|
|
.w8{grid-column:span 12}
|
|
.w6{grid-column:span 6}
|
|
.w4{grid-column:span 6}
|
|
}
|
|
</style>
|