diff --git a/components/tribe/famousMembers.tsx b/components/tribe/famousMembers.tsx deleted file mode 100644 index 97dd9789..00000000 --- a/components/tribe/famousMembers.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { FunctionComponent } from "react"; -import styles from "../../styles/jointhetribe.module.css"; -import Member from "./member"; -import MembersSkeleton from "./membersSkeleton"; -import famousTribeMembers from "../../public/tribe/famousTribeMembers.json"; - -const FamousMembers: FunctionComponent = () => { - // Twitter call - // const [famousTribeMembers, setFamousTribeMembers] = useState([]); - - // useEffect(() => { - // fetch("/api/twitter/get_famous_members") - // .then((res) => res.json()) - // .then((res: Member[]) => { - // setFamousTribeMembers(res); - // }); - // }, []); - - return ( -
- {famousTribeMembers?.data?.length === 0 ? ( - - ) : ( - famousTribeMembers?.data.map((member, index) => ( -
- -
- )) - )} -
- ); -}; - -export default FamousMembers; diff --git a/components/tribe/hoverMember.tsx b/components/tribe/hoverMember.tsx deleted file mode 100644 index f5d34556..00000000 --- a/components/tribe/hoverMember.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React, { FunctionComponent } from "react"; -import styles from "../../styles/jointhetribe.module.css"; - -type hoverMemberProps = { - member: Member; - showAvatar?: boolean; - showName?: boolean; -}; - -const HoverMember: FunctionComponent = ({ - member, - showAvatar = false, - showName = true, -}) => { - return ( -
- {showName ? ( -

{member.name}

- ) : null} - {showAvatar ? ( -
- {`@${member.name}'s -
- ) : null} -

{member.description}

-
-
- Following -

{member.public_metrics.following_count}

-
-
- Followers -

{member.public_metrics.followers_count}

-
-
- {/*
- External link - -
*/} -
- ); -}; - -export default HoverMember; diff --git a/components/tribe/member.tsx b/components/tribe/member.tsx deleted file mode 100644 index 959a848f..00000000 --- a/components/tribe/member.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { useMediaQuery } from "@mui/material"; -import React, { FunctionComponent, useState } from "react"; -import styles from "../../styles/jointhetribe.module.css"; -import { changeTwitterProfilePic } from "../../utils/stringService"; -import ModalMessage from "../UI/modalMessage"; -import HoverMember from "./hoverMember"; -import MemberTooltip from "./memberTooltip"; - -type MemberProps = { - member: Member; -}; - -const Member: FunctionComponent = ({ member }) => { - const matches = useMediaQuery("(max-width:1024px)"); - const [openModal, setOpenModal] = useState(false); - - return ( -
- }> - setOpenModal(true) : undefined} - alt={`@${member.name}'s Twitter avatar`} - src={changeTwitterProfilePic(member.profile_image_url)} - className={styles.tribeMemberAvatar} - /> - - } - closeModal={() => setOpenModal(false)} - open={openModal} - /> -
- ); -}; - -export default Member; diff --git a/components/tribe/memberTooltip.tsx b/components/tribe/memberTooltip.tsx deleted file mode 100644 index 15c526bd..00000000 --- a/components/tribe/memberTooltip.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import { styled } from "@mui/material/styles"; -import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"; - -const MemberTooltip = styled(({ className, ...props }: TooltipProps) => ( - -))(() => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: "#fff9f0", - color: "#402d28", - maxWidth: 300, - fontSize: "1rem", - border: "1px solid #bf9e7b", - borderRadius: 20, - textAlign: "center", - display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "center", - }, -})); - -export default MemberTooltip; diff --git a/components/tribe/membersSkeleton.tsx b/components/tribe/membersSkeleton.tsx deleted file mode 100644 index e35d1c50..00000000 --- a/components/tribe/membersSkeleton.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Skeleton, useMediaQuery } from "@mui/material"; -import React, { FunctionComponent } from "react"; - -const MembersSkeleton: FunctionComponent = () => { - const matches = useMediaQuery("(max-width:1024px)"); - - return ( - - ); -}; - -export default MembersSkeleton; diff --git a/components/tribe/searchMembers.tsx b/components/tribe/searchMembers.tsx deleted file mode 100644 index e843b1c2..00000000 --- a/components/tribe/searchMembers.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { FunctionComponent } from "react"; -import { useEffect } from "react"; -import { useState } from "react"; -import { cleanUsername } from "../../utils/stringService"; -import InputAction from "../UI/inputAction"; -import Member from "./member"; -import styles from "../../styles/jointhetribe.module.css"; -import MembersSkeleton from "./membersSkeleton"; - -const SearchMembers: FunctionComponent = () => { - const [username, setUsername] = useState(""); - const [loadingState, setLoadingState] = useState(false); - const [wasSearch, setWasSearch] = useState(false); - - const [followingTribeMembers, setFollowingTribeMembers] = useState< - Member[] | undefined - >(); - - function onSearch(username: string): void { - setLoadingState(true); - setWasSearch(true); - setUsername(cleanUsername(username)); - } - - useEffect(() => { - if (username) { - fetch(`/api/twitter/get_user_following?username=${username}`) - .then((response) => response.json()) - .then((data) => { - setFollowingTribeMembers(data); - setLoadingState(false); - }) - .catch(() => { - setLoadingState(false); - }); - } - }, [username]); - - return ( -
- - {loadingState ? ( - - ) : followingTribeMembers && followingTribeMembers.length > 0 ? ( -
- {followingTribeMembers?.map((member, index) => ( -
- -
- ))} -
- ) : followingTribeMembers && followingTribeMembers.length === 0 ? ( -
- You don't have any friends in the tribe yet. -
- ) : wasSearch ? ( -
- An error occurred while trying to fetch your Tribe friends. Please try - another name. -
- ) : null} -
- ); -}; - -export default SearchMembers; diff --git a/pages/api/twitter/get_famous_members.ts b/pages/api/twitter/get_famous_members.ts deleted file mode 100644 index 5d1a460a..00000000 --- a/pages/api/twitter/get_famous_members.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { NextApiRequest, NextApiResponse } from "next"; -import famousTribeMemberIDs from "../../../public/tribe/famousTribeMemberIDs.json"; - -// I use this cause twitter SDK don't work for some reason -async function fetchTwitterData(): Promise { - const myHeaders = new Headers(); - myHeaders.append("Authorization", `Bearer ${process.env.TWITTER_TOKEN}`); - - const requestOptions: RequestInit = { - method: "GET", - headers: myHeaders, - redirect: "follow", - }; - - const params = new URLSearchParams({ ids: famousTribeMemberIDs.join(",") }); - - const response: Member[] | Error = await fetch( - `https://api.twitter.com/2/users/?${params}&user.fields=profile_image_url,description,public_metrics`, - requestOptions - ) - .then((response) => response.json()) - .then((result) => result.data as Member[]) - .catch((error) => new Error(error)); - - return response; -} - -export default async function handler( - req: NextApiRequest, - res: NextApiResponse -) { - const twitterData = await fetchTwitterData(); - - res.status(200).json(twitterData); -} diff --git a/pages/jointhetribe.tsx b/pages/jointhetribe.tsx deleted file mode 100644 index 5e1fd5eb..00000000 --- a/pages/jointhetribe.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from "react"; -import type { NextPage } from "next"; -import styles from "../styles/jointhetribe.module.css"; -import Button from "../components/UI/button"; -import { useAccount } from "@starknet-react/core"; -import { useDomainFromAddress } from "../hooks/naming"; -import FamousMembers from "../components/tribe/famousMembers"; -import TextCopy from "../components/UI/textCopy"; -import SearchMembers from "../components/tribe/searchMembers"; - -const JoinTheTribe: NextPage = () => { - const { address } = useAccount(); - const mainDomain = useDomainFromAddress(address ?? ""); - - return ( -
-
-

Join the tribe

-
-

Wear the stark signal

- -
- -
- -
- leaf -
-
- leaf -
-
- leaf -
-
- leaf -
-
-

Get your tribe NFT !

-
-

- Join the tribe to mint your free tribe shield NFT ! -

-
-
-
- - {/*
- Hunter NFT (level 1) -
-

Only for tribe members

*/} -
-
-
- -
-
- -
-

Me and the tribe

-

- Do we know each other ? Find out how many of us you follow. -

- -
-
- ); -}; - -export default JoinTheTribe; diff --git a/public/tribe/famousTribeMemberIDs.json b/public/tribe/famousTribeMemberIDs.json deleted file mode 100644 index 2d77f9e2..00000000 --- a/public/tribe/famousTribeMemberIDs.json +++ /dev/null @@ -1,20 +0,0 @@ -[ - "1489498059042172931", - "1255853529866145794", - "513341499", - "1357425812870483968", - "1445771493544189952", - "274459806", - "1492492979474341890", - "971039337017171970", - "1176445262", - "22988299", - "736235680603492352", - "769174790536097792", - "789473368550567936", - "449689918", - "302521256", - "1508724053762351106", - "741595862", - "1212955216414310400" -] diff --git a/public/tribe/famousTribeMembers.json b/public/tribe/famousTribeMembers.json deleted file mode 100644 index f5108e36..00000000 --- a/public/tribe/famousTribeMembers.json +++ /dev/null @@ -1,238 +0,0 @@ -{ - "data": [ - { - "public_metrics": { - "followers_count": 5618, - "following_count": 1487, - "tweet_count": 10574, - "listed_count": 196 - }, - "id": "1489498059042172931", - "description": "✨Founder of The Recap of the Previous Day on Starknet and Stark Cafe\n✨Co-founder of HDS with @Nadai02010\n\n✨Le Monde de Starknet x @StarknetEco", - "username": "0xNurstar", - "name": "Nurstar.stark.eth βœ¨πŸ’πŸ¦‡πŸ”Š", - "profile_image_url": "https://pbs.twimg.com/profile_images/1625555935560192003/QgjlZMXe_normal.png" - }, - { - "public_metrics": { - "followers_count": 4696, - "following_count": 416, - "tweet_count": 1410, - "listed_count": 45 - }, - "id": "1255853529866145794", - "description": "Cofounder @starknet_id | Initiated https://t.co/LFXRI0V18K | Delegate @starknet", - "username": "Fricoben", - "name": "fricoben.stark", - "profile_image_url": "https://pbs.twimg.com/profile_images/1589987429792075781/kggEcp2T_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 15120, - "following_count": 785, - "tweet_count": 7016, - "listed_count": 213 - }, - "id": "513341499", - "description": "Exploration Lead at @StarkWareLtd . @StarkNet . Ethereum Core Dev . #Bitcoin #Ethereum Call me Bardock (father of @KakarotZkEvm)", - "username": "dimahledba", - "name": "abdel.stark ✨ 🐺 - πŸ¦‡πŸ”Š", - "profile_image_url": "https://pbs.twimg.com/profile_images/1626622639274962944/wMXBIfTU_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 5959, - "following_count": 1141, - "tweet_count": 1122, - "listed_count": 41 - }, - "id": "1357425812870483968", - "description": "CEO & Co-Founder @ScreenshotLabs | Building the Future of Web3 | Everything is about People & Long Term | @Starknet Delegate | @Everai #767 | πŸ¦‡πŸ”Š | ✨🐺", - "username": "Briyan_Cessac", - "name": "Briyan.stark | Screenshot Labs", - "profile_image_url": "https://pbs.twimg.com/profile_images/1647283131941093377/95t9NJbd_normal.png" - }, - { - "public_metrics": { - "followers_count": 1249, - "following_count": 416, - "tweet_count": 1901, - "listed_count": 36 - }, - "id": "1445771493544189952", - "description": "Cairo wizard @nethermindeth πŸ¦‡πŸ”Š | Delegate @Starknet | CS @InsaDeLyon", - "username": "eniwhere_", - "name": "eni.stark (🐺, ✨)", - "profile_image_url": "https://pbs.twimg.com/profile_images/1553793415854309377/SohhqW2f_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 5291, - "following_count": 1246, - "tweet_count": 1960, - "listed_count": 23 - }, - "id": "274459806", - "description": "CTO @ScreenshotLabs - Building @TheEverai & TheArkProject - I mainly share stuff related to web3 on Twitter so follow me there if you like πŸ‘€", - "username": "remiroyc", - "name": "remi.everai.stark", - "profile_image_url": "https://pbs.twimg.com/profile_images/1609607630372175872/YkO1LFY3_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 1339, - "following_count": 1392, - "tweet_count": 2329, - "listed_count": 40 - }, - "id": "1492492979474341890", - "description": "If a man says he is not afraid of getting rekd, he is either lying or is a Gurkha //STARKPILLED// Starknet Delegate // @StarknetEco //", - "username": "crypto_gurkha", - "name": "Gurkha.Stark πŸ¦‡πŸ”Š", - "profile_image_url": "https://pbs.twimg.com/profile_images/1647498116302512132/Ye-Zpd8T_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 3047, - "following_count": 1743, - "tweet_count": 3257, - "listed_count": 83 - }, - "id": "971039337017171970", - "description": "Building @briqNFT with @wraitii. Ex-@Ledger. Governance Facilitator and self-proclaimed head shitposter at @StarkNetFndn. Vibes operator at @dojostarknet", - "username": "sylvechv", - "name": "Sylve", - "profile_image_url": "https://pbs.twimg.com/profile_images/1631619975109550082/JPyoVXWK_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 1041, - "following_count": 910, - "tweet_count": 669, - "listed_count": 38 - }, - "id": "1176445262", - "description": "Building @FrensLands | BJJ blue belt, light feather | πŸ₯‰ World adult |πŸ₯‰Pan adult | πŸ₯‡ France adult", - "username": "IrisdeVillars", - "name": "Iris.stark", - "profile_image_url": "https://pbs.twimg.com/profile_images/1625887179103764480/18RSTKa1_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 6618, - "following_count": 4472, - "tweet_count": 6279, - "listed_count": 362 - }, - "id": "22988299", - "description": "γ‚―γƒͺγ‚Ήγƒˆγƒ• | Co-Founder & Head of Product @everai Building the Ark Project on @starknet", - "username": "0xKwiss", - "name": "kwiss.stark", - "profile_image_url": "https://pbs.twimg.com/profile_images/1657076286760665088/YPWFhdUW_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 1174, - "following_count": 370, - "tweet_count": 2319, - "listed_count": 32 - }, - "id": "736235680603492352", - "description": "co-founder & ceo @kakarotzkevm - eliastaz.eth πŸ–– ethereum, starknet, Cairo, Rust πŸ¦€πŸ—Ό", - "username": "ETazou", - "name": "eliastaz.stark", - "profile_image_url": "https://pbs.twimg.com/profile_images/1627643200629362688/ZlBBojhX_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 694, - "following_count": 209, - "tweet_count": 306, - "listed_count": 14 - }, - "id": "769174790536097792", - "description": "Zk-shitposter πŸ”» Homeless developer πŸ”» Worst #StarkNet buildor\n\n// CoFounder @ruleslabs", - "username": "0xChqrles", - "name": "chqrles.eth πŸ¦‡πŸ”Š", - "profile_image_url": "https://pbs.twimg.com/profile_images/1626619077740339201/Oq-35LTS_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 548, - "following_count": 606, - "tweet_count": 225, - "listed_count": 27 - }, - "id": "789473368550567936", - "description": "20, building @Starknet_ID on Starknet", - "username": "Th0rgal_", - "name": "th0rgal.stark", - "profile_image_url": "https://pbs.twimg.com/profile_images/1418908524357242899/NpGHrnI6_normal.png" - }, - { - "public_metrics": { - "followers_count": 26016, - "following_count": 2614, - "tweet_count": 28374, - "listed_count": 974 - }, - "id": "449689918", - "description": "Marketing Lead @mybraavos, the Smart Contract based Wallet on StarkNet | Member @safaryclub | Top 50 Marketers 2022 | @EthereumzurichπŸ‡¨πŸ‡­| ConnectπŸ‘‡", - "username": "BertBlancheton", - "name": "bertrand.braavos.stark | Web3 Growth & Marketing", - "profile_image_url": "https://pbs.twimg.com/profile_images/1566920555277819904/2Zg-EzBm_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 956, - "following_count": 597, - "tweet_count": 769, - "listed_count": 5 - }, - "id": "302521256", - "description": "Co-founder @Carbonable_io", - "username": "Rmzlb", - "name": "Rmz.stark 🌱🌐 - πŸ¦‡πŸ”Š", - "profile_image_url": "https://pbs.twimg.com/profile_images/1625108335723745282/xJzsAMia_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 307, - "following_count": 390, - "tweet_count": 288, - "listed_count": 15 - }, - "id": "1508724053762351106", - "description": "Creative designer exploring on @Starknet πŸ’«\n\nHead of the duck mafia @DucksEverywher2 on @briqNFT", - "username": "OutSmth", - "name": "OutSmth.stark ✨🧱", - "profile_image_url": "https://pbs.twimg.com/profile_images/1662128471445733376/hpxLumP9_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 991, - "following_count": 404, - "tweet_count": 930, - "listed_count": 32 - }, - "id": "741595862", - "description": "Engineer & Scientist | Co-founder @KakarotZkEvm | DM open", - "username": "ClementWalter", - "name": "clemlaflemme.stark", - "profile_image_url": "https://pbs.twimg.com/profile_images/861691994674016257/1FgftDPx_normal.jpg" - }, - { - "public_metrics": { - "followers_count": 445, - "following_count": 430, - "tweet_count": 524, - "listed_count": 13 - }, - "id": "1212955216414310400", - "description": "@KakarotZkEvm", - "username": "danilowhk2", - "name": "dan.kakarot.stark", - "profile_image_url": "https://pbs.twimg.com/profile_images/1646059109933010944/jM9e_jSa_normal.jpg" - } - ] -} \ No newline at end of file diff --git a/public/tribe/getMembersScript.js b/public/tribe/getMembersScript.js deleted file mode 100644 index 2078b510..00000000 --- a/public/tribe/getMembersScript.js +++ /dev/null @@ -1,37 +0,0 @@ -const axios = require("axios"); -const fs = require("fs"); -const famousTribeMemberIDs = require("./famousTribeMemberIDs.json"); - -async function fetchTwitterData() { - const config = { - method: "get", - url: `https://api.twitter.com/2/users/?ids=${famousTribeMemberIDs.join( - "," - )}&user.fields=profile_image_url,description,public_metrics`, - headers: { - Authorization: `Bearer ${process.env.TWITTER__TOKEN}`, - }, - }; - - let response; - try { - response = await axios(config); - return response.data; - } catch (error) { - console.error(error); - } -} - -async function handler() { - const twitterData = await fetchTwitterData(); - fs.writeFileSync( - "./public/tribe/famousTribeMembers.json", - JSON.stringify(twitterData, null, 2), - (err) => { - if (err) throw err; - console.log("The file has been saved!"); - } - ); -} - -handler(); diff --git a/public/tribe/tribeLevel1.webp b/public/tribe/tribeLevel1.webp deleted file mode 100644 index d1ac28fe..00000000 Binary files a/public/tribe/tribeLevel1.webp and /dev/null differ diff --git a/public/tribe/tribeLevel2.webp b/public/tribe/tribeLevel2.webp deleted file mode 100644 index 7d683710..00000000 Binary files a/public/tribe/tribeLevel2.webp and /dev/null differ diff --git a/public/tribe/tribeLevel3.webp b/public/tribe/tribeLevel3.webp deleted file mode 100644 index 31f54d55..00000000 Binary files a/public/tribe/tribeLevel3.webp and /dev/null differ diff --git a/public/tribe/tribeShield.webp b/public/tribe/tribeShield.webp deleted file mode 100644 index 1819b450..00000000 Binary files a/public/tribe/tribeShield.webp and /dev/null differ diff --git a/styles/jointhetribe.module.css b/styles/jointhetribe.module.css deleted file mode 100644 index f261ab66..00000000 --- a/styles/jointhetribe.module.css +++ /dev/null @@ -1,264 +0,0 @@ -.page { - z-index: 0; - position: relative; - padding-top: 14vh; - padding-bottom: 14vh; - - background-color: var(--background); - overflow: hidden; -} - -.thirdLeaf, -.firstLeaf { - position: absolute; - overflow: hidden; - top: 20%; - width: 400px; - z-index: -1000; - transform: rotate(40deg); - left: -90px; -} - -.thirdLeaf { - top: 60%; -} - -.fourthLeaf, -.secondLeaf { - position: absolute; - overflow: hidden; - top: 30%; - width: 300px; - z-index: -1000; - transform: rotate(-20deg); - right: -150px; -} - -.fourthLeaf { - top: 80%; -} - -.link { - color: var(--primary); - text-decoration: underline; - border-radius: 1em; - padding: 0.1em 1em; -} - -.section1, -.section2, -.section3 { - font-size: 1.5rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0 auto; - max-width: min(1000px, 100%); - align-self: center; -} - -.section1 { - margin-top: 3rem; -} - -.section2 { - margin-top: 10rem; -} - -.section3 { - margin-top: 10rem; -} - -.sbtContainer, -.centeredContainer { - display: flex; - margin-top: 0.5rem; - align-items: center; - justify-content: center; - flex-wrap: wrap; -} - -.sbtContainer { - align-items: flex-start; - margin-bottom: 1rem; - margin-top: 1rem; -} - -.tribeMembersContainer { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; - align-content: center; - margin: 0 auto; - max-width: min(500px, 100%); - align-self: center; -} - -.tribeMembersContainer.famous { - max-width: min(650px, 90vw); -} - -.tribeMembersContainer * { - height: 80px; - width: 80px; - margin: 0; -} - -.tribeMembersContainer.famous * { - height: 90px; - width: 90px; -} - -.avatarContainer { - cursor: pointer; - transform: rotate(-90deg) scale(0.9); - -webkit-mask: url("/mask/hexagon.svg"); - mask: url("/mask/hexagon.svg"); - -webkit-mask-size: 110% 110%; - mask-size: 110% 110%; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-position: center; - mask-position: center; -} - -.tribeMemberAvatar { - border-radius: 50%; - transform: rotate(90deg); - pointer-events: all; -} - -.tribeMemberMenuContainer { - position: absolute; - width: 350px; - background-color: var(--background); - z-index: 10; - border-radius: 1em; - border: 1px solid var(--tertiary); - height: auto !important; - display: flex; - flex-direction: column; -} - -.tribeMemberTitle { - font-size: 1rem; - font-weight: bold; - text-align: center; - margin: 0.5rem; -} - -.tribeMemberMenu { - min-width: 300px; - padding: 1rem; -} - -.tribeMemberMenu a { - color: var(--primary); -} - -.tribeMemberMenu .avatar { - width: 60px; - height: 60px; - border-radius: 50%; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - text-align: center; -} - -.tribeMemberMenu .stats { - display: flex; - margin: 10px 0 0 0; - justify-content: space-between; - width: 100%; -} - -.tribeMemberMenuContainer .tribeMemberMenu .stats { - margin: 10px 0; -} - -.tribeMemberMenu .stats .column { - display: flex; - flex-direction: column; - margin: auto; -} - -.famList { - display: flex; - flex-wrap: wrap; - align-items: flex-start; -} - -.sbtImageContainer { - max-width: 300px; - margin-top: 1rem; -} - -.sbtImage { - height: 300px; - margin: 0.5rem; - border-radius: 20px; -} - -.famContainer svg { - width: 100%; - height: 100%; - object-fit: cover; - transform: translateY(15%) rotate(90deg); -} - -.famContainer h2 { - font-weight: bold; -} - -.claimButtonText { - font-size: 1.5rem; - text-transform: capitalize; -} - -.membersSkeleton { - display: flex; - flex-direction: column; - justify-content: center; - width: 500px; -} - -@media screen and (max-width: 1024px) { - .section1, - .section2, - .section3 { - max-width: 90%; - } - - .tribeMembersContainer * { - height: 60px; - width: 60px; - } - .tribeMembersContainer.famous * { - height: 80px; - width: 80px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - } - - .firstLeaf, - .secondLeaf, - .thirdLeaf, - .fourthLeaf { - visibility: hidden; - } - - .sbt { - margin-bottom: 1rem; - text-align: center; - } - - .sbtImageContainer { - max-width: 100%; - } -}