Skip to content

Commit 57b3167

Browse files
OceanOakOceanOak
committed
Add a DesignedForGenAI section
1 parent fc842ef commit 57b3167

File tree

2 files changed

+158
-0
lines changed

2 files changed

+158
-0
lines changed

‎src/components/sections/DesignedForGenAI.tsx

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React from "react";
2+
3+
const DesignedForGenAI: React.FC = () => {
4+
return (
5+
<section className="py-16 bg-white">
6+
<div className="maw-w-7xl mx-auto px-4">
7+
<div className="text-center mb-12">
8+
<button className="inline-flex items-center justify-center px-6 py-2 border border-purple-lbg font-medium rounded-full text-purple-lbg bg-white">
9+
Built for Tomorrow
10+
</button>
11+
<h2 className="text-3xl md:text-4xl md:text-5xl font-bold mt-6 mb-8">
12+
Designed for GenAI
13+
</h2>
14+
<p className="text-lg md:text-2xl max-w-6xl mx-auto text-gray-700 leading-relaxed">
15+
We redesigned the dark language and tooling to enable
16+
GenAI-generated programs, including exposing language tools to GenAI
17+
tools, allowing running partial and incomplete programs safely, and
18+
ensuring access to significant context to GenAI tools
19+
</p>
20+
</div>
21+
22+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto mt-16">
23+
{/* First Card */}
24+
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
25+
<div className="text-xl font-semibold mb-4">
26+
Works with <span className="text-purple-lbg">GitHub Copilot</span>{" "}
27+
for AI-powered code suggestions
28+
</div>
29+
<ul>
30+
<li className="flex items-center">
31+
<span className="mr-2 text-purple-500">-</span>
32+
Get real-time code suggestions while writing Dark applications
33+
</li>
34+
<li className="flex items-center">
35+
<span className="mr-2 text-purple-500">-</span>
36+
Accelerate development with context-aware suggestions
37+
</li>
38+
</ul>
39+
</div>
40+
41+
{/* Second Card */}
42+
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
43+
<div className="inline-flex items-center justify-center px-4 py-1 mb-4 bg-purple-100 rounded-full">
44+
<span className="text-xs font-medium text-purple-lbg">2025</span>
45+
</div>
46+
<div className="text-xl font-semibold mb-4">
47+
Build short <span className="text-purple-lbg">CLI programs</span>{" "}
48+
from <span className="text-purple-lbg">prompts</span>
49+
</div>
50+
<div className="mt-4 p-3 bg-gray-50 rounded text-sm text-gray-600">
51+
dark prompt "find all js files which don't have a CSS file of the
52+
same name"
53+
</div>
54+
</div>
55+
56+
{/* Third Card */}
57+
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
58+
<div className="inline-flex items-center justify-center px-4 py-1 mb-4 bg-purple-100 rounded-full">
59+
<span className="text-xs font-medium text-purple-lbg">2025</span>
60+
</div>
61+
<div className="text-xl font-semibold mb-4">
62+
Use <span className="text-purple-lbg">any LLM</span>
63+
</div>
64+
<ul className="mt-4 space-y-2 text-gray-700">
65+
<li className="flex items-center">
66+
<span className="mr-2 text-purple-500">-</span>
67+
darklang's fine-tuned models
68+
</li>
69+
<li className="flex items-center">
70+
<span className="mr-2 text-purple-500">-</span>
71+
local OSS models
72+
</li>
73+
<li className="flex items-center">
74+
<span className="mr-2 text-purple-500">-</span>
75+
commercial models via API
76+
</li>
77+
</ul>
78+
</div>
79+
80+
{/* Fourth Card */}
81+
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
82+
<div className="inline-flex items-center justify-center px-4 py-1 mb-4 bg-purple-100 rounded-full">
83+
<span className="text-xs font-medium text-purple-lbg">2025</span>
84+
</div>
85+
<div className="text-xl font-semibold mb-4">
86+
Build <span className="text-purple-lbg">vendor SDKs</span> from
87+
prompts and OpenAPI docs
88+
</div>
89+
<ul>
90+
<li className="flex items-center">
91+
<span className="mr-2 text-purple-500">-</span>
92+
Transform technical API documentation into usable code libraries
93+
</li>
94+
<li className="flex items-center">
95+
<span className="mr-2 text-purple-500">-</span>
96+
Turn technical documentation into developer-friendly toolkits
97+
</li>
98+
<li className="flex items-center">
99+
<span className="mr-2 text-purple-500">-</span>
100+
Update SDKs automatically when APIs change
101+
</li>
102+
</ul>
103+
</div>
104+
105+
{/* Fifth Card */}
106+
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
107+
<div className="inline-flex items-center justify-center px-4 py-1 mb-4 bg-purple-100 rounded-full">
108+
<span className="text-xs font-medium text-purple-lbg">2025</span>
109+
</div>
110+
<div className="text-xl font-semibold mb-4">
111+
Build <span className="text-purple-lbg">complex programs</span>{" "}
112+
with darklang <span className="text-purple-lbg">AI agents</span>
113+
</div>
114+
<div>
115+
<span>
116+
We redesigned the dark language and tooling to enable
117+
GenAI-generated programs, including exposing language tools to
118+
GenAI tools, allowing running partial and incomplete programs
119+
safely, and ensuring access to significant context to GenAI
120+
tools
121+
</span>
122+
</div>
123+
</div>
124+
125+
{/* MCP Card */}
126+
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
127+
<div className="inline-flex items-center justify-center px-4 py-1 mb-4 bg-purple-100 rounded-full">
128+
<span className="text-xs font-medium text-purple-lbg">2025</span>
129+
</div>
130+
<div className="text-xl font-semibold mb-4">
131+
<span>
132+
Create <span className="text-purple-lbg">MCP servers</span>
133+
</span>
134+
</div>
135+
136+
<ul className="mt-4 space-y-2 text-gray-700">
137+
<li className="flex items-start">
138+
<span className="mr-2 text-purple-lbg">-</span>
139+
<span>
140+
Allow AI models to access external tools/resources, execute
141+
code, and interact with various services
142+
</span>
143+
</li>
144+
<li className="flex items-start">
145+
<span className="mr-2 text-purple-lbg">-</span>
146+
<span>Create custom MCP servers for your systems</span>
147+
</li>
148+
</ul>
149+
</div>
150+
</div>
151+
</div>
152+
</section>
153+
);
154+
};
155+
156+
export default DesignedForGenAI;

‎src/pages/Home.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import TraceDrivenDevelopment from "../components/sections/TraceDrivenDevelopmen
1515
import Editing from "../components/sections/Editing";
1616
import CLI from "../components/sections/CLI";
1717
import DeploylessCloud from "../components/sections/DeploylessCloud";
18+
import DesignedForGenAI from "../components/sections/DesignedForGenAI";
1819
import Newsletter from "../components/sections/Newsletter";
1920
import BlogPostsExample from "../components/sections/BlogPostsExample";
2021

@@ -32,6 +33,7 @@ const Home = () => {
3233
<BackendFeatures />
3334
<CLI />
3435
<DeploylessCloud />
36+
<DesignedForGenAI />
3537
<Newsletter />
3638
<BlogPostsExample />
3739
</>

0 commit comments

Comments
 (0)