Skip to content

Commit 5714440

Browse files
smeijersmeijer
committed
feat: logo and more links
1 parent 923ffb8 commit 5714440

File tree

7 files changed

+81
-24
lines changed

7 files changed

+81
-24
lines changed

‎public/images/logos/github.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/Footer.astro‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
import Container from './Container.astro';
33
import Logo from './Logo.astro';
44
import NavLinks from './NavLinks.astro';
5+
6+
const navItems = [
7+
{ label: 'Terms', href: 'https://www.magicbell.com/terms-and-conditions' },
8+
{ label: 'Privacy', href: 'https://www.magicbell.com/privacy-policy' },
9+
{ label: 'Cookies', href: 'https://www.magicbell.com/cookie-policy' },
10+
];
511
---
612

713
<footer class="border-t border-gray-200">
@@ -16,7 +22,7 @@ import NavLinks from './NavLinks.astro';
1622
</div>
1723
</div>
1824
<nav class="mt-11 flex gap-8">
19-
<NavLinks />
25+
<NavLinks links={navItems} />
2026
</nav>
2127
</div>
2228
</div>

‎src/components/Header.astro‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
---
22
import Container from './Container.astro';
3-
import Logo from './Logo.astro';
3+
import Logo from './LogoBig.astro';
4+
import NavLinks from './NavLinks.astro';
5+
6+
const navItems = [
7+
{ label: 'GitHub', href: 'https://github.com/codeinbox/codeinbox' },
8+
{ label: 'Support', href: 'https://x.com/intent/post?text=Hi%20%40codeinbox,%20' },
9+
];
410
511
---
612

@@ -11,7 +17,9 @@ import Logo from './Logo.astro';
1117
<a href="/" aria-label="Home">
1218
<Logo class="h-10 w-auto" />
1319
</a>
20+
<NavLinks links={navItems} />
1421
</div>
22+
1523
</Container>
1624
</nav>
1725
</header>

‎src/components/Hero.astro‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import Container from './Container.astro';
33
import PhoneFrame from './PhoneFrame.astro';
44
5-
65
// Generate unique IDs for SVG elements
76
const backgroundId1 = `gradient-${Math.random().toString(36).substring(2, 9)}`;
87
const backgroundId2 = `gradient-${Math.random().toString(36).substring(2, 9)}`;
@@ -24,6 +23,15 @@ const notifications = [
2423
<p class="mt-6 text-lg text-gray-600">
2524
Turn Claude Code hooks into Slack notifications your team actually sees. Powered by MagicBell.
2625
</p>
26+
<div class="mt-8 flex flex-wrap gap-4">
27+
<a href="#features" class="inline-flex justify-center rounded-lg border py-2 px-4 text-sm transition-colors bg-gray-800 text-white hover:bg-gray-900" >
28+
Get Started
29+
</a>
30+
<a href="https://github.com/codeinbox/codeinbox" target="_blank" class="inline-flex items-center justify-center rounded-lg border py-2 px-4 text-sm transition-colors border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80">
31+
<img alt="" src="/images/logos/github.svg" class="w-4 h-4 mr-2" /><span>Check GitHub</span>
32+
</a>
33+
</div>
34+
2735
</div>
2836
<div class="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
2937
<!-- BackgroundIllustration -->

‎src/components/LogoBig.astro‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
interface Props {
3+
class?: string;
4+
}
5+
6+
const { class: className } = Astro.props;
7+
---
8+
9+
<svg class={className} width="1302" height="438" viewBox="0 0 1302 438" fill="none" xmlns="http://www.w3.org/2000/svg">
10+
<path d="M190.949 0.633301L0.398926 110.648L71.4588 151.674L262.009 41.6598L190.949 0.633301Z" fill="url(#paint0_radial_1918_782)"/>
11+
<path d="M166.734 313.904L142.915 327.656V272.649L190.553 300.153L166.734 313.904Z" fill="#3071B9"/>
12+
<path d="M381.5 110.648L262.009 41.6597V150.278V258.897L381.5 327.885V110.648Z" fill="url(#paint1_linear_1918_782)"/>
13+
<path d="M71.4589 368.912L190.949 437.9L192.945 436.748L216.514 423.14L240.084 409.532L287.222 382.316L334.361 355.101L357.931 341.493L381.5 327.885L262.009 258.897L190.553 300.153L166.734 313.904L142.915 327.656L71.4589 368.912Z" fill="url(#paint2_radial_1918_782)"/>
14+
<path d="M166.734 313.904L142.915 327.656L216.514 423.14L240.084 409.532L287.222 382.316L334.361 355.101L357.931 341.493L190.553 300.153L166.734 313.904Z" fill="url(#paint3_linear_1918_782)"/>
15+
<path d="M190.553 300.153V205.286L166.734 219.037L142.915 232.789V260.293V272.649L190.553 300.153Z" fill="#363F53"/>
16+
<path d="M262.009 41.6597L71.4589 151.674V260.293V368.911L142.915 327.656V272.649V260.293V232.789L166.734 219.037L190.553 205.286V300.152L262.009 258.897V150.278V41.6597Z" fill="#E4E2DD"/>
17+
<path d="M0.398926 110.648V327.885L71.4588 368.912V260.293V151.674L0.398926 110.648Z" fill="url(#paint4_radial_1918_782)"/>
18+
<path d="M556.351 282.782C544.929 282.782 534.991 280.234 526.536 275.139C518.138 270.044 511.643 262.822 507.052 253.471C502.461 244.065 500.165 232.951 500.165 220.13V220.046C500.165 207.224 502.461 196.138 507.052 186.788C511.643 177.438 518.138 170.243 526.536 165.204C534.935 160.109 544.873 157.561 556.351 157.561C565.253 157.561 573.288 159.269 580.454 162.684C587.621 166.1 593.528 170.831 598.175 176.878C602.822 182.925 605.762 189.951 606.994 197.958L607.078 198.798H588.349L587.845 197.118C586.557 192.359 584.458 188.272 581.546 184.856C578.691 181.441 575.135 178.837 570.88 177.046C566.681 175.198 561.838 174.274 556.351 174.274C548.848 174.274 542.326 176.15 536.783 179.901C531.296 183.652 527.04 188.943 524.017 195.774C520.994 202.605 519.482 210.695 519.482 220.046V220.13C519.482 229.424 520.994 237.542 524.017 244.485C527.04 251.372 531.324 256.691 536.867 260.442C542.41 264.193 548.904 266.069 556.351 266.069C561.726 266.069 566.513 265.173 570.712 263.382C574.967 261.534 578.579 258.846 581.546 255.319C584.514 251.792 586.725 247.481 588.181 242.385L588.433 241.546H607.161L606.994 242.385C605.762 250.448 602.822 257.531 598.175 263.634C593.584 269.68 587.705 274.384 580.538 277.743C573.372 281.102 565.309 282.782 556.351 282.782ZM660.156 282.53C651.701 282.53 644.311 280.682 637.984 276.987C631.713 273.236 626.842 267.945 623.37 261.114C619.899 254.227 618.163 246.053 618.163 236.591V236.423C618.163 227.016 619.899 218.898 623.37 212.067C626.898 205.236 631.797 199.973 638.068 196.278C644.395 192.583 651.729 190.735 660.072 190.735C668.47 190.735 675.805 192.583 682.076 196.278C688.402 199.917 693.301 205.152 696.773 211.983C700.3 218.814 702.064 226.96 702.064 236.423V236.591C702.064 246.109 700.3 254.283 696.773 261.114C693.301 267.945 688.43 273.236 682.16 276.987C675.889 280.682 668.554 282.53 660.156 282.53ZM660.24 267.245C664.943 267.245 669.03 266.041 672.501 263.634C675.973 261.226 678.66 257.755 680.564 253.219C682.467 248.628 683.419 243.085 683.419 236.591V236.423C683.419 229.984 682.467 224.497 680.564 219.962C678.66 215.371 675.945 211.899 672.417 209.548C668.89 207.14 664.775 205.936 660.072 205.936C655.425 205.936 651.337 207.14 647.81 209.548C644.339 211.955 641.623 215.427 639.663 219.962C637.704 224.497 636.724 229.984 636.724 236.423V236.591C636.724 243.085 637.676 248.628 639.579 253.219C641.539 257.755 644.283 261.226 647.81 263.634C651.337 266.041 655.481 267.245 660.24 267.245ZM749.179 282.53C741.676 282.53 735.154 280.654 729.611 276.903C724.068 273.152 719.785 267.861 716.761 261.03C713.738 254.143 712.226 245.997 712.226 236.591V236.507C712.226 227.1 713.738 218.982 716.761 212.151C719.841 205.32 724.124 200.057 729.611 196.362C735.154 192.611 741.62 190.735 749.011 190.735C753.154 190.735 757.018 191.407 760.601 192.751C764.184 194.094 767.348 196.026 770.091 198.546C772.891 201.009 775.158 203.977 776.894 207.448H777.23V159.577H795.538V280.766H777.23V265.817H776.894C775.158 269.288 772.919 272.256 770.175 274.719C767.488 277.183 764.38 279.115 760.853 280.514C757.326 281.858 753.434 282.53 749.179 282.53ZM753.966 266.825C758.557 266.825 762.589 265.593 766.06 263.13C769.587 260.61 772.331 257.083 774.29 252.548C776.306 248.012 777.314 242.693 777.314 236.591V236.507C777.314 230.404 776.306 225.113 774.29 220.634C772.275 216.098 769.531 212.599 766.06 210.135C762.589 207.616 758.557 206.356 753.966 206.356C749.207 206.356 745.092 207.588 741.62 210.052C738.149 212.459 735.462 215.93 733.558 220.466C731.71 224.945 730.786 230.292 730.786 236.507V236.591C730.786 242.805 731.71 248.208 733.558 252.8C735.462 257.335 738.149 260.806 741.62 263.214C745.092 265.621 749.207 266.825 753.966 266.825ZM851.808 282.53C843.186 282.53 835.739 280.682 829.468 276.987C823.253 273.236 818.466 267.945 815.107 261.114C811.803 254.227 810.152 246.137 810.152 236.843V236.759C810.152 227.576 811.831 219.542 815.191 212.655C818.55 205.712 823.281 200.337 829.384 196.53C835.487 192.667 842.654 190.735 850.884 190.735C859.171 190.735 866.281 192.583 872.216 196.278C878.207 199.917 882.826 205.096 886.074 211.815C889.321 218.478 890.945 226.233 890.945 235.079V241.21H819.138V228.36H882.126L873.14 240.37V233.315C873.14 227.1 872.188 221.949 870.285 217.862C868.437 213.719 865.833 210.639 862.474 208.624C859.171 206.608 855.335 205.6 850.968 205.6C846.657 205.6 842.794 206.664 839.378 208.792C835.963 210.919 833.275 214.055 831.316 218.198C829.356 222.285 828.376 227.324 828.376 233.315V240.37C828.376 246.081 829.328 250.98 831.232 255.067C833.191 259.098 835.963 262.206 839.546 264.389C843.13 266.517 847.357 267.581 852.228 267.581C855.811 267.581 858.975 267.049 861.718 265.985C864.462 264.865 866.729 263.41 868.521 261.618C870.369 259.77 871.656 257.727 872.384 255.487L872.636 254.815H889.937L889.769 255.739C889.041 259.21 887.669 262.542 885.654 265.733C883.638 268.925 881.007 271.808 877.759 274.384C874.568 276.903 870.788 278.891 866.421 280.346C862.054 281.802 857.183 282.53 851.808 282.53ZM907.154 280.766V159.577H925.966V280.766H907.154ZM946.038 280.766V192.415H964.347V205.768H964.683C967.035 201.289 970.478 197.678 975.013 194.934C979.548 192.135 985.147 190.735 991.81 190.735C1001.5 190.735 1009 193.675 1014.32 199.553C1019.64 205.376 1022.3 213.383 1022.3 223.573V280.766H1004.07V227.1C1004.07 220.438 1002.5 215.315 999.369 211.731C996.289 208.148 991.614 206.356 985.343 206.356C981.088 206.356 977.365 207.308 974.173 209.212C971.038 211.115 968.602 213.775 966.867 217.19C965.187 220.606 964.347 224.637 964.347 229.284V280.766H946.038ZM1086.88 282.53C1082.68 282.53 1078.79 281.858 1075.21 280.514C1071.68 279.115 1068.54 277.183 1065.8 274.719C1063.11 272.256 1060.9 269.288 1059.17 265.817H1058.75V280.766H1040.52V159.577H1058.75V207.448H1059.17C1060.9 203.977 1063.14 201.009 1065.88 198.546C1068.63 196.026 1071.79 194.094 1075.37 192.751C1079.01 191.407 1082.9 190.735 1087.05 190.735C1094.44 190.735 1100.88 192.611 1106.36 196.362C1111.85 200.057 1116.13 205.32 1119.21 212.151C1122.29 218.982 1123.83 227.1 1123.83 236.507V236.591C1123.83 245.997 1122.29 254.143 1119.21 261.03C1116.19 267.861 1111.91 273.152 1106.36 276.903C1100.82 280.654 1094.33 282.53 1086.88 282.53ZM1082.01 266.825C1086.77 266.825 1090.88 265.621 1094.35 263.214C1097.83 260.806 1100.49 257.335 1102.33 252.8C1104.24 248.208 1105.19 242.805 1105.19 236.591V236.507C1105.19 230.292 1104.24 224.945 1102.33 220.466C1100.49 215.93 1097.83 212.459 1094.35 210.052C1090.88 207.588 1086.77 206.356 1082.01 206.356C1077.47 206.356 1073.44 207.616 1069.92 210.135C1066.44 212.599 1063.7 216.098 1061.68 220.634C1059.67 225.113 1058.66 230.404 1058.66 236.507V236.591C1058.66 242.693 1059.64 248.012 1061.6 252.548C1063.62 257.083 1066.39 260.61 1069.92 263.13C1073.44 265.593 1077.47 266.825 1082.01 266.825ZM1175.82 282.53C1167.37 282.53 1159.97 280.682 1153.65 276.987C1147.38 273.236 1142.51 267.945 1139.03 261.114C1135.56 254.227 1133.83 246.053 1133.83 236.591V236.423C1133.83 227.016 1135.56 218.898 1139.03 212.067C1142.56 205.236 1147.46 199.973 1153.73 196.278C1160.06 192.583 1167.39 190.735 1175.74 190.735C1184.13 190.735 1191.47 192.583 1197.74 196.278C1204.07 199.917 1208.97 205.152 1212.44 211.983C1215.96 218.814 1217.73 226.96 1217.73 236.423V236.591C1217.73 246.109 1215.96 254.283 1212.44 261.114C1208.97 267.945 1204.09 273.236 1197.82 276.987C1191.55 280.682 1184.22 282.53 1175.82 282.53ZM1175.9 267.245C1180.61 267.245 1184.69 266.041 1188.17 263.634C1191.64 261.226 1194.32 257.755 1196.23 253.219C1198.13 248.628 1199.08 243.085 1199.08 236.591V236.423C1199.08 229.984 1198.13 224.497 1196.23 219.962C1194.32 215.371 1191.61 211.899 1188.08 209.548C1184.55 207.14 1180.44 205.936 1175.74 205.936C1171.09 205.936 1167 207.14 1163.47 209.548C1160 211.955 1157.29 215.427 1155.33 219.962C1153.37 224.497 1152.39 229.984 1152.39 236.423V236.591C1152.39 243.085 1153.34 248.628 1155.24 253.219C1157.2 257.755 1159.95 261.226 1163.47 263.634C1167 266.041 1171.14 267.245 1175.9 267.245ZM1219.16 280.766L1248.38 236.675L1219.58 192.415H1239.98L1259.22 224.329H1259.64L1278.62 192.415H1298.77L1269.71 236.087L1298.44 280.766H1278.36L1258.88 248.264H1258.46L1238.89 280.766H1219.16Z" fill="black"/>
19+
<defs>
20+
<radialGradient id="paint0_radial_1918_782" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(32.3979 110.401) rotate(-16.8656) scale(205.599 356.109)">
21+
<stop stop-color="#485A92"/>
22+
<stop offset="1" stop-color="#22273A"/>
23+
</radialGradient>
24+
<linearGradient id="paint1_linear_1918_782" x1="321.755" y1="91.352" x2="321.755" y2="278.786" gradientUnits="userSpaceOnUse">
25+
<stop stop-color="#181F34"/>
26+
<stop offset="1" stop-color="#1F3D76"/>
27+
</linearGradient>
28+
<radialGradient id="paint2_radial_1918_782" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(177.544 312.158) scale(284.081 492.043)">
29+
<stop stop-color="#2E6BB4"/>
30+
<stop offset="1" stop-color="#181F34"/>
31+
</radialGradient>
32+
<linearGradient id="paint3_linear_1918_782" x1="168.432" y1="300.153" x2="269.358" y2="361.646" gradientUnits="userSpaceOnUse">
33+
<stop stop-color="#3072BB"/>
34+
<stop offset="1" stop-color="#203B7E"/>
35+
</linearGradient>
36+
<radialGradient id="paint4_radial_1918_782" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(19.9337 152.245) rotate(49.3022) scale(344.067 94.6682)">
37+
<stop stop-color="#485A92"/>
38+
<stop offset="1" stop-color="#171D31"/>
39+
</radialGradient>
40+
</defs>
41+
</svg>
42+

‎src/components/NavLinks.astro‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,25 @@
11
---
2-
const navItems = [
3-
{ label: 'Terms', href: 'https://www.magicbell.com/terms-and-conditions' },
4-
{ label: 'Privacy', href: 'https://www.magicbell.com/privacy-policy' },
5-
{ label: 'Cookies', href: 'https://www.magicbell.com/cookie-policy' },
6-
];
2+
type NavItem = {
3+
label: string;
4+
href: string;
5+
}
6+
7+
interface Props {
8+
links: NavItem[];
9+
}
10+
11+
const links = Astro.props.links;
712
---
813

914
<div class="relative flex gap-6">
10-
{navItems.map(({ label, href }) => (
15+
{links.map(({ label, href }) => (
1116
<a
1217
href={href}
1318
target="_blank"
14-
class="nav-link relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors hover:text-gray-900"
19+
class="nav-link relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors hover:text-gray-900 hover:bg-gray-100"
1520
>
1621
<span class="relative z-10">{label}</span>
1722
</a>
1823
))}
1924
</div>
2025

21-
<script>
22-
// Simple hover effect without animation library
23-
const links = document.querySelectorAll('.nav-link');
24-
25-
links.forEach(link => {
26-
link.addEventListener('mouseenter', () => {
27-
link.classList.add('bg-gray-100');
28-
});
29-
30-
link.addEventListener('mouseleave', () => {
31-
link.classList.remove('bg-gray-100');
32-
});
33-
});
34-
</script>

‎src/layouts/layout.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Footer from '../components/Footer.astro'
1313
<title>CodeInbox</title>
1414
</head>
1515
<body>
16+
<Header />
1617
<main class="flex-auto">
1718
<slot />
1819
</main>

0 commit comments

Comments
 (0)