Use original cadCAD logo, icons, and brand colors from cadcad.org
- Extracted real SVG logo (265x72) from cadcad.org source - Downloaded all 11 original SVG icons (nav + getting started sections) - Downloaded BlockScience logo (webp) and OG image - Downloaded original favicon.ico - Switched from dark theme to original white/light theme - Brand colors: cadcad-blue (#16ABF9), cadcad-lightblue (#16F7F9) - Header: transparent on hero, white on scroll (matches original) - Hero: gradient blue background with white text - Why/How/What: blue background cards with white dividers - Getting Started: 6-column grid with original icons - Community/Donation: split layout matching original - Footer: BlockScience logo, 4-column links, ETH address Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
dabc85b586
commit
1371f2cd20
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="64" height="64" viewBox="0 0 101 101" fill="currentColor" class="my-6"><path d="M34.5,74H7.6a1.5,1.5,0,0,1-1.5-1.5c0-14.84,11.84-26.92,26.39-26.92a1.5,1.5,0,0,1,0,3A23.65,23.65,0,0,0,9.14,71H34.5a1.5,1.5,0,0,1,0,3Z"></path><path d="M32.5,41A16.5,16.5,0,1,1,49,24.5,16.52,16.52,0,0,1,32.5,41Zm0-30A13.5,13.5,0,1,0,46,24.5,13.52,13.52,0,0,0,32.5,11Z"></path><path d="M32.48,58.07A29.17,29.17,0,0,1,17.43,53.9,1.5,1.5,0,1,1,19,51.33a26.17,26.17,0,0,0,13.51,3.74,1.5,1.5,0,0,1,0,3Z"></path><path d="M45.49,22.38A11.84,11.84,0,0,1,36.81,19c-3,1.68-11.44,5.4-18.27.09a1.5,1.5,0,1,1,1.84-2.37c6.62,5.15,15.84-.85,15.93-.91a1.5,1.5,0,0,1,2.1.45c.08.12,2.15,3.17,7.08,3.17a1.5,1.5,0,0,1,0,3Z"></path><path d="M95.5,63h-27a1.5,1.5,0,0,1,0-3H93.93A16.17,16.17,0,0,0,78,45.12a15.63,15.63,0,0,0-9.51,3.2,1.5,1.5,0,0,1-1.81-2.39A18.6,18.6,0,0,1,78,42.12,19.21,19.21,0,0,1,97,61.5,1.5,1.5,0,0,1,95.5,63Z"></path><path d="M78,39A13,13,0,1,1,91,26,13,13,0,0,1,78,39Zm0-23A10,10,0,1,0,88,26,10,10,0,0,0,78,16Z"></path><path d="M85.74,27.4A13,13,0,0,1,73,16.4a1.5,1.5,0,1,1,3-.44,9.92,9.92,0,0,0,13,7.91,1.5,1.5,0,1,1,1,2.84A12.88,12.88,0,0,1,85.74,27.4Z"></path><path d="M92.5,52a1.5,1.5,0,0,1-1.2-2.4c3.18-4.23,1.45-8.31-.55-13C89.4,33.4,88,30.12,88,26.5a1.5,1.5,0,0,1,3,0c0,3,1.27,6,2.51,8.91,2.17,5.1,4.41,10.37.19,16A1.5,1.5,0,0,1,92.5,52Z"></path><path d="M62.22,41.89a1.46,1.46,0,0,1-.47-.08,1.48,1.48,0,0,1-1-1.86c0-.12.19-.49.42-1,1-2.27,3.85-9.17,3.85-12.41a1.5,1.5,0,0,1,3,0c0,3.44-2.33,9.39-4.08,13.57-.17.41-.29.69-.33.8A1.52,1.52,0,0,1,62.22,41.89Z"></path><path d="M68.72,92h-35a1.5,1.5,0,0,1-1.5-1.5,19,19,0,1,1,38,0A1.5,1.5,0,0,1,68.72,92ZM35.28,89H67.15a16,16,0,0,0-31.87,0Z"></path><path d="M51,68A13,13,0,1,1,64,55,13,13,0,0,1,51,68Zm0-23A10,10,0,1,0,61,55,10,10,0,0,0,51,45Z"></path><path d="M51.22,81.36a21.25,21.25,0,0,1-11-3,1.5,1.5,0,1,1,1.55-2.57,18.31,18.31,0,0,0,18.85,0,1.5,1.5,0,1,1,1.55,2.57A21.26,21.26,0,0,1,51.22,81.36Z"></path><path class="cls-1" d="M41.44,50.6C47.13,55,53.64,50,53.64,50s4.29,4.66,7.49.39"></path><path d="M46.67,53.9a9.8,9.8,0,0,1-6.15-2.11,1.5,1.5,0,0,1,1.84-2.37C47,53.06,52.5,49,52.73,48.79a1.5,1.5,0,0,1,2,.17c.46.5,1.95,1.79,3.33,1.71a2.54,2.54,0,0,0,1.86-1.2,1.5,1.5,0,1,1,2.4,1.8,5.43,5.43,0,0,1-4.12,2.4,7.29,7.29,0,0,1-4.71-1.78A13.57,13.57,0,0,1,46.67,53.9Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 64 64" fill="currentColor" class="my-6"><path d="M37.922 26.852c-1.84 0-3.292 1.58-3.292 3.55s1.485 3.55 3.292 3.55c1.84 0 3.292-1.58 3.292-3.55s-1.485-3.55-3.292-3.55zm-11.78 0c-1.84 0-3.292 1.58-3.292 3.55s1.485 3.55 3.292 3.55c1.84 0 3.292-1.58 3.292-3.55.032-1.97-1.452-3.55-3.292-3.55zM53.608 0H10.36a6.63 6.63 0 0 0-6.616 6.616v43.248a6.63 6.63 0 0 0 6.616 6.616h36.6l-1.7-5.906 4.13 3.808 3.905 3.582L60.256 64V6.616C60.224 2.97 57.255 0 53.608 0zM41.15 41.795l-2.13-2.582c4.228-1.194 5.842-3.808 5.842-3.808-1.323.87-2.582 1.485-3.712 1.904-1.614.678-3.163 1.097-4.68 1.388-3.098.58-5.938.42-8.36-.032-1.84-.355-3.42-.84-4.744-1.388-.742-.3-1.55-.645-2.356-1.097-.097-.065-.194-.097-.3-.16-.065-.032-.097-.065-.13-.065l-.904-.55s1.55 2.55 5.648 3.776l-2.162 2.646c-7.133-.226-9.844-4.873-9.844-4.873 0-10.296 4.648-18.655 4.648-18.655 4.648-3.453 9.037-3.357 9.037-3.357l.323.387c-5.8 1.646-8.456 4.196-8.456 4.196s.7-.387 1.904-.904c3.453-1.517 6.197-1.904 7.326-2.033.194-.032.355-.065.55-.065a27.31 27.31 0 0 1 6.519-.065 26.86 26.86 0 0 1 9.715 3.066s-2.55-2.42-8.036-4.067l.452-.516s4.422-.097 9.037 3.357c0 0 4.648 8.36 4.648 18.655 0-.032-2.7 4.615-9.844 4.84z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="64" height="64" viewBox="0 0 16 16" fill="currentColor" class="my-6"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
|
After Width: | Height: | Size: 693 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor" class="my-6"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
|
After Width: | Height: | Size: 693 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="64" height="64" viewBox="0 0 100 100" fill="currentColor" class="my-6"><path d="M76.88,49.92A1.5,1.5,0,0,0,75.5,49H58.23l10-40.62A1.5,1.5,0,0,0,65.7,7L23.44,49.44A1.5,1.5,0,0,0,24.5,52H41.77l-10,40.62A1.5,1.5,0,0,0,34.3,94L76.56,51.56A1.5,1.5,0,0,0,76.88,49.92ZM36,88.09l9.16-37.23A1.5,1.5,0,0,0,43.69,49H28.11L64,12.91,54.86,50.14A1.5,1.5,0,0,0,56.31,52H71.89Z"></path><path d="M71.06,68.94a1.5,1.5,0,0,0-2.12,2.12l12,12a1.5,1.5,0,0,0,2.12-2.12Z"></path><path d="M28,30.5a1.5,1.5,0,0,0,1.06-2.56l-12-12a1.5,1.5,0,0,0-2.12,2.12l12,12A1.5,1.5,0,0,0,28,30.5Z"></path><path d="M68.44,29.56a1.5,1.5,0,0,0,2.12,0l12-12a1.5,1.5,0,0,0-2.12-2.12l-12,12A1.5,1.5,0,0,0,68.44,29.56Z"></path><path d="M27.44,69.44l-12,12a1.5,1.5,0,1,0,2.12,2.12l12-12a1.5,1.5,0,0,0-2.12-2.12Z"></path><circle cx="18.5" cy="62.5" r="2.5"></circle><circle cx="9.5" cy="55.5" r="2.5"></circle><circle cx="89.5" cy="42.5" r="2.5"></circle><circle cx="31.5" cy="17.5" r="2.5"></circle></svg>
|
||||
|
After Width: | Height: | Size: 969 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="64" height="64" viewBox="0 0 100 100" fill="currentColor" class="my-6"><path d="M76.88,49.92A1.5,1.5,0,0,0,75.5,49H58.23l10-40.62A1.5,1.5,0,0,0,65.7,7L23.44,49.44A1.5,1.5,0,0,0,24.5,52H41.77l-10,40.62A1.5,1.5,0,0,0,34.3,94L76.56,51.56A1.5,1.5,0,0,0,76.88,49.92ZM36,88.09l9.16-37.23A1.5,1.5,0,0,0,43.69,49H28.11L64,12.91,54.86,50.14A1.5,1.5,0,0,0,56.31,52H71.89Z"></path><path d="M71.06,68.94a1.5,1.5,0,0,0-2.12,2.12l12,12a1.5,1.5,0,0,0,2.12-2.12Z"></path><path d="M28,30.5a1.5,1.5,0,0,0,1.06-2.56l-12-12a1.5,1.5,0,0,0-2.12,2.12l12,12A1.5,1.5,0,0,0,28,30.5Z"></path><path d="M68.44,29.56a1.5,1.5,0,0,0,2.12,0l12-12a1.5,1.5,0,0,0-2.12-2.12l-12,12A1.5,1.5,0,0,0,68.44,29.56Z"></path><path d="M27.44,69.44l-12,12a1.5,1.5,0,1,0,2.12,2.12l12-12a1.5,1.5,0,0,0-2.12-2.12Z"></path><circle cx="18.5" cy="62.5" r="2.5"></circle><circle cx="9.5" cy="55.5" r="2.5"></circle><circle cx="89.5" cy="42.5" r="2.5"></circle><circle cx="31.5" cy="17.5" r="2.5"></circle></svg>
|
||||
|
After Width: | Height: | Size: 969 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="64" height="64" viewBox="0 0 100.353 100.352" fill="currentColor" class="my-6"><path d="M87.742,21.408H13.69c-2.879,0-5.221,2.095-5.221,4.67V71.53c0,2.575,2.342,4.671,5.221,4.671h74.052 c2.879,0,5.221-2.096,5.221-4.671V26.078C92.963,23.503,90.621,21.408,87.742,21.408z M89.963,71.53 c0,0.905-1.017,1.671-2.221,1.671H13.69c-1.204,0-2.221-0.766-2.221-1.671V26.078c0-0.905,1.017-1.67,2.221-1.67h74.052 c1.204,0,2.221,0.765,2.221,1.67V71.53z"></path><path d="M50.715,28.782c-11.04,0-20.022,8.982-20.022,20.022s8.982,20.022,20.022,20.022s20.022-8.982,20.022-20.022 S61.755,28.782,50.715,28.782z M50.715,65.826c-9.386,0-17.022-7.637-17.022-17.022s7.636-17.022,17.022-17.022 s17.022,7.636,17.022,17.022S60.101,65.826,50.715,65.826z"></path><path d="M59.572,47.535l-11.762-7.409c-0.461-0.292-1.046-0.309-1.524-0.044c-0.479,0.264-0.775,0.767-0.775,1.313v14.818 c0,0.546,0.297,1.049,0.775,1.313c0.226,0.125,0.475,0.187,0.725,0.187c0.278,0,0.556-0.077,0.799-0.23l11.762-7.41 c0.436-0.274,0.7-0.754,0.7-1.269S60.008,47.809,59.572,47.535z M48.511,53.495v-9.383l7.447,4.691L48.511,53.495z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="64" height="64" viewBox="0 0 100.353 100.352" fill="currentColor" class="my-6"><path d="M87.742,21.408H13.69c-2.879,0-5.221,2.095-5.221,4.67V71.53c0,2.575,2.342,4.671,5.221,4.671h74.052 c2.879,0,5.221-2.096,5.221-4.671V26.078C92.963,23.503,90.621,21.408,87.742,21.408z M89.963,71.53 c0,0.905-1.017,1.671-2.221,1.671H13.69c-1.204,0-2.221-0.766-2.221-1.671V26.078c0-0.905,1.017-1.67,2.221-1.67h74.052 c1.204,0,2.221,0.765,2.221,1.67V71.53z"></path><path d="M50.715,28.782c-11.04,0-20.022,8.982-20.022,20.022s8.982,20.022,20.022,20.022s20.022-8.982,20.022-20.022 S61.755,28.782,50.715,28.782z M50.715,65.826c-9.386,0-17.022-7.637-17.022-17.022s7.636-17.022,17.022-17.022 s17.022,7.636,17.022,17.022S60.101,65.826,50.715,65.826z"></path><path d="M59.572,47.535l-11.762-7.409c-0.461-0.292-1.046-0.309-1.524-0.044c-0.479,0.264-0.775,0.767-0.775,1.313v14.818 c0,0.546,0.297,1.049,0.775,1.313c0.226,0.125,0.475,0.187,0.725,0.187c0.278,0,0.556-0.077,0.799-0.23l11.762-7.41 c0.436-0.274,0.7-0.754,0.7-1.269S60.008,47.809,59.572,47.535z M48.511,53.495v-9.383l7.447,4.691L48.511,53.495z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 256 209" fill="currentColor" class="my-6"><path d="M80.507 208.013c96.604 0 149.442-80.036 149.442-149.442 0-2.274 0-4.537-.153-6.8A106.865 106.865 0 0 0 256 24.595a104.837 104.837 0 0 1-30.167 8.264 52.705 52.705 0 0 0 23.091-29.05 105.257 105.257 0 0 1-33.352 12.748 52.572 52.572 0 0 0-89.507 47.903A149.115 149.115 0 0 1 17.818 9.583a52.562 52.562 0 0 0 16.26 70.113 52.132 52.132 0 0 1-23.838-6.574v.665a52.541 52.541 0 0 0 42.138 51.487 52.439 52.439 0 0 1-23.716.901 52.582 52.582 0 0 0 49.07 36.475 105.39 105.39 0 0 1-65.229 22.528A106.916 106.916 0 0 1 0 184.42a148.695 148.695 0 0 0 80.507 23.552"></path></svg>
|
||||
|
After Width: | Height: | Size: 663 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="my-6"><path d="M23.4761 6.2235C23.3381 5.71447 23.0692 5.25043 22.6963 4.87749C22.3233 4.50455 21.8593 4.23569 21.3502 4.09762C19.4865 3.58875 11.985 3.58875 11.985 3.58875C11.985 3.58875 4.48313 3.60375 2.619 4.11262C2.10997 4.25069 1.64594 4.51955 1.27299 4.89249C0.900053 5.26543 0.631192 5.72947 0.493125 6.2385C0 8.10262 0 12 0 12C0 12 0 15.8974 0.5085 17.7765C0.646567 18.2855 0.915428 18.7496 1.28837 19.1225C1.66131 19.4954 2.12535 19.7643 2.63438 19.9024C4.49812 20.4112 12 20.4112 12 20.4112C12 20.4112 19.5019 20.4112 21.366 19.9027C21.875 19.7647 22.3391 19.4958 22.712 19.1229C23.0849 18.7499 23.3538 18.2859 23.4919 17.7769C24 15.9127 24 12 24 12C24 12 23.985 8.10262 23.4761 6.2235Z" fill="currentColor"></path><path d="M9.59705 15.6045L15.8202 12L9.59668 8.39551L9.59705 15.6045Z" fill="cadcad-blue"></path></svg>
|
||||
|
After Width: | Height: | Size: 919 B |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
|
|
@ -1,25 +1,29 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--accent: #00d4aa;
|
||||
--accent-dim: #00b894;
|
||||
--surface: #141414;
|
||||
--surface-light: #1e1e1e;
|
||||
--border: #2a2a2a;
|
||||
--muted: #888888;
|
||||
--background: #ffffff;
|
||||
--foreground: #1a1a1a;
|
||||
--cadcad-blue: #16ABF9;
|
||||
--cadcad-lightblue: #16F7F9;
|
||||
--cadcad-lightblue-hover: #0de0e0;
|
||||
--surface: #f8f9fa;
|
||||
--surface-dark: #16ABF9;
|
||||
--border: #e5e7eb;
|
||||
--muted: #6b7280;
|
||||
--muted-light: #9ca3af;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-dim: var(--accent-dim);
|
||||
--color-cadcad-blue: var(--cadcad-blue);
|
||||
--color-cadcad-lightblue: var(--cadcad-lightblue);
|
||||
--color-cadcad-lightblue-hover: var(--cadcad-lightblue-hover);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-light: var(--surface-light);
|
||||
--color-surface-dark: var(--surface-dark);
|
||||
--color-border: var(--border);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-light: var(--muted-light);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
|
@ -34,50 +38,14 @@ html {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Animated grid background */
|
||||
.grid-bg {
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 212, 170, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 212, 170, 0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
/* Header background gradient - matches original cadCAD blue */
|
||||
.header-background {
|
||||
background: linear-gradient(135deg, #16ABF9 0%, #16F7F9 100%);
|
||||
}
|
||||
|
||||
/* Glow effect for hero */
|
||||
.glow {
|
||||
box-shadow: 0 0 60px rgba(0, 212, 170, 0.15), 0 0 120px rgba(0, 212, 170, 0.05);
|
||||
}
|
||||
|
||||
/* Subtle node connection animation */
|
||||
@keyframes pulse-node {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.animate-pulse-node {
|
||||
animation: pulse-node 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Code block styling */
|
||||
.code-block {
|
||||
background: #1a1a2e;
|
||||
border: 1px solid #2a2a3e;
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-mono), 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* Gradient text */
|
||||
/* Gradient text using cadCAD brand colors */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #00d4aa, #00b4d8, #00d4aa);
|
||||
background-size: 200% 200%;
|
||||
background: linear-gradient(135deg, #16ABF9, #16F7F9);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
|
@ -89,24 +57,16 @@ html {
|
|||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(0, 212, 170, 0.1);
|
||||
border-color: rgba(0, 212, 170, 0.3);
|
||||
box-shadow: 0 8px 30px rgba(22, 171, 249, 0.15);
|
||||
border-color: rgba(22, 171, 249, 0.3);
|
||||
}
|
||||
|
||||
/* Section fade-in */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
/* Code block styling */
|
||||
.code-block {
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-mono), 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
|
|
@ -114,12 +74,12 @@ html {
|
|||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
background: #f1f1f1;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted);
|
||||
background: #999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import Header from "@/components/Header";
|
|||
import Hero from "@/components/Hero";
|
||||
import WhyHowWhat from "@/components/WhyHowWhat";
|
||||
import UseCases from "@/components/UseCases";
|
||||
import CodeExample from "@/components/CodeExample";
|
||||
import GettingStarted from "@/components/GettingStarted";
|
||||
import Community from "@/components/Community";
|
||||
import Footer from "@/components/Footer";
|
||||
|
|
@ -15,7 +14,6 @@ export default function Home() {
|
|||
<Hero />
|
||||
<WhyHowWhat />
|
||||
<UseCases />
|
||||
<CodeExample />
|
||||
<GettingStarted />
|
||||
<Community />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,20 @@
|
|||
export default function CadCADLogo({ className = "h-8" }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 280 50"
|
||||
className={className}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{/* Network node decoration */}
|
||||
<circle cx="8" cy="25" r="3" fill="#00d4aa" opacity="0.6" />
|
||||
<circle cx="20" cy="12" r="2" fill="#00d4aa" opacity="0.4" />
|
||||
<circle cx="20" cy="38" r="2" fill="#00d4aa" opacity="0.4" />
|
||||
<line x1="8" y1="25" x2="20" y2="12" stroke="#00d4aa" strokeWidth="0.5" opacity="0.3" />
|
||||
<line x1="8" y1="25" x2="20" y2="38" stroke="#00d4aa" strokeWidth="0.5" opacity="0.3" />
|
||||
import Image from "next/image";
|
||||
|
||||
{/* cadCAD text */}
|
||||
<text
|
||||
x="30"
|
||||
y="35"
|
||||
fontFamily="var(--font-geist-mono), 'Courier New', monospace"
|
||||
fontSize="32"
|
||||
fontWeight="700"
|
||||
letterSpacing="-0.5"
|
||||
>
|
||||
<tspan fill="#ededed">cad</tspan>
|
||||
<tspan fill="#00d4aa">CAD</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
export default function CadCADLogo({
|
||||
className = "h-10",
|
||||
variant = "color",
|
||||
}: {
|
||||
className?: string;
|
||||
variant?: "color" | "white";
|
||||
}) {
|
||||
return (
|
||||
<Image
|
||||
src="/images/cadcad-logo.svg"
|
||||
alt="cadCAD"
|
||||
width={265}
|
||||
height={72}
|
||||
className={`${className} ${variant === "white" ? "brightness-0 invert" : ""}`}
|
||||
priority
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,111 +1,92 @@
|
|||
const communityLinks = [
|
||||
{
|
||||
name: "Discord",
|
||||
href: "https://discord.gg/FP2FGJb4tJ",
|
||||
description: "Real-time discussions and support",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Telegram",
|
||||
href: "https://t.me/joinchat/BehTglN4UOLe83MpgBelzw",
|
||||
description: "Community chat and announcements",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Discourse",
|
||||
href: "https://community.cadcad.org/",
|
||||
description: "Forum for in-depth discussions",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.103 0C18.666 0 24 5.485 24 11.997c0 6.51-5.33 11.99-11.9 11.99L0 24V11.79C0 5.28 5.532 0 12.103 0zm.116 4.563a7.395 7.395 0 0 0-6.337 3.57 7.247 7.247 0 0 0-.148 7.22L4.4 19.61l4.794-1.074a7.424 7.424 0 0 0 8.136-1.39 7.256 7.256 0 0 0 1.737-7.997 7.375 7.375 0 0 0-6.84-4.585h-.008z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Twitter",
|
||||
href: "https://twitter.com/cadcad_org",
|
||||
description: "Latest updates and news",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function Community() {
|
||||
return (
|
||||
<section id="community" className="bg-surface px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
||||
Join our <span className="gradient-text">Community</span>
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-muted">
|
||||
Connect with researchers, engineers, and enthusiasts building the
|
||||
future of complex systems simulation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{communityLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="card-hover group flex flex-col items-center rounded-xl border border-border bg-background p-8 text-center"
|
||||
>
|
||||
<div className="mb-4 text-muted transition-colors group-hover:text-accent">
|
||||
{link.icon}
|
||||
</div>
|
||||
<h3 className="mb-2 font-semibold">{link.name}</h3>
|
||||
<p className="text-sm text-muted">{link.description}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Support section */}
|
||||
<div className="mt-16 rounded-xl border border-border bg-background p-8 text-center">
|
||||
<h3 className="mb-4 text-xl font-semibold">Support cadCAD</h3>
|
||||
<p className="mx-auto mb-6 max-w-xl text-muted">
|
||||
cadCAD is open-source and community-driven. Support the project
|
||||
through OpenCollective or crypto donations.
|
||||
</p>
|
||||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||
<a
|
||||
href="https://opencollective.com/cadcad1"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-accent/30 bg-accent/10 px-6 py-3 text-sm font-medium text-accent transition-all hover:bg-accent/20"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
||||
</svg>
|
||||
OpenCollective
|
||||
</a>
|
||||
<a
|
||||
href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-border bg-surface px-6 py-3 text-sm font-medium text-foreground transition-all hover:border-accent/30 hover:bg-surface-light"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z" />
|
||||
</svg>
|
||||
ETH Donation
|
||||
</a>
|
||||
<>
|
||||
{/* Community section */}
|
||||
<section className="border-b border-border bg-white py-8">
|
||||
<div className="container mx-auto flex flex-col pt-4 pb-12 md:flex-row">
|
||||
<div className="w-full px-6 md:w-1/2">
|
||||
<h2 className="mb-4 text-3xl font-bold text-gray-800">
|
||||
Join our community
|
||||
</h2>
|
||||
</div>
|
||||
<div className="w-full px-6 text-xl text-gray-800 md:w-1/2">
|
||||
<p className="mb-4 leading-relaxed">
|
||||
We've open-sourced cadCAD for the community and we want it to
|
||||
become a community-driven project. Regardless of your skillset, we
|
||||
invite you to join the conversation through any of our channels:
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<a
|
||||
href="https://t.me/joinchat/BehTglN4UOLe83MpgBelzw"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
|
||||
>
|
||||
Telegram
|
||||
</a>
|
||||
<a
|
||||
href="https://discord.gg/FP2FGJb4tJ"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
<a
|
||||
href="https://community.cadcad.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
|
||||
>
|
||||
Discourse
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/cadcad_org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* Donation section */}
|
||||
<section className="border-b border-border bg-white py-8">
|
||||
<div className="container mx-auto flex flex-col pt-4 pb-12 md:flex-row">
|
||||
<div className="w-full px-6 md:w-1/2">
|
||||
<h2 className="mb-4 text-3xl font-bold text-gray-800">
|
||||
Support us with a donation
|
||||
</h2>
|
||||
</div>
|
||||
<div className="w-full px-6 text-xl text-gray-800 md:w-1/2">
|
||||
<p className="mb-4 leading-relaxed">
|
||||
You can support our product on OpenCollective:{" "}
|
||||
<a
|
||||
href="https://opencollective.com/cadcad1"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-cadcad-blue hover:text-cadcad-lightblue transition-colors"
|
||||
>
|
||||
https://opencollective.com/cadcad1
|
||||
</a>
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
You can also send crypto donations to our multisig at:{" "}
|
||||
<a
|
||||
href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-cadcad-blue hover:text-cadcad-lightblue transition-colors break-all text-base"
|
||||
>
|
||||
0xbcd768c566143714309afe87feb901da7543f470
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import Image from "next/image";
|
||||
import CadCADLogo from "./CadCADLogo";
|
||||
|
||||
const productLinks = [
|
||||
|
|
@ -25,43 +26,65 @@ const resourceLinks = [
|
|||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-border px-6 py-16">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<footer className="bg-white py-8">
|
||||
{/* BlockScience attribution */}
|
||||
<div className="container mx-auto border-b border-border pb-8">
|
||||
<div className="mx-auto flex w-full flex-col items-center p-6 text-center md:w-1/3">
|
||||
<p className="mb-2 text-gray-500">Created by</p>
|
||||
<a
|
||||
href="https://block.science/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mb-4 transition-opacity hover:opacity-80"
|
||||
>
|
||||
<Image
|
||||
src="/images/blockscience-logo.webp"
|
||||
alt="BlockScience"
|
||||
width={260}
|
||||
height={260}
|
||||
className="mx-auto h-24 w-24 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://block.science/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-lg font-bold text-gray-800 hover:text-cadcad-blue transition-colors"
|
||||
>
|
||||
BlockScience
|
||||
</a>
|
||||
<p className="mt-2 text-gray-500">
|
||||
An engineering, R&D and analytics firm specializing in complex
|
||||
systems design and validation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Links grid */}
|
||||
<div className="container mx-auto px-8 pt-8">
|
||||
<div className="flex w-full flex-col py-6 md:flex-row">
|
||||
{/* Brand */}
|
||||
<div className="lg:col-span-1">
|
||||
<CadCADLogo className="mb-4 h-8" />
|
||||
<p className="mb-4 text-sm leading-relaxed text-muted">
|
||||
cadCAD was created as an internal tool at{" "}
|
||||
<a
|
||||
href="https://block.science/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-accent hover:underline"
|
||||
>
|
||||
BlockScience
|
||||
</a>{" "}
|
||||
— an engineering, R&D and analytics firm specializing in
|
||||
complex systems design and validation.
|
||||
</p>
|
||||
<p className="text-xs text-muted/60">
|
||||
© {new Date().getFullYear()} BlockScience. All rights reserved.
|
||||
<div className="flex-1 px-4 pb-6">
|
||||
<CadCADLogo className="mb-4 h-10" />
|
||||
<p className="text-sm text-gray-500">
|
||||
© {new Date().getFullYear()} BlockScience. All rights
|
||||
reserved.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Product */}
|
||||
<div>
|
||||
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted">
|
||||
<div className="flex-1 px-4 pb-6">
|
||||
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
|
||||
Product
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-3">
|
||||
</p>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{productLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
|
|
@ -71,18 +94,18 @@ export default function Footer() {
|
|||
</div>
|
||||
|
||||
{/* Community */}
|
||||
<div>
|
||||
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted">
|
||||
<div className="flex-1 px-4 pb-6">
|
||||
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
|
||||
Community
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-3">
|
||||
</p>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{communityLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
|
|
@ -92,18 +115,18 @@ export default function Footer() {
|
|||
</div>
|
||||
|
||||
{/* Resources */}
|
||||
<div>
|
||||
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted">
|
||||
<div className="flex-1 px-4 pb-6">
|
||||
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
|
||||
Resources
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-3">
|
||||
</p>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{resourceLinks.map((link) => (
|
||||
<li key={link.label}>
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
className="text-sm text-gray-500 transition-colors hover:text-cadcad-blue"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
|
|
@ -112,6 +135,21 @@ export default function Footer() {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ETH donation address */}
|
||||
<div className="border-t border-border py-4 text-center">
|
||||
<p className="text-sm text-gray-500">
|
||||
ETH Donation address:{" "}
|
||||
<a
|
||||
href="https://etherscan.io/address/0xbcd768c566143714309afe87feb901da7543f470"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-800 no-underline hover:text-cadcad-blue transition-colors"
|
||||
>
|
||||
0xbcd768c566143714309afe87feb901da7543f470
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,113 +1,97 @@
|
|||
const resources = [
|
||||
{
|
||||
title: "GitHub Repository",
|
||||
title: "Github",
|
||||
linkText: "Github",
|
||||
description:
|
||||
"Explore the source code, contribute, and track development. Start with the README for installation and basic usage.",
|
||||
"Install cadCAD and read through our documentation and guides. You may also find new projects through our community.",
|
||||
href: "https://github.com/cadCAD-org/cadCAD",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
),
|
||||
prefix: "Go to our",
|
||||
icon: "/images/icon-github-lg.svg",
|
||||
},
|
||||
{
|
||||
title: "Video Tutorials",
|
||||
title: "Tutorials",
|
||||
linkText: "our tutorials",
|
||||
description:
|
||||
"Watch our comprehensive tutorial playlist covering cadCAD fundamentals, from basic concepts to advanced simulation techniques.",
|
||||
"In this series of videos, we introduce basic concepts of cadCAD and help you build your first model.",
|
||||
href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YKtdRV-SoinhV6LbQMgX1we",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</svg>
|
||||
),
|
||||
prefix: "Watch",
|
||||
icon: "/images/icon-tutorials.svg",
|
||||
},
|
||||
{
|
||||
title: "Community Resources",
|
||||
title: "Inspiration",
|
||||
linkText: "inspiration",
|
||||
description:
|
||||
"Browse a curated collection of tutorials, articles, and projects created by the cadCAD community.",
|
||||
href: "https://www.one-tab.com/page/1G-5FvsaSauRH-jfQA9KEA",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "cadCAD Bootcamp",
|
||||
description:
|
||||
"Enroll in the cadCAD education bootcamp for structured learning with hands-on exercises and expert guidance.",
|
||||
href: "https://www.cadcad.education/",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Commons Simulator",
|
||||
description:
|
||||
"Try the interactive Commons Stack simulator, a real-world application built with cadCAD demonstrating token engineering concepts.",
|
||||
href: "https://sim.commonsstack.org/",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 9.563C9 9.252 9.252 9 9.563 9h4.874c.311 0 .563.252.563.563v4.874c0 .311-.252.563-.563.563H9.564A.562.562 0 019 14.437V9.564z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Inspiration Talks",
|
||||
description:
|
||||
"Watch talks and presentations about complex systems, token engineering, and the theory behind cadCAD.",
|
||||
"We've gathered a list of videos and resources to help you understand the theory behind complex systems simulation.",
|
||||
href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YJnNDMaslh20axb4r7fgW_a",
|
||||
icon: (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
|
||||
</svg>
|
||||
),
|
||||
prefix: "Get some",
|
||||
icon: "/images/icon-inspiration.svg",
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
linkText: "the talk",
|
||||
description:
|
||||
"Making your first steps can be frustrating so don't hesitate to reach out for support through our community channels: Telegram, Discord, and Discourse.",
|
||||
href: "https://community.cadcad.org/",
|
||||
prefix: "Join",
|
||||
icon: "/images/icon-community.svg",
|
||||
},
|
||||
{
|
||||
title: "Bootcamp",
|
||||
linkText: "our bootcamp",
|
||||
description:
|
||||
"The most comprehensive cadCAD beginner course on the web. If you're new to cadCAD, this is the best place to start.",
|
||||
href: "https://www.cadcad.education/",
|
||||
prefix: "Join",
|
||||
icon: "/images/icon-join.svg",
|
||||
},
|
||||
{
|
||||
title: "Simulator",
|
||||
linkText: "the simulator",
|
||||
description:
|
||||
"Become the futuristic, solarpunk character in this Commons Simulator adventure game built with cadCAD.",
|
||||
href: "https://sim.commonsstack.org/",
|
||||
prefix: "Play",
|
||||
icon: "/images/icon-simulator.svg",
|
||||
},
|
||||
];
|
||||
|
||||
export default function GettingStarted() {
|
||||
return (
|
||||
<section id="getting-started" className="px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
||||
Getting <span className="gradient-text">Started</span>
|
||||
<section className="border-b border-border bg-white py-8">
|
||||
<div className="container mx-auto flex flex-wrap pt-4 pb-12 text-center">
|
||||
<div className="w-full px-6">
|
||||
<h2 className="mb-8 text-3xl font-bold text-gray-800 sm:text-4xl">
|
||||
Getting Started
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-muted">
|
||||
Everything you need to start modeling and simulating complex systems with cadCAD.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{resources.map((resource) => (
|
||||
<a
|
||||
key={resource.title}
|
||||
href={resource.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="card-hover group flex flex-col rounded-xl border border-border bg-surface p-6"
|
||||
>
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className="text-accent">{resource.icon}</div>
|
||||
<h3 className="font-semibold group-hover:text-accent transition-colors">
|
||||
{resource.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="flex-1 text-sm leading-relaxed text-muted">
|
||||
{resource.description}
|
||||
</p>
|
||||
<div className="mt-4 flex items-center gap-1 text-sm text-accent opacity-0 transition-opacity group-hover:opacity-100">
|
||||
Explore
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
{resources.map((resource) => (
|
||||
<div
|
||||
key={resource.title}
|
||||
className="flex w-full flex-col flex-grow flex-shrink p-6 md:w-1/6"
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={resource.icon}
|
||||
alt={resource.title}
|
||||
className="mx-auto my-6 h-16 w-16 text-cadcad-blue"
|
||||
/>
|
||||
<p className="w-full py-4 text-base font-bold text-gray-800">
|
||||
{resource.prefix}{" "}
|
||||
<a
|
||||
href={resource.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-cadcad-blue hover:text-cadcad-lightblue transition-colors"
|
||||
>
|
||||
{resource.linkText}
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-sm leading-relaxed text-gray-500">
|
||||
{resource.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,43 +1,85 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import CadCADLogo from "./CadCADLogo";
|
||||
|
||||
const navLinks = [
|
||||
{ label: "Github", href: "https://github.com/cadCAD-org/cadCAD", external: true },
|
||||
{ label: "Discord", href: "https://discord.gg/FP2FGJb4tJ", external: true },
|
||||
{ label: "Twitter", href: "https://twitter.com/cadcad_org", external: true },
|
||||
{ label: "YouTube", href: "https://www.youtube.com/channel/UCPePNv3dJN--aKhFGOa0Rjg", external: true },
|
||||
{
|
||||
label: "Github",
|
||||
href: "https://github.com/cadCAD-org/cadCAD",
|
||||
icon: "/images/icon-github.svg",
|
||||
},
|
||||
{
|
||||
label: "Discord",
|
||||
href: "https://discord.gg/FP2FGJb4tJ",
|
||||
icon: "/images/icon-discord.svg",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "https://twitter.com/cadcad_org",
|
||||
icon: "/images/icon-twitter.svg",
|
||||
},
|
||||
{
|
||||
label: "YouTube",
|
||||
href: "https://www.youtube.com/channel/UCPePNv3dJN--aKhFGOa0Rjg",
|
||||
icon: "/images/icon-youtube.svg",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 50);
|
||||
window.addEventListener("scroll", onScroll);
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-xl">
|
||||
<div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
|
||||
<a href="#" className="flex items-center gap-2">
|
||||
<CadCADLogo className="h-8" />
|
||||
<header
|
||||
className={`fixed top-0 left-0 right-0 z-30 transition-all duration-500 ease-in-out ${
|
||||
scrolled
|
||||
? "bg-white shadow-md text-black"
|
||||
: "bg-transparent text-white"
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto flex flex-wrap items-center justify-between py-2 px-4">
|
||||
<a href="#" className="flex items-center">
|
||||
<CadCADLogo
|
||||
className="h-12"
|
||||
variant={scrolled ? "color" : "white"}
|
||||
/>
|
||||
</a>
|
||||
|
||||
{/* Desktop nav */}
|
||||
<nav className="hidden items-center gap-6 md:flex">
|
||||
<nav className="hidden items-center gap-1 lg:flex">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm transition-colors duration-200 hover:text-white ${
|
||||
scrolled
|
||||
? "text-gray-500 hover:text-cadcad-blue"
|
||||
: "text-white/80 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={link.icon}
|
||||
alt=""
|
||||
className={`h-6 w-6 ${scrolled ? "" : "brightness-0 invert"}`}
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href="https://community.cadcad.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-lg border border-accent/30 bg-accent/10 px-4 py-2 text-sm font-medium text-accent transition-all hover:bg-accent/20"
|
||||
className="ml-4 rounded-full bg-cadcad-lightblue px-6 py-2 text-sm font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
|
||||
>
|
||||
Join our community
|
||||
</a>
|
||||
|
|
@ -45,27 +87,39 @@ export default function Header() {
|
|||
|
||||
{/* Mobile hamburger */}
|
||||
<button
|
||||
className="flex flex-col gap-1.5 md:hidden"
|
||||
className="flex flex-col gap-1.5 lg:hidden"
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span className={`block h-0.5 w-6 bg-foreground transition-transform ${mobileOpen ? "translate-y-2 rotate-45" : ""}`} />
|
||||
<span className={`block h-0.5 w-6 bg-foreground transition-opacity ${mobileOpen ? "opacity-0" : ""}`} />
|
||||
<span className={`block h-0.5 w-6 bg-foreground transition-transform ${mobileOpen ? "-translate-y-2 -rotate-45" : ""}`} />
|
||||
<span
|
||||
className={`block h-0.5 w-6 transition-transform ${
|
||||
scrolled ? "bg-black" : "bg-white"
|
||||
} ${mobileOpen ? "translate-y-2 rotate-45" : ""}`}
|
||||
/>
|
||||
<span
|
||||
className={`block h-0.5 w-6 transition-opacity ${
|
||||
scrolled ? "bg-black" : "bg-white"
|
||||
} ${mobileOpen ? "opacity-0" : ""}`}
|
||||
/>
|
||||
<span
|
||||
className={`block h-0.5 w-6 transition-transform ${
|
||||
scrolled ? "bg-black" : "bg-white"
|
||||
} ${mobileOpen ? "-translate-y-2 -rotate-45" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu */}
|
||||
{mobileOpen && (
|
||||
<nav className="border-t border-border/50 bg-background/95 backdrop-blur-xl md:hidden">
|
||||
<div className="flex flex-col gap-4 px-6 py-6">
|
||||
<nav className="bg-white p-4 text-black lg:hidden">
|
||||
<div className="flex flex-col gap-4">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted transition-colors hover:text-foreground"
|
||||
className="flex items-center gap-2 text-sm text-gray-500 hover:text-cadcad-blue"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
|
|
@ -74,7 +128,7 @@ export default function Header() {
|
|||
href="https://community.cadcad.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="rounded-lg border border-accent/30 bg-accent/10 px-4 py-2 text-center text-sm font-medium text-accent"
|
||||
className="rounded-full bg-cadcad-lightblue px-6 py-2 text-center text-sm font-bold text-white"
|
||||
>
|
||||
Join our community
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,95 +1,47 @@
|
|||
export default function Hero() {
|
||||
return (
|
||||
<section className="grid-bg relative flex min-h-screen items-center justify-center overflow-hidden px-6 pt-20">
|
||||
{/* Background decorative elements */}
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
{/* Radial glow */}
|
||||
<div className="absolute left-1/2 top-1/3 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent/5 blur-[120px]" />
|
||||
|
||||
{/* Floating nodes */}
|
||||
<svg className="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Connection lines */}
|
||||
<line x1="15%" y1="20%" x2="25%" y2="35%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
<line x1="25%" y1="35%" x2="40%" y2="25%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
<line x1="75%" y1="30%" x2="85%" y2="45%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
<line x1="60%" y1="70%" x2="75%" y2="65%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
<line x1="20%" y1="75%" x2="35%" y2="68%" stroke="#00d4aa" strokeWidth="0.5" opacity="0.1" />
|
||||
|
||||
{/* Nodes */}
|
||||
<circle cx="15%" cy="20%" r="3" fill="#00d4aa" opacity="0.2" className="animate-pulse-node" />
|
||||
<circle cx="25%" cy="35%" r="4" fill="#00d4aa" opacity="0.15" className="animate-pulse-node" style={{ animationDelay: "1s" }} />
|
||||
<circle cx="40%" cy="25%" r="2" fill="#00d4aa" opacity="0.2" className="animate-pulse-node" style={{ animationDelay: "2s" }} />
|
||||
<circle cx="75%" cy="30%" r="3" fill="#00d4aa" opacity="0.15" className="animate-pulse-node" style={{ animationDelay: "0.5s" }} />
|
||||
<circle cx="85%" cy="45%" r="2" fill="#00d4aa" opacity="0.2" className="animate-pulse-node" style={{ animationDelay: "1.5s" }} />
|
||||
<circle cx="60%" cy="70%" r="4" fill="#00d4aa" opacity="0.1" className="animate-pulse-node" style={{ animationDelay: "2.5s" }} />
|
||||
<circle cx="75%" cy="65%" r="2" fill="#00d4aa" opacity="0.15" className="animate-pulse-node" style={{ animationDelay: "0.8s" }} />
|
||||
<circle cx="20%" cy="75%" r="3" fill="#00d4aa" opacity="0.1" className="animate-pulse-node" style={{ animationDelay: "1.2s" }} />
|
||||
<circle cx="35%" cy="68%" r="2" fill="#00d4aa" opacity="0.2" className="animate-pulse-node" style={{ animationDelay: "1.8s" }} />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-4xl text-center">
|
||||
{/* Version badge */}
|
||||
<div className="mb-8 inline-flex items-center gap-2 rounded-full border border-border bg-surface px-4 py-1.5 text-sm text-muted">
|
||||
<span className="h-2 w-2 rounded-full bg-accent animate-pulse" />
|
||||
v0.5.3 — Open Source
|
||||
</div>
|
||||
|
||||
<h1 className="mb-6 text-4xl font-bold leading-tight tracking-tight sm:text-5xl md:text-6xl">
|
||||
<span className="gradient-text">cadCAD</span>
|
||||
<span className="mt-2 block text-2xl font-normal text-muted sm:text-3xl md:text-4xl">
|
||||
Complex Adaptive Dynamics
|
||||
</span>
|
||||
<span className="block text-2xl font-normal text-muted sm:text-3xl md:text-4xl">
|
||||
Computer-Aided Design
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="mx-auto mb-10 max-w-2xl text-lg leading-relaxed text-muted sm:text-xl">
|
||||
<section className="header-background relative flex min-h-screen items-center justify-center px-6 pt-20 text-center text-white">
|
||||
<div className="container mx-auto flex flex-col items-center px-3 md:w-3/5">
|
||||
<h1 className="my-4 text-5xl font-bold leading-tight">cadCAD</h1>
|
||||
<p className="mb-8 text-xl leading-normal md:text-2xl">
|
||||
An open-source Python package that assists in the processes of
|
||||
designing, testing and validating complex systems through simulation.
|
||||
</p>
|
||||
|
||||
{/* CTA buttons */}
|
||||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||
<div className="flex flex-row justify-center space-x-2">
|
||||
<a
|
||||
href="https://github.com/cadCAD-org/cadCAD"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-accent px-8 py-3 font-medium text-background transition-all hover:bg-accent-dim hover:shadow-lg hover:shadow-accent/20"
|
||||
className="rounded-full border-2 border-white bg-white px-8 py-4 font-bold text-gray-800 shadow-lg transition-all hover:bg-gray-100"
|
||||
>
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
Try it out
|
||||
</a>
|
||||
<a
|
||||
href="https://community.cadcad.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-border bg-surface px-8 py-3 font-medium text-foreground transition-all hover:border-accent/30 hover:bg-surface-light"
|
||||
className="rounded-full border-2 border-white px-8 py-4 font-bold text-white transition-all hover:bg-white/10"
|
||||
>
|
||||
Join our community
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Install command */}
|
||||
<div className="code-block mx-auto mt-12 max-w-md px-6 py-4 text-left">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className="h-3 w-3 rounded-full bg-red-500/60" />
|
||||
<span className="h-3 w-3 rounded-full bg-yellow-500/60" />
|
||||
<span className="h-3 w-3 rounded-full bg-green-500/60" />
|
||||
</div>
|
||||
<code className="text-sm text-muted">
|
||||
<span className="text-accent">$</span> pip install cadCAD
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<svg className="h-6 w-6 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
<svg
|
||||
className="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 14l-7 7m0 0l-7-7m7 7V3"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,73 @@
|
|||
const useCases = [
|
||||
{
|
||||
title: "Monte Carlo Simulations",
|
||||
number: "1",
|
||||
title: "Handle uncertainty through Monte Carlo stochastic simulations",
|
||||
description:
|
||||
"Handle uncertainty and account for stochastic behaviors through Monte Carlo simulations. Run thousands of iterations to understand the probability distribution of outcomes.",
|
||||
icon: (
|
||||
<svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6" />
|
||||
</svg>
|
||||
),
|
||||
color: "from-cyan-500/20 to-accent/20",
|
||||
"Account for the uncertainty and stochastic nature of complex systems by running Monte Carlo simulations. Understand the probability distribution of outcomes rather than relying on single-point estimates.",
|
||||
},
|
||||
{
|
||||
title: "A/B Testing",
|
||||
number: "2",
|
||||
title: "Conduct A/B testing on agent behavior assumptions",
|
||||
description:
|
||||
"Conduct A/B testing on agent behavior assumptions and policy designs. Compare different strategies side-by-side to identify the most effective approaches for your system.",
|
||||
icon: (
|
||||
<svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
|
||||
</svg>
|
||||
),
|
||||
color: "from-blue-500/20 to-accent/20",
|
||||
"Test different behavioral assumptions and policy designs side-by-side. Compare strategies to identify the most effective approaches for governing your system.",
|
||||
},
|
||||
{
|
||||
title: "Parameter Sweeping",
|
||||
number: "3",
|
||||
title: "Optimize parameters via parameter sweeping",
|
||||
description:
|
||||
"Optimize system parameters via systematic parameter sweeping. Explore the design space to find optimal configurations and understand sensitivity to different inputs.",
|
||||
icon: (
|
||||
<svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
|
||||
</svg>
|
||||
),
|
||||
color: "from-purple-500/20 to-accent/20",
|
||||
"Systematically explore the design space to find optimal configurations. Understand sensitivity to different inputs and make informed decisions about system parameters.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function UseCases() {
|
||||
return (
|
||||
<section id="use-cases" className="bg-surface px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
||||
Core <span className="gradient-text">Capabilities</span>
|
||||
<section className="border-b border-border bg-white py-8">
|
||||
<div className="container mx-auto flex flex-wrap pt-4 pb-12">
|
||||
<div className="w-full px-6 text-center">
|
||||
<h2 className="mb-2 text-3xl font-bold text-gray-800 sm:text-4xl">
|
||||
Use Cases
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-muted">
|
||||
Powerful simulation features built in, optimized for exploring complex system dynamics.
|
||||
<p className="mb-8 text-lg text-gray-500">
|
||||
cadCAD helps you answer the "what if" questions about your
|
||||
system
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{useCases.map((useCase) => (
|
||||
<div
|
||||
key={useCase.title}
|
||||
className="card-hover group relative overflow-hidden rounded-xl border border-border bg-background p-8"
|
||||
>
|
||||
{/* Gradient background on hover */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-br ${useCase.color} opacity-0 transition-opacity group-hover:opacity-100`} />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="mb-6 text-accent">{useCase.icon}</div>
|
||||
<h3 className="mb-3 text-xl font-semibold">{useCase.title}</h3>
|
||||
<p className="leading-relaxed text-muted">
|
||||
{useCases.map((useCase) => (
|
||||
<div
|
||||
key={useCase.number}
|
||||
className="flex w-full flex-col flex-grow flex-shrink p-6 md:w-1/3"
|
||||
>
|
||||
<div className="mx-auto mt-8 flex flex-row items-start sm:flex-row lg:w-4/5">
|
||||
<span className="mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-cadcad-blue text-xl font-bold text-white">
|
||||
{useCase.number}
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="mb-4 flex-grow text-xl font-bold tracking-tighter text-cadcad-blue">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<p className="leading-relaxed text-gray-500">
|
||||
{useCase.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* CTA banner */}
|
||||
<div className="mx-auto my-16 w-full bg-cadcad-blue px-6 py-6 text-center md:w-1/3">
|
||||
<p className="text-lg text-white/80">What will you ask of your system?</p>
|
||||
<h2 className="my-2 text-5xl font-bold leading-tight text-white">
|
||||
Get started
|
||||
</h2>
|
||||
<a
|
||||
href="https://github.com/cadCAD-org/cadCAD"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mx-auto mt-4 inline-block rounded-full border-2 border-white bg-white px-8 py-4 font-bold text-gray-800 shadow-lg transition-all hover:bg-gray-200"
|
||||
>
|
||||
Try it out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,16 @@
|
|||
const sections = [
|
||||
{
|
||||
label: "Why?",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
|
||||
</svg>
|
||||
),
|
||||
description:
|
||||
"Given a model of a complex system, cadCAD can simulate the impact that a set of actions might have on it. This enables decision-makers to test policies and mechanisms before deploying them in the real world.",
|
||||
},
|
||||
{
|
||||
label: "How?",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M11.42 15.17l-5.384 3.077 1.028-5.994L2.25 7.723l6.02-.875L11.42 1.5l3.172 5.348 6.02.875-4.814 4.53 1.028 5.994L11.42 15.17z" />
|
||||
</svg>
|
||||
),
|
||||
description:
|
||||
"cadCAD supports different system modeling approaches and can be easily integrated with common empirical data science workflows. Monte Carlo methods, A/B testing and parameter sweeping features are natively supported and optimized for.",
|
||||
},
|
||||
{
|
||||
label: "What?",
|
||||
icon: (
|
||||
<svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
|
||||
</svg>
|
||||
),
|
||||
description:
|
||||
"cadCAD (complex adaptive dynamics Computer-Aided Design) is a python based modeling framework for research, validation, and Computer Aided Design of complex systems. It supports Agent-Based Modeling (ABM) and System Dynamics (SD) approaches for stochastic dynamical systems and differential games.",
|
||||
},
|
||||
|
|
@ -33,32 +18,25 @@ const sections = [
|
|||
|
||||
export default function WhyHowWhat() {
|
||||
return (
|
||||
<section id="about" className="px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
||||
Understand <span className="gradient-text">Complex Systems</span>
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-muted">
|
||||
Design, simulate, validate, and operate within complex systems using
|
||||
a powerful yet intuitive Python framework.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{sections.map((section) => (
|
||||
<div
|
||||
key={section.label}
|
||||
className="card-hover rounded-xl border border-border bg-surface p-8"
|
||||
>
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-lg bg-accent/10 text-accent">
|
||||
{section.icon}
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold">{section.label}</h3>
|
||||
<p className="leading-relaxed text-muted">{section.description}</p>
|
||||
<section className="border-b border-border bg-white py-16">
|
||||
<div className="container mx-auto flex flex-wrap bg-cadcad-blue py-8">
|
||||
{sections.map((section, i) => (
|
||||
<div
|
||||
key={section.label}
|
||||
className={`flex w-full flex-col flex-grow flex-shrink p-6 md:w-1/3 ${
|
||||
i > 0 ? "md:border-l border-white/20" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex-1 overflow-hidden rounded-t rounded-b-none shadow">
|
||||
<h3 className="w-full px-6 pb-4 text-xl font-bold text-white">
|
||||
{section.label}
|
||||
</h3>
|
||||
<p className="px-6 pb-6 text-base text-white/90">
|
||||
{section.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue