Hugging Face's logo

Spaces:
murfidya
/
codeguardian-ai-bug-slayer-supreme
Running

App Files Community
murfidya commited on
Commit
a1a6b63
·
verified ·
1 Parent(s): bf3f644

make the website looks amazing. using tailwind css

Browse files
Files changed (6) hide show
  1. README.md +8 -5
  2. components/footer.js +187 -0
  3. components/navbar.js +157 -0
  4. index.html +397 -19
  5. script.js +49 -0
  6. style.css +44 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codeguardian Ai Bug Slayer Supreme
3
- emoji: 🌖
4
- colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodeGuardian AI - Bug Slayer Supreme 🐞✨
3
+ colorFrom: red
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,187 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ width: 100%;
9
+ background-color: #111827;
10
+ color: #9ca3af;
11
+ padding: 3rem 0;
12
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
13
+ }
14
+
15
+ .footer-container {
16
+ max-width: 1280px;
17
+ margin: 0 auto;
18
+ padding: 0 2rem;
19
+ }
20
+
21
+ .footer-content {
22
+ display: grid;
23
+ grid-template-columns: repeat(1, minmax(0, 1fr));
24
+ gap: 3rem;
25
+ }
26
+
27
+ @media (min-width: 768px) {
28
+ .footer-content {
29
+ grid-template-columns: repeat(4, minmax(0, 1fr));
30
+ }
31
+ }
32
+
33
+ .footer-logo {
34
+ display: flex;
35
+ align-items: center;
36
+ gap: 0.5rem;
37
+ margin-bottom: 1.5rem;
38
+ }
39
+
40
+ .footer-logo img {
41
+ height: 28px;
42
+ }
43
+
44
+ .footer-logo span {
45
+ font-weight: 600;
46
+ color: white;
47
+ }
48
+
49
+ .footer-description {
50
+ font-size: 0.875rem;
51
+ line-height: 1.5rem;
52
+ margin-bottom: 1.5rem;
53
+ }
54
+
55
+ .footer-social {
56
+ display: flex;
57
+ gap: 1rem;
58
+ }
59
+
60
+ .footer-social a {
61
+ color: #9ca3af;
62
+ transition: color 0.2s;
63
+ }
64
+
65
+ .footer-social a:hover {
66
+ color: white;
67
+ }
68
+
69
+ .footer-section h3 {
70
+ color: white;
71
+ font-weight: 600;
72
+ margin-bottom: 1rem;
73
+ font-size: 0.875rem;
74
+ }
75
+
76
+ .footer-links {
77
+ display: flex;
78
+ flex-direction: column;
79
+ gap: 0.75rem;
80
+ }
81
+
82
+ .footer-links a {
83
+ color: #9ca3af;
84
+ font-size: 0.875rem;
85
+ transition: color 0.2s;
86
+ text-decoration: none;
87
+ }
88
+
89
+ .footer-links a:hover {
90
+ color: white;
91
+ }
92
+
93
+ .footer-bottom {
94
+ margin-top: 3rem;
95
+ padding-top: 2rem;
96
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
97
+ display: flex;
98
+ flex-direction: column;
99
+ gap: 1rem;
100
+ align-items: center;
101
+ font-size: 0.75rem;
102
+ }
103
+
104
+ @media (min-width: 768px) {
105
+ .footer-bottom {
106
+ flex-direction: row;
107
+ justify-content: space-between;
108
+ }
109
+ }
110
+ </style>
111
+ <div class="footer-container">
112
+ <div class="footer-content">
113
+ <div>
114
+ <div class="footer-logo">
115
+ <img src="https://www.greptile.com/logo-only.svg" alt="CodeGuardian AI">
116
+ <span>CodeGuardian</span>
117
+ </div>
118
+ <p class="footer-description">
119
+ AI-powered code review that helps you catch bugs and ship faster with confidence.
120
+ </p>
121
+ <div class="footer-social">
122
+ <a href="https://github.com/greptileai" aria-label="GitHub">
123
+ <i data-feather="github"></i>
124
+ </a>
125
+ <a href="https://twitter.com/greptile" aria-label="Twitter">
126
+ <i data-feather="twitter"></i>
127
+ </a>
128
+ <a href="https://www.linkedin.com/company/greptile/" aria-label="LinkedIn">
129
+ <i data-feather="linkedin"></i>
130
+ </a>
131
+ <a href="https://discord.gg/dWaGnuFyJA" aria-label="Discord">
132
+ <i data-feather="message-circle"></i>
133
+ </a>
134
+ </div>
135
+ </div>
136
+
137
+ <div>
138
+ <h3>Product</h3>
139
+ <div class="footer-links">
140
+ <a href="/pricing">Pricing</a>
141
+ <a href="/docs">Documentation</a>
142
+ <a href="/api">API</a>
143
+ <a href="/integrations">Integrations</a>
144
+ <a href="/security">Security</a>
145
+ <a href="/privacy">Privacy</a>
146
+ </div>
147
+ </div>
148
+
149
+ <div>
150
+ <h3>Company</h3>
151
+ <div class="footer-links">
152
+ <a href="/blog">Blog</a>
153
+ <a href="/customers">Customers</a>
154
+ <a href="/enterprise">Enterprise</a>
155
+ <a href="/careers">Careers</a>
156
+ <a href="/contact">Contact Us</a>
157
+ <a href="/terms">Terms of Service</a>
158
+ </div>
159
+ </div>
160
+
161
+ <div>
162
+ <h3>Resources</h3>
163
+ <div class="footer-links">
164
+ <a href="/examples">Examples</a>
165
+ <a href="/benchmarks">Benchmarks</a>
166
+ <a href="/content-library">Content Library</a>
167
+ <a href="/status">Status</a>
168
+ <a href="/for-yc">For YC Companies</a>
169
+ <a href="/what-is-ai-code-review">AI Code Review Guide</a>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="footer-bottom">
175
+ <div>© 2025 CodeGuardian AI. All rights reserved.</div>
176
+ <div class="flex gap-4">
177
+ <a href="/privacy">Privacy Policy</a>
178
+ <a href="/terms">Terms of Service</a>
179
+ <a href="/cookies">Cookie Policy</a>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ `;
184
+ }
185
+ }
186
+
187
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,157 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ width: 100%;
9
+ position: sticky;
10
+ top: 0;
11
+ z-index: 50;
12
+ background-color: rgba(17, 24, 39, 0.8);
13
+ backdrop-filter: blur(10px);
14
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
15
+ }
16
+
17
+ nav {
18
+ max-width: 1280px;
19
+ margin: 0 auto;
20
+ padding: 1rem 2rem;
21
+ display: flex;
22
+ justify-content: space-between;
23
+ align-items: center;
24
+ }
25
+
26
+ .logo {
27
+ display: flex;
28
+ align-items: center;
29
+ gap: 0.5rem;
30
+ font-weight: 600;
31
+ font-size: 1.25rem;
32
+ color: white;
33
+ text-decoration: none;
34
+ }
35
+
36
+ .logo img {
37
+ height: 32px;
38
+ }
39
+
40
+ .nav-links {
41
+ display: flex;
42
+ gap: 1.5rem;
43
+ }
44
+
45
+ .nav-links a {
46
+ color: rgba(209, 213, 219, 0.8);
47
+ text-decoration: none;
48
+ font-weight: 500;
49
+ transition: color 0.2s;
50
+ font-size: 0.95rem;
51
+ }
52
+
53
+ .nav-links a:hover {
54
+ color: white;
55
+ }
56
+
57
+ .nav-actions {
58
+ display: flex;
59
+ gap: 1rem;
60
+ align-items: center;
61
+ }
62
+
63
+ .nav-button {
64
+ padding: 0.5rem 1rem;
65
+ border-radius: 0.375rem;
66
+ font-weight: 500;
67
+ text-decoration: none;
68
+ transition: all 0.2s;
69
+ font-size: 0.95rem;
70
+ }
71
+
72
+ .nav-button.secondary {
73
+ color: white;
74
+ border: 1px solid rgba(255, 255, 255, 0.2);
75
+ }
76
+
77
+ .nav-button.secondary:hover {
78
+ background-color: rgba(255, 255, 255, 0.05);
79
+ border-color: rgba(255, 255, 255, 0.3);
80
+ }
81
+
82
+ .nav-button.primary {
83
+ background-color: #6366f1;
84
+ color: white;
85
+ }
86
+
87
+ .nav-button.primary:hover {
88
+ background-color: #4f46e5;
89
+ }
90
+
91
+ .mobile-menu-button {
92
+ display: none;
93
+ background: none;
94
+ border: none;
95
+ color: white;
96
+ cursor: pointer;
97
+ }
98
+
99
+ @media (max-width: 768px) {
100
+ .nav-links, .nav-actions {
101
+ display: none;
102
+ }
103
+
104
+ .mobile-menu-button {
105
+ display: block;
106
+ }
107
+ }
108
+ </style>
109
+ <nav>
110
+ <a href="/" class="logo">
111
+ <img src="https://www.greptile.com/logo-only.svg" alt="CodeGuardian AI">
112
+ <span>CodeGuardian</span>
113
+ </a>
114
+
115
+ <div class="nav-links">
116
+ <a href="/pricing">Pricing</a>
117
+ <div class="relative group">
118
+ <a href="#features" class="flex items-center gap-1">
119
+ Features
120
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
121
+ </a>
122
+ <div class="absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-gray-800 border border-gray-700 hidden group-hover:block z-10">
123
+ <a href="/feature/code-context" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Code Context</a>
124
+ <a href="/feature/custom-rules" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Custom Rules</a>
125
+ <a href="/feature/learning" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Learning</a>
126
+ <a href="/feature/sequence-diagrams" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Sequence Diagrams</a>
127
+ </div>
128
+ </div>
129
+ <a href="/enterprise">Enterprise</a>
130
+ <div class="relative group">
131
+ <a href="#" class="flex items-center gap-1">
132
+ Resources
133
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
134
+ </a>
135
+ <div class="absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-gray-800 border border-gray-700 hidden group-hover:block z-10">
136
+ <a href="/docs" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Docs</a>
137
+ <a href="/examples" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Examples</a>
138
+ <a href="/customers" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Customers</a>
139
+ <a href="/blog" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Blog</a>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="nav-actions">
145
+ <a href="/login" class="nav-button secondary">Sign In</a>
146
+ <a href="/signup" class="nav-button primary">Start Now</a>
147
+ </div>
148
+
149
+ <button class="mobile-menu-button">
150
+ <i data-feather="menu"></i>
151
+ </button>
152
+ </nav>
153
+ `;
154
+ }
155
+ }
156
+
157
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,397 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeGuardian AI | Merge 4X Faster, Catch 3X More Bugs</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ 500: '#6366f1',
17
+ },
18
+ secondary: {
19
+ 500: '#10b981',
20
+ }
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
27
+ <script src="https://unpkg.com/feather-icons"></script>
28
+ </head>
29
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
30
+ <!-- Navbar Component -->
31
+ <custom-navbar></custom-navbar>
32
+
33
+ <!-- Hero Section -->
34
+ <section class="relative overflow-hidden">
35
+ <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-primary-500/20 to-transparent opacity-50"></div>
36
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 relative z-10">
37
+ <div class="text-center">
38
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">
39
+ The AI Code Reviewer
40
+ </h1>
41
+ <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
42
+ AI agents that catch bugs in your pull requests with full context of your codebase
43
+ </p>
44
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
45
+ <a href="https://app.greptile.com/signup" class="px-8 py-4 bg-primary-500 hover:bg-primary-600 text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg shadow-primary-500/30">
46
+ Try For Free
47
+ </a>
48
+ <a href="#features" class="px-8 py-4 border border-gray-700 hover:border-primary-500 text-gray-300 hover:text-white font-semibold rounded-lg transition-all duration-300">
49
+ Explore Features
50
+ </a>
51
+ </div>
52
+ <p class="mt-4 text-gray-400 text-sm">
53
+ No credit card required • 14-day free trial
54
+ </p>
55
+ </div>
56
+ </div>
57
+ </section>
58
+
59
+ <!-- Trusted By Section -->
60
+ <section class="py-12 bg-gray-800/50 border-y border-gray-800">
61
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
62
+ <p class="text-center text-gray-400 mb-8">TRUSTED BY 1000+ SOFTWARE TEAMS</p>
63
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-8 items-center justify-center">
64
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbrex.4d5d2dc8.webp&w=256&q=75" alt="Brex" class="h-12 opacity-80 hover:opacity-100 transition-opacity">
65
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsubstack.57a2d612.webp&w=256&q=75" alt="Substack" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
66
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbilt.e81f4e31.webp&w=128&q=75" alt="Bilt" class="h-8 opacity-80 hover:opacity-100 transition-opacity">
67
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpodium.8bc497a9.webp&w=256&q=75" alt="Podium" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
68
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fposthog.0b5b2f0e.webp&w=256&q=75" alt="PostHog" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
69
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fraycast.4feb661d.webp&w=256&q=75" alt="Raycast" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
70
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbrowserbase.c8267cb0.webp&w=256&q=75" alt="Browserbase" class="h-10 opacity-80 hover:opacity-100 transition-opacity">
71
+ </div>
72
+ </div>
73
+ </section>
74
+
75
+ <!-- Features Section -->
76
+ <section id="features" class="py-20">
77
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
78
+ <div class="text-center mb-16">
79
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Your second pair of eyes</h2>
80
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
81
+ Greptile automatically reviews PRs in GitHub and GitLab with full context of your codebase.
82
+ </p>
83
+ </div>
84
+
85
+ <div class="grid md:grid-cols-2 gap-12">
86
+ <!-- Feature 1 -->
87
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-800 hover:border-primary-500/30 transition-all">
88
+ <div class="flex items-center mb-6">
89
+ <div class="bg-primary-500/10 p-3 rounded-lg mr-4">
90
+ <i data-feather="message-square" class="text-primary-500 w-6 h-6"></i>
91
+ </div>
92
+ <h3 class="text-xl font-bold">In-line Comments</h3>
93
+ </div>
94
+ <p class="text-gray-400 mb-6">
95
+ Get context-aware comments on your PRs to identify bugs, antipatterns, security issues, and more.
96
+ </p>
97
+ <a href="#" class="text-primary-500 hover:text-primary-400 flex items-center transition-colors">
98
+ Learn more
99
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
100
+ </a>
101
+ </div>
102
+
103
+ <!-- Feature 2 -->
104
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-800 hover:border-primary-500/30 transition-all">
105
+ <div class="flex items-center mb-6">
106
+ <div class="bg-secondary-500/10 p-3 rounded-lg mr-4">
107
+ <i data-feather="bookmark" class="text-secondary-500 w-6 h-6"></i>
108
+ </div>
109
+ <h3 class="text-xl font-bold">Custom Context</h3>
110
+ </div>
111
+ <p class="text-gray-400 mb-6">
112
+ Describe your coding standards in English. Greptile will enforce them across PRs.
113
+ </p>
114
+ <a href="#" class="text-primary-500 hover:text-primary-400 flex items-center transition-colors">
115
+ Learn more
116
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
117
+ </a>
118
+ </div>
119
+
120
+ <!-- Feature 3 -->
121
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-800 hover:border-primary-500/30 transition-all">
122
+ <div class="flex items-center mb-6">
123
+ <div class="bg-primary-500/10 p-3 rounded-lg mr-4">
124
+ <i data-feather="file-text" class="text-primary-500 w-6 h-6"></i>
125
+ </div>
126
+ <h3 class="text-xl font-bold">PR Summaries</h3>
127
+ </div>
128
+ <p class="text-gray-400 mb-6">
129
+ Quickly understand PRs with AI-generated summaries, diagrams, and confidence scores.
130
+ </p>
131
+ <a href="#" class="text-primary-500 hover:text-primary-400 flex items-center transition-colors">
132
+ Learn more
133
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
134
+ </a>
135
+ </div>
136
+
137
+ <!-- Feature 4 -->
138
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-800 hover:border-primary-500/30 transition-all">
139
+ <div class="flex items-center mb-6">
140
+ <div class="bg-secondary-500/10 p-3 rounded-lg mr-4">
141
+ <i data-feather="cpu" class="text-secondary-500 w-6 h-6"></i>
142
+ </div>
143
+ <h3 class="text-xl font-bold">Learning</h3>
144
+ </div>
145
+ <p class="text-gray-400 mb-6">
146
+ Greptile learns your team's coding standards by reading PR comments and reactions.
147
+ </p>
148
+ <a href="#" class="text-primary-500 hover:text-primary-400 flex items-center transition-colors">
149
+ Learn more
150
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
151
+ </a>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </section>
156
+
157
+ <!-- Code Context Section -->
158
+ <section class="py-20 bg-gradient-to-br from-gray-900/50 via-gray-900 to-gray-900/50">
159
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
160
+ <div class="md:flex items-center gap-16">
161
+ <div class="md:w-1/2 mb-12 md:mb-0">
162
+ <h2 class="text-3xl font-bold mb-6">Full Codebase Context</h2>
163
+ <p class="text-xl text-gray-400 mb-8">
164
+ Greptile generates a detailed graph of your codebase and understands how everything fits together. Better understanding = more bugs caught.
165
+ </p>
166
+ <div class="flex flex-wrap gap-3 mb-8">
167
+ <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">supabase</span>
168
+ <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">amazon s3</span>
169
+ <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">google cloud</span>
170
+ <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">stripe api</span>
171
+ <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">user service</span>
172
+ <span class="px-4 py-2 bg-gray-800 rounded-full text-sm">auth system</span>
173
+ </div>
174
+ <a href="#" class="inline-flex items-center text-primary-500 hover:text-primary-400 transition-colors">
175
+ Learn more about code context
176
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
177
+ </a>
178
+ </div>
179
+ <div class="md:w-1/2 relative">
180
+ <div class="relative bg-gray-800 rounded-xl p-1 border border-gray-700 shadow-2xl">
181
+ <div class="absolute inset-0 bg-primary-500/10 rounded-xl -z-10 blur-xl opacity-30"></div>
182
+ <div class="bg-gray-900 rounded-lg overflow-hidden">
183
+ <div class="bg-gray-800 px-4 py-2 flex items-center">
184
+ <div class="flex space-x-2">
185
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
186
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
187
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
188
+ </div>
189
+ <div class="ml-4 text-sm text-gray-400">codebase_graph.js</div>
190
+ </div>
191
+ <div class="p-4 font-mono text-sm text-gray-300">
192
+ <pre><code class="language-javascript">function resolveDependencies() {
193
+ const dependencies = {
194
+ 'auth_service': ['user_model', 'session_db'],
195
+ 'payment_processor': ['stripe_api', 'user_model'],
196
+ 'storage_engine': ['s3_client', 'file_metadata']
197
+ };
198
+
199
+ return visualizeGraph(dependencies);
200
+ }</code></pre>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Custom Context Section -->
210
+ <section class="py-20">
211
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
212
+ <div class="text-center mb-16">
213
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Your house, your rules</h2>
214
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
215
+ Greptile is better when personalized to your team's specific needs and standards.
216
+ </p>
217
+ </div>
218
+
219
+ <div class="grid md:grid-cols-3 gap-8">
220
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-800 hover:border-secondary-500/30 transition-all">
221
+ <div class="bg-secondary-500/10 p-4 rounded-lg mb-6 w-12 h-12 flex items-center justify-center">
222
+ <i data-feather="edit" class="text-secondary-500"></i>
223
+ </div>
224
+ <h3 class="text-xl font-bold mb-4">Write rules in plain English</h3>
225
+ <p class="text-gray-400">
226
+ Describe your team's best practices in natural language or point to existing documentation.
227
+ </p>
228
+ </div>
229
+
230
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-800 hover:border-secondary-500/30 transition-all">
231
+ <div class="bg-secondary-500/10 p-4 rounded-lg mb-6 w-12 h-12 flex items-center justify-center">
232
+ <i data-feather="target" class="text-secondary-500"></i>
233
+ </div>
234
+ <h3 class="text-xl font-bold mb-4">Apply rules selectively</h3>
235
+ <p class="text-gray-400">
236
+ Scope rules to specific repositories, file paths, or code patterns for precision.
237
+ </p>
238
+ </div>
239
+
240
+ <div class="bg-gray-800/50 p-8 rounded-xl border border-gray-800 hover:border-secondary-500/30 transition-all">
241
+ <div class="bg-secondary-500/10 p-4 rounded-lg mb-6 w-12 h-12 flex items-center justify-center">
242
+ <i data-feather="trending-up" class="text-secondary-500"></i>
243
+ </div>
244
+ <h3 class="text-xl font-bold mb-4">Track effectiveness</h3>
245
+ <p class="text-gray-400">
246
+ Monitor which rules are being used and how often they're acted upon.
247
+ </p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- Results Section -->
254
+ <section class="py-20 bg-gray-800/50">
255
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
256
+ <div class="text-center mb-16">
257
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Merge PRs faster with Greptile</h2>
258
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
259
+ Data-driven results from teams using CodeGuardian AI
260
+ </p>
261
+ </div>
262
+
263
+ <div class="bg-gray-900 p-8 rounded-xl border border-gray-800">
264
+ <div class="md:flex items-center">
265
+ <div class="md:w-1/2 mb-8 md:mb-0">
266
+ <h3 class="text-2xl font-bold mb-4">Median Time to Merge Comparison</h3>
267
+ <div class="space-y-8">
268
+ <div>
269
+ <div class="flex justify-between mb-2">
270
+ <span class="text-gray-400">Without Greptile</span>
271
+ <span class="font-bold">20 hrs</span>
272
+ </div>
273
+ <div class="h-4 bg-gray-800 rounded-full overflow-hidden">
274
+ <div class="h-full bg-red-500 rounded-full" style="width: 100%"></div>
275
+ </div>
276
+ </div>
277
+ <div>
278
+ <div class="flex justify-between mb-2">
279
+ <span class="text-gray-400">With Greptile</span>
280
+ <span class="font-bold">1.8 hrs</span>
281
+ </div>
282
+ <div class="h-4 bg-gray-800 rounded-full overflow-hidden">
283
+ <div class="h-full bg-secondary-500 rounded-full" style="width: 9%"></div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ <div class="md:w-1/2 md:pl-12">
289
+ <h3 class="text-2xl font-bold mb-4">Team Size vs Merge Time</h3>
290
+ <div class="bg-gray-800 p-4 rounded-lg">
291
+ <img src="https://via.placeholder.com/500x250/1a1a2e/ffffff?text=Performance+Chart" alt="Performance Chart" class="w-full rounded">
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </section>
298
+
299
+ <!-- Testimonials Section -->
300
+ <section class="py-20">
301
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
302
+ <div class="text-center mb-16">
303
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">From Developers That Use Greptile</h2>
304
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
305
+ See what developers are saying about their experience with CodeGuardian AI
306
+ </p>
307
+ </div>
308
+
309
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
310
+ <!-- Testimonial 1 -->
311
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-800 hover:border-primary-500/30 transition-all">
312
+ <div class="flex items-center mb-4">
313
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjames-reggio.8a7e9102.png&w=96&q=75" alt="James" class="w-12 h-12 rounded-full mr-4">
314
+ <div>
315
+ <h4 class="font-bold">James</h4>
316
+ <p class="text-sm text-gray-400">CTO • Brex</p>
317
+ </div>
318
+ </div>
319
+ <p class="text-gray-300 mb-4">
320
+ "We've tried more code review tools than I can count. Greptile outperforms them all by a mile. Honestly the only AI reviewer that doesn't annoy the shit out of me."
321
+ </p>
322
+ <div class="flex items-center">
323
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbrex-logo.46a13de5.webp&w=48&q=75" alt="Brex" class="h-6 opacity-80">
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Testimonial 2 -->
328
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-800 hover:border-primary-500/30 transition-all">
329
+ <div class="flex items-center mb-4">
330
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmarktran.e417e5b5.webp&w=96&q=75" alt="Mark" class="w-12 h-12 rounded-full mr-4">
331
+ <div>
332
+ <h4 class="font-bold">Mark</h4>
333
+ <p class="text-sm text-gray-400">Eng. Manager • WorkOS</p>
334
+ </div>
335
+ </div>
336
+ <p class="text-gray-300 mb-4">
337
+ "We've been impressed by Greptile's code review quality. It's tightened our feedback loops, improved consistency, and freed up engineers to focus on higher-level design."
338
+ </p>
339
+ <div class="flex items-center">
340
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fworkos-logo.436a7eb7.webp&w=48&q=75" alt="WorkOS" class="h-6 opacity-80">
341
+ </div>
342
+ </div>
343
+
344
+ <!-- Testimonial 3 -->
345
+ <div class="bg-gray-800/50 p-6 rounded-xl border border-gray-800 hover:border-primary-500/30 transition-all">
346
+ <div class="flex items-center mb-4">
347
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fanirudh.bfd3a921.webp&w=96&q=75" alt="Anirudh" class="w-12 h-12 rounded-full mr-4">
348
+ <div>
349
+ <h4 class="font-bold">Anirudh</h4>
350
+ <p class="text-sm text-gray-400">Tech Lead • Browserbase</p>
351
+ </div>
352
+ </div>
353
+ <p class="text-gray-300 mb-4">
354
+ "Greptile helps the team do their best work. It levels everybody up and helps ensure that we're all proud of our code."
355
+ </p>
356
+ <div class="flex items-center">
357
+ <img src="https://www.greptile.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbrowserbase-logo.8c16041f.webp&w=48&q=75" alt="Browserbase" class="h-6 opacity-80">
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- CTA Section -->
365
+ <section class="py-20 bg-gradient-to-br from-primary-900/30 via-gray-900 to-secondary-900/30">
366
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
367
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to ship faster with fewer bugs?</h2>
368
+ <p class="text-xl text-gray-300 mb-8">
369
+ Join 1000+ software teams that trust CodeGuardian AI for their code reviews.
370
+ </p>
371
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
372
+ <a href="https://app.greptile.com/signup" class="px-8 py-4 bg-primary-500 hover:bg-primary-600 text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg shadow-primary-500/30">
373
+ Start Free Trial
374
+ </a>
375
+ <a href="#features" class="px-8 py-4 border border-gray-700 hover:border-primary-500 text-gray-300 hover:text-white font-semibold rounded-lg transition-all duration-300">
376
+ See How It Works
377
+ </a>
378
+ </div>
379
+ <p class="mt-4 text-gray-400 text-sm">
380
+ 14-day free trial • No credit card required
381
+ </p>
382
+ </div>
383
+ </section>
384
+
385
+ <!-- Footer Component -->
386
+ <custom-footer></custom-footer>
387
+
388
+ <!-- Scripts -->
389
+ <script src="components/navbar.js"></script>
390
+ <script src="components/footer.js"></script>
391
+ <script src="script.js"></script>
392
+ <script>
393
+ feather.replace();
394
+ </script>
395
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
396
+ </body>
397
+ </html>
script.js ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Smooth scrolling for anchor links
3
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
4
+ anchor.addEventListener('click', function(e) {
5
+ e.preventDefault();
6
+ const targetId = this.getAttribute('href');
7
+ if (targetId === '#') return;
8
+
9
+ const targetElement = document.querySelector(targetId);
10
+ if (targetElement) {
11
+ targetElement.scrollIntoView({
12
+ behavior: 'smooth'
13
+ });
14
+ }
15
+ });
16
+ });
17
+
18
+ // Dark mode toggle (if implemented)
19
+ const darkModeToggle = document.getElementById('darkModeToggle');
20
+ if (darkModeToggle) {
21
+ darkModeToggle.addEventListener('click', () => {
22
+ document.documentElement.classList.toggle('dark');
23
+ localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
24
+ });
25
+ }
26
+
27
+ // Check for saved dark mode preference
28
+ if (localStorage.getItem('darkMode') === 'true' ||
29
+ (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
30
+ document.documentElement.classList.add('dark');
31
+ }
32
+ });
33
+
34
+ // Intersection Observer for animations
35
+ const observerOptions = {
36
+ threshold: 0.1
37
+ };
38
+
39
+ const observer = new IntersectionObserver((entries) => {
40
+ entries.forEach(entry => {
41
+ if (entry.isIntersecting) {
42
+ entry.target.classList.add('animate-fadeIn');
43
+ }
44
+ });
45
+ }, observerOptions);
46
+
47
+ document.querySelectorAll('.fade-in').forEach(el => {
48
+ observer.observe(el);
49
+ });
style.css CHANGED
@@ -1,28 +1,54 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 
5
  }
6
 
7
+ /* Custom scrollbar */
8
+ ::-webkit-scrollbar {
9
+ width: 8px;
10
+ height: 8px;
11
+ }
12
+ ::-webkit-scrollbar-track {
13
+ background: #1a1a1a;
14
+ }
15
+ ::-webkit-scrollbar-thumb {
16
+ background: #4b5563;
17
+ border-radius: 4px;
18
+ }
19
+ ::-webkit-scrollbar-thumb:hover {
20
+ background: #6366f1;
21
  }
22
 
23
+ /* Code block styling */
24
+ pre {
25
+ background: #1e1e2d !important;
26
+ border-radius: 0.5rem;
27
+ padding: 1rem;
28
+ overflow-x: auto;
29
  }
30
 
31
+ code {
32
+ color: #e2e8f0 !important;
33
+ font-family: 'Fira Code', monospace;
34
+ font-size: 0.9rem;
 
 
35
  }
36
 
37
+ /* Animation classes */
38
+ .animate-float {
39
+ animation: float 6s ease-in-out infinite;
40
  }
41
+
42
+ @keyframes float {
43
+ 0% { transform: translateY(0px); }
44
+ 50% { transform: translateY(-20px); }
45
+ 100% { transform: translateY(0px); }
46
+ }
47
+
48
+ .glow {
49
+ text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
50
+ }
51
+
52
+ .hover-glow:hover {
53
+ box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
54
+ }