Skip to content

Commit b4764c1

Browse files
NatanTechofNYNatanTechofNY
committed
feat(website): new features section
1 parent 55db6e9 commit b4764c1

2 files changed

Lines changed: 123 additions & 0 deletions

File tree

‎packages/website/src/components/Home.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
33
import React, { useRef, useState } from 'react';
44

55
import { Button, PrimaryButton } from './ui/button';
6+
import { IntroducingSection } from './ui/features';
67
import { FeaturesBento } from './ui/features-bento';
78
import { FlipWords } from './ui/flip-words';
89
import Keyboard from './ui/keyboard';
@@ -221,6 +222,9 @@ function Home() {
221222
</div>
222223
</div>
223224

225+
{/* Introducing Section */}
226+
<IntroducingSection />
227+
224228
<div className="py-16 overflow-hidden snap-start">
225229
<div className="relative max-w-xl mx-auto px-4 md:px-6 lg:px-8 lg:max-w-screen-xl">
226230
<div className="max-w-screen-xl mx-auto mb-16 px-4 md:px-6 lg:px-8">

‎packages/website/src/components/ui/features.jsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import React, { useCallback } from 'react';
2+
3+
const mcpSteps = [
4+
{ id: 'signup', text: 'Sign up with Algolia or use an existing app' },
5+
{ id: 'navigate', text: 'Go to the MCP section under Generative AI' },
6+
{ id: 'create', text: 'Create a new MCP server with your index' },
7+
{ id: 'use', text: 'Use it anywhere' },
8+
];
9+
10+
export const IntroducingSection = () => {
11+
const handleTryAskAI = useCallback(() => {
12+
const sidepanelButton = document.querySelector('.DocSearch-SidepanelButton');
13+
if (sidepanelButton) {
14+
sidepanelButton.click();
15+
}
16+
}, []);
17+
18+
return (
19+
<div className="py-16 overflow-hidden snap-start">
20+
<div className="relative max-w-xl mx-auto px-4 md:px-6 lg:px-8 lg:max-w-screen-xl">
21+
{/* Section Header */}
22+
<div className="max-w-screen-xl mx-auto mb-12 px-4 md:px-6 lg:px-8">
23+
<div className="max-w-4xl mx-auto text-center">
24+
<p className="text-3xl text-black dark:text-white font-bold leading-9 font-[Sora] md:text-4xl md:leading-10">
25+
Expand your Docs beyond traditional search
26+
</p>
27+
<p className="text-lg md:text-2xl text-slate-400 dark:text-slate-500">Power your documentation with AI</p>
28+
</div>
29+
</div>
30+
31+
{/* Cards Grid */}
32+
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
33+
{/* Ask AI Card */}
34+
<div className="relative rounded-2xl bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 p-6 transition-all hover:shadow-lg hover:shadow-blue-500/10">
35+
<div className="flex items-center gap-3 mb-4">
36+
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 text-white">
37+
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
38+
<path
39+
strokeLinecap="round"
40+
strokeLinejoin="round"
41+
d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
42+
/>
43+
</svg>
44+
</div>
45+
<span className="text-lg font-semibold text-gray-900 dark:text-white font-[Sora]">Ask AI</span>
46+
</div>
47+
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
48+
Get instant, AI-powered answers from your documentation. Ask natural language questions and receive
49+
accurate, context-aware responses.
50+
</p>
51+
<div className="flex items-center gap-4">
52+
<button
53+
type="button"
54+
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 text-white text-sm font-medium transition-all cursor-pointer"
55+
onClick={handleTryAskAI}
56+
>
57+
Try now
58+
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
59+
<path
60+
strokeLinecap="round"
61+
strokeLinejoin="round"
62+
d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z"
63+
/>
64+
</svg>
65+
</button>
66+
<a
67+
href="/docs/v4/askai?utm_source=docsearch.algolia.com&utm_medium=referral&utm_campaign=askai"
68+
className="inline-flex items-center gap-1.5 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium no-underline!"
69+
>
70+
Learn more
71+
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
72+
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
73+
</svg>
74+
</a>
75+
</div>
76+
</div>
77+
78+
{/* MCP Card */}
79+
<div className="relative rounded-2xl bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 p-6 transition-all hover:shadow-lg hover:shadow-blue-500/10">
80+
<div className="flex items-center gap-3 mb-4">
81+
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500 to-blue-700 text-white">
82+
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
83+
<path
84+
strokeLinecap="round"
85+
strokeLinejoin="round"
86+
d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
87+
/>
88+
</svg>
89+
</div>
90+
<span className="text-lg font-semibold text-gray-900 dark:text-white font-[Sora]">MCP Server</span>
91+
</div>
92+
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
93+
Connect your documentation to AI assistants like Claude and Cursor with the Model Context Protocol.
94+
</p>
95+
<div className="space-y-2 mb-4">
96+
{mcpSteps.map((step, index) => (
97+
<div key={step.id} className="flex items-start gap-2">
98+
<span className="flex-shrink-0 w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 text-xs font-bold flex items-center justify-center">
99+
{index + 1}
100+
</span>
101+
<span className="text-sm text-gray-600 dark:text-gray-300 leading-tight">{step.text}</span>
102+
</div>
103+
))}
104+
</div>
105+
<a
106+
href="https://www.algolia.com/doc/guides/algolia-ai/mcp-server/overview?utm_source=docsearch.algolia.com&utm_medium=referral&utm_campaign=mcp"
107+
className="inline-flex items-center gap-1.5 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium no-underline!"
108+
>
109+
Learn more
110+
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
111+
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
112+
</svg>
113+
</a>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
);
119+
};

0 commit comments

Comments
 (0)
⚡