Skip to content

Commit d420842

Browse files
atkosXatkosX
committed
feat: added landing page
1 parent 5fd2fb0 commit d420842

3 files changed

Lines changed: 1124 additions & 0 deletions

File tree

‎web/index.html‎

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>SuperAudit - Revolutionary Smart Contract Security Analysis</title>
7+
<meta name="description" content="Advanced static analysis plugin for Hardhat with Control Flow Graph analysis, YAML programmable audits, and comprehensive vulnerability detection.">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="styles.css">
12+
</head>
13+
<body>
14+
<!-- Hero Section -->
15+
<section class="hero">
16+
<div class="container">
17+
<div class="hero-content">
18+
<div class="badge">
19+
<span>Advanced Security Analysis</span>
20+
</div>
21+
22+
<h1 class="hero-title">
23+
Secure Your Smart Contracts
24+
<span class="gradient-text">Before Deployment</span>
25+
</h1>
26+
27+
<p class="hero-subtitle">
28+
SuperAudit is a comprehensive security analysis plugin for Hardhat that detects vulnerabilities through advanced Control Flow Graph analysis, reentrancy detection, and AI-powered insights.
29+
</p>
30+
31+
<div class="hero-buttons">
32+
<button class="btn btn-primary" onclick="scrollToSection('install')">
33+
Get Started
34+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
35+
<path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
36+
</svg>
37+
</button>
38+
39+
</div>
40+
41+
<div class="quick-install">
42+
<div class="code-block">
43+
<code>npm install hardhat-superaudit</code>
44+
<button class="copy-btn" onclick="copyToClipboard('npm install hardhat-superaudit')">
45+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
46+
<path d="M5.5 4.5H3.5C2.94772 4.5 2.5 4.94772 2.5 5.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H10.5C11.0523 13.5 11.5 13.0523 11.5 12.5V10.5M8.5 2.5H12.5C13.0523 2.5 13.5 2.94772 13.5 3.5V7.5C13.5 8.05228 13.0523 8.5 12.5 8.5H8.5C7.94772 8.5 7.5 8.05228 7.5 7.5V3.5C7.5 2.94772 7.94772 2.5 8.5 2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
47+
</svg>
48+
</button>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<div class="hero-visual">
54+
<div class="terminal">
55+
<div class="terminal-header">
56+
<div class="terminal-dots">
57+
<span class="dot dot-red"></span>
58+
<span class="dot dot-yellow"></span>
59+
<span class="dot dot-green"></span>
60+
</div>
61+
<span class="terminal-title">SuperAudit Analysis</span>
62+
</div>
63+
<div class="terminal-body">
64+
<div class="terminal-line">
65+
<span class="prompt">$</span>
66+
<span class="command">npx hardhat superaudit</span>
67+
</div>
68+
<div class="terminal-line output">SuperAudit - Advanced Smart Contract Security</div>
69+
<div class="terminal-line output">Analysis Mode: FULL</div>
70+
<div class="terminal-line output">Successfully parsed 4 contract(s)</div>
71+
<div class="terminal-line output terminal-spacer"></div>
72+
<div class="terminal-line critical">
73+
<span class="severity-badge critical">[CRITICAL]</span>
74+
<span>external-before-state at line 58</span>
75+
</div>
76+
<div class="terminal-line detail">External call before state update (CEI violation)</div>
77+
<div class="terminal-line detail">Reentrancy vulnerability detected</div>
78+
<div class="terminal-line output terminal-spacer"></div>
79+
<div class="terminal-line summary">
80+
<span class="summary-item critical">Critical: 5</span>
81+
<span class="summary-item high">High: 10</span>
82+
<span class="summary-item medium">Medium: 20</span>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</section>
89+
90+
<!-- Features Section -->
91+
<section class="features" id="features">
92+
<div class="container">
93+
<div class="section-header">
94+
<h2 class="section-title">Powerful Security Analysis</h2>
95+
<p class="section-subtitle">Advanced detection capabilities that go beyond basic linting</p>
96+
</div>
97+
98+
<div class="features-grid">
99+
<div class="feature-card">
100+
<h3>Multi-Agent AI System</h3>
101+
<p>Built on an agentic smart-contract auditing framework that combines custom AST analysis with specialized AI agents. Multiple agents collaborate to detect vulnerabilities, reason across code components, and provide detailed security insights powered by GPT-4 and Claude.</p>
102+
</div>
103+
104+
<div class="feature-card">
105+
<h3>Control Flow Graphs</h3>
106+
<p>Sophisticated CFG analysis detects vulnerabilities through execution path analysis</p>
107+
</div>
108+
109+
<div class="feature-card">
110+
<h3>Reentrancy Detection</h3>
111+
<p>Advanced attack path identification with detailed exploit scenarios and mitigation strategies</p>
112+
</div>
113+
114+
<div class="feature-card">
115+
<h3>YAML Playbooks</h3>
116+
<p>Programmable, shareable audit strategies for consistent security reviews</p>
117+
</div>
118+
119+
120+
<div class="feature-card">
121+
<h3>GitHub Integration</h3>
122+
<p>SARIF format support for seamless CI/CD and GitHub Code Scanning integration</p>
123+
</div>
124+
125+
<div class="feature-card">
126+
<h3>Sandboxed Execution</h3>
127+
<p>Runs audits inside a gVisor-based sandbox to safely execute untrusted code and automate security workflows without risk to your system</p>
128+
</div>
129+
</div>
130+
</div>
131+
</section>
132+
133+
<!-- AI Architecture Section -->
134+
<section class="ai-architecture">
135+
<div class="container">
136+
<div class="ai-architecture-content">
137+
<div class="ai-architecture-text">
138+
<h2 class="section-title">Agentic AI Architecture</h2>
139+
<p class="section-subtitle">Next-generation security analysis powered by specialized AI agents</p>
140+
141+
<div class="ai-features-list">
142+
<div class="ai-feature-item">
143+
<div>
144+
<h4>Multi-Agent Collaboration</h4>
145+
<p>Specialized AI agents work together to analyze different aspects of your smart contracts - from AST parsing to vulnerability detection and fix generation.</p>
146+
</div>
147+
</div>
148+
149+
<div class="ai-feature-item">
150+
<div>
151+
<h4>Knowledge Graph Reasoning</h4>
152+
<p>Builds relation-first knowledge graphs to reason across multiple abstraction layers, understanding authentication flows, value transfers, and protocol invariants.</p>
153+
</div>
154+
</div>
155+
156+
<div class="ai-feature-item">
157+
<div>
158+
<h4>Hypothesis-Driven Analysis</h4>
159+
<p>Maintains persistent vulnerability hypotheses that evolve as evidence accumulates, similar to how expert auditors reason about complex systems.</p>
160+
</div>
161+
</div>
162+
163+
<div class="ai-feature-item">
164+
<div>
165+
<h4>Sandboxed Execution</h4>
166+
<p>Runs all analyses in a gVisor-based sandbox environment, ensuring complete isolation when executing potentially malicious code.</p>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
</div>
172+
173+
174+
</div>
175+
</div>
176+
</section>
177+
178+
<!-- Customers Section -->
179+
<section class="customers">
180+
<div class="container">
181+
<div class="section-header">
182+
<h2 class="section-title">Trusted By Leading Teams</h2>
183+
<p class="section-subtitle">Join innovative companies securing their smart contracts with SuperAudit</p>
184+
</div>
185+
186+
<div class="customers-grid">
187+
<a href="https://x.com/Zippel_Labs" target="_blank" class="customer-card">
188+
<img src="https://pbs.twimg.com/profile_images/2018015046069288960/tcmA7y2r_200x200.jpg" alt="Zippel Labs" class="customer-logo">
189+
<span class="customer-name">Zippel Labs</span>
190+
</a>
191+
</div>
192+
</div>
193+
</section>
194+
195+
<!-- Installation Section -->
196+
<section class="installation" id="install">
197+
<div class="container">
198+
<div class="section-header">
199+
<h2 class="section-title">Get Started in 3 Steps</h2>
200+
<p class="section-subtitle">Start securing your contracts in under a minute</p>
201+
</div>
202+
203+
<div class="steps">
204+
<div class="step">
205+
<div class="step-number">1</div>
206+
<div class="step-content">
207+
<h3>Install the Plugin</h3>
208+
<div class="code-block">
209+
<code>npm install hardhat-superaudit</code>
210+
<button class="copy-btn" onclick="copyToClipboard('npm install hardhat-superaudit')">
211+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
212+
<path d="M5.5 4.5H3.5C2.94772 4.5 2.5 4.94772 2.5 5.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H10.5C11.0523 13.5 11.5 13.0523 11.5 12.5V10.5M8.5 2.5H12.5C13.0523 2.5 13.5 2.94772 13.5 3.5V7.5C13.5 8.05228 13.0523 8.5 12.5 8.5H8.5C7.94772 8.5 7.5 8.05228 7.5 7.5V3.5C7.5 2.94772 7.94772 2.5 8.5 2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
213+
</svg>
214+
</button>
215+
</div>
216+
</div>
217+
</div>
218+
219+
<div class="step">
220+
<div class="step-number">2</div>
221+
<div class="step-content">
222+
<h3>Configure Hardhat</h3>
223+
<div class="code-block">
224+
<code>import superauditPlugin from "hardhat-superaudit";</code>
225+
<button class="copy-btn" onclick="copyToClipboard('import superauditPlugin from \\'hardhat-superaudit\\';')">
226+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
227+
<path d="M5.5 4.5H3.5C2.94772 4.5 2.5 4.94772 2.5 5.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H10.5C11.0523 13.5 11.5 13.0523 11.5 12.5V10.5M8.5 2.5H12.5C13.0523 2.5 13.5 2.94772 13.5 3.5V7.5C13.5 8.05228 13.0523 8.5 12.5 8.5H8.5C7.94772 8.5 7.5 8.05228 7.5 7.5V3.5C7.5 2.94772 7.94772 2.5 8.5 2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
228+
</svg>
229+
</button>
230+
</div>
231+
</div>
232+
</div>
233+
234+
<div class="step">
235+
<div class="step-number">3</div>
236+
<div class="step-content">
237+
<h3>Run Analysis</h3>
238+
<div class="code-block">
239+
<code>npx hardhat superaudit</code>
240+
<button class="copy-btn" onclick="copyToClipboard('npx hardhat superaudit')">
241+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
242+
<path d="M5.5 4.5H3.5C2.94772 4.5 2.5 4.94772 2.5 5.5V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H10.5C11.0523 13.5 11.5 13.0523 11.5 12.5V10.5M8.5 2.5H12.5C13.0523 2.5 13.5 2.94772 13.5 3.5V7.5C13.5 8.05228 13.0523 8.5 12.5 8.5H8.5C7.94772 8.5 7.5 8.05228 7.5 7.5V3.5C7.5 2.94772 7.94772 2.5 8.5 2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
243+
</svg>
244+
</button>
245+
</div>
246+
</div>
247+
</div>
248+
</div>
249+
</div>
250+
</section>
251+
252+
<!-- CTA Section -->
253+
<section class="cta">
254+
<div class="container">
255+
<div class="cta-content">
256+
<h2>Ready to Secure Your Smart Contracts?</h2>
257+
<p>Join developers securing their contracts with SuperAudit</p>
258+
<div class="cta-buttons">
259+
<button class="btn btn-primary" onclick="window.location.href='#install'">
260+
Get Started Now
261+
</button>
262+
263+
</div>
264+
</div>
265+
</div>
266+
</section>
267+
268+
<!-- Footer -->
269+
<footer class="footer">
270+
<div class="container">
271+
<div class="footer-content">
272+
<div class="footer-brand">
273+
<h3>SuperAudit</h3>
274+
<p>Advanced Smart Contract Security Analysis</p>
275+
</div>
276+
<div class="footer-links">
277+
</div>
278+
</div>
279+
<div class="footer-bottom">
280+
<p>&copy; 2026 SuperAudit. MIT License.</p>
281+
</div>
282+
</div>
283+
</footer>
284+
285+
<script src="script.js"></script>
286+
</body>
287+
</html>

‎web/script.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Smooth scroll to section
2+
function scrollToSection(sectionId) {
3+
const section = document.getElementById(sectionId);
4+
if (section) {
5+
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
6+
}
7+
}
8+
9+
// Copy to clipboard functionality
10+
async function copyToClipboard(text) {
11+
try {
12+
await navigator.clipboard.writeText(text);
13+
14+
// Find the button that was clicked
15+
const buttons = document.querySelectorAll('.copy-btn');
16+
buttons.forEach(button => {
17+
button.addEventListener('click', function() {
18+
const originalHTML = this.innerHTML;
19+
20+
// Show success feedback
21+
this.innerHTML = `
22+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
23+
<path d="M3 8L6 11L13 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
24+
</svg>
25+
`;
26+
this.style.color = 'hsl(120, 70%, 60%)';
27+
28+
// Reset after 2 seconds
29+
setTimeout(() => {
30+
this.innerHTML = originalHTML;
31+
this.style.color = '';
32+
}, 2000);
33+
});
34+
});
35+
} catch (err) {
36+
console.error('Failed to copy:', err);
37+
}
38+
}
39+
40+
// Add scroll animations
41+
const observerOptions = {
42+
threshold: 0.1,
43+
rootMargin: '0px 0px -50px 0px'
44+
};
45+
46+
const observer = new IntersectionObserver((entries) => {
47+
entries.forEach(entry => {
48+
if (entry.isIntersecting) {
49+
entry.target.style.opacity = '1';
50+
entry.target.style.transform = 'translateY(0)';
51+
}
52+
});
53+
}, observerOptions);
54+
55+
// Observe elements for animation
56+
document.addEventListener('DOMContentLoaded', () => {
57+
const animatedElements = document.querySelectorAll('.feature-card, .step, .cta-content');
58+
59+
animatedElements.forEach(el => {
60+
el.style.opacity = '0';
61+
el.style.transform = 'translateY(20px)';
62+
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
63+
observer.observe(el);
64+
});
65+
});
66+
67+
// Terminal typing effect (optional enhancement)
68+
function typeEffect(element, text, speed = 50) {
69+
let i = 0;
70+
element.textContent = '';
71+
72+
function type() {
73+
if (i < text.length) {
74+
element.textContent += text.charAt(i);
75+
i++;
76+
setTimeout(type, speed);
77+
}
78+
}
79+
80+
type();
81+
}
82+
83+
// Add terminal cursor blink effect
84+
const style = document.createElement('style');
85+
style.textContent = `
86+
@keyframes blink {
87+
0%, 49% { opacity: 1; }
88+
50%, 100% { opacity: 0; }
89+
}
90+
`;
91+
document.head.appendChild(style);

0 commit comments

Comments
 (0)