From 53f41879d188d9196c67e236778172127e1bb553 Mon Sep 17 00:00:00 2001
From: Ocenka <testoviydiman1@gmail.com>
Date: Tue, 5 Aug 2025 23:26:25 +0300
Subject: [PATCH] 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
---
 apps/website/src/app/page.tsx                | 12 ++++++------
 apps/website/src/app/projects/page.tsx       |  6 +++---
 apps/website/src/components/Carousel.tsx     |  2 +-
 apps/website/src/components/InfoCard.tsx     |  4 ++--
 apps/website/src/components/ProjectsList.tsx |  4 ++--
 apps/website/src/components/SectionBlock.tsx |  2 +-
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index f56bd228..c09d1fb1 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -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>
diff --git a/apps/website/src/app/projects/page.tsx b/apps/website/src/app/projects/page.tsx
index fee2c369..812ccee2 100644
--- a/apps/website/src/app/projects/page.tsx
+++ b/apps/website/src/app/projects/page.tsx
@@ -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
diff --git a/apps/website/src/components/Carousel.tsx b/apps/website/src/components/Carousel.tsx
index 9667f0d4..0a82acb3 100644
--- a/apps/website/src/components/Carousel.tsx
+++ b/apps/website/src/components/Carousel.tsx
@@ -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>
 
diff --git a/apps/website/src/components/InfoCard.tsx b/apps/website/src/components/InfoCard.tsx
index eeecb043..1218675a 100644
--- a/apps/website/src/components/InfoCard.tsx
+++ b/apps/website/src/components/InfoCard.tsx
@@ -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>
diff --git a/apps/website/src/components/ProjectsList.tsx b/apps/website/src/components/ProjectsList.tsx
index df37ca2d..7d285385 100644
--- a/apps/website/src/components/ProjectsList.tsx
+++ b/apps/website/src/components/ProjectsList.tsx
@@ -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) => (
diff --git a/apps/website/src/components/SectionBlock.tsx b/apps/website/src/components/SectionBlock.tsx
index 57c81129..76e681ae 100644
--- a/apps/website/src/components/SectionBlock.tsx
+++ b/apps/website/src/components/SectionBlock.tsx
@@ -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>