mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-04-21 17:47:22 +00:00
chore(website): added changes for attend community event section (#15687)
* chore(website): added changes for attend community event section Signed-off-by: Rujuta Shinde <rushinde@redhat.com>
This commit is contained in:
Rujuta Shinde
GitHub
parent
b3f39d0852
commit
96aa1ce51a
4 changed files with 94 additions and 74 deletions
19
website/src/components/PodmanMeetingBanner.tsx
Normal file
19
website/src/components/PodmanMeetingBanner.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
|
||||
function PodmanMeetingBanner(): JSX.Element {
|
||||
return (
|
||||
<div className="w-full flex flex-row justify-center items-center py-4 bg-gradient-to-r from-sky-700 to-purple-700 overflow-hidden px-5">
|
||||
<div className="mx-5 relative text-xl text-white font-semibold flex items-center">
|
||||
<img className="h-8 mr-3" alt="podman-seal" src="/img/banner/podman-meeting-seal.png" />
|
||||
<span>
|
||||
Looking for Podman Community Meetings?
|
||||
<a href="https://podman.io/community" target="_blank" rel="noreferrer" className="underline text-white ml-1">
|
||||
Click here
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PodmanMeetingBanner;
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import { faBluesky, faDiscord, faGithub, faLinkedin, faMastodon, faXTwitter } from '@fortawesome/free-brands-svg-icons';
|
||||
import { faCalendar, faCamera, faClock } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faCalendar, faClock } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import CommunityBanner from '@site/src/components/CommunityBanner';
|
||||
import GradientButton from '@site/src/components/GradientButton';
|
||||
import GradientIcon from '@site/src/components/GradientIcon';
|
||||
import PodmanMeetingBanner from '@site/src/components/PodmanMeetingBanner';
|
||||
import TailWindThemeSelector from '@site/src/components/TailWindThemeSelector';
|
||||
import Layout from '@theme/Layout';
|
||||
import React from 'react';
|
||||
|
|
@ -36,69 +36,6 @@ export default function Home(): JSX.Element {
|
|||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-24">
|
||||
<h2 className="text-3xl font-bold mb-4">Why Join the Community?</h2>
|
||||
<p className="mb-12">Podman Desktop is powered by an amazing open-source community. By joining, you can:</p>
|
||||
<div className="grid grid-cols-2 gap-10 text-left ">
|
||||
<div>
|
||||
<h4 className="font-semibold uppercase">Learn</h4>
|
||||
<p>Discover tips, tricks, and best practices for working with containers.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold uppercase">Contribute</h4>
|
||||
<p>Help build the project by reporting bugs, submitting code, or enhancing documentation.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold uppercase">Collaborate</h4>
|
||||
<p>Share your feedback and ideas to improve Podman Desktop.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold uppercase">Connect</h4>
|
||||
<p>Meet like-minded developers who are passionate about containers and open-source.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pb-8 pt-8 bg-hero-pattern bg-no-repeat bg-center mb-24">
|
||||
<h2 className="text-3xl font-bold mb-6">Get Involved</h2>
|
||||
<p className="mb-14">Connect with the community through our official channels:</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-10 mb-8 text-black dark:text-white justify-items-center">
|
||||
{/* Row 1 */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FontAwesomeIcon icon={faDiscord} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://discord.com/invite/x5GzFF6QH4">Join our Discord</GradientButton>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FontAwesomeIcon icon={faGithub} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://github.com/podman-desktop/podman-desktop/discussions">
|
||||
GitHub discussions
|
||||
</GradientButton>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FontAwesomeIcon icon={faBluesky} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://bsky.app/profile/podman-desktop.io">Follow us on Bluesky</GradientButton>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FontAwesomeIcon icon={faXTwitter} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://x.com/podmandesktop">Follow us on X</GradientButton>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Center the last two */}
|
||||
<div className="contents sm:flex sm:justify-center sm:col-span-4">
|
||||
<div className="flex flex-col items-center gap-2 sm:mx-10">
|
||||
<FontAwesomeIcon icon={faLinkedin} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://www.linkedin.com/company/podman-desktop">
|
||||
Connect on LinkedIn
|
||||
</GradientButton>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2 sm:mx-10">
|
||||
<FontAwesomeIcon icon={faMastodon} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://fosstodon.org/@podmandesktop">Follow us on Mastodon</GradientButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-24">
|
||||
<h2 className="text-3xl font-bold mb-6 text-center">Contribute to the Project</h2>
|
||||
<p className="mb-14">We welcome contributions of all kinds! Here's how you can get started:</p>
|
||||
|
|
@ -152,29 +89,50 @@ export default function Home(): JSX.Element {
|
|||
<section id="community-events" className="mb-16 text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">Attend Community Events</h2>
|
||||
<p className="mb-14">Join us for upcoming meetups, webinars, and conferences.</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-20">
|
||||
<div className="flex flex-col items-center text-center justify-center">
|
||||
<p className="mb-1 font-semibold pb-6 uppercase">Latest meeting</p>
|
||||
<p className="mb-1 font-semibold pb-8 uppercase">View Recordings</p>
|
||||
<div className="flex items-center mb-6">
|
||||
<GradientIcon icon={faCamera} size={24} />
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=l7wtkeCH5Lc&list=PLwQSOOPzuslql836gEAqF66FAYLm5sno-&index=1"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full">
|
||||
<img
|
||||
src="/img/community-meeting.png"
|
||||
alt="meeting thumbnail"
|
||||
style={{
|
||||
width: '243px',
|
||||
height: '153px',
|
||||
borderRadius: '4px',
|
||||
borderWidth: '2px',
|
||||
opacity: 1,
|
||||
}}
|
||||
className="shadow-lg hover:shadow-xl transition-shadow cursor-pointer "
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex gap-4 flex-col sm:flex-row">
|
||||
<GradientButton href="https://www.youtube.com/playlist?list=PLwQSOOPzuslql836gEAqF66FAYLm5sno-">
|
||||
Watch recording
|
||||
Watch All Recordings
|
||||
</GradientButton>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center justify-center">
|
||||
<p className="mb-1 font-semibold pb-10 pt-2 uppercase">Join community meeting</p>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
|
||||
<div className="flex flex-col items-start justify-start ">
|
||||
<p className="mb-1 font-semibold pb-16 uppercase ">Join community meeting</p>
|
||||
<div className="flex gap-2 mb-8">
|
||||
<FontAwesomeIcon icon={faCalendar} />
|
||||
<span>Every 4th Thursday of the month</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-10">
|
||||
|
||||
<div className="flex gap-2 mb-8 pb-8">
|
||||
<FontAwesomeIcon icon={faClock} />
|
||||
<span>9–10 am EST</span>
|
||||
</div>
|
||||
<div className="flex gap-4 flex-col sm:flex-row">
|
||||
|
||||
<div className="flex gap-4 flex-col sm:flex-row items-center justify-center">
|
||||
<GradientButton
|
||||
href="https://github.com/podman-desktop/community/issues?q=is%3Aissue%20state%3Aopen%20Agenda%20for%20Podman%20Desktop"
|
||||
solid={true}>
|
||||
|
|
@ -185,6 +143,49 @@ export default function Home(): JSX.Element {
|
|||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<PodmanMeetingBanner />
|
||||
|
||||
<div className="max-w-4xl mx-auto p-6 text-center text-base">
|
||||
<section className="pb-8 pt-8 bg-hero-pattern bg-no-repeat bg-center mb-24">
|
||||
<h2 className="text-3xl font-bold mb-6">Get Involved</h2>
|
||||
<p className="mb-14">Connect with the community through our official channels:</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-10 mb-8 text-black dark:text-white justify-items-center">
|
||||
{/* Row 1 */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FontAwesomeIcon icon={faDiscord} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://discord.com/invite/x5GzFF6QH4">Join our Discord</GradientButton>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FontAwesomeIcon icon={faGithub} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://github.com/podman-desktop/podman-desktop/discussions">
|
||||
GitHub discussions
|
||||
</GradientButton>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FontAwesomeIcon icon={faBluesky} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://bsky.app/profile/podman-desktop.io">Follow us on Bluesky</GradientButton>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<FontAwesomeIcon icon={faXTwitter} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://x.com/podmandesktop">Follow us on X</GradientButton>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Center the last two */}
|
||||
<div className="contents sm:flex sm:justify-center sm:col-span-4">
|
||||
<div className="flex flex-col items-center gap-2 sm:mx-10">
|
||||
<FontAwesomeIcon icon={faLinkedin} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://www.linkedin.com/company/podman-desktop">
|
||||
Connect on LinkedIn
|
||||
</GradientButton>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2 sm:mx-10">
|
||||
<FontAwesomeIcon icon={faMastodon} size="4x" className="mb-4" />
|
||||
<GradientButton href="https://fosstodon.org/@podmandesktop">Follow us on Mastodon</GradientButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
BIN
website/static/img/banner/podman-meeting-seal.png
Normal file
BIN
website/static/img/banner/podman-meeting-seal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 949 B |
BIN
website/static/img/community-meeting.png
Normal file
BIN
website/static/img/community-meeting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
Loading…
Reference in a new issue