hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
434 lines
26 KiB
HTML
434 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>인터랙티브 노션 성장 분석</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<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=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<!-- Chosen Palette: Calm Neutrals -->
|
|
<!-- Application Structure Plan: The application is structured as a narrative journey through Notion's past, present, and future. It starts with a Hero section to grab attention, followed by a sticky navigation for easy access. 'The Journey' section uses an interactive timeline for historical context. 'The Engine' section employs a dashboard with dynamic charts and cards to visualize growth. 'The Product' section uses an interactive comparison grid to clarify its market position. Finally, 'The Future' section presents strategic pillars in a clear, two-column layout. This thematic, non-linear structure is chosen to transform the dense report into an engaging, explorable experience, prioritizing user discovery over passive reading. -->
|
|
<!-- Visualization & Content Choices:
|
|
- Report Info: Development History -> Goal: Change -> Viz: Interactive Timeline (HTML/JS) -> Interaction: Click milestone to reveal details. Justification: More engaging than text.
|
|
- Report Info: Financial/User Growth -> Goal: Change -> Viz: Combined Line Chart (Chart.js) -> Interaction: Hover for tooltips. Justification: Shows correlation between user/revenue growth.
|
|
- Report Info: Competitive Analysis -> Goal: Compare -> Viz: Interactive Grid (HTML/JS/CSS) -> Interaction: Click to highlight competitor. Justification: User-driven comparison.
|
|
- Report Info: Future Strategy -> Goal: Inform -> Viz: Two-column layout with icons -> Interaction: None needed. Justification: Clear separation of strategic pillars.
|
|
-->
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
<style>
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
background-color: #f8fafc;
|
|
color: #1e293b;
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 300px;
|
|
max-height: 400px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.chart-container {
|
|
height: 400px;
|
|
}
|
|
}
|
|
.nav-link {
|
|
transition: color 0.3s, border-bottom-color 0.3s;
|
|
}
|
|
.active-nav {
|
|
color: #2563eb;
|
|
border-bottom-color: #2563eb;
|
|
}
|
|
.timeline-item.active-timeline button {
|
|
background-color: #2563eb;
|
|
color: white;
|
|
}
|
|
.timeline-item.active-timeline .timeline-line {
|
|
background-color: #2563eb;
|
|
}
|
|
.competitor-card.active-competitor {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
border-color: #2563eb;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<header id="header" class="sticky top-0 z-50 bg-white/80 backdrop-blur-lg shadow-sm">
|
|
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<div class="flex items-center">
|
|
<span class="font-bold text-xl text-slate-800">Notion Growth Story</span>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<div class="ml-10 flex items-baseline space-x-4">
|
|
<a href="#journey" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-600 hover:text-blue-600 border-b-2 border-transparent">성장 과정</a>
|
|
<a href="#engine" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-600 hover:text-blue-600 border-b-2 border-transparent">성장 동력</a>
|
|
<a href="#product" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-600 hover:text-blue-600 border-b-2 border-transparent">제품 분석</a>
|
|
<a href="#future" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-slate-600 hover:text-blue-600 border-b-2 border-transparent">미래 전략</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="hero" class="py-20 md:py-28 text-center bg-white">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h1 class="text-4xl md:text-6xl font-bold tracking-tight text-slate-900">노션(Notion),</h1>
|
|
<h2 class="text-3xl md:text-5xl font-bold tracking-tight text-blue-600 mt-2">업무의 패러다임을 바꾸다</h2>
|
|
<p class="mt-6 text-lg md:text-xl text-slate-600 leading-relaxed">
|
|
실패의 위기에서 기업가치 100억 달러의 '데카콘'으로. 단순한 생산성 도구를 넘어, 전 세계 1억 명의 '올인원 워크스페이스'가 된 노션의 경이로운 성장 서사를 인터랙티브 대시보드로 만나보세요.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="journey" class="py-16 md:py-24">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h2 class="text-3xl font-bold text-slate-900">실패에서 재탄생까지: 노션의 여정</h2>
|
|
<p class="mt-4 text-lg text-slate-600">타임라인의 주요 시점을 클릭하여 노션의 결정적인 순간들을 확인해보세요.</p>
|
|
</div>
|
|
|
|
<div class="mt-16">
|
|
<div id="timeline-container" class="relative flex justify-between items-start">
|
|
</div>
|
|
<div id="timeline-details" class="mt-8 p-6 bg-white rounded-xl shadow-lg min-h-[200px] transition-all duration-500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="engine" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h2 class="text-3xl font-bold text-slate-900">성장의 엔진: 데이터로 보는 궤적</h2>
|
|
<p class="mt-4 text-lg text-slate-600">사용자, 매출, 기업가치의 폭발적인 성장을 통해 노션의 성공 방정식을 분석합니다.</p>
|
|
</div>
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
|
|
<div class="bg-slate-50 p-6 rounded-lg">
|
|
<p class="text-sm font-medium text-slate-500">기업가치</p>
|
|
<p class="text-4xl font-bold text-blue-600 mt-2">$100억</p>
|
|
<p class="text-xs text-slate-400">(2021년)</p>
|
|
</div>
|
|
<div class="bg-slate-50 p-6 rounded-lg">
|
|
<p class="text-sm font-medium text-slate-500">총 사용자</p>
|
|
<p class="text-4xl font-bold text-blue-600 mt-2">1억 명+</p>
|
|
<p class="text-xs text-slate-400">(2024년)</p>
|
|
</div>
|
|
<div class="bg-slate-50 p-6 rounded-lg">
|
|
<p class="text-sm font-medium text-slate-500">연간 반복 매출(ARR)</p>
|
|
<p class="text-4xl font-bold text-blue-600 mt-2">$4억+</p>
|
|
<p class="text-xs text-slate-400">(2024년 전망)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-16">
|
|
<div class="chart-container">
|
|
<canvas id="growthChart"></canvas>
|
|
</div>
|
|
<p class="text-center text-sm text-slate-500 mt-4">사용자와 매출의 동반 성장 그래프. 사용자 수의 급증이 어떻게 매출 성장으로 이어졌는지 보여줍니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="product" class="py-16 md:py-24">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h2 class="text-3xl font-bold text-slate-900">제품 분석: '올인원'의 비밀</h2>
|
|
<p class="mt-4 text-lg text-slate-600">노션은 어떻게 기존 강자들을 위협하는 독보적인 제품을 만들었을까요?</p>
|
|
</div>
|
|
|
|
<div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h3 class="text-2xl font-bold mb-4">레고(Lego)처럼: 블록, 페이지, 데이터베이스</h3>
|
|
<p class="text-slate-600 mb-6">노션의 핵심은 '레고 블록'과 같습니다. 가장 작은 단위인 '블록'을 '페이지'라는 캔버스에 자유롭게 조립하고, 강력한 '데이터베이스' 블록으로 체계적인 시스템을 구축합니다. 이 세 가지 요소의 조합으로 무한한 가능성이 열립니다.</p>
|
|
<div class="space-y-4">
|
|
<div class="p-4 bg-slate-100 rounded-lg flex items-center">
|
|
<span class="text-2xl mr-4">🧱</span>
|
|
<div>
|
|
<h4 class="font-bold">블록 (Block)</h4>
|
|
<p class="text-sm text-slate-500">텍스트, 이미지, 체크리스트 등 모든 콘텐츠의 기본 단위.</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 bg-slate-100 rounded-lg flex items-center">
|
|
<span class="text-2xl mr-4">📄</span>
|
|
<div>
|
|
<h4 class="font-bold">페이지 (Page)</h4>
|
|
<p class="text-sm text-slate-500">블록을 조립하는 무한한 캔버스. 페이지 안에 페이지를 중첩 가능.</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 bg-slate-100 rounded-lg flex items-center">
|
|
<span class="text-2xl mr-4">🗃️</span>
|
|
<div>
|
|
<h4 class="font-bold">데이터베이스 (Database)</h4>
|
|
<p class="text-sm text-slate-500">정보를 표, 보드, 캘린더 등 다양한 형태로 시각화하는 강력한 블록.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-2xl font-bold mb-4">경쟁 환경: Notion vs. 기존 강자들</h3>
|
|
<p class="text-slate-600 mb-6">각 경쟁사 카드를 클릭하여 노션이 제공하는 차별점을 확인하세요. 노션은 기존 도구들의 장점을 흡수하고 단점을 보완하는 '통합'과 '맥락'을 통해 시장을 재편했습니다.</p>
|
|
<div id="competitor-grid" class="grid grid-cols-2 gap-4">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="competitor-details" class="mt-8 p-6 bg-white rounded-xl shadow-lg min-h-[150px] transition-all duration-500">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="future" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h2 class="text-3xl font-bold text-slate-900">생산성의 미래: 노션의 두 기둥</h2>
|
|
<p class="mt-4 text-lg text-slate-600">노션은 AI와 생태계라는 두 개의 강력한 축을 중심으로 대체 불가능한 플랫폼으로 진화하고 있습니다.</p>
|
|
</div>
|
|
|
|
<div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-10">
|
|
<div class="p-8 bg-slate-50 rounded-xl">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-3xl mr-3">🧠</span>
|
|
<h3 class="text-2xl font-bold">제1기둥: AI 기반 지능형 워크스페이스</h3>
|
|
</div>
|
|
<p class="text-slate-600 mb-4">단순한 정보 저장소를 넘어 지능적인 '사고 파트너'로 전환합니다. AI가 사용자의 워크스페이스를 이해하고, 필요한 정보를 찾아주며, 문서 작업을 돕습니다.</p>
|
|
<ul class="space-y-3 text-slate-700">
|
|
<li class="flex items-start"><span class="mr-2 text-blue-500">✓</span> <strong>Notion Q&A:</strong> 워크스페이스와 연결된 모든 앱의 정보를 통합 검색하고 질문에 답합니다.</li>
|
|
<li class="flex items-start"><span class="mr-2 text-blue-500">✓</span> <strong>AI 회의록:</strong> 회의 내용을 자동 요약하고 실행 항목을 추출합니다.</li>
|
|
<li class="flex items-start"><span class="mr-2 text-blue-500">✓</span> <strong>생성 및 편집:</strong> 글쓰기, 브레인스토밍, 번역 등 문서 작업의 전 과정을 지원합니다.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="p-8 bg-slate-50 rounded-xl">
|
|
<div class="flex items-center mb-4">
|
|
<span class="text-3xl mr-3">🌐</span>
|
|
<h3 class="text-2xl font-bold">제2기둥: 생태계 플라이휠</h3>
|
|
</div>
|
|
<p class="text-slate-600 mb-4">경쟁사가 모방할 수 없는 가장 강력한 해자(moat)는 바로 사용자 커뮤니티가 만들어가는 생태계입니다.</p>
|
|
<ul class="space-y-3 text-slate-700">
|
|
<li class="flex items-start"><span class="mr-2 text-blue-500">✓</span> <strong>템플릿 마켓플레이스:</strong> 사용자가 만든 템플릿을 거래하며 새로운 가치를 창출합니다.</li>
|
|
<li class="flex items-start"><span class="mr-2 text-blue-500">✓</span> <strong>API와 통합:</strong> 다른 서비스와의 연결을 통해 업무의 중심 허브가 됩니다.</li>
|
|
<li class="flex items-start"><span class="mr-2 text-blue-500">✓</span> <strong>앰배서더 프로그램:</strong> 열정적인 파워 유저들이 자발적으로 제품을 전파하고 커뮤니티를 이끕니다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-slate-800 text-white">
|
|
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 text-center text-sm">
|
|
<p>본 페이지는 제공된 '노션(Notion)의 성장 서사' 보고서를 기반으로 제작된 인터랙티브 시각화 자료입니다.</p>
|
|
<p class="mt-2 text-slate-400">© 2024 Interactive Report. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
const timelineData = {
|
|
2013: { title: "창업과 첫 실패", description: "이반 자오와 사이먼 래스트가 샌프란시스코에서 창업. '노코드 웹사이트 툴'이라는 초기 모델은 시장의 외면을 받고 처참히 실패하며 존폐 위기에 직면합니다." },
|
|
2015: { title: "교토에서의 재탄생", description: "실리콘밸리를 떠나 교토에서 제품을 처음부터 다시 만듭니다. 파편화된 툴 사용 경험에서 '올인원 워크스페이스'라는 핵심 철학이 탄생합니다." },
|
|
2018: { title: "Notion 2.0 출시", description: "시장의 판도를 바꾼 '데이터베이스' 기능이 추가됩니다. 프로덕트 헌트 '이달의 제품 1위'에 오르며 기술 커뮤니티에서 폭발적인 반응을 얻고 성장의 변곡점을 맞이합니다." },
|
|
2020: { title: "성장의 점화", description: "COVID-19 팬데믹으로 원격 근무가 확산되며 성장에 가속도가 붙습니다. 5월, 개인 요금제를 전면 무료화하며 사용자 기반을 폭발적으로 늘리고 한국어 버전을 출시합니다." },
|
|
2021: { title: "데카콘 등극", description: "2억 7,500만 달러의 대규모 투자를 유치하며 기업가치 100억 달러를 인정받습니다. 유니콘을 넘어 '데카콘'의 반열에 오르며 글로벌 SaaS 시장의 핵심 플레이어로 자리매김합니다." }
|
|
};
|
|
|
|
const timelineContainer = document.getElementById('timeline-container');
|
|
const timelineDetails = document.getElementById('timeline-details');
|
|
Object.keys(timelineData).forEach((year, index, arr) => {
|
|
const isLast = index === arr.length - 1;
|
|
const item = document.createElement('div');
|
|
item.className = 'timeline-item flex-1 flex flex-col items-center relative';
|
|
item.innerHTML = `
|
|
<button data-year="${year}" class="z-10 w-24 h-10 rounded-full bg-white border-2 border-slate-300 text-slate-600 font-bold transition-all duration-300">${year}</button>
|
|
${!isLast ? '<div class="timeline-line absolute top-5 left-1/2 w-full h-0.5 bg-slate-300"></div>' : ''}
|
|
`;
|
|
timelineContainer.appendChild(item);
|
|
});
|
|
|
|
timelineContainer.addEventListener('click', e => {
|
|
if (e.target.tagName === 'BUTTON') {
|
|
const year = e.target.dataset.year;
|
|
const data = timelineData[year];
|
|
|
|
document.querySelectorAll('.timeline-item').forEach(el => el.classList.remove('active-timeline'));
|
|
e.target.closest('.timeline-item').classList.add('active-timeline');
|
|
|
|
timelineDetails.innerHTML = `
|
|
<h3 class="text-xl font-bold text-blue-600">${data.title} (${year})</h3>
|
|
<p class="mt-2 text-slate-600">${data.description}</p>
|
|
`;
|
|
}
|
|
});
|
|
|
|
document.querySelector('.timeline-item button').click();
|
|
|
|
const growthChartCtx = document.getElementById('growthChart').getContext('2d');
|
|
const growthChart = new Chart(growthChartCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['2019', '2020', '2021', '2022', '2023', '2024'],
|
|
datasets: [
|
|
{
|
|
label: '총 사용자 (백만 명)',
|
|
data: [1, 4, 10, 20, 50, 100],
|
|
borderColor: 'rgb(59, 130, 246)',
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
yAxisID: 'yUsers',
|
|
tension: 0.3,
|
|
fill: true,
|
|
},
|
|
{
|
|
label: '연간 반복 매출 (백만 $)',
|
|
data: [3, 15, 30, 67, 250, 400],
|
|
borderColor: 'rgb(22, 163, 74)',
|
|
backgroundColor: 'rgba(22, 163, 74, 0.1)',
|
|
yAxisID: 'yRevenue',
|
|
tension: 0.3,
|
|
fill: true,
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
scales: {
|
|
yUsers: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
title: {
|
|
display: true,
|
|
text: '사용자 (백만 명)'
|
|
}
|
|
},
|
|
yRevenue: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'right',
|
|
title: {
|
|
display: true,
|
|
text: '매출 (백만 $)'
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false,
|
|
},
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
let label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
if(context.dataset.yAxisID === 'yUsers') {
|
|
label += context.parsed.y + '백만 명';
|
|
} else {
|
|
label += '$' + context.parsed.y + 'M';
|
|
}
|
|
}
|
|
return label;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
const competitorData = {
|
|
jira: { name: "Jira/Confluence", icon: "⚙️", vs: "<strong>통합성과 사용자 친화성:</strong> 개발자에게 최적화된 Jira/Confluence와 달리, 노션은 비개발 직군도 쉽게 사용하는 통합 인터페이스를 제공하여 모든 팀의 협업을 촉진합니다." },
|
|
asana: { name: "Asana/Trello", icon: "📋", vs: "<strong>업무의 '맥락' 제공:</strong> 태스크만 관리하는 도구들과 달리, 노션은 프로젝트 기획서, 회의록, 실제 칸반 보드를 한 공간에 통합하여 업무의 전체적인 맥락을 파악하기 용이하게 합니다." },
|
|
evernote: { name: "Evernote", icon: "🐘", vs: "<strong>구조화와 협업 기능:</strong> 개인 노트 필기에 강한 Evernote를 넘어, 노션은 정형화된 데이터베이스와 강력한 협업 기능으로 팀 전체의 지식 베이스와 워크스페이스를 구축합니다." }
|
|
};
|
|
|
|
const competitorGrid = document.getElementById('competitor-grid');
|
|
const competitorDetails = document.getElementById('competitor-details');
|
|
|
|
Object.keys(competitorData).forEach(key => {
|
|
const data = competitorData[key];
|
|
const card = document.createElement('button');
|
|
card.dataset.key = key;
|
|
card.className = "competitor-card p-4 bg-slate-50 rounded-lg text-left border-2 border-transparent transition-all duration-300";
|
|
card.innerHTML = `
|
|
<div class="flex items-center">
|
|
<span class="text-3xl mr-3">${data.icon}</span>
|
|
<h4 class="font-bold text-lg">${data.name}</h4>
|
|
</div>
|
|
`;
|
|
competitorGrid.appendChild(card);
|
|
});
|
|
|
|
competitorGrid.addEventListener('click', e => {
|
|
const card = e.target.closest('button');
|
|
if (card) {
|
|
const key = card.dataset.key;
|
|
const data = competitorData[key];
|
|
|
|
document.querySelectorAll('.competitor-card').forEach(c => c.classList.remove('active-competitor'));
|
|
card.classList.add('active-competitor');
|
|
|
|
competitorDetails.innerHTML = `
|
|
<h4 class="font-bold text-lg text-slate-800">Notion vs. ${data.name}</h4>
|
|
<p class="mt-2 text-slate-600">${data.vs}</p>
|
|
`;
|
|
}
|
|
});
|
|
|
|
document.querySelector('.competitor-card').click();
|
|
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
const sections = document.querySelectorAll('main section');
|
|
const headerHeight = document.getElementById('header').offsetHeight;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
let current = '';
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop - headerHeight - 50;
|
|
if (pageYOffset >= sectionTop) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active-nav');
|
|
if (link.getAttribute('href').substring(1) === current) {
|
|
link.classList.add('active-nav');
|
|
}
|
|
});
|
|
});
|
|
|
|
navLinks.forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href');
|
|
const targetElement = document.querySelector(targetId);
|
|
const targetPosition = targetElement.offsetTop - headerHeight;
|
|
|
|
window.scrollTo({
|
|
top: targetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|