startup program landing update (#4251)

Co-authored-by: Jonas Daniels <[email protected]>
Co-authored-by: Manan Tank <[email protected]>

apps/dashboard/src/components/community/FastTrackChains.tsx

@@ -0,0 +1,101 @@
+import { Box, SimpleGrid } from "@chakra-ui/react";
+import { ChakraNextImage } from "components/Image";
+import { Heading, Text } from "tw-components";
+
+const chainsIcons = [
+  {
+    id: "treasure-icon",
+    src: require("../../../public/assets/startup-program/coinbase-icon.png"),
+    alt: "chain",
+  },
+  {
+    id: "chain-icon",
+    src: require("../../../public/assets/startup-program/chain-icon1.png"),
+    alt: "chain",
+  },
+  {
+    id: "chain-layer",
+    src: require("../../../public/assets/startup-program/layer3-icon.png"),
+    alt: "chain",
+  },
+];
+
+const chainsIcons2 = [
+  {
+    id: "treasure-icon",
+    src: require("../../../public/assets/startup-program/chain-icon2.png"),
+    alt: "chain",
+  },
+  {
+    id: "chain-icon",
+    src: require("../../../public/assets/startup-program/chain-icon3.png"),
+    alt: "chain",
+  },
+  {
+    id: "chain-layer",
+    src: require("../../../public/assets/startup-program/chain-icon4.png"),
+    alt: "chain",
+  },
+];
+const FastTrackChains = () => {
+  return (
+    <Box display={{ base: "block", lg: "none" }}>
+      <SimpleGrid columns={3} spacing={0}>
+        {chainsIcons.map((image) => (
+          <Box
+            key={image.id}
+            height="auto"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <ChakraNextImage
+              src={image.src}
+              alt={image.alt}
+              height="auto"
+              objectFit="contain"
+              maxW="87px"
+            />
+          </Box>
+        ))}
+      </SimpleGrid>
+      <Box p="10px" maxW="545px" my="80px">
+        <Heading fontSize="32px" textAlign="center" mb="20px">
+          Fast track your application
+        </Heading>
+        <Text
+          mt={4}
+          fontSize="14px"
+          opacity={{ base: 0.7, lg: 1 }}
+          color="#fff"
+          fontWeight="medium"
+          textAlign="center"
+        >
+          Are you building on any of these ecosystems? If so, apply now to get
+          fast tracked to the next cohort.
+        </Text>
+      </Box>
+      <SimpleGrid columns={3} spacing={0}>
+        {chainsIcons2.map((image) => (
+          <Box
+            key={image.id}
+            height="auto"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <ChakraNextImage
+              src={image.src}
+              alt={image.alt}
+              height="auto"
+              objectFit="contain"
+              maxW="87px"
+            />
+          </Box>
+        ))}
+      </SimpleGrid>
+    </Box>
+  );
+};
+
+export default FastTrackChains;

apps/dashboard/src/components/community/PartnersSection.tsx

@@ -0,0 +1,69 @@
+import { Flex } from "@chakra-ui/react";
+import { ChakraNextImage } from "components/Image";
+
+const partnersCompanies = [
+  {
+    maxWidth: { base: "60px", lg: "80px" },
+    src: require("../../../public/assets/partners/cpg.png"),
+  },
+  {
+    maxWidth: { base: "100px", lg: "185px" },
+    src: require("../../../public/assets/partners/coinbaseventures.png"),
+  },
+  {
+    maxWidth: { base: "100px", lg: "160px" },
+    src: require("../../../public/assets/partners/finc.png"),
+  },
+  {
+    maxWidth: { base: "100px", lg: "160px" },
+    src: require("../../../public/assets/partners/optimism.png"),
+  },
+  {
+    maxWidth: { base: "100px", lg: "165px" },
+    src: require("../../../public/assets/partners/polygon.png"),
+  },
+  {
+    maxWidth: { base: "100px", lg: "150px" },
+    src: require("../../../public/assets/partners/techstars.png"),
+  },
+  {
+    maxWidth: { base: "100px", lg: "160px" },
+    src: require("../../../public/assets/partners/haun.png"),
+  },
+  {
+    maxWidth: { base: "100px", lg: "160px" },
+    src: require("../../../public/assets/partners/monad.png"),
+  },
+  {
+    maxWidth: { base: "150px", lg: "200px" },
+    src: require("../../../public/assets/partners/aws.png"),
+  },
+  {
+    maxWidth: { base: "150px", lg: "200px" },
+    src: require("../../../public/assets/partners/avalanche_white.png"),
+  },
+];
+
+const PartnersSection = () => {
+  return (
+    <Flex
+      alignItems="center"
+      justifyContent="center"
+      flexWrap="wrap"
+      gap={10}
+      mt="24px"
+    >
+      {partnersCompanies.slice(0, 10).map((partner, idx) => (
+        <ChakraNextImage
+          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+          key={idx}
+          maxW={partner.maxWidth}
+          src={partner.src}
+          alt="partner"
+        />
+      ))}
+    </Flex>
+  );
+};
+
+export default PartnersSection;

apps/dashboard/src/pages/community/three-box-layout.tsx → apps/dashboard/src/components/community/StartupCards.tsx

@@ -2,7 +2,7 @@ import { Box, Flex } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { Heading, Text } from "tw-components";
 
-const ThreeBoxLayout = () => {
+const StartupCard = () => {
   const credits = {
     maxWidth: "252px",
     src: require("../../../public/assets/startup-program/buildandscale-image.png"),
@@ -24,42 +24,26 @@ const ThreeBoxLayout = () => {
     text: "Get connected to experts in the ecosystem, including proven founders, operators, VCs, angel investors and mentors who help founders in our program navigate challenges and opportunities.",
   };
 
-  const gradientOne = {
-    src: require("../../../public/assets/startup-program/gradient-1.png"),
-  };
-
   const cubeTopleft = {
     src: require("../../../public/assets/startup-program/cube-topleft.png"),
   };
 
-  const gradientThree = {
-    src: require("../../../public/assets/startup-program/gradient-3.png"),
+  const gradientPink = {
+    src: require("../../../public/assets/startup-program/gradient-1.png"),
   };
 
   return (
     <Flex direction={{ base: "column", md: "row" }} wrap="wrap" gap={4} p={4}>
-      {/* Gradient Box */}
-      <Box position="absolute" top="312px" left="-238px" zIndex="-1">
-        <ChakraNextImage
-          src={gradientOne.src}
-          alt="description"
-          opacity={0.7}
-          display={{ base: "none", md: "block" }}
-        />
-      </Box>
       {/* Cube topleft */}
-      <Box position="absolute" top="1050px" left="-280" zIndex="-1">
+      <Box
+        position="absolute"
+        top="600px"
+        left="-280"
+        zIndex="-1"
+        display={{ base: "none", lg: "block" }}
+      >
         <ChakraNextImage src={cubeTopleft.src} alt="description" maxW="500px" />
       </Box>
-      {/* Gradient Box */}
-      <Box position="absolute" top="80px" right="-400px" zIndex="1">
-        <ChakraNextImage
-          src={gradientThree.src}
-          alt="description"
-          maxW="1000px"
-          opacity={0.7}
-        />
-      </Box>
 
       <Flex
         direction="column"
@@ -69,13 +53,30 @@ const ThreeBoxLayout = () => {
         alignItems={{ base: "stretch", md: "stretch" }}
         minWidth={{ base: "100%", md: "415px" }}
       >
+        {/* pink gradient */}
+        <Box
+          position="absolute"
+          top="-20%"
+          left="-30%"
+          zIndex="-1"
+          display={{ base: "none", lg: "block" }}
+        >
+          <ChakraNextImage
+            src={gradientPink.src}
+            maxW="100%"
+            height="auto"
+            objectFit="contain"
+            alt="gradient"
+            opacity={0.4}
+          />
+        </Box>
+
         {/* Credits Box */}
         <Box
           display="flex"
           flexDirection={{ base: "column", lg: "row" }}
           alignItems="center"
           justifyContent="space-between"
-          color="white"
           bg="#131418"
           borderRadius="8px"
           border="1px solid"
@@ -92,13 +93,17 @@ const ThreeBoxLayout = () => {
             alignSelf="flex-end"
             p={6}
           >
-            <Heading fontSize={{ base: "22px", lg: "24px" }} fontWeight="bold">
+            <Heading
+              fontSize={{ base: "22px", lg: "24px" }}
+              fontWeight="bold"
+              letterSpacing="-0.025em"
+            >
               {credits.title}
             </Heading>
             <Text
               mt={4}
               fontSize="14px"
-              opacity={{ base: 0.7, lg: 1 }}
+              opacity={0.7}
               color="#fff"
               fontWeight="medium"
             >
@@ -127,7 +132,6 @@ const ThreeBoxLayout = () => {
           flexDirection={{ base: "column", lg: "row" }}
           alignItems="center"
           justifyContent="space-between"
-          color="white"
           bg="#131418"
           borderRadius="8px"
           border="1px solid"
@@ -144,13 +148,17 @@ const ThreeBoxLayout = () => {
             textAlign="left"
             p={6}
           >
-            <Heading fontSize={{ base: "22px", lg: "24px" }} fontWeight="bold">
+            <Heading
+              fontSize={{ base: "22px", lg: "24px" }}
+              fontWeight="bold"
+              letterSpacing="-0.025em"
+            >
               {community.title}
             </Heading>
             <Text
               mt={4}
               fontSize="14px"
-              opacity={{ base: 0.7, lg: 1 }}
+              opacity={0.7}
               color="#fff"
               fontWeight="medium"
             >
@@ -163,10 +171,11 @@ const ThreeBoxLayout = () => {
             display="flex"
             alignItems="center"
             justifyContent="center"
+            height="100%"
           >
             <ChakraNextImage
-              width={{ base: "80%", lg: "100%" }}
-              height={{ base: "auto", lg: "300px" }}
+              width="100%"
+              height="100%"
               objectFit="cover"
               src={community.src}
               alt="community"
@@ -181,13 +190,12 @@ const ThreeBoxLayout = () => {
         flexDirection="column"
         alignItems="center"
         justifyContent="flex-start"
-        color="white"
         bg="#131418"
         borderRadius="8px"
         border="1px solid"
         borderColor="#26282F"
-        width={{ base: "100%", md: "491px" }}
-        minHeight={{ base: "361px", md: "100%" }}
+        width={{ base: "100%", md: "100%", lg: "491px" }}
+        minHeight={{ base: "auto", md: "auto", lg: "361px" }}
         borderTopLeftRadius="8px"
       >
         <Flex
@@ -215,13 +223,17 @@ const ThreeBoxLayout = () => {
           </Box>
 
           <Box p={6} width="100%" mt={{ base: "0px", md: "30px" }}>
-            <Heading fontSize={{ base: "22px", md: "24px" }} fontWeight="bold">
+            <Heading
+              fontSize={{ base: "22px", md: "24px" }}
+              fontWeight="bold"
+              letterSpacing="-0.025em"
+            >
               {partners.title}
             </Heading>
             <Text
-              mt={{ base: 4, md: 0 }}
+              mt={4}
               fontSize="14px"
-              opacity={{ base: 0.7, md: 1 }}
+              opacity={0.7}
               color="#fff"
               fontWeight="medium"
             >
@@ -234,4 +246,4 @@ const ThreeBoxLayout = () => {
   );
 };
 
-export default ThreeBoxLayout;
+export default StartupCard;