Merge pull request #1790 from starknet-io/feature/add-cards-homepage

Update homepage cards

_data/pages/home.yml

@@ -14,30 +14,77 @@ blocks:
         variant: large_card
         orientation: left
         withIllustration: false
-        title: What is Starknet?
-        icon: /assets/illustration-how-it-works.png
+        title: Unlimited Scale
+        icon: /assets/unlimited-scale.png
         type: image_icon_link_card
         link:
-          page: 93b845d7-5662-4cd4-8c13-3730440880c0
-          custom_title: What is Starknet?
-        description: Starknet is a decentralized layer-2 network that enables Ethereum
-          to scale securely and dapps to achieve unlimited scale for
-          transactions and computation.
+          custom_title: Discover validity rollups
+          custom_internal_link: /learn/what-is-starknet
+        description: Starknet utilizes the power of STARK technology to ensure
+          computational integrity. By validating off-chain transactions with
+          advanced math and cryptography, Starknet overcomes Ethereum’s
+          scalability limitations. Starknet is a Validity Rollup that provides
+          unlimited scale while retaining Ethereum’s security and
+          decentralization.
         columns: "4"
+      - type: flex_layout
+        heading_variant: sm
+        blocks:
+          - size: large
+            color: orange
+            variant: large_card
+            orientation: vertical
+            withIllustration: false
+            title: Superior UX
+            icon: /assets/superior-ux.png
+            type: image_icon_link_card
+            link:
+              custom_title: Dive into native AA
+              custom_internal_link: /posts/developers/native-account-abstraction-opening-blockchain-to-new-possibilities
+            description: "Starknet offers efficient and user-friendly experiences by
+              employing Native Account Abstraction. All accounts are smart
+              accounts: their behavior is determined by their developers rather
+              than at the protocol level. This means unparalleled flexibility in
+              account management. Developers can customize their applications
+              beyond protocol constraints to elevate user experience and
+              security.  "
+            columns: "4"
+          - size: large
+            color: orange
+            variant: large_card
+            orientation: vertical
+            withIllustration: false
+            title: Thriving ecosystem
+            icon: /assets/thriving-ecosystem.png
+            type: image_icon_link_card
+            link:
+              custom_title: The growing Starknet Stack
+              custom_internal_link: /posts/ecosystem/the-starknet-stacks-growth-spurt
+            description: Starknet's meteoric rise as a blockchain ecosystem is fueled by its
+              passionate community of developers, users, and partners. With the
+              Starknet Stack evolving at an astounding pace, this vibrant
+              collective has developed the most decentralized Rollup Stack,
+              enhancing network security, censorship resistance, resilience, and
+              transparency.
+            columns: "4"
+        base: 1
+        md: 2
       - size: large
         color: orange
         variant: large_card
-        orientation: right
+        orientation: left
         withIllustration: false
-        title: How does Starknet scale Ethereum?
-        icon: /assets/illustration-scaling.png
+        title: Creativity Unleashed
+        icon: /assets/creativity-unleased.png
         type: image_icon_link_card
         link:
-          page: 93b845d7-5662-4cd4-8c13-3730440880c0
-          custom_title: How does it work
-        description: 'Starknet uses math and cryptography to securely scale Ethereum. It
-          operates as a Validity-rollup (or ZK-rollup): it "bundles" many
-          transactions and "rolls" them to Ethereum as a single transaction.'
+          custom_title: Build with Cairo
+          custom_external_link: https://www.cairo-lang.org/
+        description: Starknet devs are empowered to code solutions that make a
+          difference. Cairo, Starknet’s native smart contract language, allows
+          developers to push the boundaries of their applications by allowing
+          them to code any kind of business logic. 
 Building with Cairo,
+          developers can let their vision reach its full potential on Starknet.
         columns: "4"
   - type: newsletter_popup
     title: Starknet newsletter

workspaces/cms-config/src/blocks.ts

@@ -434,7 +434,7 @@ export const blocks = [
         widget: "select",
         default: "left",
         required: false,
-        options: ["left", "right"],
+        options: ["left", "right", "vertical"],
       }
     ],
   },
@@ -765,6 +765,54 @@ export const blocks = [
   },
 ] satisfies CmsFieldList["types"];
 
+const flexLayout = {
+  name: "flex_layout",
+  label: "Flex layout",
+  widget: "object" as "object",
+  fields: [
+    {
+      name: "base",
+      widget: "number",
+      required: false,
+    },
+    {
+      name: "md",
+      widget: "number",
+      required: false,
+    },
+    {
+      name: "lg",
+      widget: "number",
+      required: false,
+    },
+    {
+      name: "xl",
+      widget: "number",
+      required: false,
+    },
+    {
+      name: "heading",
+      required: false,
+      widget: "string",
+      crowdin: true
+    },
+    {
+      name: "heading_variant",
+      widget: "select",
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"],
+      required: false,
+      default: "sm",
+    },
+    {
+      name: "blocks",
+      label: "Blocks",
+      widget: "list",
+      types: blocks,
+      default: [],
+    },
+  ],
+} satisfies CmsField; 
+
 export const topLevelBlocks = [
   {
     name: "group",
@@ -775,7 +823,7 @@ export const topLevelBlocks = [
         name: "blocks",
         label: "Blocks",
         widget: "list",
-        types: blocks,
+        types: [...blocks, flexLayout],
         default: [],
       },
     ],
@@ -794,7 +842,7 @@ export const topLevelBlocks = [
         name: "blocks",
         label: "Blocks",
         widget: "list",
-        types: blocks,
+        types: [...blocks, flexLayout],
         default: [],
       },
     ],
@@ -822,57 +870,11 @@ export const topLevelBlocks = [
         name: "blocks",
         label: "Blocks",
         widget: "list",
-        types: blocks,
-        default: [],
-      },
-    ],
-  },
-  {
-    name: "flex_layout",
-    label: "Flex layout",
-    widget: "object",
-    fields: [
-      {
-        name: "base",
-        widget: "number",
-        required: false,
-      },
-      {
-        name: "md",
-        widget: "number",
-        required: false,
-      },
-      {
-        name: "lg",
-        widget: "number",
-        required: false,
-      },
-      {
-        name: "xl",
-        widget: "number",
-        required: false,
-      },
-      {
-        name: "heading",
-        required: false,
-        widget: "string",
-        crowdin: true
-      },
-      {
-        name: "heading_variant",
-        widget: "select",
-        options: ["h1", "h2", "h3", "h4", "h5", "h6"],
-        required: false,
-        default: "sm",
-      },
-      {
-        name: "blocks",
-        label: "Blocks",
-        widget: "list",
-        types: blocks,
+        types: [...blocks, flexLayout],
         default: [],
       },
     ],
   },
+  flexLayout,
   ...blocks,
 ] satisfies CmsFieldList["types"];

workspaces/website/src/components/Card/ImageIconCard.tsx

@@ -37,7 +37,7 @@ type Props = {
   | "cyan"
   | "pink"
   | "grey",
-  orientation?: "left" | "right"
+  orientation?: "left" | "right" | "vertical"
   onClick?: () => void;
 };
 
@@ -129,8 +129,10 @@ export const ImageIconCard = ({
             base: variant === "community_card" ? "24px" : variant === "large_card" ? "24px" : "0",
             md: variant === "community_card" ? "16px" : variant === "large_card" ? "48px" : "0"
           }}
-          {...(orientation === "right" && variant === "large_card" && { justifyContent: "space-between" })}
-          alignItems={{ lg: variant === "large_card" ? "center" : "initial" }}
+          {...(orientation !== "vertical" && variant === "large_card" && {
+            justifyContent: "center"
+          })}
+          alignItems={{ base: 'center', lg: variant === "large_card" ? "center" : "initial" }}
           height="100%"
         >
           <ImageIconBox title={title} variant={variant} color={color} size={size} icon={variant === "community_card" ? defaultIcon : icon} withIllustration={withIllustration} />
@@ -165,7 +167,10 @@ export const ImageIconCard = ({
           >
             <CardBody
               padding="0"
-              {...(variant === "large_card" && { flex: "inherit" })}
+              {...(variant === "large_card" && {
+                flex: "inherit",
+                maxWidth: '460px'
+              })}
             >
               <Stack spacing="3">
                 <Heading variant={titleVariant as titleVariantType} lineHeight="100%" {...(variant === "large_card" && { paddingBottom: "8px" })}>

workspaces/website/src/components/Card/components/ImageIconBox.tsx

@@ -234,7 +234,6 @@ export const ImageIconBox = ({
       </Box> : icon &&
       <Box
         padding={variant === "community_card" ? iconProps.communityCardPadding : iconProps.imagePadding}
-        {...(variant === "large_card" && { flex: "100%" })}
       >
         <ComponentToRender
           {...iconProps}

workspaces/website/src/components/Icons/CardIcons/ImageIcon/ImageIcon.tsx

@@ -1,9 +1,40 @@
+/**
+ * Module dependencies
+ */
 import React from 'react';
 
-const ImageIcon: React.FC<{icon?: string, alt?: string, filter?: string, borderRadius?: string}> = ({ icon, alt = "", filter, borderRadius }) => {
+/**
+ * `Props` type.
+ */
+
+type Props = {
+  icon?: string,
+  alt?: string,
+  filter?: string,
+  borderRadius?: string,
+};
+
+/**
+ * Export `ImageIcon` component.
+ */
+
+const ImageIcon: React.FC<Props> = ({
+  icon,
+  alt = "",
+  filter,
+  borderRadius,
+}) => {
   return (
-    <img style={{filter, borderRadius}} src={icon} alt={alt} />
+    <img
+      style={{
+        borderRadius,
+        filter,
+        maxHeight: '400px'
+      }} 
+      src={icon}
+      alt={alt} 
+    />
   )
 };
 
-export default ImageIcon;
+export default ImageIcon;