Fix invalid components in Chakra UI (#964)

* Update page.tsx

* Update page.tsx

* Update SectionBlock.tsx

* Update InfoCard.tsx

* Update ProjectsList.tsx

* Update Carousel.tsx

* Update InfoCard.tsx

* Update InfoCard.tsx
This commit is contained in:
Ocenka
2025-08-05 23:26:25 +03:00
committed by GitHub
parent 4089bbedc7
commit 53f41879d1
6 changed files with 15 additions and 15 deletions

View File

@@ -131,7 +131,7 @@ export default function Home() {
>
1
</Heading>
<VStack align="left">
<VStack align="start">
<Text
fontSize={{ base: "18px", md: "20px" }}
fontFamily={sora.style.fontFamily}
@@ -152,7 +152,7 @@ export default function Home() {
>
3
</Heading>
<VStack align="left">
<VStack align="start">
<Text
fontSize={{ base: "18px", md: "20px" }}
fontFamily={sora.style.fontFamily}
@@ -181,7 +181,7 @@ export default function Home() {
>
2
</Heading>
<VStack align="left">
<VStack align="start">
<Text
fontSize={{ base: "18px", md: "20px" }}
fontFamily={sora.style.fontFamily}
@@ -203,7 +203,7 @@ export default function Home() {
>
4
</Heading>
<VStack align="left">
<VStack align="start">
<Text
fontSize={{ base: "18px", md: "20px" }}
fontFamily={sora.style.fontFamily}
@@ -287,10 +287,10 @@ export default function Home() {
Upcoming Events
</Heading>
<VStack align="left" spacing="10" maxH="600px" overflowY="auto">
<VStack align="start" spacing="10" maxH="600px" overflowY="auto">
{events.map((event) => (
<Link href={event.link} key={event.name} isExternal>
<VStack align="left">
<VStack align="start">
<Heading fontSize={{ base: "20px", md: "24px" }}>
{event.date} | {event.name}
</Heading>

View File

@@ -5,7 +5,7 @@ import ProjectsList from "../../components/ProjectsList"
export default function Projects() {
return (
<>
<VStack pt="170px" pb="56px" w="100%" justify="end" align="left" spacing="40" position="relative">
<VStack pt="170px" pb="56px" w="100%" justify="end" align="start" spacing="40" position="relative">
<Box
zIndex="-1"
top="0"
@@ -25,7 +25,7 @@ export default function Projects() {
/>
</Box>
<VStack align="left" spacing="4" pb="16">
<VStack align="start" spacing="4" pb="16">
<Heading fontSize={{ base: "40px", sm: "46px", md: "72px" }}>Built with Semaphore</Heading>
<Text fontSize={{ base: "16px", sm: "18px", md: "20px" }}>
@@ -35,7 +35,7 @@ export default function Projects() {
</VStack>
</VStack>
<ProjectsList w="100%" align="left" pt="16" spacing="14" />
<ProjectsList w="100%" align="start" pt="16" spacing="14" />
<VStack my="128px">
<ActionCard

View File

@@ -46,7 +46,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
}, [index, size])
return (
<VStack align="left" w="full" spacing="16" {...props}>
<VStack align="start" w="full" spacing="16" {...props}>
<HStack justify={type === "projects" ? "center" : "space-between"}>
<Heading fontSize={{ base: "30px", md: "44px" }}>{title}</Heading>

View File

@@ -23,9 +23,9 @@ export default function InfoCard({ texts }: InfoCardProps) {
height={{ base: "auto", md: "474px" }}
>
<CardBody padding="0">
<VStack align="left" spacing="10" maxH="500" overflowY="auto">
<VStack align="start" spacing="10" maxH="500" overflowY="auto">
{texts.map((text) => (
<VStack key={text.title} align="left">
<VStack key={text.title} align="start">
<Heading textAlign="left" fontSize={{ base: "20px", md: "24px" }}>
{text.title}
</Heading>

View File

@@ -52,7 +52,7 @@ export default function ProjectsList(props: any) {
return (
<VStack {...props}>
<VStack align="left" spacing="6">
<VStack align="start" spacing="6">
<Text fontSize="20">Projects created by</Text>
<HStack spacing="4" flexWrap="wrap">
@@ -83,7 +83,7 @@ export default function ProjectsList(props: any) {
</HStack>
</VStack>
<VStack align="left" spacing="6" ref={viewToScrollRef}>
<VStack align="start" spacing="6" ref={viewToScrollRef}>
<Text fontSize="20">Category</Text>
<HStack spacing="3" flexWrap="wrap">
{getProjectCategories(sortedProjects).map((category) => (

View File

@@ -23,7 +23,7 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
return (
<VStack w="full">
<Flex flexDir={{ base: "column", lg: "row" }} gap="52px" w="full">
<VStack align="left" gap="32px" flex="1">
<VStack align="start" gap="32px" flex="1">
<Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
{title}
</Text>