Skip to content

Commit d5325d2

Browse files
mkczarkowskimkczarkowski
authored
feat: add landing page with product info (#78)
* feat: create landing for the product * feat: disable animations on safari * feat: update link to airtable form (prompt library request) * fix: import from another module
1 parent 5e57c18 commit d5325d2

28 files changed

Lines changed: 2983 additions & 10 deletions

‎src/components/landing/ChooseYourPath.astro‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
import PathCard from '../ui/PathCard.astro';
3+
import { ROUTES, EXTERNAL_LINKS } from '../../data/landingContent';
4+
import { getTotalLibraryCount } from '../../utils/landingData';
5+
---
6+
7+
<section id="choose-your-path" class="py-20 px-4">
8+
<div class="max-w-7xl mx-auto">
9+
<h2 class="text-4xl font-bold text-white text-center mb-4">
10+
One Platform, Two Powerful Workflows
11+
</h2>
12+
13+
<p class="text-xl text-gray-400 text-center mb-12 max-w-3xl mx-auto">
14+
Whether you code solo or collaborate with a team, we've got you covered
15+
</p>
16+
17+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
18+
<!-- Rules Builder Path -->
19+
<PathCard
20+
icon="🧑‍💻"
21+
title="Rules Builder"
22+
subtitle="Best for: Individual developers, freelancers, students"
23+
features={[
24+
'Personal AI rules creation',
25+
`${getTotalLibraryCount()}+ framework templates`,
26+
'Smart import from package.json',
27+
'Instant export to any editor',
28+
'Save unlimited collections',
29+
'MCP server access',
30+
]}
31+
ctaText="Start Building Rules"
32+
ctaHref={ROUTES.SIGNUP}
33+
note="Available immediately after signup"
34+
/>
35+
36+
<!-- Prompt Library Path -->
37+
<PathCard
38+
icon="👥"
39+
title="Prompt Library"
40+
subtitle="Best for: Development teams, organizations, enterprises"
41+
features={[
42+
'Centralized prompt management',
43+
'Admin curation tools',
44+
'Role-based team access',
45+
'Collections & segments',
46+
'Publish/draft workflows',
47+
'MCP server access',
48+
]}
49+
ctaText="Explore for Teams"
50+
ctaHref={EXTERNAL_LINKS.LIBRARY_FORM}
51+
note="Currently available for selected organizations (pilot program)"
52+
/>
53+
</div>
54+
</div>
55+
</section>

‎src/components/landing/Community.astro‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
import { getContributors, getContributorCount } from '../../utils/landingData';
3+
import { EXTERNAL_LINKS } from '../../data/landingContent';
4+
5+
const contributors = getContributors();
6+
const contributorCount = getContributorCount();
7+
---
8+
9+
<section class="relative py-20 px-4 overflow-hidden">
10+
<div class="max-w-7xl mx-auto text-center relative z-10">
11+
<h2 class="text-4xl font-bold text-white mb-6">Built by 10xDevs & Friends</h2>
12+
13+
<p class="text-xl text-gray-400 mb-12">
14+
Open source project with {contributorCount}+ contributors and growing
15+
</p>
16+
17+
<!-- Contributor avatars -->
18+
<div class="flex flex-wrap justify-center items-center gap-4 mb-8 max-w-4xl mx-auto">
19+
{
20+
contributors.map((contributor) => (
21+
<a
22+
href={contributor.profile}
23+
target="_blank"
24+
rel="noopener noreferrer"
25+
class="group relative"
26+
title={contributor.name}
27+
>
28+
<img
29+
src={contributor.avatar_url}
30+
alt={contributor.name}
31+
class="contributor-avatar w-16 h-16 rounded-full border-2 border-gray-700"
32+
loading="lazy"
33+
/>
34+
</a>
35+
))
36+
}
37+
</div>
38+
39+
<div class="flex flex-col sm:flex-row gap-4 justify-center">
40+
<a
41+
href={EXTERNAL_LINKS.GITHUB}
42+
target="_blank"
43+
rel="noopener noreferrer"
44+
class="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-700 hover:border-gray-600 bg-gray-900 hover:bg-gray-800 text-white rounded-lg font-medium transition-all duration-300"
45+
>
46+
<span class="mr-2">⭐</span>
47+
Star on GitHub
48+
</a>
49+
50+
<a
51+
href={EXTERNAL_LINKS.GITHUB_CONTRIBUTING}
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
class="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-700 hover:border-gray-600 bg-gray-900 hover:bg-gray-800 text-white rounded-lg font-medium transition-all duration-300"
55+
>
56+
Join {contributorCount}+ Contributors
57+
</a>
58+
</div>
59+
</div>
60+
</section>

‎src/components/landing/FeatureCard.astro‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
interface Props {
3+
icon: string;
4+
title: string;
5+
description: string;
6+
}
7+
8+
const { icon, title, description } = Astro.props;
9+
---
10+
11+
<div
12+
class="p-6 bg-gray-900 border border-gray-800 rounded-lg hover:border-gray-700 transition-all duration-300 hover:shadow-xl"
13+
>
14+
<div class="text-4xl mb-4">
15+
{icon}
16+
</div>
17+
18+
<h3 class="text-xl font-semibold text-white mb-3">
19+
{title}
20+
</h3>
21+
22+
<p class="text-gray-400 leading-relaxed">
23+
{description}
24+
</p>
25+
</div>

‎src/components/landing/FeaturesGrid.astro‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
---
2+
import { GRADIENT_ORB_DELAYS } from '../../data/landingContent';
3+
import { getTotalLibraryCount } from '../../utils/landingData';
4+
5+
// Features - Rules Builder
6+
const RULES_BUILDER_FEATURES = [
7+
{
8+
icon: '🎨',
9+
title: 'Visual Rule Builder',
10+
description: 'Intuitive drag-and-drop interface for creating AI rules without writing code',
11+
},
12+
{
13+
icon: '📚',
14+
title: `${getTotalLibraryCount()}+ Frameworks & Libraries`,
15+
description:
16+
'Comprehensive coverage across 6 technology layers: frontend, backend, database, DevOps, testing, and coding practices',
17+
},
18+
{
19+
icon: '📦',
20+
title: 'Smart Import',
21+
description:
22+
'Automatically detect your tech stack by dropping package.json or requirements.txt files',
23+
},
24+
{
25+
icon: '💾',
26+
title: 'Flexible Export',
27+
description: 'Export as single-file or multi-file markdown optimized for different AI editors',
28+
},
29+
{
30+
icon: '🗂️',
31+
title: 'Personal Collections',
32+
description: 'Save and manage reusable rule sets for different projects and contexts',
33+
},
34+
];
35+
36+
// Features - Prompt Library
37+
const PROMPT_LIBRARY_FEATURES = [
38+
{
39+
icon: '🏢',
40+
title: 'Organization Management',
41+
description:
42+
'Multi-organization support with role-based access control (RBAC) for admins and members',
43+
},
44+
{
45+
icon: '✍️',
46+
title: 'Content Curation',
47+
description: 'Draft/publish workflow ensures quality and consistency across team prompts',
48+
},
49+
{
50+
icon: '👥',
51+
title: 'Member Experience',
52+
description: "Browse, filter, and copy prompts from your organization's centralized library",
53+
},
54+
{
55+
icon: '🤝',
56+
title: 'Collaboration Tools',
57+
description: 'Centralized repository for team knowledge sharing and prompt standardization',
58+
},
59+
];
60+
61+
// Features - Universal
62+
const UNIVERSAL_FEATURES = [
63+
{
64+
icon: '🔌',
65+
title: 'MCP Server Integration',
66+
description:
67+
'Programmatic access to both Rules Builder and Prompt Library via Model Context Protocol for AI assistants',
68+
},
69+
];
70+
---
71+
72+
<section id="features" class="relative py-20 px-4">
73+
<!-- Gradient mesh background -->
74+
<div class="absolute inset-0 gradient-mesh pointer-events-none"></div>
75+
76+
<!-- Dots pattern background -->
77+
<div class="absolute inset-0 bg-dots-pattern opacity-10 pointer-events-none"></div>
78+
79+
<!-- Subtle gradient orbs -->
80+
<div class="absolute inset-0 overflow-hidden pointer-events-none">
81+
<div
82+
class="gradient-orb gradient-orb-blue w-64 h-64 top-1/4 -left-32"
83+
style={`animation-delay: ${GRADIENT_ORB_DELAYS.FEATURES_BLUE};`}
84+
>
85+
</div>
86+
<div
87+
class="gradient-orb gradient-orb-teal w-64 h-64 bottom-1/4 -right-32"
88+
style={`animation-delay: ${GRADIENT_ORB_DELAYS.FEATURES_TEAL};`}
89+
>
90+
</div>
91+
</div>
92+
93+
<div class="max-w-7xl mx-auto relative z-10">
94+
<h2 class="text-4xl md:text-5xl font-bold text-white text-center mb-4">
95+
Powerful Features for Everyone
96+
</h2>
97+
<p class="text-xl text-gray-400 text-center mb-16 max-w-3xl mx-auto">
98+
Build personal AI rules and manage team prompts in one platform
99+
</p>
100+
101+
<!-- Two Column Comparison -->
102+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
103+
<!-- Rules Builder Column -->
104+
<div
105+
class="features-column-left bg-gray-950 border-2 border-gray-800 rounded-xl p-8 hover:border-blue-500/50 transition-all duration-300"
106+
>
107+
<!-- Column Header -->
108+
<div class="text-center mb-8">
109+
<div class="text-5xl mb-4">🧑‍💻</div>
110+
<h3 class="text-2xl font-bold text-white mb-2">Rules Builder</h3>
111+
<p class="text-gray-400">For individual developers</p>
112+
</div>
113+
114+
<!-- Features List -->
115+
<div class="space-y-6">
116+
{
117+
RULES_BUILDER_FEATURES.map((feature) => (
118+
<div class="feature-item flex items-start gap-4">
119+
<div class="feature-icon text-3xl flex-shrink-0">{feature.icon}</div>
120+
<div>
121+
<h4 class="text-lg font-semibold text-white mb-1">{feature.title}</h4>
122+
<p class="text-gray-400 text-sm leading-relaxed">{feature.description}</p>
123+
</div>
124+
</div>
125+
))
126+
}
127+
</div>
128+
</div>
129+
130+
<!-- Prompt Library Column -->
131+
<div
132+
class="features-column-right bg-gray-950 border-2 border-gray-800 rounded-xl p-8 hover:border-teal-500/50 transition-all duration-300"
133+
>
134+
<!-- Column Header -->
135+
<div class="text-center mb-8">
136+
<div class="text-5xl mb-4">👥</div>
137+
<h3 class="text-2xl font-bold text-white mb-2">Prompt Library</h3>
138+
<p class="text-gray-400">For development teams</p>
139+
</div>
140+
141+
<!-- Features List -->
142+
<div class="space-y-6">
143+
{
144+
PROMPT_LIBRARY_FEATURES.map((feature) => (
145+
<div class="feature-item flex items-start gap-4">
146+
<div class="feature-icon text-3xl flex-shrink-0">{feature.icon}</div>
147+
<div>
148+
<h4 class="text-lg font-semibold text-white mb-1">{feature.title}</h4>
149+
<p class="text-gray-400 text-sm leading-relaxed">{feature.description}</p>
150+
</div>
151+
</div>
152+
))
153+
}
154+
</div>
155+
</div>
156+
</div>
157+
158+
<!-- Universal Feature Banner -->
159+
{
160+
UNIVERSAL_FEATURES.map((feature) => (
161+
<div class="bg-gradient-to-r from-blue-900/30 via-gray-900/50 to-teal-900/30 border border-gray-800 rounded-xl p-8 max-w-2xl mx-auto">
162+
<div class="flex flex-col md:flex-row items-center gap-6 max-w-4xl mx-auto">
163+
<div class="text-5xl flex-shrink-0">{feature.icon}</div>
164+
<div class="text-center md:text-left">
165+
<h4 class="text-2xl font-bold text-white mb-2">{feature.title}</h4>
166+
<p class="text-gray-300 leading-relaxed">{feature.description}</p>
167+
</div>
168+
</div>
169+
</div>
170+
))
171+
}
172+
</div>
173+
</section>

‎src/components/landing/FinalCTA.astro‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
import Button from '../ui/Button.astro';
3+
import { GRADIENT_ORB_DELAYS, ROUTES, EXTERNAL_LINKS } from '../../data/landingContent';
4+
---
5+
6+
<section class="relative py-20 px-4 overflow-hidden">
7+
<!-- Dynamic gradient background -->
8+
<div
9+
class="absolute inset-0 bg-gradient-to-r from-blue-900/30 via-purple-900/20 to-teal-900/30 pointer-events-none"
10+
>
11+
</div>
12+
13+
<!-- Animated gradient orbs -->
14+
<div class="absolute inset-0 overflow-hidden pointer-events-none">
15+
<div
16+
class="gradient-orb gradient-orb-blue w-96 h-96 top-1/2 left-0 -translate-y-1/2"
17+
style={`animation-delay: ${GRADIENT_ORB_DELAYS.CTA_BLUE};`}
18+
>
19+
</div>
20+
<div
21+
class="gradient-orb gradient-orb-teal w-96 h-96 top-1/2 right-0 -translate-y-1/2"
22+
style={`animation-delay: ${GRADIENT_ORB_DELAYS.CTA_TEAL};`}
23+
>
24+
</div>
25+
</div>
26+
27+
<!-- Dots pattern overlay -->
28+
<div class="absolute inset-0 bg-dots-pattern opacity-10 pointer-events-none"></div>
29+
30+
<div class="max-w-4xl mx-auto text-center relative z-10">
31+
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
32+
Ready to Supercharge Your AI Coding?
33+
</h2>
34+
35+
<p class="text-xl text-gray-400 mb-8">
36+
Join developers using 10xRules.ai to get better AI suggestions
37+
</p>
38+
39+
<div class="flex flex-col sm:flex-row gap-4 justify-center">
40+
<Button href={ROUTES.SIGNUP} variant="primary" class="final-cta-button magnetic-button">
41+
Get Started Free
42+
</Button>
43+
<Button href={EXTERNAL_LINKS.GITHUB} variant="secondary"> View on GitHub </Button>
44+
</div>
45+
</div>
46+
</section>

0 commit comments

Comments
 (0)