Skip to content

Commit

Permalink
design updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@vishvamsinh28
vishvamsinh28 committed Aug 9, 2023
1 parent 9132a0c commit a8c7197
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 28 deletions.
4 changes: 3 additions & 1 deletion components/FinancialSummary/AsyncAPISummary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ function AsyncAPISummary() {
<Container wide>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-8">
<div className="col-start-3 col-span-5">
<Heading level="h1" typeStyle="heading-md">AsyncAPI Finance Summary</Heading>
<Heading level="h1" typeStyle="heading-md my-3 mx-3" style={{ fontSize: '48px' }}>
<h1>AsyncAPI Financial Summary</h1>
</Heading>
<Paragraph typeStyle="body-md" className="my-4 max-w-4xl">
To help improve the current state of Event-Driven Architectures and their tooling, you can show your support for
the AsyncAPI Initiative by making a financial contribution. We offer three donation options: <strong>Open Collective, GitHub
Expand Down
2 changes: 1 addition & 1 deletion components/FinancialSummary/BarChartComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ const BarChartComponent = ({ data }) => {
target="_blank"
rel="noopener noreferrer"
>
Click here to know more
Know more about Budget
</a>
</button>
</div>
Expand Down
20 changes: 12 additions & 8 deletions components/FinancialSummary/ExpenseBreakdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const cardsData = [
},
{
title: "Hiring",
body: "To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. Thulie joins as community manager, with plans to expand the team. our team",
body: (<p>To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. <a style={{textDecoration:"underline"}} href="https://www.linkedin.com/in/v-thulisile-sibanda/">Thulie</a> joins as community manager, with plans to expand the team. our team</p>),
image: "/img/finance/expense_5.png",
},
{
Expand All @@ -38,10 +38,12 @@ const cardsData = [

function Card({ title, body, image }) {
return (
<div className="bg-white rounded-lg shadow-md p-4">
{image && <img src={image} alt={title} className="w-full h-32 object-cover rounded-md mb-4" />}
<h2 className="text-lg font-semibold mb-2">{title}</h2>
<p className="text-gray-600">{body}</p>
<div className="bg-white rounded-md shadow-md p-4 flex items-center">
{image && <img src={image} alt={title} className="w-1/6 h-auto object-cover rounded-md mr-4" />}
<div style={{color: "#212526" }}>
<h2 className="text-lg font-semibold mb-1">{title}</h2>
<p className="text-sm text-gray-600">{body}</p>
</div>
</div>
);
}
Expand All @@ -58,13 +60,15 @@ function ExpenseBreakdown() {
<Container wide>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-16" style={{ backgroundColor: "#EFFAFE" }}>
<div className="col-start-2 col-span-7 my-12">
<Heading level="h1" typeStyle="heading-md" className="my-3 mx-3"><h1 id="expense-breakdown">Expense Breakdown</h1></Heading>
<Paragraph typeStyle="body-md" className="my-3 max-w-4xl mx-3">
<Heading level="h1" typeStyle="heading-md my-3 mx-3" style={{ fontSize: '32px' }}>
<h1 id="expense-breakdown">Expense Breakdown</h1>
</Heading>
<Paragraph typeStyle="body-md" className="my-3 max-w-4xl mx-3" style={{color: "#212526" }}>
Funds from GitHub Sponsors are directly transferred to our AsyncAPI Open
Collective account. We maintain transparency in all expenses, and the TSC approves
anticipated expenses.
</Paragraph>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8 mx-3">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8 mx-3">
{cardsData.map((card, index) => (
<Card key={index} title={card.title} body={card.body} image={card.image} />
))}
Expand Down
42 changes: 26 additions & 16 deletions components/FinancialSummary/SponsorshipTiers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,20 @@ import Heading from "../typography/Heading"
import Paragraph from '../typography/Paragraph'

function SponsorshipTiers() {
const hash = window.location.hash;
if (hash) {
const targetElement = document.querySelector(hash);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
const hash = window.location.hash;
if (hash) {
const targetElement = document.querySelector(hash);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
}
return (
<Container wide>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-16 bg-purple-100">
<div className="col-start-2 col-span-7 my-12">
<Heading><h1 level="h3" typeStyle="heading-md" id="sponsorship-tiers" className="my-3 mx-3">Sponsorship Tiers</h1></Heading>
<Heading level="h1" typeStyle="heading-md my-3 mx-3" style={{ fontSize: '32px' }}>
<h1 id="sponsorship-tiers">Sponsorship Tiers</h1>
</Heading>
<Paragraph typeStyle="body-md" className="my-3 max-w-4xl mx-3">
AsyncAPI offers various sponsorship tiers, each with its own set
of benefits and privileges. These tiers include Bronze, Silver,
Expand All @@ -26,33 +28,41 @@ function SponsorshipTiers() {
<thead style={{ backgroundColor: '#805CDA' }} className="text-lg text-white">
<tr>
<th className="border border-white-500 px-6 py-4 md:px-10 md:py-6">Tiers</th>
<th className="border border-white-500 px-6 py-4 md:px-10 md:py-6">Benefits</th>
<th className="border border-white-500 px-6 py-4 md:px-10 md:py-6">Amounts</th>
<th className="border border-white-500 px-6 py-4 md:px-10 md:py-6">Benefits</th>
</tr>
</thead>
<tbody className="text-sm">
<tbody className="text-sm" style={{fontWeight:400}}>
<tr>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">Bronze</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">$100/month</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">Company logo in README on GitHub</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">
Company logo in README on GitHub
</td>
</tr>
<tr>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">Silver</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">$500/month</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">Company logo in README on GitHub and asyncapi.com</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">
Company logo in README on GitHub and asyncapi.com
</td>
</tr>
<tr>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">Gold</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">$1000/month</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">Company logo in README on GitHub and asyncapi.com</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">
Company logo in README on GitHub and asyncapi.com
</td>
</tr>
<tr>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">Platinum</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">$2000/month</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">Company logo in README on GitHub and asyncapi.com. Up to 2
hours of support per month. Support will be remote with the
option of a shared screen or via private chat. Support hours do not
accumulate.</td>
<td className="border border-gray-500 px-6 py-2 md:px-10 md:py-2">
Company logo in README on GitHub and asyncapi.com.
Up to 2 hours of support per month. Support will be
remote with the option of a shared screen or via private chat.
Support hours do not accumulate.
</td>
</tr>
</tbody>
</table>
Expand Down
6 changes: 4 additions & 2 deletions components/FinancialSummary/SuccessStories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ function SuccessStories() {
<Container wide>
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-16 bg-purple-100">
<div className="col-start-2 col-span-7 my-12">
<Heading level="h3" typeStyle="heading-lg" className="my-3 mx-3"><h1 id="success-stories">Success Stories</h1></Heading>
<Paragraph typeStyle="body-sm" className="my-3 max-w-4xl mx-3">
<Heading level="h1" typeStyle="heading-md my-3 mx-3" style={{ fontSize: '32px' }}>
<h1 id="success-stories">Success Stories</h1>
</Heading>
<Paragraph typeStyle="body-lg" className="my-3 max-w-4xl mx-3">
Thanks to financial support we can already see many success stories in
the project.
</Paragraph>
Expand Down

0 comments on commit a8c7197

Please sign in to comment.