From 819eed40334e3c807797730903e4679ab3ec49e9 Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Sun, 19 Jan 2025 22:33:34 +0530 Subject: [PATCH 01/16] part of lf added --- pages/[lang]/index.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/pages/[lang]/index.tsx b/pages/[lang]/index.tsx index 634982c9ee2a..bcca8046ab4f 100644 --- a/pages/[lang]/index.tsx +++ b/pages/[lang]/index.tsx @@ -43,6 +43,16 @@ export default function HomePage() { <>
+
+ Linux Foundation + + Part of the Linux Foundation + +
From 5b6f3e89b93e88ea844a9681d8ef49b5c235fe94 Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Sun, 19 Jan 2025 23:11:18 +0530 Subject: [PATCH 02/16] button updates --- components/Hero.tsx | 48 +++++++++-------------------- public/locales/en/landing-page.json | 6 ++-- 2 files changed, 16 insertions(+), 38 deletions(-) diff --git a/components/Hero.tsx b/components/Hero.tsx index c0609e837569..f8c05a0591b7 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -1,18 +1,15 @@ import React from 'react'; import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; -import { ParagraphTypeStyle } from '@/types/typography/Paragraph'; import { useTranslation } from '../utils/i18n'; -import AlgoliaSearch, { SearchButton } from './AlgoliaSearch'; // Import AlgoliaSearch component import Button from './buttons/Button'; import AnnouncementHero from './campaigns/AnnouncementHero'; import DemoAnimation from './DemoAnimation'; import Features from './features'; -import ArrowRight from './icons/ArrowRight'; -import IconLoupe from './icons/Loupe'; +import IconArrowUp from './icons/ArrowUp'; import Heading from './typography/Heading'; -import Paragraph from './typography/Paragraph'; +import IconLoupe from './icons/Loupe'; interface HeroProps { className?: string; @@ -47,37 +44,20 @@ export default function Hero({ className = '' }: HeroProps) {
- - {t('main.slogan_text')}{' '} - - {t('main.slogan_link')} - -
diff --git a/public/locales/en/landing-page.json b/public/locales/en/landing-page.json index ae14df4c0145..48c63fbdbb13 100644 --- a/public/locales/en/landing-page.json +++ b/public/locales/en/landing-page.json @@ -5,10 +5,8 @@ "body_pretext": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the ", "body_boldtext": "industry standard", "body_posttext": " for defining asynchronous APIs.", - "docs_btn": "Read the docs", - "search_btn": "Quick search...", - "slogan_text": "Proud to be part of the", - "slogan_link": "Linux Foundation" + "join_btn": "Join our Community", + "subscribe_btn": "Subscribe to our Newsletter" }, "features": { "title": "Why AsyncAPI?", From dacfb0e1eded6a929fb9a75953bb266f801d9b52 Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Sun, 19 Jan 2025 23:35:36 +0530 Subject: [PATCH 03/16] diamond sponsors --- components/Hero.tsx | 14 +++++++++----- public/locales/en/landing-page.json | 1 + 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/components/Hero.tsx b/components/Hero.tsx index f8c05a0591b7..e7d9af215b89 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -5,11 +5,10 @@ import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; import { useTranslation } from '../utils/i18n'; import Button from './buttons/Button'; import AnnouncementHero from './campaigns/AnnouncementHero'; -import DemoAnimation from './DemoAnimation'; import Features from './features'; -import IconArrowUp from './icons/ArrowUp'; import Heading from './typography/Heading'; -import IconLoupe from './icons/Loupe'; +import Container from './layout/Container'; +import Sponsors from './sponsors/Sponsors'; interface HeroProps { className?: string; @@ -59,8 +58,13 @@ export default function Hero({ className = '' }: HeroProps) { />
-
- +
+ + + {t('sponsors.diamondTitle')} + + +
diff --git a/public/locales/en/landing-page.json b/public/locales/en/landing-page.json index 48c63fbdbb13..88d307921842 100644 --- a/public/locales/en/landing-page.json +++ b/public/locales/en/landing-page.json @@ -55,6 +55,7 @@ "meetingLink": "Learn more about our meetings." }, "sponsors": { + "diamondTitle": "Diamond Sponsors", "platinumTitle": "Platinum Sponsors", "goldTitle": "Gold Sponsors", "silverTitle": "Silver Sponsors", From ac7ba6652f0d0c29b33572e789ef422290c53d60 Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Wed, 22 Jan 2025 14:14:52 +0530 Subject: [PATCH 04/16] code animation updated --- components/CodeAnimation/AsyncAPIcontent.tsx | 19 + components/CodeAnimation/CodeGeneration.tsx | 7 + components/CodeAnimation/DemoAnimation.tsx | 58 +++ components/CodeAnimation/Documentation.tsx | 7 + components/DemoAnimation.tsx | 383 ------------------- components/Hero.tsx | 8 +- components/sponsors/DiamondSponsors.tsx | 54 +++ components/sponsors/DiamondSponsorsList.ts | 25 ++ 8 files changed, 176 insertions(+), 385 deletions(-) create mode 100644 components/CodeAnimation/AsyncAPIcontent.tsx create mode 100644 components/CodeAnimation/CodeGeneration.tsx create mode 100644 components/CodeAnimation/DemoAnimation.tsx create mode 100644 components/CodeAnimation/Documentation.tsx delete mode 100644 components/DemoAnimation.tsx create mode 100644 components/sponsors/DiamondSponsors.tsx create mode 100644 components/sponsors/DiamondSponsorsList.ts diff --git a/components/CodeAnimation/AsyncAPIcontent.tsx b/components/CodeAnimation/AsyncAPIcontent.tsx new file mode 100644 index 000000000000..1e4f302dbef0 --- /dev/null +++ b/components/CodeAnimation/AsyncAPIcontent.tsx @@ -0,0 +1,19 @@ +export default function renderAsyncAPIContent() { + return ( +
+
"asyncapi": "2.5.0",
+
"info": {'{'}
+
"title": "Streetlights API",
+
"version": "1.0.0",
+
"description": "The Streetlighting API allow you to remotely manage the city lights.",
+
"license": "Apache 2.0",
+
{'}'}
+
"servers": {'{'}
+
"mosquitto": {'{'}
+
"url": "mqtt://test.mosquitto.org",
+
"protocol": "mqtt"
+
{'}'}
+
{'}'}
+
+ ) +} \ No newline at end of file diff --git a/components/CodeAnimation/CodeGeneration.tsx b/components/CodeAnimation/CodeGeneration.tsx new file mode 100644 index 000000000000..1607b0bbde86 --- /dev/null +++ b/components/CodeAnimation/CodeGeneration.tsx @@ -0,0 +1,7 @@ +export default function renderCodeGeneration() { + return ( +
+

content here

+
+ ) +} \ No newline at end of file diff --git a/components/CodeAnimation/DemoAnimation.tsx b/components/CodeAnimation/DemoAnimation.tsx new file mode 100644 index 000000000000..b6fa71c59dce --- /dev/null +++ b/components/CodeAnimation/DemoAnimation.tsx @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; +import renderAsyncAPIContent from './AsyncAPIcontent'; +import renderCodeGeneration from './CodeGeneration'; +import renderDocumentation from './Documentation'; +import Container from '../layout/Container'; + +export default function DemoAnimation() { + const [activeTab, setActiveTab] = useState('AsyncAPI Document'); + const tabs = ['AsyncAPI Document', 'Code Generation', 'Documentation']; + + const renderContent = () => { + switch (activeTab) { + case 'Code Generation': + return renderCodeGeneration(); + case 'Documentation': + return renderDocumentation(); + default: + return renderAsyncAPIContent(); + } + }; + + return ( +
+ +

+ Sneak Peek Into The Real Process +

+

+ One of our main goals is to improve the current state of Event
+ Driven Architecture (EDA!) +

+ +
+ {tabs.map((tab) => ( + + ))} +
+ +
+
+
+ {renderContent()} +
+
+
+ +
+ ); +}; \ No newline at end of file diff --git a/components/CodeAnimation/Documentation.tsx b/components/CodeAnimation/Documentation.tsx new file mode 100644 index 000000000000..1cca79834572 --- /dev/null +++ b/components/CodeAnimation/Documentation.tsx @@ -0,0 +1,7 @@ +export default function renderDocumentation() { + return ( +
+

Documentation

+
+ ) +} \ No newline at end of file diff --git a/components/DemoAnimation.tsx b/components/DemoAnimation.tsx deleted file mode 100644 index 1748d0c6ca2b..000000000000 --- a/components/DemoAnimation.tsx +++ /dev/null @@ -1,383 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import Typing from 'react-typist-component'; - -import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; - -import OpenInStudioButton from './buttons/OpenInStudioButton'; -import ArrowRight from './icons/ArrowRight'; -import MacWindow from './MacWindow'; -import Heading from './typography/Heading'; - -interface IDemoAnimationProps { - className?: string; -} - -interface ICursorProps { - className?: string; -} - -/** - * @description A component that displays a cursor for the typing animation - * @param {string} props.className - The class name for the component - */ -function Cursor({ className = '' }: ICursorProps) { - return ( - - ); -} - -/** - * @description A component that displays a demo animation of an AsyncAPI document - * @param {string} props.className - The class name for the component - */ -export default function DemoAnimation({ className = '' }: IDemoAnimationProps) { - const [started] = useState(true); - const [showInfo, setShowInfo] = useState(false); - const [showChannelsAndOperation, setShowChannelsAndOperation] = useState(false); - const [showUntilMessagePayload, setShowUntilMessagePayload] = useState(false); - const [showDisplayName, setShowDisplayName] = useState(false); - const [showEmail, setShowEmail] = useState(false); - const [showDisplayNameDescription, setShowDisplayNameDescription] = useState(false); - const [showEmailDescription, setShowEmailDescription] = useState(false); - const [finished, setFinished] = useState(false); - const [showControls, setShowControls] = useState(false); - const typingDelay = 60; - - useEffect(() => { - if (finished) { - setTimeout(() => { - setShowControls(true); - }, 2000); - } - }, [finished]); - - /** - * @description classes that displays a cursor for the typing animation - * @param {boolean} condition - The condition to determine which class to apply - */ - function transitionClassNames(condition: boolean) { - return `transition-all duration-500 ease-in-out overflow-hidden ${condition ? 'opacity-100 max-h-auto' : 'max-h-0 opacity-0'}`; - } - - /** - * @description A component that displays a cursor for the typing animation - */ - function renderTyping(children: React.ReactNode, callback: () => void) { - return ( - } onTypingDone={callback}> - {children} - - ); - } - - /** - * @description A component that displays info block - */ - function renderInfoBlock(callback: () => void) { - const descriptionCallback = () => setFinished(true); - - const common = ( - <> -
- asyncapi: 3.0.0 -
-
- info: -
-
-   title: Account Service -
-
-   version: 1.0.0 -
- - - ); - - if (showEmailDescription) { - return ( - <> - {common} - } onTypingDone={descriptionCallback}> -
-   description: This service is in charge of processing - user signups :rocket: -
- - - ); - } - - return renderTyping(common, callback); - } - - /** - * @description A component that displays channels and operation block - */ - function renderChannelsOperationBlock(callback: () => void) { - return renderTyping( - <> -
- channels: -
-
-   userSignedup: -
-
-     address: - 'user/signedup' -
-
-     messages: -
-
-       userSignedupMessage: -
-
-         $ref: - '#/components/messages/UserSignedUp' -
-
- operations: -
-
-   processUserSignups: -
-
-     action: - 'receive' -
-
-     channel: -
-
-       $ref: - '#/channels/userSignedup' -
- - , - callback - ); - } - - /** - * @description A component that displays until message payload block - */ - function renderUntilMessagePayload(callback: () => void) { - return renderTyping( - <> -
- components: -
-
-   messages: -
-
-     UserSignedUp: -
-
-       payload: -
-
-         type: - object -
- , - callback - ); - } - - /** - * @description A component that displays display name block - */ - function renderDisplayName(callback: () => void) { - const descriptionCallback = () => setShowDisplayNameDescription(true); - - const common = ( - <> -
-         properties: -
-
- -           displayName: - -
-
- -             type: - - string -
- - ); - - if (showEmail) { - return ( - <> - {common} - } onTypingDone={descriptionCallback}> -
- -             description: - - Name of the user -
- - - ); - } - - return renderTyping(<>{common}, callback); - } - - /** - * @description A component that displays email block - */ - function renderEmail(callback: () => void) { - const descriptionCallback = () => setShowEmailDescription(true); - - const common = ( - <> -
-           email: -
-
- -             type: - - string -
-
- -             format: - - email -
- - ); - - if (showDisplayNameDescription) { - return ( - <> - {common} - } onTypingDone={descriptionCallback}> -
- -             description: - - Email of the user -
- - - ); - } - - return renderTyping(common, callback); - } - - return ( -
-
-
- - {(showEmailDescription || started) && renderInfoBlock(() => setShowInfo(true))} - {showInfo && renderChannelsOperationBlock(() => setShowChannelsAndOperation(true))} - {showChannelsAndOperation && renderUntilMessagePayload(() => setShowUntilMessagePayload(true))} - {(showUntilMessagePayload || showEmail) && renderDisplayName(() => setShowDisplayName(true))} - {(showDisplayName || showDisplayNameDescription) && renderEmail(() => setShowEmail(true))} - -
-
-
- - Play with it! - -

- Open this example on AsyncAPI Studio to get a better taste of the specification. No signup is required! -

- -
- -
-

Account Service 1.0.0

-

This service is in charge of processing user signups 🚀

-
- -
- RECEIVES{' '} - user/signedup -
- -
-
Accepts the following message:
-
- Payload{' '} - {' '} - Object -
-
-
-
displayName
-
-
String
-
- Name of the user -
-
-
-
-
email
-
-
- String - email -
-
Email of the user
-
-
- -
Additional properties are allowed.
-
- -
- {/* eslint-disable-next-line react/jsx-no-comment-textnodes */} -
// Example
-
 
-
{'{'}
-
-   "displayName":{' '} - "Eve & Chan", -
-
-   "email":{' '} - "info@asyncapi.io" -
-
{'}'}
-
-
-
-
- -
-
-
- ); -} diff --git a/components/Hero.tsx b/components/Hero.tsx index e7d9af215b89..ce2cdb056404 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -5,10 +5,11 @@ import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; import { useTranslation } from '../utils/i18n'; import Button from './buttons/Button'; import AnnouncementHero from './campaigns/AnnouncementHero'; +import DemoAnimation from './CodeAnimation/DemoAnimation'; import Features from './features'; import Heading from './typography/Heading'; import Container from './layout/Container'; -import Sponsors from './sponsors/Sponsors'; +import DiamondSponsors from './sponsors/DiamondSponsors'; interface HeroProps { className?: string; @@ -63,10 +64,13 @@ export default function Hero({ className = '' }: HeroProps) { {t('sponsors.diamondTitle')} - +
+
+ +
); diff --git a/components/sponsors/DiamondSponsors.tsx b/components/sponsors/DiamondSponsors.tsx new file mode 100644 index 000000000000..c0d9fb806bb5 --- /dev/null +++ b/components/sponsors/DiamondSponsors.tsx @@ -0,0 +1,54 @@ +import React from 'react'; + +import { sponsors } from './SponsorsList'; + +interface SponsorsProps { + className: string; + showSupportBanner: boolean; +} + +/** + * This component displays Silver Sponsors. + * @param {SponsorsProps} props - The props for Sponsors component. + * @param {string} props.className - Additional CSS classes for styling. + * @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed. + */ +export default function DiamondSponsors({ className = '', showSupportBanner = true }: SponsorsProps): React.ReactNode { + return ( +
+
    + {sponsors.map((sponsor, index) => ( +
  • + + {sponsor.altText} + +
    • + ))} +
+ {showSupportBanner && ( +
+ Want to become a sponsor?{' '} + + Support us! + +
+ )} +
+ ); +} diff --git a/components/sponsors/DiamondSponsorsList.ts b/components/sponsors/DiamondSponsorsList.ts new file mode 100644 index 000000000000..bdc75f3a7141 --- /dev/null +++ b/components/sponsors/DiamondSponsorsList.ts @@ -0,0 +1,25 @@ +import type { SponsorType } from '@/types/components/sponsors/SponsorType'; + +export const sponsors: SponsorType[] = [ + { + name: 'Solace', + website: 'https://www.solace.com', + imageSrc: '/img/sponsors/solace.png', + altText: 'Solace', + imageClass: 'inline-block px-4 sm:h-12' + }, + { + name: 'Gravitee.io', + website: 'https://www.gravitee.io', + imageSrc: '/img/sponsors/gravitee.io_logo.jpg', + altText: 'Gravitee.io', + imageClass: 'inline-block px-4 sm:h-14' + }, + { + name: 'Postman', + website: 'https://www.postman.com', + imageSrc: '/img/sponsors/postman.png', + altText: 'Postman', + imageClass: 'inline-block px-4 sm:h-18' + } +]; From 3ca81ae6f2446fece71342d775a1658caddc3278 Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Wed, 22 Jan 2025 15:04:22 +0530 Subject: [PATCH 05/16] features updated --- components/features/FeatureList.ts | 106 +++++++++++----------------- components/features/index.tsx | 62 +++++++++------- public/locales/en/landing-page.json | 56 +++++++-------- 3 files changed, 106 insertions(+), 118 deletions(-) diff --git a/components/features/FeatureList.ts b/components/features/FeatureList.ts index 130cd2599525..6961b9be076e 100644 --- a/components/features/FeatureList.ts +++ b/components/features/FeatureList.ts @@ -6,83 +6,63 @@ interface FeatureLink { interface Feature { id: string; - links: FeatureLink[]; + name: string; + link: FeatureLink; } export const features: Feature[] = [ { - id: 'specification', - links: [ - { - label: 'Documentation', - href: 'docs/reference/specification/latest', - id: 'whyasyncapi-spec-documentation-link' - } - ] + id: 'costs-control', + name: 'Costs Control', + link: { + label: 'features.read-more', + href: 'docs/costs-control', + id: 'costs-control-read-more-link', + }, }, { - id: 'document-apis', - links: [ - { - label: 'HTML Template', - href: 'https://github.com/asyncapi/html-template', - id: 'whyasyncapi-apis-htmltemplate-link' - }, - { - label: 'React Component', - href: 'https://github.com/asyncapi/asyncapi-react/', - id: 'whyasyncapi-apis-reactcomponents-link' - } - ] + id: 'publishing-api', + name: 'Self-service for Publishing API', + link: { + label: 'features.read-more', + href: 'docs/publishing-api', + id: 'publishing-api-read-more-link', + }, }, { id: 'code-generation', - links: [ - { - label: 'Generator', - href: 'tools/generator', - id: 'whyasyncapi-generation-generator-link' - }, - { - label: 'Modelina', - href: 'tools/modelina', - id: 'whyasyncapi-generation-modelina-link' - } - ] + name: 'Code Generation', + link: { + label: 'features.read-more', + href: 'docs/code-generation', + id: 'code-generation-read-more-link', + }, }, { - id: 'community', - links: [ - { - label: 'Join our Slack', - href: 'https://asyncapi.com/slack-invite', - id: 'whyasyncapi-community-slack-link' - } - ] + id: 'infra-as-code', + name: 'Infrastructure as Code', + link: { + label: 'features.read-more', + href: 'docs/infra-as-code', + id: 'infra-as-code-read-more-link', + }, }, { - id: 'open-governance', - links: [ - { - label: 'Read more about Open Governance', - href: 'blog/governance-motivation', - id: 'whyasyncapi-governance-more-link' - }, - { - label: 'TSC Members', - href: 'community/tsc', - id: 'whyasyncapi-governance-tsc-link' - } - ] + id: 'governance-consistency', + name: 'Governance & Consistency', + link: { + label: 'features.read-more', + href: 'docs/governance-consistency', + id: 'governance-consistency-read-more-link', + }, }, { - id: 'much-more', - links: [ - { - label: 'View GitHub Discussions', - href: 'https://github.com/asyncapi/community/discussions', - id: 'whyasyncapi-muchmore-github-link' - } - ] + id: 'developer-portal', + name: 'Developer Portal', + link: { + label: 'features.read-more', + href: 'docs/developer-portal', + id: 'developer-portal-read-more-link', + }, } ]; diff --git a/components/features/index.tsx b/components/features/index.tsx index 959db7b55a7f..b2b95ecde2ef 100644 --- a/components/features/index.tsx +++ b/components/features/index.tsx @@ -16,36 +16,46 @@ export default function Features() { const { t } = useTranslation('landing-page'); return ( -
-
- - {t('features.title')} - - {t('features.description')} -
-
    +
    +
    +
    + + {t('features.title')} + + + {t('features.description')} + +
    +
    +
      {features.map((feature) => (
    • -
      - - {t(`features.${feature.id}.name`)} - - { - - {t(`features.${feature.id}.description`)} - - } -
      -
      - {feature.links.map((link) => ( - - {t(`features.${feature.id}.links.${link.id}`)} - - ))} + + {t(`features.${feature.id}.name`)} + + + {t(`features.${feature.id}.description`)} + +
      + + {t('features.read-more')} +
      • ))} diff --git a/public/locales/en/landing-page.json b/public/locales/en/landing-page.json index 88d307921842..96d1952e8da5 100644 --- a/public/locales/en/landing-page.json +++ b/public/locales/en/landing-page.json @@ -9,35 +9,33 @@ "subscribe_btn": "Subscribe to our Newsletter" }, "features": { - "title": "Why AsyncAPI?", - "description": "Improving the current state of Event-Driven Architectures (EDA)", - - "specification.name": "Specification", - "specification.description": "Allows you to define the interfaces of asynchronous APIs and is protocol agnostic.", - "specification.links.whyasyncapi-spec-documentation-link": "Documentation", - - "document-apis.name": "Document APIs", - "document-apis.description": "Use our tools to generate documentation at the build level, on a server, and on a client.", - "document-apis.links.whyasyncapi-apis-htmltemplate-link": "HTML Template", - "document-apis.links.whyasyncapi-apis-reactcomponents-link": "React Component", - - "code-generation.name": "Code Generation", - "code-generation.description": "Generate documentation, Code (TypeScript, Java, C#, etc), and more out of your AsyncAPI files.", - "code-generation.links.whyasyncapi-generation-generator-link": "Generator", - "code-generation.links.whyasyncapi-generation-modelina-link": "Modelina", - - "community.name": "Community", - "community.description": "We're a community of great people who are passionate about AsyncAPI and event-driven architectures.", - "community.links.whyasyncapi-community-slack-link": "Join our Slack", - - "open-governance.name": "Open Governance", - "open-governance.description": "Our Open-Source project is part of Linux Foundation and works under an Open Governance model.", - "open-governance.links.whyasyncapi-governance-more-link": "Read more about Open Governance", - "open-governance.links.whyasyncapi-governance-tsc-link": "TSC Members", - - "much-more.name": "And much more...", - "much-more.description": "We have many different tools and welcome you to explore our ideas and propose new ideas to AsyncAPI.", - "much-more.links.whyasyncapi-muchmore-github-link": "View GitHub Discussions" + "title": "What You Can Use AsyncAPI For", + "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA)", + "costs-control": { + "name": "Costs Control", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "publishing-api": { + "name": "Self-service for Publishing API", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "code-generation": { + "name": "Code Generation", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "infra-as-code": { + "name": "Infrastructure as Code", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "governance-consistency": { + "name": "Governance & Consistency", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "developer-portal": { + "name": "Developer Portal", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "read-more": "Read More" }, "adopters": { "title": "Adopted by the world leading brands", From b7af448dca1462403b143f33d72911c14781bafa Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Wed, 22 Jan 2025 15:35:28 +0530 Subject: [PATCH 06/16] slack button update --- components/sponsors/DiamondSponsors.tsx | 2 +- pages/[lang]/index.tsx | 211 ++++++++++++------------ public/locales/en/landing-page.json | 2 +- 3 files changed, 103 insertions(+), 112 deletions(-) diff --git a/components/sponsors/DiamondSponsors.tsx b/components/sponsors/DiamondSponsors.tsx index c0d9fb806bb5..205becf43d25 100644 --- a/components/sponsors/DiamondSponsors.tsx +++ b/components/sponsors/DiamondSponsors.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { sponsors } from './SponsorsList'; +import { sponsors } from './DiamondSponsorsList'; interface SponsorsProps { className: string; diff --git a/pages/[lang]/index.tsx b/pages/[lang]/index.tsx index bcca8046ab4f..c2ca64d4db6b 100644 --- a/pages/[lang]/index.tsx +++ b/pages/[lang]/index.tsx @@ -41,82 +41,50 @@ export default function HomePage() { return ( <> - -
      + +
      Linux Foundation - - Part of the Linux Foundation - + Part of the Linux Foundation
      - + - - - {t('adopters.title')} - - - {t('adopters.description')} - - {t('adopters.linkText')} - - -
        -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      • - -
        • -
      -       + +
      +
      + + {t('community.title')} + + + {t('community.subtitle')} + +
      +
      +
      -
      - - - -
      +
      + +
      +
      - - - {t('community.title')} - - {t('community.subtitle')} -
      - -
      -
      - -
      -
      -
      - - {t('community.slackCTATitle')} - - {t('community.slackCTADesc')} -
      -
      -
      -
      -
      + {/* */} -
      + {/*
      @@ -146,93 +114,116 @@ export default function HomePage() {
    -
- - - - -
+ */} + {/* */} -
- - +
+ + {t('sponsors.platinumTitle')} - + - - + + {t('sponsors.goldTitle')} - + - - + + {t('sponsors.silverTitle')} - + - - + + {t('sponsors.sponsorCTATitle')} - + {t('sponsors.sponsorCTADesc')} - + {t('sponsors.sponsorCTALink')}
- - + + {t('sponsors.supportedByTitle')} - + {t('sponsors.supportedByPretext')} - + {t('sponsors.supportedByLink')} {' '} {t('sponsors.supportedByPosttext')} - + - - + + {t('testimonials.title')} -
    +
    diff --git a/public/locales/en/landing-page.json b/public/locales/en/landing-page.json index 96d1952e8da5..f2df8aae436e 100644 --- a/public/locales/en/landing-page.json +++ b/public/locales/en/landing-page.json @@ -47,7 +47,7 @@ "subtitle": "We're a community of great people who are passionate about AsyncAPI and event-driven architectures.", "slackCTATitle": "Join our Slack workspace", "slackCTADesc": "We welcome everyone to join our Slack workspace. If you have a question on how to use AsyncAPI, want to contribute, or simply want to say hello 👋, you're welcome to join us. We're nice people 🙂", - "slackCTABtn": "Join us!", + "slackCTABtn": "Join us on slack", "meetingTitle": "Join our public meetings", "meetingDesc": "AsyncAPI hosts different meetings every week. They are focused on different topics, sometimes purely technical and sometimes about community building. Pick one and join us!", "meetingLink": "Learn more about our meetings." From 9f7a7ba1afdd522dfd6850e2bd841417ee4c6fa0 Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Wed, 22 Jan 2025 15:50:27 +0530 Subject: [PATCH 07/16] calender done --- components/buttons/GoogleCalendarButton.tsx | 1 - components/buttons/ICSFileButton.tsx | 1 - pages/[lang]/index.tsx | 141 +++----------------- 3 files changed, 19 insertions(+), 124 deletions(-) diff --git a/components/buttons/GoogleCalendarButton.tsx b/components/buttons/GoogleCalendarButton.tsx index 15f16dca65f7..70be1591e282 100644 --- a/components/buttons/GoogleCalendarButton.tsx +++ b/components/buttons/GoogleCalendarButton.tsx @@ -29,7 +29,6 @@ export default function GoogleCalendarButton({ return (
); From 51532c0991859c61eb82f1ee6f538ed873532067 Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Wed, 22 Jan 2025 21:31:37 +0530 Subject: [PATCH 08/16] design implementation completed --- components/CodeAnimation/AsyncAPIcontent.tsx | 18 +++--------------- components/SupportUs/SupportUs.tsx | 17 +++++++++++++++++ pages/[lang]/index.tsx | 2 ++ 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/components/CodeAnimation/AsyncAPIcontent.tsx b/components/CodeAnimation/AsyncAPIcontent.tsx index 1e4f302dbef0..9d7a779acb3e 100644 --- a/components/CodeAnimation/AsyncAPIcontent.tsx +++ b/components/CodeAnimation/AsyncAPIcontent.tsx @@ -1,19 +1,7 @@ export default function renderAsyncAPIContent() { return ( -
-
"asyncapi": "2.5.0",
-
"info": {'{'}
-
"title": "Streetlights API",
-
"version": "1.0.0",
-
"description": "The Streetlighting API allow you to remotely manage the city lights.",
-
"license": "Apache 2.0",
-
{'}'}
-
"servers": {'{'}
-
"mosquitto": {'{'}
-
"url": "mqtt://test.mosquitto.org",
-
"protocol": "mqtt"
-
{'}'}
-
{'}'}
-
+
+ content here +
) } \ No newline at end of file diff --git a/components/SupportUs/SupportUs.tsx b/components/SupportUs/SupportUs.tsx index 399fb0ca5dc8..205f6565fcb6 100644 --- a/components/SupportUs/SupportUs.tsx +++ b/components/SupportUs/SupportUs.tsx @@ -1,6 +1,9 @@ import React from 'react'; import { items } from './SupportItemsList'; +import Heading from '../typography/Heading'; +import Paragraph from '../typography/Paragraph'; +import TextLink from '../typography/TextLink'; interface SupportUsProps { className?: string; @@ -16,6 +19,20 @@ interface SupportUsProps { export default function SupportUs({ className = '' }: SupportUsProps): React.ReactNode { return (
+ + Supporters + + + The following companies support us by letting us use their products for free. Interested in + supporting us too? + + Email us + for more info +
+ From 77cfdaa599369c3635f7cc92584bc6392ad504dc Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Wed, 22 Jan 2025 21:40:38 +0530 Subject: [PATCH 09/16] added JSDocs --- components/CodeAnimation/AsyncAPIcontent.tsx | 5 +++++ components/CodeAnimation/CodeGeneration.tsx | 5 +++++ components/CodeAnimation/DemoAnimation.tsx | 12 ++++++++++++ components/CodeAnimation/Documentation.tsx | 5 +++++ components/buttons/GoogleCalendarButton.tsx | 1 - components/buttons/ICSFileButton.tsx | 1 - components/sponsors/DiamondSponsors.tsx | 2 +- 7 files changed, 28 insertions(+), 3 deletions(-) diff --git a/components/CodeAnimation/AsyncAPIcontent.tsx b/components/CodeAnimation/AsyncAPIcontent.tsx index 9d7a779acb3e..c385842a6dab 100644 --- a/components/CodeAnimation/AsyncAPIcontent.tsx +++ b/components/CodeAnimation/AsyncAPIcontent.tsx @@ -1,3 +1,8 @@ +/** + * @description Renders the content related to AsyncAPI in a styled div container. + * This is used as the default content for the "AsyncAPI Document" tab in the DemoAnimation component. + */ + export default function renderAsyncAPIContent() { return (
diff --git a/components/CodeAnimation/CodeGeneration.tsx b/components/CodeAnimation/CodeGeneration.tsx index 1607b0bbde86..9119c3678744 100644 --- a/components/CodeAnimation/CodeGeneration.tsx +++ b/components/CodeAnimation/CodeGeneration.tsx @@ -1,3 +1,8 @@ +/** + * @description Renders the content related to code generation in a styled div container. + * This is used as the content for the "Code Generation" tab in the DemoAnimation component. + */ + export default function renderCodeGeneration() { return (
diff --git a/components/CodeAnimation/DemoAnimation.tsx b/components/CodeAnimation/DemoAnimation.tsx index b6fa71c59dce..d815c949af05 100644 --- a/components/CodeAnimation/DemoAnimation.tsx +++ b/components/CodeAnimation/DemoAnimation.tsx @@ -4,10 +4,22 @@ import renderCodeGeneration from './CodeGeneration'; import renderDocumentation from './Documentation'; import Container from '../layout/Container'; +/** + * @description A React component that displays a demo animation interface with three tabs: + * "AsyncAPI Document," "Code Generation," and "Documentation." The content of each tab + * dynamically updates based on the active tab selected by the user. + * + */ + export default function DemoAnimation() { const [activeTab, setActiveTab] = useState('AsyncAPI Document'); const tabs = ['AsyncAPI Document', 'Code Generation', 'Documentation']; + + /** + * @description Determines and renders the content for the currently active tab. + */ + const renderContent = () => { switch (activeTab) { case 'Code Generation': diff --git a/components/CodeAnimation/Documentation.tsx b/components/CodeAnimation/Documentation.tsx index 1cca79834572..5a27b77a0d01 100644 --- a/components/CodeAnimation/Documentation.tsx +++ b/components/CodeAnimation/Documentation.tsx @@ -1,3 +1,8 @@ +/** + * @description Renders the documentation content in a styled container. + * This is used as the content for the "Documentation" tab in the DemoAnimation component. + */ + export default function renderDocumentation() { return (
diff --git a/components/buttons/GoogleCalendarButton.tsx b/components/buttons/GoogleCalendarButton.tsx index 70be1591e282..92e1b8fcba48 100644 --- a/components/buttons/GoogleCalendarButton.tsx +++ b/components/buttons/GoogleCalendarButton.tsx @@ -4,7 +4,6 @@ import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType'; import type { IButtonDefaultProps } from '../../types/components/buttons/types'; import { useTranslation } from '../../utils/i18n'; -import IconGoogleCalendar from '../icons/GoogleCalendar'; import Button from './Button'; interface IGoogleCalendarButtonProps extends IButtonDefaultProps {} diff --git a/components/buttons/ICSFileButton.tsx b/components/buttons/ICSFileButton.tsx index c5792d698fe1..69fe3475f62f 100644 --- a/components/buttons/ICSFileButton.tsx +++ b/components/buttons/ICSFileButton.tsx @@ -4,7 +4,6 @@ import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType'; import type { IButtonDefaultProps } from '../../types/components/buttons/types'; import { useTranslation } from '../../utils/i18n'; -import IconCalendar from '../icons/Calendar'; import Button from './Button'; interface IICSFButtonProps extends IButtonDefaultProps {} diff --git a/components/sponsors/DiamondSponsors.tsx b/components/sponsors/DiamondSponsors.tsx index 205becf43d25..154e37912be3 100644 --- a/components/sponsors/DiamondSponsors.tsx +++ b/components/sponsors/DiamondSponsors.tsx @@ -8,7 +8,7 @@ interface SponsorsProps { } /** - * This component displays Silver Sponsors. + * This component displays Diamond Sponsors. * @param {SponsorsProps} props - The props for Sponsors component. * @param {string} props.className - Additional CSS classes for styling. * @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed. From d13efa6d5d26337459969663947ae42c9bbe403d Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Wed, 22 Jan 2025 21:55:58 +0530 Subject: [PATCH 10/16] translation update --- pages/[lang]/index.tsx | 2 +- public/locales/de/landing-page.json | 64 ++++++++++++++--------------- public/locales/en/landing-page.json | 3 +- 3 files changed, 34 insertions(+), 35 deletions(-) diff --git a/pages/[lang]/index.tsx b/pages/[lang]/index.tsx index 800d6ee2c402..2e8454e1e307 100644 --- a/pages/[lang]/index.tsx +++ b/pages/[lang]/index.tsx @@ -37,7 +37,7 @@ export default function HomePage() { src="/img/logos/LFX.svg" alt="Linux Foundation" /> - Part of the Linux Foundation + {t('linuxFoundation_txt')}
diff --git a/public/locales/de/landing-page.json b/public/locales/de/landing-page.json index ab75bdab207f..7e48a59f860a 100644 --- a/public/locales/de/landing-page.json +++ b/public/locales/de/landing-page.json @@ -5,41 +5,38 @@ "body_pretext": "Open-Source-Tools zur einfachen Erstellung und Wartung Ihrer ereignisgesteuerten Architektur. Alle basieren auf der AsyncAPI-Spezifikation, der ", "body_boldtext": "Industriestandard", "body_posttext": " zur Definition asynchroner APIs.", - "docs_btn": "Lesen Sie die Dokumente", - "search_btn": "Schnellsuche...", - "slogan_text": "Wir sind stolz darauf, Teil der", - "slogan_link": "Linux Foundation" + "join_btn": "Join our Community", + "subscribe_btn": "Subscribe to our Newsletter", + "linuxFoundation_txt": "Part of the Linux Foundation" }, "features": { - "title": "Warum AsyncAPI?", - "description": "Verbesserung des aktuellen Stands der ereignisgesteuerten Architekturen (EDA)", - - "specification.name": "Spezifikation", - "specification.description": "Ermöglicht es Ihnen, die Schnittstellen von asynchronen APIs zu definieren und ist protokollunabhängig.", - "specification.links.whyasyncapi-spec-documentation-link": "Dokumentation", - - "document-apis.name": "APIs dokumentieren", - "document-apis.description": "Verwenden Sie unsere Tools, um Dokumentation auf Build-Ebene, auf einem Server und auf einem Client zu generieren.", - "document-apis.links.whyasyncapi-apis-htmltemplate-link": "HTML-Vorlage", - "document-apis.links.whyasyncapi-apis-reactcomponents-link": "React-Komponente", - - "code-generation.name": "Code-Generierung", - "code-generation.description": "Generieren Sie Dokumentation, Code (TypeScript, Java, C# usw.) und mehr aus Ihren AsyncAPI-Dateien.", - "code-generation.links.whyasyncapi-generation-generator-link": "Generator", - "code-generation.links.whyasyncapi-generation-modelina-link": "Modelina", - - "community.name": "Gemeinschaft", - "community.description": "Wir sind eine Gemeinschaft von großartigen Menschen, die leidenschaftlich an AsyncAPI und ereignisgesteuerten Architekturen interessiert sind.", - "community.links.whyasyncapi-community-slack-link": "Treten Sie unserem Slack bei", - - "open-governance.links.whyasyncapi-governance-more-link": "Erfahren Sie mehr über Offene Governance", - "open-governance.links.whyasyncapi-governance-tsc-link": "TSC-Mitglieder", - "open-governance.name": "Offene Governance", - "open-governance.description": "Unser Open-Source-Projekt ist Teil der Linux Foundation und arbeitet unter einem Modell der offenen Governance.", - - "much-more.name": "Und noch viel mehr...", - "much-more.description": "Wir haben viele verschiedene Tools und laden Sie ein, unsere Ideen zu erkunden und neue Ideen für AsyncAPI vorzuschlagen.", - "much-more.links.whyasyncapi-muchmore-github-link": "GitHub-Diskussionen anzeigen" + "title": "What You Can Use AsyncAPI For", + "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA)", + "costs-control": { + "name": "Costs Control", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "publishing-api": { + "name": "Self-service for Publishing API", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "code-generation": { + "name": "Code Generation", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "infra-as-code": { + "name": "Infrastructure as Code", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "governance-consistency": { + "name": "Governance & Consistency", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "developer-portal": { + "name": "Developer Portal", + "description": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs." + }, + "read-more": "Read More" }, "adopters": { "title": "Von den weltweit führenden Marken übernommen", @@ -57,6 +54,7 @@ "meetingLink": "Erfahren Sie mehr über unsere Meetings." }, "sponsors": { + "diamondTitle": "Diamond Sponsors", "platinumTitle": "Platin-Sponsoren", "goldTitle": "Gold-Sponsoren", "silverTitle": "Silber-Sponsoren", diff --git a/public/locales/en/landing-page.json b/public/locales/en/landing-page.json index f2df8aae436e..439b12acde20 100644 --- a/public/locales/en/landing-page.json +++ b/public/locales/en/landing-page.json @@ -6,7 +6,8 @@ "body_boldtext": "industry standard", "body_posttext": " for defining asynchronous APIs.", "join_btn": "Join our Community", - "subscribe_btn": "Subscribe to our Newsletter" + "subscribe_btn": "Subscribe to our Newsletter", + "linuxFoundation_txt": "Part of the Linux Foundation" }, "features": { "title": "What You Can Use AsyncAPI For", From d4c788dd5e9543b33ad57c42bb7936f39d30c4bc Mon Sep 17 00:00:00 2001 From: Vishvamsinh Vaghela Date: Wed, 22 Jan 2025 22:09:03 +0530 Subject: [PATCH 11/16] lint fix --- components/CaseStudyCard.tsx | 4 +- components/CodeAnimation/AsyncAPIcontent.tsx | 10 +- components/CodeAnimation/CodeGeneration.tsx | 12 +-- components/CodeAnimation/DemoAnimation.tsx | 60 ++++++------ components/CodeAnimation/Documentation.tsx | 12 +-- components/Hero.tsx | 12 +-- components/SupportUs/SupportUs.tsx | 20 ++-- components/features/FeatureList.ts | 24 ++--- components/features/index.tsx | 35 +++---- pages/[lang]/index.tsx | 97 +++++++------------- 10 files changed, 118 insertions(+), 168 deletions(-) diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx index 26a2066b045c..f03cc6ab7029 100644 --- a/components/CaseStudyCard.tsx +++ b/components/CaseStudyCard.tsx @@ -19,11 +19,11 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) { } return ( -
+
{studies.map((study, index) => (
diff --git a/components/CodeAnimation/AsyncAPIcontent.tsx b/components/CodeAnimation/AsyncAPIcontent.tsx index c385842a6dab..d960c1e64445 100644 --- a/components/CodeAnimation/AsyncAPIcontent.tsx +++ b/components/CodeAnimation/AsyncAPIcontent.tsx @@ -1,12 +1,8 @@ /** - * @description Renders the content related to AsyncAPI in a styled div container. + * @description Renders the content related to AsyncAPI in a styled div container. * This is used as the default content for the "AsyncAPI Document" tab in the DemoAnimation component. */ export default function renderAsyncAPIContent() { - return ( -
- content here -
- ) -} \ No newline at end of file + return
content here
; +} diff --git a/components/CodeAnimation/CodeGeneration.tsx b/components/CodeAnimation/CodeGeneration.tsx index 9119c3678744..25cb8da21c90 100644 --- a/components/CodeAnimation/CodeGeneration.tsx +++ b/components/CodeAnimation/CodeGeneration.tsx @@ -4,9 +4,9 @@ */ export default function renderCodeGeneration() { - return ( -
-

content here

-
- ) -} \ No newline at end of file + return ( +
+

content here

+
+ ); +} diff --git a/components/CodeAnimation/DemoAnimation.tsx b/components/CodeAnimation/DemoAnimation.tsx index d815c949af05..4e8358fb5ded 100644 --- a/components/CodeAnimation/DemoAnimation.tsx +++ b/components/CodeAnimation/DemoAnimation.tsx @@ -1,21 +1,21 @@ import React, { useState } from 'react'; + +import Container from '../layout/Container'; import renderAsyncAPIContent from './AsyncAPIcontent'; import renderCodeGeneration from './CodeGeneration'; import renderDocumentation from './Documentation'; -import Container from '../layout/Container'; /** - * @description A React component that displays a demo animation interface with three tabs: - * "AsyncAPI Document," "Code Generation," and "Documentation." The content of each tab + * @description A React component that displays a demo animation interface with three tabs: + * "AsyncAPI Document," "Code Generation," and "Documentation." The content of each tab * dynamically updates based on the active tab selected by the user. - * + * */ export default function DemoAnimation() { const [activeTab, setActiveTab] = useState('AsyncAPI Document'); const tabs = ['AsyncAPI Document', 'Code Generation', 'Documentation']; - /** * @description Determines and renders the content for the currently active tab. */ @@ -32,39 +32,35 @@ export default function DemoAnimation() { }; return ( -
+
-

- Sneak Peek Into The Real Process -

-

- One of our main goals is to improve the current state of Event
- Driven Architecture (EDA!) -

+

Sneak Peek Into The Real Process

+

+ One of our main goals is to improve the current state of Event +
+ Driven Architecture (EDA!) +

-
- {tabs.map((tab) => ( - - ))} -
+ onClick={() => setActiveTab(tab)} + > + {tab} + + ))} +
-
-
-
- {renderContent()} -
+
+
+
{renderContent()}
); -}; \ No newline at end of file +} diff --git a/components/CodeAnimation/Documentation.tsx b/components/CodeAnimation/Documentation.tsx index 5a27b77a0d01..72d916b6c435 100644 --- a/components/CodeAnimation/Documentation.tsx +++ b/components/CodeAnimation/Documentation.tsx @@ -4,9 +4,9 @@ */ export default function renderDocumentation() { - return ( -
-

Documentation

-
- ) -} \ No newline at end of file + return ( +
+

Documentation

+
+ ); +} diff --git a/components/Hero.tsx b/components/Hero.tsx index ce2cdb056404..7919622b6b1c 100644 --- a/components/Hero.tsx +++ b/components/Hero.tsx @@ -7,9 +7,9 @@ import Button from './buttons/Button'; import AnnouncementHero from './campaigns/AnnouncementHero'; import DemoAnimation from './CodeAnimation/DemoAnimation'; import Features from './features'; -import Heading from './typography/Heading'; import Container from './layout/Container'; import DiamondSponsors from './sponsors/DiamondSponsors'; +import Heading from './typography/Heading'; interface HeroProps { className?: string; @@ -46,21 +46,21 @@ export default function Hero({ className = '' }: HeroProps) { className='block w-full md:w-auto' text={t('main.join_btn')} href='/slack-invite' - icon={""} + icon={''} data-testid='Join-Button' />

OR

-
- +
+ {t('sponsors.diamondTitle')} diff --git a/components/SupportUs/SupportUs.tsx b/components/SupportUs/SupportUs.tsx index 205f6565fcb6..1a99cdd45c53 100644 --- a/components/SupportUs/SupportUs.tsx +++ b/components/SupportUs/SupportUs.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { items } from './SupportItemsList'; import Heading from '../typography/Heading'; import Paragraph from '../typography/Paragraph'; import TextLink from '../typography/TextLink'; +import { items } from './SupportItemsList'; interface SupportUsProps { className?: string; @@ -19,19 +19,13 @@ interface SupportUsProps { export default function SupportUs({ className = '' }: SupportUsProps): React.ReactNode { return (
- - Supporters - - - The following companies support us by letting us use their products for free. Interested in - supporting us too? - + Supporters + + The following companies support us by letting us use their products for free. Interested in supporting us too? + Email us - for more info + {' '} + for more info
-
-
- +
+
+
+ {t('features.title')} - - {t('features.description')} - + {t('features.description')}
-
-