1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
|
import {
// Github,
Medium,
Notion,
Reddit,
Twitter,
} from "@repo/ui/components/icons";
import Image from "next/image";
const Github = ({ className }: { className?: string }) => {
return (
<svg
fill="#ffffff"
className={className}
version="1.1"
id="svg2"
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 2500 676.1"
xmlSpace="preserve"
>
<g id="layer1" transform="translate(-85.59 -376.905)">
<g id="g3012" transform="matrix(1.25 0 0 -1.25 85.59 539.248)">
<g id="g3014" transform="scale(.1)">
<g id="g3016">
<g id="g3018">
<path
id="path3024"
className="st0"
d="M3852.1-1016.2H2171.4c-43.4 0-78.5-35.2-78.5-78.6v-821.7c0-43.4 35.2-78.7 78.5-78.7H2827V-3016s-147.2-50.2-554.2-50.2c-480.2 0-1150.9 175.5-1150.9 1650.5 0 1475.3 698.5 1669.4 1354.2 1669.4 567.6 0 812.2-99.9 967.8-148.1 48.9-15 94.1 33.7 94.1 77.1l187.5 793.9c0 20.3-6.9 44.7-30 61.3-63.2 45.1-448.7 260.8-1422.6 260.8C1150.9 1298.8 0 821.4 0-1473.3S1317.6-4110 2428-4110c919.4 0 1477.1 392.9 1477.1 392.9 23 12.7 25.5 44.8 25.5 59.6v2562.7c0 43.4-35.2 78.6-78.5 78.6"
/>
<path
id="path3026"
className="st0"
d="M12513.4 1023.8c0 43.7-34.6 79-78 79h-946.3c-43.2 0-78.4-35.3-78.4-79l.3-1828.8H9936v1828.8c0 43.7-34.8 79-78.1 79h-946.3c-43.1 0-78.2-35.3-78.2-79V-3928c0-43.7 35.1-79.2 78.2-79.2h946.3c43.3 0 78.1 35.6 78.1 79.2v2118h1475l-2.6-2118c0-43.7 35.1-79.2 78.4-79.2h948.6c43.4 0 78 35.6 78.1 79.2v4951.8"
/>
<path
id="path3028"
className="st0"
d="M5637.8 374c0 340.7-273.2 616.1-610.2 616.1-336.7 0-610.1-275.4-610.1-616.1 0-340.4 273.4-616.5 610.1-616.5 337 0 610.2 276.1 610.2 616.5"
/>
<path
id="path3030"
className="st0"
d="M5570.1-2883.4v2285.8c0 43.4-35 78.9-78.3 78.9h-943.3c-43.3 0-82-44.6-82-88v-3274.8c0-96.3 60-124.9 137.6-124.9H5454c93.2 0 116.1 45.8 116.1 126.4v996.6"
/>
<path
id="path3032"
className="st0"
d="M16109.8-526.2h-939.1c-43.1 0-78.1-35.5-78.1-79.2v-2428s-238.5-174.5-577.2-174.5c-338.6 0-428.4 153.6-428.4 485.2v2117.4c0 43.7-35 79.2-78.1 79.2h-953.1c-43 0-78.3-35.5-78.3-79.2V-2883c0-984.8 548.8-1225.7 1303.9-1225.7 619.4 0 1118.8 342.2 1118.8 342.2s23.8-180.3 34.5-201.7c10.8-21.3 38.8-42.9 69.1-42.9l606.3 2.7c43 0 78.3 35.6 78.3 79l-.3 3324.1c.1 43.6-35 79.1-78.3 79.1"
/>
<path
id="path3034"
className="st0"
d="M18306-3205c-325.7 9.9-546.6 157.7-546.6 157.7v1568.1s218 133.6 485.4 157.5c338.2 30.3 664-71.9 664-878.5-.1-850.6-147.1-1018.5-602.8-1004.8zm370.4 2790c-533.4 0-896.1-238-896.1-238v1676.8c0 43.7-34.9 79-78.1 79h-949c-43.1 0-78.2-35.3-78.2-79V-3928c0-43.7 35.1-79.2 78.3-79.2h658.4c29.7 0 52.1 15.3 68.7 42.1 16.4 26.6 40 228.3 40 228.3s388.1-367.7 1122.6-367.7c862.4 0 1357 437.5 1357 1963.8 0 1526.2-789.9 1725.7-1323.6 1725.7"
/>
<path
id="path3036"
className="st0"
d="M8289.9-518.3H7580l-1.1 937.8c0 35.5-18.3 53.2-59.3 53.2h-967.3c-37.6 0-57.8-16.5-57.8-52.7v-969.1s-484.8-117-517.5-126.5c-32.6-9.5-56.7-39.6-56.7-75.5v-609c0-43.8 35-79.1 78.3-79.1h496v-1465c0-1088.2 763.3-1195.1 1278.4-1195.1 235.3 0 516.9 75.6 563.3 92.8 28.1 10.3 44.4 39.4 44.4 71l.8 669.9c0 43.7-36.9 79-78.5 79-41.4 0-147.2-16.8-256.1-16.8-348.7 0-466.8 162.1-466.8 372v1392.2H8290c43.3 0 78.3 35.3 78.3 79.1v762.8c-.1 43.8-35.2 79-78.4 79"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
);
};
const NotionText = ({ className }: { className?: string }) => {
return (
<svg
className={className}
version="1.0"
fill="#ffffff"
id="katman_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 600 400"
xmlSpace="preserve"
>
<style type="text/css"></style>
<path
d="M283.2,228.4v-39.7h0.7l28.6,39.7h9v-58.3h-10v39.6h-0.7l-28.6-39.6h-9v58.3L283.2,228.4L283.2,228.4z M349.8,229.3
c13.2,0,21.3-8.6,21.3-23c0-14.3-8.1-23-21.3-23c-13.1,0-21.3,8.7-21.3,23C328.6,220.7,336.6,229.3,349.8,229.3z M349.8,220.9
c-7,0-11-5.3-11-14.6c0-9.2,4-14.6,11-14.6c7,0,11,5.4,11,14.6C360.8,215.6,356.8,220.9,349.8,220.9z M380.2,173.4v11.1h-7v8h7v24.1
c0,8.6,4,12,14.2,12c1.9,0,3.8-0.2,5.3-0.5v-7.8c-1.2,0.1-2,0.2-3.4,0.2c-4.2,0-6.1-1.9-6.1-6.3v-21.7h9.5v-8h-9.5v-11.1
L380.2,173.4L380.2,173.4z M405.7,228.4h10v-44.2h-10V228.4z M410.7,176.9c3.3,0,6-2.7,6-6c0-3.4-2.7-6.1-6-6.1c-3.3,0-6,2.7-6,6.1
C404.7,174.2,407.4,176.9,410.7,176.9L410.7,176.9z M443.1,229.3c13.2,0,21.3-8.6,21.3-23c0-14.3-8.1-23-21.3-23
c-13.1,0-21.3,8.7-21.3,23C421.8,220.7,429.8,229.3,443.1,229.3z M443.1,220.9c-7,0-11-5.3-11-14.6c0-9.2,4-14.6,11-14.6
c6.9,0,11,5.4,11,14.6C454,215.6,450,220.9,443.1,220.9z M470.3,228.4h10v-25.7c0-6.5,3.8-10.6,9.7-10.6c6.1,0,8.9,3.4,8.9,10.1
v26.2h10v-28.6c0-10.6-5.4-16.5-15.2-16.5c-6.6,0-11,3-13.1,8h-0.7v-7.1h-9.7C470.3,184.2,470.3,228.4,470.3,228.4z"
/>
<g>
<path
className="st0"
d="M120,152.1c4.7,3.8,6.4,3.5,15.2,2.9l82.9-5c1.8,0,0.3-1.8-0.3-2l-13.8-9.9c-2.6-2-6.2-4.4-12.9-3.8l-80.2,5.9
c-2.9,0.3-3.5,1.8-2.3,2.9L120,152.1z M125,171.4v87.2c0,4.7,2.3,6.4,7.6,6.1l91.1-5.3c5.3-0.3,5.9-3.5,5.9-7.3v-86.6
c0-3.8-1.5-5.9-4.7-5.6l-95.2,5.6C126.2,165.8,125,167.6,125,171.4L125,171.4z M214.9,176.1c0.6,2.6,0,5.3-2.6,5.6l-4.4,0.9v64.4
c-3.8,2-7.3,3.2-10.3,3.2c-4.7,0-5.9-1.5-9.4-5.9l-28.7-45.1v43.6l9.1,2c0,0,0,5.3-7.3,5.3l-20.2,1.2c-0.6-1.2,0-4.1,2-4.7l5.3-1.5
v-57.6l-7.3-0.6c-0.6-2.6,0.9-6.4,5-6.7l21.7-1.5l29.9,45.6V184l-7.6-0.9c-0.6-3.2,1.8-5.6,4.7-5.9L214.9,176.1z M104.2,132.2
l83.5-6.1c10.2-0.9,12.9-0.3,19.3,4.4l26.6,18.7c4.4,3.2,5.9,4.1,5.9,7.6v102.7c0,6.4-2.3,10.2-10.5,10.8l-96.9,5.9
c-6.2,0.3-9.1-0.6-12.3-4.7L100.1,246c-3.5-4.7-5-8.2-5-12.3v-91.3C95.1,137.1,97.5,132.8,104.2,132.2z"
/>
</g>
</svg>
);
};
const MediumText = ({ className }: { className?: string }) => {
return (
<svg
className={className}
fill="#ffffff"
version="1.1"
id="layer"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 652 652"
xmlSpace="preserve"
>
<path
d="M112,321.5c0,25-20.1,45.3-45,45.3s-45-20.3-45-45.3s20.1-45.3,45-45.3S112,296.5,112,321.5 M161.3,321.5
c0,23.5-10.1,42.6-22.5,42.6c-12.4,0-22.5-19.1-22.5-42.6s10.1-42.6,22.5-42.6C151.2,278.9,161.3,297.9,161.3,321.5 M181.5,321.5
c0,21.1-3.5,38.2-7.9,38.2c-4.4,0-7.9-17.1-7.9-38.2s3.5-38.2,7.9-38.2S181.5,300.4,181.5,321.5 M305.6,280.1l0.1,0v-1h-25.6
L256.4,335l-23.8-55.8h-27.6v1l0.1,0c4.7,1.1,7,2.6,7,8.3v66.4c0,5.7-2.4,7.2-7,8.3l-0.1,0v1h18.7v-1l-0.1,0c-4.7-1.1-7-2.6-7-8.3
v-62.5l30.5,71.8h1.7l31.4-73.8v66.2c-0.4,4.5-2.7,5.9-7,6.8l-0.1,0v1h32.6v-1l-0.1,0c-4.2-1-6.6-2.3-7-6.8l0-68h0
C298.6,282.8,301,281.2,305.6,280.1 M320.5,324.1c0.5-11.9,4.8-20.5,12-20.7c2.2,0,4.1,0.8,5.5,2.2c3.1,3,4.5,9.2,4.3,18.5H320.5z
M320.2,327.4h38.2v-0.2c-0.1-9.1-2.7-16.2-7.8-21.1c-4.4-4.2-10.9-6.5-17.8-6.5h-0.2c-3.6,0-7.9,0.9-11,2.4
c-3.5,1.6-6.6,4.1-9.2,7.3c-4.2,5.2-6.7,12.1-7.3,20c0,0.2,0,0.5-0.1,0.7c0,0.2,0,0.4,0,0.7c-0.1,1.1-0.1,2.2-0.1,3.3
c0.4,17.8,10,32,27.1,32c15,0,23.7-10.9,25.9-25.6l-1.1-0.4c-3.8,7.9-10.7,12.7-18.5,12.1C327.6,351.3,319.4,340.5,320.2,327.4
M401.5,351.5c-1.3,3-3.9,4.6-7.4,4.6s-6.7-2.4-9-6.8c-2.4-4.7-3.7-11.3-3.7-19.2c0-16.3,5.1-26.9,13-26.9c3.3,0,5.9,1.6,7.1,4.5
V351.5z M426.9,363.2c-4.7-1.1-7-2.7-7-8.7v-79.3l-28.4,8.4v1l0.2,0c3.9-0.3,6.6,0.2,8.1,1.6c1.2,1.1,1.8,2.8,1.8,5.2v10.9
c-2.8-1.8-6.1-2.7-10.2-2.7c-8.2,0-15.7,3.4-21.1,9.7c-5.6,6.5-8.6,15.4-8.6,25.8c0,18.5,9.1,30.9,22.6,30.9
c7.9,0,14.3-4.3,17.2-11.7v9.8H427v-1L426.9,363.2z M451.2,286c0-5.8-4.3-10.1-10.1-10.1c-5.7,0-10.2,4.4-10.2,10.1
s4.5,10.1,10.2,10.1C446.8,296.1,451.2,291.8,451.2,286 M457.9,363.2c-4.7-1.1-7-2.7-7-8.7h0v-54.6l-25.5,7.3v1l0.2,0
c5.5,0.5,7,2.4,7,8.8v47.2H458v-1L457.9,363.2z M523.1,363.2c-4.7-1.1-7-2.7-7-8.7v-54.6l-24.2,7.1v1l0.1,0c4.5,0.5,5.8,2.5,5.8,8.9
v34.5c-1.5,3-4.3,4.7-7.7,4.9c-5.5,0-8.6-3.7-8.6-10.5v-45.9l-25.5,7.3v1l0.2,0c5.5,0.5,7,2.4,7,8.8v29.2c0,2,0.2,4.1,0.5,6.1l0.5,2
c2.2,7.7,7.8,11.8,16.6,11.8c7.5,0,14.1-4.6,17-11.9v10.1h25.5v-1L523.1,363.2z M622,364.2v-1l-0.1,0c-5.1-1.2-7-3.4-7-7.9v-37.1
c0-11.6-6.5-18.5-17.4-18.5c-7.9,0-14.6,4.6-17.2,11.7c-2-7.6-7.9-11.7-16.7-11.7c-7.7,0-13.7,4-16.2,10.9v-10.7l-25.5,7v1l0.2,0
c5.4,0.5,7,2.4,7,8.7v47.6h23.8v-1l-0.1,0c-4-0.9-5.3-2.7-5.3-7.1v-42.6c1.1-2.5,3.2-5.5,7.5-5.5c5.3,0,8,3.7,8,10.9v45.3h23.8v-1
l-0.1,0c-4-0.9-5.3-2.7-5.3-7.1v-37.9c0-1.4-0.1-2.8-0.3-4.2c1.1-2.7,3.4-5.9,7.8-5.9c5.4,0,8,3.6,8,10.9v45.3H622z"
/>
</svg>
);
};
const logos = [
{
name: "Github",
url: <Github className="w-32 brightness-100 invert-1 mx-10" />,
},
{
name: "Medium",
url: <MediumText className="w-52 h brightness-100 invert-1 mx-10" />,
},
{
name: "Notion",
url: <NotionText className="w-52 brightness-100 invert-1 mx-10" />,
},
{
name: "Reddit",
url: (
<Reddit className="w-16 h-16 brightness-100 invert-1 mx-10 grayscale" />
),
},
{
name: "Twitter",
url: <Twitter className="w-16 h-16 brightness-100 invert-1 mx-10" />,
},
];
const AnimatedLogoCloud = () => {
return (
<div className="py-2 max-w-4xl scale-75">
<p className="font-normal tracking-tighter text-base text-gray-100 bg-gradient-to-br from-zinc-400 via-zinc-300 to-zinc-700 bg-clip-text text-transparent text-center mt-4">
Works perfectly with the apps you love.
</p>
{/* <hr className="h-[0.1px] relative bg-white/10" /> */}
<div className="relative bg-page-gradient h-full mx-auto max-w-full">
<div className="absolute z-40 mx-auto h-screen overflow-hidden bg-inherit bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
</div>
<div className="px-4 mx-auto w-full md:px-8 relative ">
<div
className="flex overflow-hidden relative gap-6 p-2 mt-[-40px] group"
style={{
maskImage:
"linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)",
}}
>
{Array(5)
.fill(null)
.map((index) => (
<div
key={`animated-logo-cloud-${index}`}
className="flex flex-row gap-5 justify-around items-center animate-logo-cloud shrink-0"
>
{logos.map((logo, key) => (
<>{logo.url}</>
))}
</div>
))}
</div>
</div>
</div>
);
};
export default AnimatedLogoCloud;
|