Skip to content

Commit ee8fcd8

Browse files
matas-bitbybit-devmatas-bitbybit-dev
committed
Added NPX section to homepage on docusaurus
1 parent 2864ea8 commit ee8fcd8

3 files changed

Lines changed: 262 additions & 0 deletions

File tree

‎docs/src/components/Icons/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -408,3 +408,22 @@ export const TypeScriptEditorIcon: React.FC<IconProps> = ({ size = defaultSize,
408408
<text x="37" y="57" fontFamily="Arial, sans-serif" fontSize="12" fontWeight="bold" fill={color}>TS</text>
409409
</svg>
410410
);
411+
412+
export const TerminalIcon: React.FC<IconProps> = ({ size = defaultSize, color = defaultColor, className }) => (
413+
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" className={className}>
414+
{/* Terminal window frame */}
415+
<rect x="6" y="10" width="52" height="44" rx="4" stroke={color} strokeWidth="2.5" fill="none"/>
416+
{/* Title bar */}
417+
<line x1="6" y1="20" x2="58" y2="20" stroke={color} strokeWidth="2"/>
418+
{/* Window controls */}
419+
<circle cx="14" cy="15" r="2" fill={color} opacity="0.6"/>
420+
<circle cx="22" cy="15" r="2" fill={color} opacity="0.6"/>
421+
<circle cx="30" cy="15" r="2" fill={color} opacity="0.6"/>
422+
{/* Command prompt arrow */}
423+
<path d="M14 30L22 36L14 42" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
424+
{/* Cursor/command line */}
425+
<path d="M28 42H44" stroke={color} strokeWidth="2.5" strokeLinecap="round"/>
426+
{/* Blinking cursor */}
427+
<rect x="46" y="38" width="3" height="8" fill={color} opacity="0.8"/>
428+
</svg>
429+
);

‎docs/src/pages/index.module.css‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1350,4 +1350,182 @@
13501350
.editorDescription {
13511351
font-size: 14px;
13521352
}
1353+
1354+
.quickStartContent {
1355+
flex-direction: column;
1356+
text-align: center;
1357+
}
1358+
1359+
.quickStartCommand {
1360+
flex-direction: column;
1361+
gap: 12px;
1362+
}
1363+
1364+
.quickStartCommand code {
1365+
font-size: 12px;
1366+
word-break: break-all;
1367+
}
1368+
1369+
.copyButton {
1370+
width: 100%;
1371+
justify-content: center;
1372+
padding: 12px;
1373+
}
1374+
1375+
.quickStartEngines {
1376+
flex-direction: column;
1377+
gap: 12px;
1378+
}
1379+
}
1380+
1381+
/* ===== QUICK START SECTION ===== */
1382+
.quickStartSection {
1383+
padding: 5rem 0;
1384+
background: linear-gradient(180deg, #121315 0%, #1a1c1f 100%);
1385+
}
1386+
1387+
.quickStartCard {
1388+
position: relative;
1389+
background: linear-gradient(145deg, rgba(30, 33, 38, 0.95) 0%, rgba(22, 24, 28, 0.98) 100%);
1390+
border: 1px solid rgba(240, 206, 187, 0.2);
1391+
border-radius: 24px;
1392+
padding: 48px;
1393+
overflow: hidden;
1394+
max-width: 900px;
1395+
margin: 0 auto;
1396+
}
1397+
1398+
.quickStartGlow {
1399+
position: absolute;
1400+
top: -100px;
1401+
left: 50%;
1402+
transform: translateX(-50%);
1403+
width: 400px;
1404+
height: 400px;
1405+
background: radial-gradient(circle, rgba(240, 206, 187, 0.08) 0%, transparent 70%);
1406+
pointer-events: none;
1407+
}
1408+
1409+
.quickStartContent {
1410+
display: flex;
1411+
align-items: flex-start;
1412+
gap: 24px;
1413+
margin-bottom: 32px;
1414+
}
1415+
1416+
.quickStartIcon {
1417+
flex-shrink: 0;
1418+
width: 72px;
1419+
height: 72px;
1420+
display: flex;
1421+
align-items: center;
1422+
justify-content: center;
1423+
background: rgba(240, 206, 187, 0.1);
1424+
border-radius: 16px;
1425+
border: 1px solid rgba(240, 206, 187, 0.2);
1426+
}
1427+
1428+
.quickStartIcon svg {
1429+
color: #F0CEBB;
1430+
}
1431+
1432+
.quickStartText h2 {
1433+
color: #F0CEBB;
1434+
font-size: 1.75rem;
1435+
font-weight: 700;
1436+
margin-bottom: 12px;
1437+
letter-spacing: -0.5px;
1438+
}
1439+
1440+
.quickStartText p {
1441+
color: rgba(255, 255, 255, 0.7);
1442+
font-size: 1rem;
1443+
line-height: 1.7;
1444+
margin: 0;
1445+
}
1446+
1447+
.quickStartCommand {
1448+
display: flex;
1449+
align-items: center;
1450+
gap: 12px;
1451+
background: rgba(0, 0, 0, 0.4);
1452+
border: 1px solid rgba(240, 206, 187, 0.15);
1453+
border-radius: 12px;
1454+
padding: 16px 20px;
1455+
margin-bottom: 24px;
1456+
}
1457+
1458+
.quickStartCommand code {
1459+
flex: 1;
1460+
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
1461+
font-size: 15px;
1462+
color: #F0CEBB;
1463+
background: none;
1464+
border: none;
1465+
letter-spacing: 0.3px;
1466+
}
1467+
1468+
.copyButton {
1469+
display: flex;
1470+
align-items: center;
1471+
justify-content: center;
1472+
width: 40px;
1473+
height: 40px;
1474+
background: rgba(240, 206, 187, 0.1);
1475+
border: 1px solid rgba(240, 206, 187, 0.2);
1476+
border-radius: 8px;
1477+
color: #F0CEBB;
1478+
cursor: pointer;
1479+
transition: all 0.3s ease;
1480+
}
1481+
1482+
.copyButton:hover {
1483+
background: rgba(240, 206, 187, 0.2);
1484+
border-color: rgba(240, 206, 187, 0.4);
1485+
transform: scale(1.05);
1486+
}
1487+
1488+
.quickStartEngines {
1489+
display: flex;
1490+
align-items: center;
1491+
gap: 16px;
1492+
margin-bottom: 24px;
1493+
}
1494+
1495+
.quickStartEngines > span {
1496+
color: rgba(255, 255, 255, 0.5);
1497+
font-size: 14px;
1498+
font-weight: 500;
1499+
}
1500+
1501+
.engineBadges {
1502+
display: flex;
1503+
gap: 10px;
1504+
flex-wrap: wrap;
1505+
}
1506+
1507+
.engineBadge {
1508+
background: rgba(240, 206, 187, 0.08);
1509+
border: 1px solid rgba(240, 206, 187, 0.15);
1510+
border-radius: 20px;
1511+
padding: 6px 14px;
1512+
font-size: 13px;
1513+
color: rgba(240, 206, 187, 0.9);
1514+
font-weight: 500;
1515+
}
1516+
1517+
.quickStartLink {
1518+
display: inline-flex;
1519+
align-items: center;
1520+
color: #F0CEBB;
1521+
font-weight: 600;
1522+
font-size: 15px;
1523+
text-decoration: none;
1524+
transition: all 0.3s ease;
1525+
}
1526+
1527+
.quickStartLink:hover {
1528+
color: #fff6f3;
1529+
text-decoration: none;
1530+
transform: translateX(4px);
13531531
}

‎docs/src/pages/index.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ import {
2424
ReteEditorIcon,
2525
BlocklyEditorIcon,
2626
TypeScriptEditorIcon,
27+
TerminalIcon,
2728
} from "@site/src/components/Icons";
29+
import { useState } from "react";
2830

2931
import styles from "./index.module.css";
3032

@@ -285,6 +287,68 @@ function TechnologiesSection() {
285287
);
286288
}
287289

290+
function QuickStartSection() {
291+
const [copied, setCopied] = useState(false);
292+
const command = "npx @bitbybit-dev/create-app my-awesome-project";
293+
294+
const copyToClipboard = () => {
295+
navigator.clipboard.writeText(command);
296+
setCopied(true);
297+
setTimeout(() => setCopied(false), 2000);
298+
};
299+
300+
return (
301+
<section className={styles.quickStartSection}>
302+
<div className="container">
303+
<div className={styles.quickStartCard}>
304+
<div className={styles.quickStartGlow}></div>
305+
<div className={styles.quickStartContent}>
306+
<div className={styles.quickStartIcon}>
307+
<TerminalIcon size={48} />
308+
</div>
309+
<div className={styles.quickStartText}>
310+
<h2>Quick Start with NPM Packages</h2>
311+
<p>
312+
Scaffold a fully-configured 3D CAD project in seconds. Includes Vite, TypeScript, and all three geometry kernels (OCCT, JSCAD, Manifold) ready to use.
313+
</p>
314+
</div>
315+
</div>
316+
<div className={styles.quickStartCommand}>
317+
<code>{command}</code>
318+
<button
319+
onClick={copyToClipboard}
320+
className={styles.copyButton}
321+
title="Copy to clipboard"
322+
>
323+
{copied ? (
324+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
325+
<polyline points="20 6 9 17 4 12"></polyline>
326+
</svg>
327+
) : (
328+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
329+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
330+
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
331+
</svg>
332+
)}
333+
</button>
334+
</div>
335+
<div className={styles.quickStartEngines}>
336+
<span>Supports:</span>
337+
<div className={styles.engineBadges}>
338+
<span className={styles.engineBadge}>Three.js</span>
339+
<span className={styles.engineBadge}>Babylon.js</span>
340+
<span className={styles.engineBadge}>PlayCanvas</span>
341+
</div>
342+
</div>
343+
<Link to="/learn/npm-packages/intro" className={styles.quickStartLink}>
344+
Learn more about NPM packages →
345+
</Link>
346+
</div>
347+
</div>
348+
</section>
349+
);
350+
}
351+
288352
function CommunitySection() {
289353
return (
290354
<section className={styles.communitySection}>
@@ -482,6 +546,7 @@ export default function Home(): ReactNode {
482546
<LearningPathsSection />
483547
<WhatYouCanBuildSection />
484548
<TechnologiesSection />
549+
<QuickStartSection />
485550
<ShopifyBitsSection />
486551
<CommunitySection />
487552
<CTASection />

0 commit comments

Comments
 (0)