Skip to content

Commit dc1dcec

Browse files
olaszakosolaszakos
committed
asia alliance page
1 parent 6b9572b commit dc1dcec

File tree

9 files changed

+544
-250
lines changed

9 files changed

+544
-250
lines changed

‎src/components/Common/Breadcrumbs.tsx

+16-8
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,41 @@ function isLink(link: LinkType | LabelType): link is LinkType {
1515
return "href" in link;
1616
}
1717

18-
const Breadcrumbs: React.FC<{ links: [...LinkType[], LabelType] }> = ({
19-
links,
20-
}) => {
18+
const Breadcrumbs: React.FC<{
19+
links: [...LinkType[], LabelType];
20+
theme?: "light" | "dark";
21+
}> = ({ links, theme = "light" }) => {
22+
const clickableColor =
23+
theme === "light" ? "text-infinite hover: text-black" : "text-white/60";
24+
const unclickableColor = theme === "light" ? "text-black" : "text-white";
25+
const arrowColor = theme === "light" ? "text-black/20" : "text-white/20";
26+
2127
return (
2228
<div className="flex flex-row gap-2 items-center tw-title-navigation-on-page whitespace-nowrap max-w-full overflow-hidden">
2329
<Link
2430
to={"/"}
25-
className="flex text-infinite hover:text-black"
31+
className={`flex ${clickableColor}`}
2632
aria-label="Go to home page"
2733
>
2834
<HomeIcon className="w-6 h-6 flex-shrink-0" />
2935
</Link>
3036
{links.map((link) =>
3137
isLink(link) ? (
3238
<React.Fragment key={link.text}>
33-
<RightArrowIcon className="w-4 h-4 text-black opacity-20 flex-shrink-0" />
39+
<RightArrowIcon className={`w-4 h-4 flex-shrink-0 ${arrowColor}`} />
3440
<Link
3541
to={link.href}
36-
className="text-infinite text-center hover:text-black hover:no-underline"
42+
className={`text-center hover:no-underline ${clickableColor}`}
3743
>
3844
{link.text}
3945
</Link>
4046
</React.Fragment>
4147
) : (
4248
<React.Fragment key={link.text}>
43-
<RightArrowIcon className="w-4 h-4 text-black opacity-20 flex-shrink-0" />
44-
<span className="text-ellipsis overflow-hidden whitespace-nowrap">
49+
<RightArrowIcon className={`w-4 h-4 flex-shrink-0 ${arrowColor}`} />
50+
<span
51+
className={`text-ellipsis overflow-hidden whitespace-nowrap ${unclickableColor}`}
52+
>
4553
{link.text}
4654
</span>
4755
</React.Fragment>

‎src/components/Community/Gallery.tsx

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { motion } from "framer-motion";
2+
import React from "react";
3+
import transitions from "@site/static/transitions.json";
4+
import AnimateSpawn from "../Common/AnimateSpawn";
5+
6+
export type GalleryItem = {
7+
image: string;
8+
title?: string;
9+
description?: string;
10+
};
11+
12+
const GalleryShowcase: React.FC<{
13+
gallery: GalleryItem[];
14+
}> = ({ gallery }) => {
15+
const topRow = gallery.slice(0, Math.floor(gallery.length / 2));
16+
const bottomRow = gallery.slice(Math.floor(gallery.length / 2));
17+
return (
18+
<AnimateSpawn
19+
className="overflow-hidden relative h-[280px] md:h-[560px]"
20+
variants={transitions.container}
21+
>
22+
<div className="flex gap-1 md:gap-3 absolute left-1/2 min-w-max nft-marquee-right">
23+
{topRow.map((item) => (
24+
<img
25+
key={item.image}
26+
src={item.image}
27+
loading="lazy"
28+
alt=""
29+
className="w-40 md:w-80 aspect-square object-cover object-center rounded-xl"
30+
/>
31+
))}
32+
{topRow.map((item) => (
33+
<img
34+
key={item.image}
35+
src={item.image}
36+
loading="lazy"
37+
alt=""
38+
className="w-40 md:w-80 aspect-square object-cover object-center rounded-xl"
39+
/>
40+
))}
41+
</div>
42+
43+
<div className="flex gap-1 md:gap-3 absolute top-40 md:top-80 mt-6 md:mt-8 left-1/2 min-w-max nft-marquee-left">
44+
{bottomRow.map((item) => (
45+
<img
46+
key={item.image}
47+
src={item.image}
48+
loading="lazy"
49+
alt=""
50+
className="w-24 md:w-52 aspect-square object-cover object-center rounded-xl"
51+
/>
52+
))}
53+
{bottomRow.map((item) => (
54+
<img
55+
key={item.image}
56+
src={item.image}
57+
loading="lazy"
58+
alt=""
59+
className="w-24 md:w-52 aspect-square object-cover object-center rounded-xl"
60+
/>
61+
))}
62+
</div>
63+
</AnimateSpawn>
64+
);
65+
};
66+
67+
const Gallery: React.FC<{
68+
gallery: GalleryItem[];
69+
children: React.ReactNode;
70+
}> = ({ gallery, children }) => {
71+
return (
72+
<>
73+
<AnimateSpawn
74+
className="container-10 relative mb-20"
75+
el={motion.section}
76+
variants={transitions.container}
77+
>
78+
{children}
79+
</AnimateSpawn>
80+
81+
<GalleryShowcase gallery={gallery} />
82+
</>
83+
);
84+
};
85+
86+
export default Gallery;

‎src/components/Community/Globe.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import createGlobe from "cobe";
2+
import React, { useEffect, useRef } from "react";
3+
import { Hub } from "./Hubs";
4+
5+
const Globe: React.FC<{
6+
hubs: Hub[];
7+
className?: string;
8+
}> = ({ className, hubs }) => {
9+
const canvasRef = useRef<HTMLCanvasElement>();
10+
11+
useEffect(() => {
12+
let phi = 0;
13+
14+
canvasRef.current.width =
15+
canvasRef.current.clientWidth * window.devicePixelRatio;
16+
canvasRef.current.height =
17+
canvasRef.current.clientHeight * window.devicePixelRatio;
18+
19+
const globe = createGlobe(canvasRef.current, {
20+
devicePixelRatio: window.devicePixelRatio,
21+
width: canvasRef.current.width,
22+
height: canvasRef.current.height,
23+
phi: 0,
24+
theta: 0.42,
25+
dark: 1,
26+
diffuse: 1.75,
27+
mapSamples: 43000,
28+
mapBrightness: 7.3,
29+
baseColor: [0.23, 0.0, 0.72], // #3b00b9 with each byte represented as 0..1
30+
markerColor: [1, 1, 1],
31+
// glowColor: [0.23, 0.0, 0.72],
32+
glowColor: [0.8, 0.8, 0.8],
33+
opacity: 0.41,
34+
// longitude latitude
35+
// { location: [37.7595, -122.4367], size: 0.03 },
36+
markers: hubs.map((hub) => ({
37+
location: hub.coordinates,
38+
size: 0.03,
39+
})),
40+
onRender: (state) => {
41+
// Called on every animation frame.
42+
// `state` will be an empty object, return updated params.
43+
state.phi = phi;
44+
phi += 0.0025;
45+
state.width = canvasRef.current.clientWidth * window.devicePixelRatio;
46+
state.height = canvasRef.current.clientHeight * window.devicePixelRatio;
47+
},
48+
});
49+
50+
return () => {
51+
globe.destroy();
52+
};
53+
}, []);
54+
55+
return <canvas className={className} ref={canvasRef}></canvas>;
56+
};
57+
58+
export default Globe;

‎src/components/Community/Hubs.tsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from "react";
2+
import transitions from "@site/static/transitions.json";
3+
import { motion } from "framer-motion";
4+
import Link from "@docusaurus/Link";
5+
6+
export type Hub = {
7+
name: string;
8+
location?: string;
9+
description: string;
10+
image: string;
11+
link: string;
12+
coordinates?: [number, number];
13+
};
14+
15+
export const HubCard: React.FC<{
16+
hub: Hub;
17+
}> = ({ hub }) => {
18+
return (
19+
<motion.div
20+
className="overflow-hidden rounded-xl flex flex-col bg-white"
21+
variants={transitions.item}
22+
>
23+
<img
24+
src={hub.image}
25+
alt={hub.name}
26+
loading="lazy"
27+
className="h-[200px] object-cover"
28+
/>
29+
{/* <div className="tw-title-navigation-on-page rounded-full mx-4 px-3 py-1 bg-white/60 backdrop-blur-2xl -translate-y-1/2 inline-flex gap-3 items-center self-start">
30+
{hub.location}
31+
<svg
32+
width="16"
33+
height="16"
34+
viewBox="0 0 16 16"
35+
fill="none"
36+
xmlns="http://www.w3.org/2000/svg"
37+
>
38+
<path
39+
d="M8 13.9332L11.2998 10.6333C13.1223 8.8109 13.1223 5.85611 11.2998 4.03366C9.4774 2.21122 6.52261 2.21122 4.70017 4.03366C2.87772 5.85611 2.87772 8.8109 4.70017 10.6333L8 13.9332ZM8 15.8188L3.75736 11.5762C1.41421 9.23296 1.41421 5.434 3.75736 3.09086C6.10051 0.747709 9.89947 0.747709 12.2427 3.09086C14.5858 5.434 14.5858 9.23296 12.2427 11.5762L8 15.8188ZM8 8.66683C8.7364 8.66683 9.33333 8.0699 9.33333 7.3335C9.33333 6.59712 8.7364 6.00016 8 6.00016C7.2636 6.00016 6.66667 6.59712 6.66667 7.3335C6.66667 8.0699 7.2636 8.66683 8 8.66683ZM8 10.0002C6.52724 10.0002 5.33333 8.80623 5.33333 7.3335C5.33333 5.86074 6.52724 4.66683 8 4.66683C9.47273 4.66683 10.6667 5.86074 10.6667 7.3335C10.6667 8.80623 9.47273 10.0002 8 10.0002Z"
40+
fill="black"
41+
/>
42+
</svg>
43+
</div> */}
44+
<div className="flex items-center justify-between mb-8 mx-6 mt-8 gap-4">
45+
<h3 className="tw-heading-6 mb-0">{hub.name}</h3>
46+
{/* <p className="flex-1 tw-paragraph-sm text-black/60 mx-6 mb-3">
47+
{hub.description}
48+
</p> */}
49+
<p className="mb-0">
50+
<Link className="button-round-icon" href={hub.link}>
51+
<svg
52+
width="16"
53+
height="21"
54+
viewBox="0 0 16 21"
55+
fill="none"
56+
xmlns="http://www.w3.org/2000/svg"
57+
>
58+
<path
59+
fillRule="evenodd"
60+
clipRule="evenodd"
61+
d="M6.60718 13.9316H9.45173V20.3247H6.60718V13.9316Z"
62+
fill="currentColor"
63+
/>
64+
<path
65+
fillRule="evenodd"
66+
clipRule="evenodd"
67+
d="M0.030082 7.38579H4.86365L1.42228 4.12851L3.31864 2.19604L6.59276 5.54477V0.779785H9.43732V5.54357L12.7102 2.19484L14.6066 4.12731L11.1652 7.38458H16V10.0787H11.1351L14.5922 13.4275L12.6958 15.3154L7.9994 10.6118L3.303 15.3154L1.40663 13.4275L4.86365 10.0787H0V7.38579H0.030082Z"
68+
fill="currentColor"
69+
/>
70+
</svg>
71+
</Link>
72+
</p>
73+
</div>
74+
</motion.div>
75+
);
76+
};

‎src/components/Community/gallery-images.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { GalleryItem } from "./Gallery";
2+
3+
export const communityGallery: GalleryItem[] = [
4+
{ image: "/img/community/image-000.webp" },
5+
{ image: "/img/community/image-001.webp" },
6+
{ image: "/img/community/image-002.webp" },
7+
{ image: "/img/community/image-003.webp" },
8+
{ image: "/img/community/image-004.webp" },
9+
{ image: "/img/community/image-005.webp" },
10+
{ image: "/img/community/image-006.webp" },
11+
{ image: "/img/community/image-007.webp" },
12+
{ image: "/img/community/image-008.webp" },
13+
{ image: "/img/community/image-009.webp" },
14+
{ image: "/img/community/image-010.webp" },
15+
{ image: "/img/community/image-011.webp" },
16+
{ image: "/img/community/image-012.webp" },
17+
{ image: "/img/community/image-013.webp" },
18+
{ image: "/img/community/image-014.webp" },
19+
{ image: "/img/community/image-015.webp" },
20+
{ image: "/img/community/image-016.webp" },
21+
{ image: "/img/community/image-017.webp" },
22+
{ image: "/img/community/image-018.webp" },
23+
{ image: "/img/community/image-019.webp" },
24+
{ image: "/img/community/image-020.webp" },
25+
26+
{ image: "/img/community/image-021.webp" },
27+
{ image: "/img/community/image-022.webp" },
28+
{ image: "/img/community/image-023.webp" },
29+
{ image: "/img/community/image-024.webp" },
30+
{ image: "/img/community/image-025.webp" },
31+
{ image: "/img/community/image-026.webp" },
32+
{ image: "/img/community/image-027.webp" },
33+
{ image: "/img/community/image-028.webp" },
34+
{ image: "/img/community/image-029.webp" },
35+
{ image: "/img/community/image-030.webp" },
36+
{ image: "/img/community/image-031.webp" },
37+
];

0 commit comments

Comments
 (0)