diff --git a/public/images/cadcad-bg-tile.png b/public/images/cadcad-bg-tile.png new file mode 100644 index 0000000..b51096a Binary files /dev/null and b/public/images/cadcad-bg-tile.png differ diff --git a/public/images/cadcad-bg.png b/public/images/cadcad-bg.png new file mode 100644 index 0000000..3129e2f Binary files /dev/null and b/public/images/cadcad-bg.png differ diff --git a/public/images/cadcad-logo-white.svg b/public/images/cadcad-logo-white.svg new file mode 100644 index 0000000..0c84bd6 --- /dev/null +++ b/public/images/cadcad-logo-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/icon-community.svg b/public/images/icon-community.svg index ebaaf8b..12a687d 100644 --- a/public/images/icon-community.svg +++ b/public/images/icon-community.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/icon-discord-white.svg b/public/images/icon-discord-white.svg new file mode 100644 index 0000000..9882864 --- /dev/null +++ b/public/images/icon-discord-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/icon-discord.svg b/public/images/icon-discord.svg index 17c54eb..697c77a 100644 --- a/public/images/icon-discord.svg +++ b/public/images/icon-discord.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/icon-github-lg.svg b/public/images/icon-github-lg.svg index 2295af3..17dc5d4 100644 --- a/public/images/icon-github-lg.svg +++ b/public/images/icon-github-lg.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/icon-github-white.svg b/public/images/icon-github-white.svg new file mode 100644 index 0000000..e330095 --- /dev/null +++ b/public/images/icon-github-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/icon-github.svg b/public/images/icon-github.svg index 877a3a7..352876a 100644 --- a/public/images/icon-github.svg +++ b/public/images/icon-github.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/icon-inspiration.svg b/public/images/icon-inspiration.svg index 9381324..76abab5 100644 --- a/public/images/icon-inspiration.svg +++ b/public/images/icon-inspiration.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/icon-join.svg b/public/images/icon-join.svg index 9381324..76abab5 100644 --- a/public/images/icon-join.svg +++ b/public/images/icon-join.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/icon-simulator.svg b/public/images/icon-simulator.svg index 20ec216..e241a21 100644 --- a/public/images/icon-simulator.svg +++ b/public/images/icon-simulator.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/icon-tutorials.svg b/public/images/icon-tutorials.svg index 20ec216..e241a21 100644 --- a/public/images/icon-tutorials.svg +++ b/public/images/icon-tutorials.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/icon-twitter-white.svg b/public/images/icon-twitter-white.svg new file mode 100644 index 0000000..194ed79 --- /dev/null +++ b/public/images/icon-twitter-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/icon-twitter.svg b/public/images/icon-twitter.svg index 71a320d..f4c0f5d 100644 --- a/public/images/icon-twitter.svg +++ b/public/images/icon-twitter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/icon-youtube-white.svg b/public/images/icon-youtube-white.svg new file mode 100644 index 0000000..e611258 --- /dev/null +++ b/public/images/icon-youtube-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/icon-youtube.svg b/public/images/icon-youtube.svg index d936ad6..167acce 100644 --- a/public/images/icon-youtube.svg +++ b/public/images/icon-youtube.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index 4a2eb41..4388f16 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,14 +3,12 @@ :root { --background: #ffffff; --foreground: #1a1a1a; - --cadcad-blue: #16ABF9; - --cadcad-lightblue: #16F7F9; - --cadcad-lightblue-hover: #0de0e0; + --cadcad-blue: #161645; + --cadcad-lightblue: #55D0FF; + --cadcad-lightblue-hover: #21c0fc; --surface: #f8f9fa; - --surface-dark: #16ABF9; --border: #e5e7eb; --muted: #6b7280; - --muted-light: #9ca3af; } @theme inline { @@ -20,10 +18,8 @@ --color-cadcad-lightblue: var(--cadcad-lightblue); --color-cadcad-lightblue-hover: var(--cadcad-lightblue-hover); --color-surface: var(--surface); - --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); } @@ -38,48 +34,19 @@ html { scroll-behavior: smooth; } -/* Header background gradient - matches original cadCAD blue */ +/* Header background - uses the original cadCAD background image */ .header-background { - background: linear-gradient(135deg, #16ABF9 0%, #16F7F9 100%); -} - -/* Gradient text using cadCAD brand colors */ -.gradient-text { - background: linear-gradient(135deg, #16ABF9, #16F7F9); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + background-image: url('/images/cadcad-bg.png'); + background-size: cover; + background-position: center; + background-color: #161645; } /* Card hover effect */ .card-hover { - transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; + transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-hover:hover { transform: translateY(-2px); - box-shadow: 0 8px 30px rgba(22, 171, 249, 0.15); - border-color: rgba(22, 171, 249, 0.3); -} - -/* Code block styling */ -.code-block { - background: #1e293b; - border: 1px solid #334155; - border-radius: 8px; - font-family: var(--font-mono), 'Courier New', monospace; -} - -/* Scrollbar */ -::-webkit-scrollbar { - width: 8px; -} -::-webkit-scrollbar-track { - background: #f1f1f1; -} -::-webkit-scrollbar-thumb { - background: #c1c1c1; - border-radius: 4px; -} -::-webkit-scrollbar-thumb:hover { - background: #999; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } diff --git a/src/components/CadCADLogo.tsx b/src/components/CadCADLogo.tsx index a56567c..e592fe5 100644 --- a/src/components/CadCADLogo.tsx +++ b/src/components/CadCADLogo.tsx @@ -9,11 +9,11 @@ export default function CadCADLogo({ }) { return ( cadCAD ); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index aaaf8d7..a250839 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -7,22 +7,26 @@ const navLinks = [ { label: "Github", href: "https://github.com/cadCAD-org/cadCAD", - icon: "/images/icon-github.svg", + iconWhite: "/images/icon-github-white.svg", + iconDark: "/images/icon-github.svg", }, { label: "Discord", href: "https://discord.gg/FP2FGJb4tJ", - icon: "/images/icon-discord.svg", + iconWhite: "/images/icon-discord-white.svg", + iconDark: "/images/icon-discord.svg", }, { label: "Twitter", href: "https://twitter.com/cadcad_org", - icon: "/images/icon-twitter.svg", + iconWhite: "/images/icon-twitter-white.svg", + iconDark: "/images/icon-twitter.svg", }, { label: "YouTube", href: "https://www.youtube.com/channel/UCPePNv3dJN--aKhFGOa0Rjg", - icon: "/images/icon-youtube.svg", + iconWhite: "/images/icon-youtube-white.svg", + iconDark: "/images/icon-youtube.svg", }, ]; @@ -60,7 +64,7 @@ export default function Header() { href={link.href} target="_blank" rel="noopener noreferrer" - className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm transition-colors duration-200 hover:text-white ${ + className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm transition-colors duration-200 ${ scrolled ? "text-gray-500 hover:text-cadcad-blue" : "text-white/80 hover:text-white" @@ -69,9 +73,9 @@ export default function Header() { {link.label} {/* eslint-disable-next-line @next/next/no-img-element */} ))} @@ -79,7 +83,11 @@ export default function Header() { href="https://community.cadcad.org/" target="_blank" rel="noopener noreferrer" - 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" + className={`ml-4 rounded-full px-6 py-2 text-sm font-bold transition-colors ${ + scrolled + ? "bg-cadcad-lightblue text-white hover:bg-cadcad-lightblue-hover" + : "bg-cadcad-lightblue text-gray-800 font-bold hover:bg-cadcad-lightblue-hover" + }`} > Join our community @@ -121,6 +129,8 @@ export default function Header() { rel="noopener noreferrer" className="flex items-center gap-2 text-sm text-gray-500 hover:text-cadcad-blue" > + {/* eslint-disable-next-line @next/next/no-img-element */} + {link.label} ))} @@ -128,7 +138,7 @@ export default function Header() { href="https://community.cadcad.org/" target="_blank" rel="noopener noreferrer" - className="rounded-full bg-cadcad-lightblue px-6 py-2 text-center text-sm font-bold text-white" + className="rounded-full bg-cadcad-lightblue px-6 py-2 text-center text-sm font-bold text-gray-800" > Join our community diff --git a/src/components/UseCases.tsx b/src/components/UseCases.tsx index 68e8ab2..ba6a62c 100644 --- a/src/components/UseCases.tsx +++ b/src/components/UseCases.tsx @@ -39,7 +39,7 @@ export default function UseCases() { className="flex w-full flex-col flex-grow flex-shrink p-6 md:w-1/3" >
- + {useCase.number}