Demo App - HPE marketing page

[britt6612]

Deploy Preview

marketing page

What does this PR do?

add the start of marketing page

Where should the reviewer start?

kinds/HPEMarketing.tsx

What testing has been done on this PR?

locally

Any background context you want to provide?

Feedback on implementation

1. Overall Issues:

• Heading Sizes & Padding:
  • Heading sizes and padding are consistently smaller than required across multiple sections. We lack larger sizes in our tokens for proper alignment with the marketing page.

---

1. First Second - Button Kind:

Button Kind

• We currently dont have a Button kind to match the design.

---

2. Second Section - Icons & Button Contrast:

• Icons:
  • Icons are too small compared to the marketing design.
• Secondary Button:
  • Button doesn't have enough contrast against the background.

---

3. Video Section - Visual Differences:

• Grommet Video Component:
  • The component visually differs from marketing.

---

4. Introducing HPE Private Cloud AI Section - Icons & Button Mismatch:

• Icons:
  • Icons are too small compared to the marketing page.
• Button Styling:
  • Button doesn’t align with the intended design.

---

5. Products and Technologies from HPE Section - Tabs & Carousel Differences:

• Tabs:
  • Tab styles do not match the marketing design.
• Carousel:
  • If we use Grommet’s carousel, it will look different.

---

6. Architect an AI Advantage Section - Background Color Issue:

• Background Color:
  • We don’t have the exact color required. The closest option, graph-1, doesn’t work as a background color.
  • Action: Find a better match for the background color or explore alternatives.

---

7. Customer Story Section - Tabs, Fonts & Carousel Issues:

• Tabs:
  • Custom tabs with a mismatch in active state styling.
• Font Weights:
  • Some fonts require a font-weight: 900.
• Carousel:
  • Grommet carousel looks different.
• Secondary Button:
  • The button has a border-only style.

---

8. Accelerate Your Journey Section - Heading & Padding:

• Heading Sizes & Padding:
  • Heading sizes and padding are smaller than required.

---

Summary of Actionable Items:

1. Adjust heading sizes and padding across all sections.
2. Increase icon sizes.
3. Fix background color mismatch.

What are the relevant issues?

Closes #4793

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 7e607bc3232bd459c0a1c0e353fd418cf92cfbca

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify[bot]]

✅ Deploy Preview for rad-shortbread-897892 ready!

Name	Link
🔨 Latest commit	7e607bc3232bd459c0a1c0e353fd418cf92cfbca
🔍 Latest deploy log	https://app.netlify.com/sites/rad-shortbread-897892/deploys/67e1948bb19f3600083b41e1
😎 Deploy Preview	https://deploy-preview-4802--rad-shortbread-897892.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	7e607bc3232bd459c0a1c0e353fd418cf92cfbca
🔍 Latest deploy log	https://app.netlify.com/sites/unrivaled-bublanina-3a9bae/deploys/67e1948b7b0c0500089a38bd
😎 Deploy Preview	https://deploy-preview-4802--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.