Skip to content

Commit b8703ac

Browse files
sahithvibudhisahithvibudhi
committed
Update company logos with accurate SVG representations
- Replace Tesla logo with official circular badge design - Update Meta logo with new infinity-style branding - Keep Microsoft logo (already correct) - Update Amazon logo with orange background square design
1 parent 413abb7 commit b8703ac

File tree

1 file changed

+92
-42
lines changed

1 file changed

+92
-42
lines changed

‎src/components/BuiltBy.astro‎

Lines changed: 92 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,31 @@
11
---
22
const companies = [
3-
{ name: 'Tesla', logo: '🚗' },
4-
{ name: 'Meta', logo: '👍' },
5-
{ name: 'Microsoft', logo: '🪟' },
6-
{ name: 'Amazon', logo: '📦' }
7-
];
3+
{
4+
name: 'Tesla',
5+
svg: `<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
6+
<circle cx="512" cy="512" r="512" style="fill:#c90000"/>
7+
<path transform="translate(-33.796 -64.797)" d="m545.8 845.8 71.9-404.6c68.6 0 90.2 7.5 93.3 38.2 0 0 46-17.2 69.2-52-90.5-41.9-181.5-43.8-181.5-43.8l-53.1 64.6h.1l-53.1-64.6s-91 1.9-181.5 43.8c23.2 34.8 69.2 52 69.2 52 3.1-30.7 24.7-38.2 92.8-38.3l72.7 404.7m0-480.9c73.2-.6 156.9 11.3 242.7 48.7 11.5-20.6 14.4-29.7 14.4-29.7-93.7-37.1-181.5-49.8-257.1-50.1-75.6.3-163.4 13-257.1 50.1 0 0 4.2 11.2 14.4 29.7 85.7-37.3 169.5-49.2 242.7-48.7" style="fill:#fff"/>
8+
</svg>`
9+
},
10+
{
11+
name: 'Meta',
12+
svg: `
13+
<svg fill="currentColor" fill-rule="evenodd" height="1.2em" style="flex:none;line-height:1" viewBox="0 0 103 24" xmlns="http://www.w3.org/2000/svg"><title>Meta</title><defs><linearGradient id="lobe-icons-meta-brand-fill-0" x1="75.904%" x2="33.275%" y1="89.153%" y2="23.044%"><stop offset=".06%" stop-color="#0867DF"></stop><stop offset="45.39%" stop-color="#0668E1"></stop><stop offset="100%" stop-color="#0064E0"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-1" x1="21.67%" x2="97.068%" y1="75.837%" y2="24.022%"><stop offset="13.23%" stop-color="#0064DF"></stop><stop offset="99.88%" stop-color="#0064E0"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-2" x1="38.247%" x2="60.91%" y1="89.127%" y2="16.131%"><stop offset="1.47%" stop-color="#0072EC"></stop><stop offset="68.81%" stop-color="#0064DF"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-3" x1="47.027%" x2="52.153%" y1="90.19%" y2="15.745%"><stop offset="7.31%" stop-color="#007CF6"></stop><stop offset="99.43%" stop-color="#0072EC"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-4" x1="52.155%" x2="47.591%" y1="58.289%" y2="37.023%"><stop offset="7.31%" stop-color="#007FF9"></stop><stop offset="100%" stop-color="#007CF6"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-5" x1="37.689%" x2="61.961%" y1="12.556%" y2="63.605%"><stop offset="7.31%" stop-color="#007FF9"></stop><stop offset="100%" stop-color="#0082FB"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-6" x1="42.496%" x2="59.964%" y1="56.072%" y2="27.099%"><stop offset="0%" stop-color="#007FF8"></stop><stop offset="100%" stop-color="#0082FB"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-7" x1="43.753%" x2="57.613%" y1="6.235%" y2="98.514%"><stop offset="0%" stop-color="#0082FB"></stop><stop offset="99.95%" stop-color="#0081FA"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-8" x1="60.07%" x2="39.865%" y1="4.661%" y2="69.077%"><stop offset="6.19%" stop-color="#0081FA"></stop><stop offset="100%" stop-color="#0080F9"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-9" x1="30.254%" x2="61.097%" y1="59.32%" y2="33.244%"><stop offset="0%" stop-color="#027AF3"></stop><stop offset="100%" stop-color="#0080F9"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-10" x1="20.433%" x2="82.112%" y1="50.001%" y2="50.001%"><stop offset="0%" stop-color="#0377EF"></stop><stop offset="99.94%" stop-color="#0279F1"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-11" x1="40.289%" x2="72.427%" y1="35.298%" y2="57.811%"><stop offset=".19%" stop-color="#0471E9"></stop><stop offset="100%" stop-color="#0377EF"></stop></linearGradient><linearGradient id="lobe-icons-meta-brand-fill-12" x1="32.228%" x2="68.028%" y1="19.719%" y2="84.908%"><stop offset="27.65%" stop-color="#0867DF"></stop><stop offset="100%" stop-color="#0471E9"></stop></linearGradient></defs><g><path d="M38.337 2.641h3.752l6.38 11.57 6.38-11.57h3.671v19.011H55.46V7.082l-5.594 10.09h-2.872l-5.595-10.09v14.57h-3.06V2.642zm30.058 19.353c-1.418 0-2.664-.314-3.739-.944a6.594 6.594 0 01-2.513-2.614c-.6-1.113-.9-2.39-.9-3.829 0-1.457.293-2.748.88-3.87.587-1.123 1.402-2 2.445-2.635 1.043-.633 2.242-.95 3.596-.95 1.346 0 2.504.319 3.475.957.97.638 1.718 1.532 2.242 2.682.523 1.15.785 2.499.785 4.047v.842h-10.39c.19 1.159.658 2.07 1.403 2.736.745.665 1.686.998 2.824.998.912 0 1.698-.136 2.357-.407a5.997 5.997 0 001.856-1.236l1.625 1.996c-1.616 1.485-3.599 2.227-5.946 2.227zm2.235-11.278c-.642-.656-1.481-.984-2.52-.984-1.011 0-1.858.335-2.54 1.005-.681.67-1.113 1.57-1.293 2.702h7.45c-.09-1.159-.456-2.066-1.097-2.723zm7.748-.712h-2.817V7.492h2.817V3.337h2.953v4.155h4.28v2.512h-4.28v6.369c0 1.059.18 1.815.542 2.267.36.453.98.68 1.855.68.389 0 .718-.016.99-.048l.426-.056c.15-.022.305-.046.467-.073v2.485a8.876 8.876 0 01-2.452.34c-3.187 0-4.781-1.748-4.781-5.242v-6.722zM101 21.654h-2.899v-1.982a5.24 5.24 0 01-1.964 1.718c-.795.403-1.698.604-2.71.604-1.245 0-2.35-.319-3.311-.957-.962-.638-1.718-1.517-2.269-2.635-.55-1.118-.826-2.396-.826-3.836 0-1.448.28-2.73.84-3.843.56-1.113 1.334-1.987 2.323-2.62.989-.634 2.124-.951 3.406-.951.967 0 1.834.188 2.601.563a5.145 5.145 0 011.91 1.596V7.49H101v14.164zm-2.953-9.206c-.316-.806-.815-1.442-1.497-1.908-.682-.466-1.47-.7-2.363-.7-1.265 0-2.272.426-3.021 1.277-.75.851-1.125 2-1.124 3.45 0 1.457.36 2.611 1.083 3.462.722.851 1.702 1.276 2.94 1.276.911 0 1.724-.235 2.438-.706a3.987 3.987 0 001.544-1.9v-4.251z"></path><path d="M8.627 0h-.029l-.04 3.27.028-.001c2.146 0 3.81 1.696 7.43 7.807l.22.372.014.024 2.026-3.047-.014-.023a60.949 60.949 0 00-1.374-2.146 35.014 35.014 0 00-1.47-2.036C13.026 1.165 11.024 0 8.628 0z" fill="url(#lobe-icons-meta-brand-fill-0)" transform="translate(2 2)"></path><path d="M8.598 0C6.19.013 4.062 1.573 2.525 3.961a5.44 5.44 0 00-.013.021l2.82 1.54.015-.022c.897-1.354 2.014-2.218 3.211-2.23l.027-.001L8.627 0h-.03z" fill="url(#lobe-icons-meta-brand-fill-1)" transform="translate(2 2)"></path><path d="M2.525 3.963l-.013.02C1.502 5.56.749 7.494.342 9.58l-.005.027 3.17.75c0-.01.002-.018.004-.028.339-1.833.984-3.533 1.822-4.806l.013-.02-2.82-1.54z" fill="url(#lobe-icons-meta-brand-fill-2)" transform="translate(2 2)"></path><path d="M3.511 10.33L.342 9.582l-.005.027A18.541 18.541 0 000 13.09v.028l3.25.292v-.029a15.728 15.728 0 01.262-3.05z" fill="url(#lobe-icons-meta-brand-fill-3)" transform="translate(2 2)"></path><path d="M3.349 14.422a6.822 6.822 0 01-.099-1.017v-.028L0 13.085v.031a11.105 11.105 0 00.183 2.064l3.17-.731a5.131 5.131 0 01-.004-.027z" fill="url(#lobe-icons-meta-brand-fill-4)" transform="translate(2 2)"></path><path d="M4.09 16.112c-.354-.387-.605-.945-.736-1.659l-.005-.027-3.171.731.005.027c.24 1.262.71 2.313 1.383 3.108l.018.022 2.524-2.181a2.635 2.635 0 01-.019-.02z" fill="url(#lobe-icons-meta-brand-fill-5)" transform="translate(2 2)"></path><path d="M15.484 9.067a399.491 399.491 0 00-3.069 4.781c-2.545 4-3.426 4.897-4.843 4.897-.591 0-1.085-.211-1.464-.615a2.313 2.313 0 01-.019-.02l-2.523 2.18.018.021C4.514 21.397 5.825 22 7.448 22c2.456 0 4.222-1.16 7.361-6.662l2.21-3.913a51.6 51.6 0 00-1.535-2.358z" fill="#0082FB"></path><path d="M16.89 2.432a19.722 19.722 0 00-1.471 1.79c.472.604.96 1.281 1.47 2.038.6-.93 1.16-1.682 1.71-2.258l.019-.02-1.728-1.55z" fill="url(#lobe-icons-meta-brand-fill-6)" transform="translate(2 2)"></path><path d="M28.166 4.142C26.834 2.792 25.245 2 23.546 2c-1.79 0-3.297.984-4.656 2.43a6.451 6.451 0 00-.02.02L20.6 6l.019-.021c.895-.934 1.762-1.4 2.722-1.4 1.034 0 2.001.488 2.84 1.343l.019.02 1.987-1.78-.02-.02z" fill="#0082FB"></path><path d="M30.019 12.656c-.075-4.333-1.588-8.207-3.833-10.495l-.02-.02-1.987 1.78.02.02c1.689 1.74 2.848 4.975 2.953 8.714v.028l2.867.001v-.028z" fill="url(#lobe-icons-meta-brand-fill-7)" transform="translate(2 2)"></path><path d="M30.02 12.687l-.001-.028h-2.867v.027c.005.176.008.352.008.53 0 1.02-.152 1.843-.461 2.438l-.014.027 2.137 2.228.016-.024c.776-1.2 1.183-2.868 1.183-4.89 0-.103 0-.205-.002-.308z" fill="url(#lobe-icons-meta-brand-fill-8)" transform="translate(2 2)"></path><path d="M26.7 15.65l-.015.026c-.267.502-.649.836-1.147.982l.974 3.079a4.372 4.372 0 00.547-.229 4.45 4.45 0 001.709-1.522 4.18 4.18 0 00.055-.081l.015-.025-2.139-2.23z" fill="url(#lobe-icons-meta-brand-fill-9)" transform="translate(2 2)"></path><path d="M24.917 16.742c-.327 0-.615-.049-.897-.175l-.998 3.151c.56.192 1.16.279 1.826.279.615 0 1.179-.092 1.69-.27l-.974-3.077c-.21.063-.428.094-.647.092z" fill="url(#lobe-icons-meta-brand-fill-10)" transform="translate(2 2)"></path><path d="M22.92 15.667l-.018-.021-2.296 2.393.02.02c.797.853 1.56 1.382 2.423 1.672l.997-3.15c-.364-.156-.716-.44-1.125-.914z" fill="url(#lobe-icons-meta-brand-fill-11)" transform="translate(2 2)"></path><path d="M22.902 15.643c-.688-.802-1.54-2.139-2.88-4.3l-1.746-2.92-.014-.023-2.026 3.046.014.024 1.237 2.087c1.2 2.012 2.177 3.467 3.12 4.48l.019.02 2.295-2.392a2.945 2.945 0 01-.019-.022z" fill="url(#lobe-icons-meta-brand-fill-12)" transform="translate(2 2)"></path></g></svg>`
14+
},
15+
{
16+
name: 'Microsoft',
17+
svg: `<svg viewBox="0 0 23 23">
18+
<rect x="1" y="1" width="10" height="10" fill="#f25022"/>
19+
<rect x="12" y="1" width="10" height="10" fill="#7fba00"/>
20+
<rect x="1" y="12" width="10" height="10" fill="#00a4ef"/>
21+
<rect x="12" y="12" width="10" height="10" fill="#ffb900"/>
22+
</svg>`
23+
},
24+
{
25+
name: 'Amazon',
26+
svg: `<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 524 524"><rect width="512" height="512" fill="#f90" rx="15%"/><path d="M283 187c-62 2-121 19-121 81 0 43 26 64 61 64 31 0 51-12 68-30 8 11 10 16 24 27 3 2 8 2 10-1l31-27c4-3 2-8 0-10-7-11-15-19-15-39v-64c0-27 2-52-18-70-17-16-38-20-62-21-53-1-88 28-93 62-1 6 4 9 7 9l37 5c6 1 9-4 10-8 6-22 29-28 43-23 20 6 18 29 18 45zm-36 105c-15 0-25-13-25-30 1-36 29-42 61-42v18c0 32-17 54-36 54zm168 106c13-11 26-38 25-57 0-7-1-8-8-10-13-4-46-5-62 10-3 3-2 5 1 5 11-2 45-6 50 2 4 7-8 35-12 47-2 5 2 6 6 3zM58 342c96 91 247 94 345 25 7-4 0-12-6-9a376 376 0 0 1-335-21c-4-3-8 2-4 5z" fill="#fff"/></svg>`
27+
}
28+
]
829
---
930
1031
<section class="built-by-section py-20">
@@ -20,13 +41,19 @@ const companies = [
2041
</p>
2142
</div>
2243
23-
<div class="companies-grid">
24-
{companies.map((company) => (
25-
<div class="company-card">
26-
<span class="company-logo">{company.logo}</span>
27-
<span class="company-name">{company.name}</span>
28-
</div>
29-
))}
44+
<div class="companies-section">
45+
<p class="companies-label">Our contributors come from</p>
46+
<div class="companies-container">
47+
<div class="companies-line">
48+
{companies.map((company, index) => (
49+
<>
50+
<div class="company-logo" title={company.name} set:html={company.svg}>
51+
</div>
52+
{index < companies.length - 1 && <span class="company-separator">×</span>}
53+
</>
54+
))}
55+
</div>
56+
</div>
3057
</div>
3158
3259
<div class="team-message">
@@ -52,51 +79,74 @@ const companies = [
5279
background-clip: text;
5380
}
5481
55-
.companies-grid {
56-
display: grid;
57-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
58-
gap: 2rem;
82+
.companies-section {
5983
margin: 3rem 0;
60-
max-width: 800px;
61-
margin-left: auto;
62-
margin-right: auto;
6384
}
6485
65-
.company-card {
66-
display: flex;
67-
flex-direction: column;
68-
align-items: center;
69-
gap: 0.75rem;
70-
padding: 2rem;
71-
background: var(--color-card);
72-
border-radius: 1rem;
73-
border: 1px solid var(--color-border);
74-
transition: all var(--transition-base);
86+
.companies-label {
87+
text-align: center;
88+
color: var(--color-text-secondary);
89+
font-size: 0.875rem;
90+
text-transform: uppercase;
91+
letter-spacing: 0.1em;
92+
margin-bottom: 1.5rem;
93+
font-weight: 500;
7594
}
7695
77-
.company-card:hover {
78-
transform: translateY(-4px);
79-
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
80-
border-color: var(--color-primary);
96+
.companies-container {
97+
display: flex;
98+
justify-content: center;
8199
}
82100
83-
html.dark .company-card:hover {
84-
box-shadow: 0 12px 24px rgba(170, 178, 255, 0.1);
101+
.companies-line {
102+
display: flex;
103+
align-items: center;
104+
gap: 2rem;
105+
flex-wrap: wrap;
106+
justify-content: center;
85107
}
86108
87109
.company-logo {
88-
font-size: 2.5rem;
110+
width: 60px;
111+
height: 60px;
89112
display: flex;
90113
align-items: center;
91114
justify-content: center;
92-
width: 60px;
93-
height: 60px;
115+
opacity: 0.8;
116+
transition: all var(--transition-base);
117+
cursor: pointer;
118+
}
119+
120+
.company-logo:hover {
121+
opacity: 1;
122+
transform: scale(1.1);
123+
}
124+
125+
.company-logo svg {
126+
width: 100%;
127+
height: 100%;
128+
}
129+
130+
.company-separator {
131+
font-size: 1.5rem;
132+
color: var(--color-text-muted);
133+
opacity: 0.3;
134+
font-weight: 300;
94135
}
95136
96-
.company-name {
97-
font-weight: 600;
98-
color: var(--color-text);
99-
font-size: 1.125rem;
137+
@media (max-width: 768px) {
138+
.companies-line {
139+
gap: 1.5rem;
140+
}
141+
142+
.company-logo {
143+
width: 50px;
144+
height: 50px;
145+
}
146+
147+
.companies-label {
148+
font-size: 0.75rem;
149+
}
100150
}
101151
102152
.team-message {

0 commit comments

Comments
 (0)