Add starknet newsletter home button

_data/pages/home.yml

@@ -7,18 +7,10 @@ blocks:
   - type: group
     blocks:
       - type: home_hero
-      - size: large
-        color: orange
-        variant: community_card
-        orientation: left
-        withIllustration: false
-        title: Community led.
-        type: image_icon_link_card
-        link:
-          custom_title: Get involved.
-          page: 683db5f6-c625-4fe0-a2af-3c5b6af8c2c9
-        description: This website is a community powered guide to the Starknet ecosystem.
-        columns: "4"
+      - type: newsletter_popup
+        title: "Starknet newsletter. "
+        description: "Sign up to receive the latest news and updates from the Starknet
+          ecosystem. "
   - type: group
     blocks:
       - size: large
@@ -51,6 +43,18 @@ blocks:
           operates as a Validity-rollup (or ZK-rollup): it "bundles" many
           transactions and "rolls" them to Ethereum as a single transaction.'
         columns: "4"
+  - size: large
+    color: orange
+    variant: community_card
+    orientation: left
+    withIllustration: false
+    title: Community led.
+    type: image_icon_link_card
+    link:
+      custom_title: Get involved.
+      page: 683db5f6-c625-4fe0-a2af-3c5b6af8c2c9
+    description: This website is a community powered guide to the Starknet ecosystem.
+    columns: "4"
   - type: flex_layout
     heading_variant: h3
     base: 1

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

@@ -21,6 +21,7 @@ type Props = {
   title: string;
   link?: LinkData;
   icon?: string;
+  defaultIcon?: string;
   description?: string;
   locale: string,
   size?: "large" | "small",
@@ -46,6 +47,7 @@ type descriptionVariantType = "body" | "cardBody" | "breadcrumbs" | "footerLink"
 
 export const ImageIconCard = ({
   title,
+  defaultIcon = "/assets/cards/user-group.svg",
   description,
   link,
   icon,
@@ -131,7 +133,7 @@ export const ImageIconCard = ({
           alignItems={{ lg: variant === "large_card" ? "center" : "initial" }}
           height="100%"
         >
-          <ImageIconBox title={title} variant={variant} color={color} size={size} icon={variant === "community_card" ? "/assets/cards/user-group.svg" : icon} withIllustration={withIllustration} />
+          <ImageIconBox title={title} variant={variant} color={color} size={size} icon={variant === "community_card" ? defaultIcon : icon} withIllustration={withIllustration} />
           <Box
             padding={{
               base: variant === "community_card" ? "24px 32px 0 0" : (size === "large" && icon && variant === "image_icon_link_card") ?

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

@@ -42,6 +42,7 @@ export const NewsletterCard = ({
 
       <ImageIconCard 
         columns={4}
+        defaultIcon={'/assets/cards/newsletter.svg'}
         description={description}
         onClick={() => setIsOpen(true)}
         orientation={'left'}