mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-04-21 09:37:22 +00:00
chore: add 3m downloads banner to the website (#13873)
* chore: add 3m downloads banner to the website Signed-off-by: Sonia Sandler <ssandler@redhat.com> * chore: update design Signed-off-by: Sonia Sandler <ssandler@redhat.com> * chore: resize images Signed-off-by: Sonia Sandler <ssandler@redhat.com> * chore: update images links and apply reviews Signed-off-by: Sonia Sandler <ssandler@redhat.com> * chore: update images links and remove local images Signed-off-by: Sonia Sandler <ssandler@redhat.com>
This commit is contained in:
Sonia Sandler
GitHub
parent
b9600094ac
commit
591b1773ed
3 changed files with 93 additions and 10 deletions
53
website/src/components/3MBanner.tsx
Normal file
53
website/src/components/3MBanner.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import React from 'react';
|
||||
|
||||
function Banner(): JSX.Element {
|
||||
return (
|
||||
<div className="w-full h-fit px-2 flex flex-row justify-center items-center bg-gradient-to-r from-purple-300 to-purple-700 sm:text-2xl">
|
||||
<div className="relative sm:w-[310px] w-[230px] h-20 shrink-0">
|
||||
<img
|
||||
className="absolute sm:left-0 sm:top-[-10px] sm:w-[76px] left-0 top-[-7px] w-[60px]"
|
||||
alt="3 balloon"
|
||||
src="https://3m.podman-desktop.io/img/balloon-3.png"
|
||||
/>
|
||||
<img
|
||||
className="absolute sm:left-[55px] sm:top-[9px] sm:w-[64px] top-[6px] left-[40px] w-[50px] -rotate-10 "
|
||||
alt="0 balloon"
|
||||
src="https://3m.podman-desktop.io/img/balloon-0.png"
|
||||
/>
|
||||
<img
|
||||
className="absolute sm:left-[87px] sm:top-[19px] sm:w-[64px] top-[14px] left-[62px] w-[50px] "
|
||||
alt="0 balloon"
|
||||
src="https://3m.podman-desktop.io/img/balloon-0.png"
|
||||
/>
|
||||
<img
|
||||
className="absolute sm:left-[121px] sm:top-[8px] sm:w-[64px] top-[5px] left-[86px] w-[50px] "
|
||||
alt="0 balloon"
|
||||
src="https://3m.podman-desktop.io/img/balloon-0.png"
|
||||
/>
|
||||
<img
|
||||
className="absolute sm:left-[173px] sm:top-[16px] sm:w-[64px] top-[12px] left-[123px] w-[50px] -rotate-7 "
|
||||
alt="0 balloon"
|
||||
src="https://3m.podman-desktop.io/img/balloon-0.png"
|
||||
/>
|
||||
<img
|
||||
className="absolute sm:left-[209px] sm:top-[12px] sm:w-[64px] top-[9px] left-[144px] w-[50px] rotate-6 "
|
||||
alt="0 balloon"
|
||||
src="https://3m.podman-desktop.io/img/balloon-0.png"
|
||||
/>
|
||||
<img
|
||||
className="absolute sm:left-[245px] sm:top-[4px] sm:w-[64px] top-[3px] left-[170px] w-[50px] "
|
||||
alt="0 balloon"
|
||||
src="https://3m.podman-desktop.io/img/balloon-0.png"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-initial whitespace-normal break-words sm:text-2xl text-xl overflow-hidden font-black">
|
||||
DOWNLOADS. <span className="font-light sm:text-2xl text-base"> Proven in the real world.</span>{' '}
|
||||
<a href="https://3m.podman-desktop.io" className="font-semibold sm:text-2xl text-base underline text-red-200">
|
||||
Celebrate!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Banner;
|
||||
|
|
@ -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 {
|
|||
<div className="container mx-auto flex px-5 pb-24 pt-4 items-center justify-center flex-col">
|
||||
<div className="text-center lg:w-3/4 w-full bg-hero-pattern bg-no-repeat bg-center">
|
||||
<div className="bg-white/30 dark:bg-transparent">
|
||||
<h1 className="title-font text-4xl leading-[3rem] lg:text-5xl lg:leading-[4rem] font-extrabold text-charcoal-300 dark:text-white mt-[80px] lg:w-3/4 mx-auto">
|
||||
Best Free & Open Source Tool for Containers & Kubernetes
|
||||
</h1>
|
||||
<p className="text-base font-bold leading-[1.9rem] md:text-lg md:leading-[1.9rem] mt-[88px]">
|
||||
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.
|
||||
</p>
|
||||
<div className="relative">
|
||||
<img
|
||||
className="absolute -scale-x-100 right-0 -top-23 w-22 animate-float"
|
||||
src="https://3m.podman-desktop.io/img/party-seal.png"
|
||||
/>
|
||||
<img
|
||||
className="absolute -right-8 -top-30 w-22 rotate-6 z-10 animate-float"
|
||||
src="https://3m.podman-desktop.io/img/heart-balloon.png"
|
||||
/>
|
||||
<h1 className="title-font text-4xl leading-[3rem] lg:text-5xl lg:leading-[4rem] font-extrabold text-charcoal-300 dark:text-white mt-[80px] lg:w-3/4 mx-auto">
|
||||
Best Free & Open Source Tool for Containers & Kubernetes
|
||||
</h1>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<img
|
||||
className="absolute left-[15px] -top-[150px] w-30 animate-float-diagonal"
|
||||
src="https://3m.podman-desktop.io/img/seal-with-party-horn.png"
|
||||
/>
|
||||
<p className="text-base font-bold leading-[1.9rem] md:text-lg md:leading-[1.9rem] mt-[88px]">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
{/* With client mode, provides the link to the client browser */}
|
||||
<BrowserOnly fallback={<DownloadGenericLinks></DownloadGenericLinks>}>
|
||||
|
|
@ -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">
|
||||
<TailWindThemeSelector />
|
||||
<CommunityBanner />
|
||||
<Banner />
|
||||
<Hero />
|
||||
<MainFeatures />
|
||||
<Pods />
|
||||
|
|
|
|||
|
|
@ -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: [],
|
||||
|
|
|
|||
Loading…
Reference in a new issue