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";
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: #0a0a0a;
|
--background: #ffffff;
|
||||||
--foreground: #ededed;
|
--foreground: #1a1a1a;
|
||||||
--accent: #00d4aa;
|
--cadcad-blue: #16ABF9;
|
||||||
--accent-dim: #00b894;
|
--cadcad-lightblue: #16F7F9;
|
||||||
--surface: #141414;
|
--cadcad-lightblue-hover: #0de0e0;
|
||||||
--surface-light: #1e1e1e;
|
--surface: #f8f9fa;
|
||||||
--border: #2a2a2a;
|
--surface-dark: #16ABF9;
|
||||||
--muted: #888888;
|
--border: #e5e7eb;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--muted-light: #9ca3af;
|
||||||
}
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
--color-accent: var(--accent);
|
--color-cadcad-blue: var(--cadcad-blue);
|
||||||
--color-accent-dim: var(--accent-dim);
|
--color-cadcad-lightblue: var(--cadcad-lightblue);
|
||||||
|
--color-cadcad-lightblue-hover: var(--cadcad-lightblue-hover);
|
||||||
--color-surface: var(--surface);
|
--color-surface: var(--surface);
|
||||||
--color-surface-light: var(--surface-light);
|
--color-surface-dark: var(--surface-dark);
|
||||||
--color-border: var(--border);
|
--color-border: var(--border);
|
||||||
--color-muted: var(--muted);
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-light: var(--muted-light);
|
||||||
--font-sans: var(--font-geist-sans);
|
--font-sans: var(--font-geist-sans);
|
||||||
--font-mono: var(--font-geist-mono);
|
--font-mono: var(--font-geist-mono);
|
||||||
}
|
}
|
||||||
|
|
@ -34,50 +38,14 @@ html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animated grid background */
|
/* Header background gradient - matches original cadCAD blue */
|
||||||
.grid-bg {
|
.header-background {
|
||||||
background-image:
|
background: linear-gradient(135deg, #16ABF9 0%, #16F7F9 100%);
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Glow effect for hero */
|
/* Gradient text using cadCAD brand colors */
|
||||||
.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 {
|
.gradient-text {
|
||||||
background: linear-gradient(135deg, #00d4aa, #00b4d8, #00d4aa);
|
background: linear-gradient(135deg, #16ABF9, #16F7F9);
|
||||||
background-size: 200% 200%;
|
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
|
|
@ -89,24 +57,16 @@ html {
|
||||||
}
|
}
|
||||||
.card-hover:hover {
|
.card-hover:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 8px 30px rgba(0, 212, 170, 0.1);
|
box-shadow: 0 8px 30px rgba(22, 171, 249, 0.15);
|
||||||
border-color: rgba(0, 212, 170, 0.3);
|
border-color: rgba(22, 171, 249, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Section fade-in */
|
/* Code block styling */
|
||||||
@keyframes fadeInUp {
|
.code-block {
|
||||||
from {
|
background: #1e293b;
|
||||||
opacity: 0;
|
border: 1px solid #334155;
|
||||||
transform: translateY(20px);
|
border-radius: 8px;
|
||||||
}
|
font-family: var(--font-mono), 'Courier New', monospace;
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in-up {
|
|
||||||
animation: fadeInUp 0.6s ease-out forwards;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar */
|
/* Scrollbar */
|
||||||
|
|
@ -114,12 +74,12 @@ html {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: var(--background);
|
background: #f1f1f1;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: var(--border);
|
background: #c1c1c1;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: var(--muted);
|
background: #999;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import Header from "@/components/Header";
|
||||||
import Hero from "@/components/Hero";
|
import Hero from "@/components/Hero";
|
||||||
import WhyHowWhat from "@/components/WhyHowWhat";
|
import WhyHowWhat from "@/components/WhyHowWhat";
|
||||||
import UseCases from "@/components/UseCases";
|
import UseCases from "@/components/UseCases";
|
||||||
import CodeExample from "@/components/CodeExample";
|
|
||||||
import GettingStarted from "@/components/GettingStarted";
|
import GettingStarted from "@/components/GettingStarted";
|
||||||
import Community from "@/components/Community";
|
import Community from "@/components/Community";
|
||||||
import Footer from "@/components/Footer";
|
import Footer from "@/components/Footer";
|
||||||
|
|
@ -15,7 +14,6 @@ export default function Home() {
|
||||||
<Hero />
|
<Hero />
|
||||||
<WhyHowWhat />
|
<WhyHowWhat />
|
||||||
<UseCases />
|
<UseCases />
|
||||||
<CodeExample />
|
|
||||||
<GettingStarted />
|
<GettingStarted />
|
||||||
<Community />
|
<Community />
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,20 @@
|
||||||
export default function CadCADLogo({ className = "h-8" }: { className?: string }) {
|
import Image from "next/image";
|
||||||
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" />
|
|
||||||
|
|
||||||
{/* cadCAD text */}
|
export default function CadCADLogo({
|
||||||
<text
|
className = "h-10",
|
||||||
x="30"
|
variant = "color",
|
||||||
y="35"
|
}: {
|
||||||
fontFamily="var(--font-geist-mono), 'Courier New', monospace"
|
className?: string;
|
||||||
fontSize="32"
|
variant?: "color" | "white";
|
||||||
fontWeight="700"
|
}) {
|
||||||
letterSpacing="-0.5"
|
return (
|
||||||
>
|
<Image
|
||||||
<tspan fill="#ededed">cad</tspan>
|
src="/images/cadcad-logo.svg"
|
||||||
<tspan fill="#00d4aa">CAD</tspan>
|
alt="cadCAD"
|
||||||
</text>
|
width={265}
|
||||||
</svg>
|
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() {
|
export default function Community() {
|
||||||
return (
|
return (
|
||||||
<section id="community" className="bg-surface px-6 py-24">
|
<>
|
||||||
<div className="mx-auto max-w-6xl">
|
{/* Community section */}
|
||||||
<div className="mb-16 text-center">
|
<section className="border-b border-border bg-white py-8">
|
||||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
<div className="container mx-auto flex flex-col pt-4 pb-12 md:flex-row">
|
||||||
Join our <span className="gradient-text">Community</span>
|
<div className="w-full px-6 md:w-1/2">
|
||||||
</h2>
|
<h2 className="mb-4 text-3xl font-bold text-gray-800">
|
||||||
<p className="mx-auto max-w-2xl text-muted">
|
Join our community
|
||||||
Connect with researchers, engineers, and enthusiasts building the
|
</h2>
|
||||||
future of complex systems simulation.
|
</div>
|
||||||
</p>
|
<div className="w-full px-6 text-xl text-gray-800 md:w-1/2">
|
||||||
</div>
|
<p className="mb-4 leading-relaxed">
|
||||||
|
We've open-sourced cadCAD for the community and we want it to
|
||||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
become a community-driven project. Regardless of your skillset, we
|
||||||
{communityLinks.map((link) => (
|
invite you to join the conversation through any of our channels:
|
||||||
<a
|
</p>
|
||||||
key={link.name}
|
<div className="flex flex-wrap gap-3">
|
||||||
href={link.href}
|
<a
|
||||||
target="_blank"
|
href="https://t.me/joinchat/BehTglN4UOLe83MpgBelzw"
|
||||||
rel="noopener noreferrer"
|
target="_blank"
|
||||||
className="card-hover group flex flex-col items-center rounded-xl border border-border bg-background p-8 text-center"
|
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"
|
||||||
<div className="mb-4 text-muted transition-colors group-hover:text-accent">
|
>
|
||||||
{link.icon}
|
Telegram
|
||||||
</div>
|
</a>
|
||||||
<h3 className="mb-2 font-semibold">{link.name}</h3>
|
<a
|
||||||
<p className="text-sm text-muted">{link.description}</p>
|
href="https://discord.gg/FP2FGJb4tJ"
|
||||||
</a>
|
target="_blank"
|
||||||
))}
|
rel="noopener noreferrer"
|
||||||
</div>
|
className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
|
||||||
|
>
|
||||||
{/* Support section */}
|
Discord
|
||||||
<div className="mt-16 rounded-xl border border-border bg-background p-8 text-center">
|
</a>
|
||||||
<h3 className="mb-4 text-xl font-semibold">Support cadCAD</h3>
|
<a
|
||||||
<p className="mx-auto mb-6 max-w-xl text-muted">
|
href="https://community.cadcad.org/"
|
||||||
cadCAD is open-source and community-driven. Support the project
|
target="_blank"
|
||||||
through OpenCollective or crypto donations.
|
rel="noopener noreferrer"
|
||||||
</p>
|
className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
|
||||||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
>
|
||||||
<a
|
Discourse
|
||||||
href="https://opencollective.com/cadcad1"
|
</a>
|
||||||
target="_blank"
|
<a
|
||||||
rel="noopener noreferrer"
|
href="https://twitter.com/cadcad_org"
|
||||||
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"
|
target="_blank"
|
||||||
>
|
rel="noopener noreferrer"
|
||||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
className="rounded bg-cadcad-lightblue px-4 py-2 text-base font-bold text-white transition-colors hover:bg-cadcad-lightblue-hover"
|
||||||
<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>
|
Twitter
|
||||||
OpenCollective
|
</a>
|
||||||
</a>
|
</div>
|
||||||
<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>
|
|
||||||
</div>
|
</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";
|
import CadCADLogo from "./CadCADLogo";
|
||||||
|
|
||||||
const productLinks = [
|
const productLinks = [
|
||||||
|
|
@ -25,43 +26,65 @@ const resourceLinks = [
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="border-t border-border px-6 py-16">
|
<footer className="bg-white py-8">
|
||||||
<div className="mx-auto max-w-6xl">
|
{/* BlockScience attribution */}
|
||||||
<div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
|
<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 */}
|
{/* Brand */}
|
||||||
<div className="lg:col-span-1">
|
<div className="flex-1 px-4 pb-6">
|
||||||
<CadCADLogo className="mb-4 h-8" />
|
<CadCADLogo className="mb-4 h-10" />
|
||||||
<p className="mb-4 text-sm leading-relaxed text-muted">
|
<p className="text-sm text-gray-500">
|
||||||
cadCAD was created as an internal tool at{" "}
|
© {new Date().getFullYear()} BlockScience. All rights
|
||||||
<a
|
reserved.
|
||||||
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.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Product */}
|
{/* Product */}
|
||||||
<div>
|
<div className="flex-1 px-4 pb-6">
|
||||||
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted">
|
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
|
||||||
Product
|
Product
|
||||||
</h4>
|
</p>
|
||||||
<ul className="flex flex-col gap-3">
|
<ul className="flex flex-col gap-2">
|
||||||
{productLinks.map((link) => (
|
{productLinks.map((link) => (
|
||||||
<li key={link.label}>
|
<li key={link.label}>
|
||||||
<a
|
<a
|
||||||
href={link.href}
|
href={link.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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}
|
{link.label}
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -71,18 +94,18 @@ export default function Footer() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Community */}
|
{/* Community */}
|
||||||
<div>
|
<div className="flex-1 px-4 pb-6">
|
||||||
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted">
|
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
|
||||||
Community
|
Community
|
||||||
</h4>
|
</p>
|
||||||
<ul className="flex flex-col gap-3">
|
<ul className="flex flex-col gap-2">
|
||||||
{communityLinks.map((link) => (
|
{communityLinks.map((link) => (
|
||||||
<li key={link.label}>
|
<li key={link.label}>
|
||||||
<a
|
<a
|
||||||
href={link.href}
|
href={link.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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}
|
{link.label}
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -92,18 +115,18 @@ export default function Footer() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Resources */}
|
{/* Resources */}
|
||||||
<div>
|
<div className="flex-1 px-4 pb-6">
|
||||||
<h4 className="mb-4 text-sm font-semibold uppercase tracking-wider text-muted">
|
<p className="mb-4 text-sm font-bold uppercase tracking-wider text-gray-500">
|
||||||
Resources
|
Resources
|
||||||
</h4>
|
</p>
|
||||||
<ul className="flex flex-col gap-3">
|
<ul className="flex flex-col gap-2">
|
||||||
{resourceLinks.map((link) => (
|
{resourceLinks.map((link) => (
|
||||||
<li key={link.label}>
|
<li key={link.label}>
|
||||||
<a
|
<a
|
||||||
href={link.href}
|
href={link.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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}
|
{link.label}
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -112,6 +135,21 @@ export default function Footer() {
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,113 +1,97 @@
|
||||||
const resources = [
|
const resources = [
|
||||||
{
|
{
|
||||||
title: "GitHub Repository",
|
title: "Github",
|
||||||
|
linkText: "Github",
|
||||||
description:
|
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",
|
href: "https://github.com/cadCAD-org/cadCAD",
|
||||||
icon: (
|
prefix: "Go to our",
|
||||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
icon: "/images/icon-github-lg.svg",
|
||||||
<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>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Video Tutorials",
|
title: "Tutorials",
|
||||||
|
linkText: "our tutorials",
|
||||||
description:
|
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",
|
href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YKtdRV-SoinhV6LbQMgX1we",
|
||||||
icon: (
|
prefix: "Watch",
|
||||||
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
icon: "/images/icon-tutorials.svg",
|
||||||
<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>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Community Resources",
|
title: "Inspiration",
|
||||||
|
linkText: "inspiration",
|
||||||
description:
|
description:
|
||||||
"Browse a curated collection of tutorials, articles, and projects created by the cadCAD community.",
|
"We've gathered a list of videos and resources to help you understand the theory behind complex systems simulation.",
|
||||||
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.",
|
|
||||||
href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YJnNDMaslh20axb4r7fgW_a",
|
href: "https://www.youtube.com/playlist?list=PLmWm8ksQq4YJnNDMaslh20axb4r7fgW_a",
|
||||||
icon: (
|
prefix: "Get some",
|
||||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
icon: "/images/icon-inspiration.svg",
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
|
},
|
||||||
</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() {
|
export default function GettingStarted() {
|
||||||
return (
|
return (
|
||||||
<section id="getting-started" className="px-6 py-24">
|
<section className="border-b border-border bg-white py-8">
|
||||||
<div className="mx-auto max-w-6xl">
|
<div className="container mx-auto flex flex-wrap pt-4 pb-12 text-center">
|
||||||
<div className="mb-16 text-center">
|
<div className="w-full px-6">
|
||||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
<h2 className="mb-8 text-3xl font-bold text-gray-800 sm:text-4xl">
|
||||||
Getting <span className="gradient-text">Started</span>
|
Getting Started
|
||||||
</h2>
|
</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>
|
||||||
|
|
||||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
{resources.map((resource) => (
|
||||||
{resources.map((resource) => (
|
<div
|
||||||
<a
|
key={resource.title}
|
||||||
key={resource.title}
|
className="flex w-full flex-col flex-grow flex-shrink p-6 md:w-1/6"
|
||||||
href={resource.href}
|
>
|
||||||
target="_blank"
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||||
rel="noopener noreferrer"
|
<img
|
||||||
className="card-hover group flex flex-col rounded-xl border border-border bg-surface p-6"
|
src={resource.icon}
|
||||||
>
|
alt={resource.title}
|
||||||
<div className="mb-4 flex items-center gap-3">
|
className="mx-auto my-6 h-16 w-16 text-cadcad-blue"
|
||||||
<div className="text-accent">{resource.icon}</div>
|
/>
|
||||||
<h3 className="font-semibold group-hover:text-accent transition-colors">
|
<p className="w-full py-4 text-base font-bold text-gray-800">
|
||||||
{resource.title}
|
{resource.prefix}{" "}
|
||||||
</h3>
|
<a
|
||||||
</div>
|
href={resource.href}
|
||||||
<p className="flex-1 text-sm leading-relaxed text-muted">
|
target="_blank"
|
||||||
{resource.description}
|
rel="noopener noreferrer"
|
||||||
</p>
|
className="text-cadcad-blue hover:text-cadcad-lightblue transition-colors"
|
||||||
<div className="mt-4 flex items-center gap-1 text-sm text-accent opacity-0 transition-opacity group-hover:opacity-100">
|
>
|
||||||
Explore
|
{resource.linkText}
|
||||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
</a>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
</p>
|
||||||
</svg>
|
<p className="text-sm leading-relaxed text-gray-500">
|
||||||
</div>
|
{resource.description}
|
||||||
</a>
|
</p>
|
||||||
))}
|
</div>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,85 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import CadCADLogo from "./CadCADLogo";
|
import CadCADLogo from "./CadCADLogo";
|
||||||
|
|
||||||
const navLinks = [
|
const navLinks = [
|
||||||
{ label: "Github", href: "https://github.com/cadCAD-org/cadCAD", external: true },
|
{
|
||||||
{ label: "Discord", href: "https://discord.gg/FP2FGJb4tJ", external: true },
|
label: "Github",
|
||||||
{ label: "Twitter", href: "https://twitter.com/cadcad_org", external: true },
|
href: "https://github.com/cadCAD-org/cadCAD",
|
||||||
{ label: "YouTube", href: "https://www.youtube.com/channel/UCPePNv3dJN--aKhFGOa0Rjg", external: true },
|
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() {
|
export default function Header() {
|
||||||
const [mobileOpen, setMobileOpen] = useState(false);
|
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 (
|
return (
|
||||||
<header className="fixed top-0 left-0 right-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-xl">
|
<header
|
||||||
<div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
|
className={`fixed top-0 left-0 right-0 z-30 transition-all duration-500 ease-in-out ${
|
||||||
<a href="#" className="flex items-center gap-2">
|
scrolled
|
||||||
<CadCADLogo className="h-8" />
|
? "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>
|
</a>
|
||||||
|
|
||||||
{/* Desktop nav */}
|
{/* Desktop nav */}
|
||||||
<nav className="hidden items-center gap-6 md:flex">
|
<nav className="hidden items-center gap-1 lg:flex">
|
||||||
{navLinks.map((link) => (
|
{navLinks.map((link) => (
|
||||||
<a
|
<a
|
||||||
key={link.label}
|
key={link.label}
|
||||||
href={link.href}
|
href={link.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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}
|
{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>
|
||||||
))}
|
))}
|
||||||
<a
|
<a
|
||||||
href="https://community.cadcad.org/"
|
href="https://community.cadcad.org/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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
|
Join our community
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -45,27 +87,39 @@ export default function Header() {
|
||||||
|
|
||||||
{/* Mobile hamburger */}
|
{/* Mobile hamburger */}
|
||||||
<button
|
<button
|
||||||
className="flex flex-col gap-1.5 md:hidden"
|
className="flex flex-col gap-1.5 lg:hidden"
|
||||||
onClick={() => setMobileOpen(!mobileOpen)}
|
onClick={() => setMobileOpen(!mobileOpen)}
|
||||||
aria-label="Toggle menu"
|
aria-label="Toggle menu"
|
||||||
>
|
>
|
||||||
<span className={`block h-0.5 w-6 bg-foreground transition-transform ${mobileOpen ? "translate-y-2 rotate-45" : ""}`} />
|
<span
|
||||||
<span className={`block h-0.5 w-6 bg-foreground transition-opacity ${mobileOpen ? "opacity-0" : ""}`} />
|
className={`block h-0.5 w-6 transition-transform ${
|
||||||
<span className={`block h-0.5 w-6 bg-foreground transition-transform ${mobileOpen ? "-translate-y-2 -rotate-45" : ""}`} />
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile menu */}
|
{/* Mobile menu */}
|
||||||
{mobileOpen && (
|
{mobileOpen && (
|
||||||
<nav className="border-t border-border/50 bg-background/95 backdrop-blur-xl md:hidden">
|
<nav className="bg-white p-4 text-black lg:hidden">
|
||||||
<div className="flex flex-col gap-4 px-6 py-6">
|
<div className="flex flex-col gap-4">
|
||||||
{navLinks.map((link) => (
|
{navLinks.map((link) => (
|
||||||
<a
|
<a
|
||||||
key={link.label}
|
key={link.label}
|
||||||
href={link.href}
|
href={link.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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}
|
{link.label}
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -74,7 +128,7 @@ export default function Header() {
|
||||||
href="https://community.cadcad.org/"
|
href="https://community.cadcad.org/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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
|
Join our community
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,47 @@
|
||||||
export default function Hero() {
|
export default function Hero() {
|
||||||
return (
|
return (
|
||||||
<section className="grid-bg relative flex min-h-screen items-center justify-center overflow-hidden px-6 pt-20">
|
<section className="header-background relative flex min-h-screen items-center justify-center px-6 pt-20 text-center text-white">
|
||||||
{/* Background decorative elements */}
|
<div className="container mx-auto flex flex-col items-center px-3 md:w-3/5">
|
||||||
<div className="pointer-events-none absolute inset-0">
|
<h1 className="my-4 text-5xl font-bold leading-tight">cadCAD</h1>
|
||||||
{/* Radial glow */}
|
<p className="mb-8 text-xl leading-normal md:text-2xl">
|
||||||
<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">
|
|
||||||
An open-source Python package that assists in the processes of
|
An open-source Python package that assists in the processes of
|
||||||
designing, testing and validating complex systems through simulation.
|
designing, testing and validating complex systems through simulation.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* CTA buttons */}
|
<div className="flex flex-row justify-center space-x-2">
|
||||||
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
|
||||||
<a
|
<a
|
||||||
href="https://github.com/cadCAD-org/cadCAD"
|
href="https://github.com/cadCAD-org/cadCAD"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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
|
Try it out
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://community.cadcad.org/"
|
href="https://community.cadcad.org/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
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
|
Join our community
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Scroll indicator */}
|
{/* Scroll indicator */}
|
||||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
<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">
|
<svg
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,73 @@
|
||||||
const useCases = [
|
const useCases = [
|
||||||
{
|
{
|
||||||
title: "Monte Carlo Simulations",
|
number: "1",
|
||||||
|
title: "Handle uncertainty through Monte Carlo stochastic simulations",
|
||||||
description:
|
description:
|
||||||
"Handle uncertainty and account for stochastic behaviors through Monte Carlo simulations. Run thousands of iterations to understand the probability distribution of outcomes.",
|
"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.",
|
||||||
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",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "A/B Testing",
|
number: "2",
|
||||||
|
title: "Conduct A/B testing on agent behavior assumptions",
|
||||||
description:
|
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.",
|
"Test different behavioral assumptions and policy designs side-by-side. Compare strategies to identify the most effective approaches for governing 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",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Parameter Sweeping",
|
number: "3",
|
||||||
|
title: "Optimize parameters via parameter sweeping",
|
||||||
description:
|
description:
|
||||||
"Optimize system parameters via systematic parameter sweeping. Explore the design space to find optimal configurations and understand sensitivity to different inputs.",
|
"Systematically explore the design space to find optimal configurations. Understand sensitivity to different inputs and make informed decisions about system parameters.",
|
||||||
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",
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function UseCases() {
|
export default function UseCases() {
|
||||||
return (
|
return (
|
||||||
<section id="use-cases" className="bg-surface px-6 py-24">
|
<section className="border-b border-border bg-white py-8">
|
||||||
<div className="mx-auto max-w-6xl">
|
<div className="container mx-auto flex flex-wrap pt-4 pb-12">
|
||||||
<div className="mb-16 text-center">
|
<div className="w-full px-6 text-center">
|
||||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
<h2 className="mb-2 text-3xl font-bold text-gray-800 sm:text-4xl">
|
||||||
Core <span className="gradient-text">Capabilities</span>
|
Use Cases
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mx-auto max-w-2xl text-muted">
|
<p className="mb-8 text-lg text-gray-500">
|
||||||
Powerful simulation features built in, optimized for exploring complex system dynamics.
|
cadCAD helps you answer the "what if" questions about your
|
||||||
|
system
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-8 md:grid-cols-3">
|
{useCases.map((useCase) => (
|
||||||
{useCases.map((useCase) => (
|
<div
|
||||||
<div
|
key={useCase.number}
|
||||||
key={useCase.title}
|
className="flex w-full flex-col flex-grow flex-shrink p-6 md:w-1/3"
|
||||||
className="card-hover group relative overflow-hidden rounded-xl border border-border bg-background p-8"
|
>
|
||||||
>
|
<div className="mx-auto mt-8 flex flex-row items-start sm:flex-row lg:w-4/5">
|
||||||
{/* Gradient background on hover */}
|
<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">
|
||||||
<div className={`absolute inset-0 bg-gradient-to-br ${useCase.color} opacity-0 transition-opacity group-hover:opacity-100`} />
|
{useCase.number}
|
||||||
|
</span>
|
||||||
<div className="relative z-10">
|
<div>
|
||||||
<div className="mb-6 text-accent">{useCase.icon}</div>
|
<h3 className="mb-4 flex-grow text-xl font-bold tracking-tighter text-cadcad-blue">
|
||||||
<h3 className="mb-3 text-xl font-semibold">{useCase.title}</h3>
|
{useCase.title}
|
||||||
<p className="leading-relaxed text-muted">
|
</h3>
|
||||||
|
<p className="leading-relaxed text-gray-500">
|
||||||
{useCase.description}
|
{useCase.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,16 @@
|
||||||
const sections = [
|
const sections = [
|
||||||
{
|
{
|
||||||
label: "Why?",
|
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:
|
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.",
|
"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?",
|
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:
|
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.",
|
"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?",
|
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:
|
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.",
|
"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() {
|
export default function WhyHowWhat() {
|
||||||
return (
|
return (
|
||||||
<section id="about" className="px-6 py-24">
|
<section className="border-b border-border bg-white py-16">
|
||||||
<div className="mx-auto max-w-6xl">
|
<div className="container mx-auto flex flex-wrap bg-cadcad-blue py-8">
|
||||||
<div className="mb-16 text-center">
|
{sections.map((section, i) => (
|
||||||
<h2 className="mb-4 text-3xl font-bold sm:text-4xl">
|
<div
|
||||||
Understand <span className="gradient-text">Complex Systems</span>
|
key={section.label}
|
||||||
</h2>
|
className={`flex w-full flex-col flex-grow flex-shrink p-6 md:w-1/3 ${
|
||||||
<p className="mx-auto max-w-2xl text-muted">
|
i > 0 ? "md:border-l border-white/20" : ""
|
||||||
Design, simulate, validate, and operate within complex systems using
|
}`}
|
||||||
a powerful yet intuitive Python framework.
|
>
|
||||||
</p>
|
<div className="flex-1 overflow-hidden rounded-t rounded-b-none shadow">
|
||||||
</div>
|
<h3 className="w-full px-6 pb-4 text-xl font-bold text-white">
|
||||||
|
{section.label}
|
||||||
<div className="grid gap-8 md:grid-cols-3">
|
</h3>
|
||||||
{sections.map((section) => (
|
<p className="px-6 pb-6 text-base text-white/90">
|
||||||
<div
|
{section.description}
|
||||||
key={section.label}
|
</p>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
))}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue