From 591b1773edcb1b6bdafe4dec7f929eaebd750e55 Mon Sep 17 00:00:00 2001 From: Sonia Sandler <66797193+SoniaSandler@users.noreply.github.com> Date: Mon, 22 Sep 2025 07:09:22 -0400 Subject: [PATCH] chore: add 3m downloads banner to the website (#13873) * chore: add 3m downloads banner to the website Signed-off-by: Sonia Sandler * chore: update design Signed-off-by: Sonia Sandler * chore: resize images Signed-off-by: Sonia Sandler * chore: update images links and apply reviews Signed-off-by: Sonia Sandler * chore: update images links and remove local images Signed-off-by: Sonia Sandler --- website/src/components/3MBanner.tsx | 53 +++++++++++++++++++++++++++++ website/src/pages/index.tsx | 36 ++++++++++++++------ website/tailwind.config.js | 14 ++++++++ 3 files changed, 93 insertions(+), 10 deletions(-) create mode 100644 website/src/components/3MBanner.tsx diff --git a/website/src/components/3MBanner.tsx b/website/src/components/3MBanner.tsx new file mode 100644 index 00000000000..afebbec8268 --- /dev/null +++ b/website/src/components/3MBanner.tsx @@ -0,0 +1,53 @@ +import React from 'react'; + +function Banner(): JSX.Element { + return ( +
+
+ 3 balloon + 0 balloon + 0 balloon + 0 balloon + 0 balloon + 0 balloon + 0 balloon +
+
+ DOWNLOADS. Proven in the real world.{' '} + + Celebrate! + +
+
+ ); +} + +export default Banner; diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index c0b72bb687e..860cbfb526c 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -5,8 +5,8 @@ import Layout from '@theme/Layout'; import ThemedImage from '@theme/ThemedImage'; import React from 'react'; +import Banner from '../components/3MBanner'; import { CNCFCommunityBanner } from '../components/CNCFCommunityBanner'; -import CommunityBanner from '../components/CommunityBanner'; import { DownloadClientLinks, DownloadGenericLinks } from '../components/DownloadButton'; import { ExpandableFAQ } from '../components/ExpandableFAQ'; import { ReadTheDocsButton } from '../components/ReadTheDocsButton'; @@ -19,14 +19,30 @@ function Hero(): JSX.Element {
-

- Best Free & Open Source Tool for Containers & Kubernetes -

-

- The best free and open source tool for developers to work with containers and Kubernetes. Simplify - container management, streamline Kubernetes workflows, and transition from local development to production - with ease. -

+
+ + +

+ Best Free & Open Source Tool for Containers & Kubernetes +

+
+
+ +

+ The best free and open source tool for developers to work with containers and Kubernetes. Simplify + container management, streamline Kubernetes workflows, and transition from local development to + production with ease. +

+
{/* With client mode, provides the link to the client browser */} }> @@ -436,7 +452,7 @@ export default function Home(): JSX.Element { title="Podman Desktop - Containers and Kubernetes" description="Podman Desktop - An open source graphical tool for developing on containers and Kubernetes"> - + diff --git a/website/tailwind.config.js b/website/tailwind.config.js index 65e74342511..51e4db28544 100644 --- a/website/tailwind.config.js +++ b/website/tailwind.config.js @@ -16,6 +16,20 @@ module.exports = { sans: ['Montserrat', ...defaultTheme.fontFamily.sans], }, extend: {}, + keyframes: { + float: { + '0%, 100%': { transform: 'translateY(0)' }, + '50%': { transform: 'translateY(-10px)' }, + }, + 'float-diagonal': { + '0%, 100%': { transform: 'translate(0,0)' }, + '50%': { transform: 'translate(3px, -7px)' }, + }, + }, + animation: { + float: 'float 3s ease-in-out infinite', + 'float-diagonal': 'float-diagonal 4s ease-in-out infinite', + }, }, }, plugins: [],