Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add testimonial carousel #1704

Closed
wants to merge 20 commits into from
Closed

feat: add testimonial carousel #1704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
622c655
feat: add testimonial carousel
May 23, 2023
ab4f4ac
Merge branch 'master' into async_testimonial
ashutosh-rath02 May 25, 2023
43a69d4
fix: add arrows for navigation
May 25, 2023
ab5633d
Merge branch 'async_testimonial' of https://github.com/Lucif3r-in/web…
May 25, 2023
143b22e
Merge branch 'master' into async_testimonial
ashutosh-rath02 May 28, 2023
db3beea
fix: fix nav arrow && chore: add content to config
May 28, 2023
ef4e468
fix: added comments explaining the logic
May 28, 2023
0325cec
Merge branch 'master' into async_testimonial
ashutosh-rath02 May 29, 2023
2962bca
Merge branch 'master' into async_testimonial
ashutosh-rath02 May 30, 2023
a531ff0
fix: change card structure
ashutosh-rath02 Jun 1, 2023
3310087
Merge branch 'async_testimonial' of https://github.com/Lucif3r-in/web…
ashutosh-rath02 Jun 1, 2023
3892e2e
Merge branch 'master' into async_testimonial
ashutosh-rath02 Jun 4, 2023
fafd00e
fix: change arrow styles && chore: store TestimonialData
ashutosh-rath02 Jun 4, 2023
00af294
feat: add auto scroll to carousels
ashutosh-rath02 Jun 4, 2023
f7e677c
fix: suggested changes
ashutosh-rath02 Oct 1, 2023
13815e9
Revert "fix: suggested changes"
ashutosh-rath02 Oct 1, 2023
6a54171
fix: made changes
ashutosh-rath02 Oct 1, 2023
232c3c7
Merge branch 'master' into async_testimonial
ashutosh-rath02 Oct 1, 2023
3d3533b
Merge branch 'master' into async_testimonial
ashutosh-rath02 Dec 8, 2023
453ee50
Merge branch 'master' into async_testimonial
ashutosh-rath02 Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 76 additions & 31 deletions components/Testimonial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,80 @@
import Paragraph from "./typography/Paragraph";
import ArrowLeft from '../components/icons/ArrowLeft'
import ArrowRight from '../components/icons/ArrowRight'
import { useState, useEffect } from 'react';
import testimonials from './TestimonialData';

const TestimonialCarousel = () => {
const [activeIndex, setActiveIndex] = useState(0);
const len = testimonials.length;

const goToPrevious = () => {
setActiveIndex((prevIndex) => (prevIndex === 0 ? len - 1 : prevIndex - 1));
};

const goToNext = () => {
setActiveIndex((prevIndex) => (prevIndex === len - 1 ? 0 : prevIndex + 1));
};

const goToIndex = (index) => {
setActiveIndex(index);
};

useEffect(() => {
const interval = setInterval(goToNext, 10000);
return () => {
clearInterval(interval);
};
}, [activeIndex]);

export default function Testimonial({
className = '',
text,
authorName,
authorDescription,
authorAvatar,
}) {
return (
<li className={`py-4 px-4 sm:px-6 md:flex md:flex-row md:py-4 md:pr-0 ${className}`}>
<blockquote className="mt-8 md:flex-grow md:flex md:flex-col">
<div className="relative text-lg leading-7 font-medium text-gray-600 md:flex-1">
<svg className="absolute top-0 left-0 transform -translate-y-2 h-8 w-8 text-primary-500" fill="currentColor" viewBox="0 0 32 32">
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<Paragraph className="relative pl-10 text-left">
{text}
</Paragraph>
</div>
<footer className="mt-6">
<div className="flex">
<figure className="flex-shrink-0 inline-flex rounded-full border-2 border-white">
<img className="h-12 w-12 rounded-full" src={authorAvatar} alt={authorName} data-testid="Testimonial-img"/>
</figure>
<div className="ml-4 text-left">
<p className="text-base leading-6 font-bold text-gray-900">{authorName}</p>
<p className="text-base leading-6 font-medium text-primary-500">{authorDescription}</p>
<div className="relative flex flex-row justify-center items-center md:gap-4 overflow-x-hidden">
<div className="h-8 w-8 rounded-full bg-[#ddd] cursor-pointer mb-2 absolute left-0 z-10 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100 flex justify-center items-center" onClick={goToPrevious}>
<ArrowLeft className='w-4'/>
</div>
<div className="flex flex-col justify-center items-center">
<div className="relative h-[300px] w-[300px] md:w-[600px] md:h-[450px] overflow-hidden">
{testimonials.map((testimonial, index) => (
ashutosh-rath02 marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't specify height for the box, as you may not know how long can be testimonial text. Moreover, using overflow-hidden is not a good practice. You can allow Read More option inside box to expand the testimonial box.

Copy link
Contributor Author

@ashutosh-rath02 ashutosh-rath02 Oct 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason I cant set the height to auto... When I am doing height-auto or max-content the cards just disappears. The Read more part is causing some issue also, causing this PR to delay

Copy link
Member

@Mayaleeeee Mayaleeeee Oct 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weldone @akshatnema

Hello @Lucif3r-in, thank you.
Where can I review the updated version of the testimonial section? Or is it still the same link in the deploy preview column?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same link @Mayaleeeee

Copy link
Member

@Mayaleeeee Mayaleeeee Oct 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. The icon here is not centered in the middle.
    Screenshot 2023-10-02 134612

  2. You need to change the card background color to white and add elevation to match other cards on the website.
    Screenshot 2023-10-02 173125

Thank you @Lucif3r-in

<div
key={index}
className={`flex flex-col items-center justify-center absolute bg-slate-100 shadow-md rounded-md transform transition-transform ${
index === activeIndex ? 'opacity-100 scale-100' : 'opacity-0 scale-90'
}`}
>
<div className="rounded-full h-16 w-16 md:h-32 md:w-32 overflow-hidden my-4">
<img src={testimonial.imgUrl} className="h-full w-full" alt={testimonial.name} />
</div>
<p className="text-[14px] lg:text-base lg:leading-6 font-bold text-gray-900 mb-2">
{testimonial.name}
</p>
<p className="text-[12px] lg:text-base lg:leading-6 font-medium text-primary-500 mb-2 md:mb-4">
{testimonial.salutation}
</p>
<p className="h-[200px] text-base px-2 lg:px-6 overflow-clip md:text-lg">
{testimonial.text}
</p>
</div>
))}
</div>
<div className="flex justify-center w-[400px] mt-4">
{testimonials.map((testimonial, index) => (
<div
key={index}
className={`h-2 w-2 rounded-full mx-1 cursor-pointer ${
activeIndex === index ? 'bg-primary-500' : 'bg-gray-300'
}`}
onClick={() => goToIndex(index)}
/>
))}
</div>
</div>
<div
className="h-8 w-8 rounded-full bg-[#ddd] cursor-pointer mb-2 z-10 absolute right-0 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100"
onClick={goToNext}
>
<ArrowRight />
</div>
</footer>
</blockquote>
</li>
)
}
</div>
);
};

export default TestimonialCarousel;
28 changes: 28 additions & 0 deletions components/TestimonialData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
const TestimonialData = [
{
imgUrl: '/img/testimonials/matt-mclarty.jpg',
name: 'Matt McLarty',
salutation: 'Global Leader of API Strategy at MuleSoft',
text: 'Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.',
},
{
imgUrl: '/img/testimonials/bill-doerrfeld.jpg',
name: 'Bill Doerrfeld',
salutation: 'Editor in Chief at Nordic APIs',
text: 'Event-driven APIs need love too! AsyncAPI brings the many benefits of a machine/human readable specification to these nuanced approaches.',
},
{
imgUrl: '/img/testimonials/jonathan-schabowsky.jpg',
name: 'Jonathan Schabowsky',
salutation: 'Sr. Architect, Office of the CTO at Solace',
text: "Developers need to be able to quickly and consistently create event-driven applications that provide business value and react to customer needs in realtime. I can't count how many times I've heard developers ask for OpenAPI/Swagger style tools for the asynchronous and event driven world, and that is exactly what the AsyncAPI initiative is making a reality.",
},
{
imgUrl: '/img/testimonials/eric-horesnyi.jpg',
name: 'Eric Horesnyi',
salutation: 'CEO at Streamdata.io',
text: 'We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors everyday for driving the community towards common standards.',
},
];

export default TestimonialData
148 changes: 147 additions & 1 deletion pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,153 @@ function HomePage() {
<img src={loader} className="mx-auto w-16" />
<div className="text-xl my-auto">Loading...</div>
</div>
</div>
<Container className="text-center py-12" wide as="section">
<Heading
level="h3"
typeStyle="heading-lg"
className="mb-4"
>
Join our great community!
</Heading>
<Paragraph className="mt-2 md:w-1/2 md:mx-auto">
We're a community of great people who are passionate about AsyncAPI and event-driven architectures.
</Paragraph>
<div className="py-2 lg:py-12">
<Container wide>
<div className="lg:flex">
<div className="mt-10 lg:mt-0 lg:w-1/2">
<Slack />
</div>
<section className="lg:text-left lg:max-w-xl lg:w-1/2 lg:ml-12">
<div className="mt-5">
<Heading level="h4" typeStyle="heading-md-semibold">
Join our Slack workspace
</Heading>
<Paragraph className="mt-2">
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 👋 &nbsp;you're welcome to join us. We're nice people 🙂
</Paragraph>
</div>
<div className="mt-5 flex justify-center lg:justify-start">
<Button className="w-full md:w-auto" text="Join us!" href="/slack-invite" />
</div>
</section>
</div>

<div className="mt-12 lg:flex lg:flex-row-reverse">
<section className="mt-10 lg:mt-0 lg:flex-1">
<Calendar size="2" className="float-left" />
</section>
<section className="lg:text-left lg:max-w-xl lg:mr-12">
<div className="mt-5 lg:mr-12">
<Heading level="h3" typeStyle="heading-md-semibold">
Join our public meetings
</Heading>
<Paragraph className="mt-2">
AsyncAPI hosts different meetings every week. They are focused on different topic, sometimes purely technical and sometimes about community building. Pick one and join us!

<TextLink href="/community/meetings">
Learn more about our meetings.
</TextLink>
</Paragraph>
<ul className="mt-5 md:flex justify-center">
<li>
<GoogleCalendarButton href="https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t" />
</li>
<li>
<SubscribeButton
href="/community/meetings"
className="mt-2 md:mt-0 md:ml-2"
/>
</li>
<li>
<ICSFileButton
href="https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics"
className="mt-2 md:mt-0 md:ml-2"
/>
</li>
</ul>
</div>
</section>
</div>
</Container>
<Container wide>
<NewsroomSection />
</Container>
</div>

</Container>


<section className="pb-20" role="contentinfo" aria-label='Our Sponsors'>
<Container className="text-center pb-6" wide as="section">
<Heading
level="h3"
typeStyle="heading-lg"
className="mb-4"
>
Platinum Sponsors
</Heading>
<Sponsors className="mt-4" showSupportBanner={ false } />
</Container>

<Container className="text-center pb-6" wide as="section">
<Heading
level="h3"
typeStyle="heading-lg"
className="mb-4"
>
Gold Sponsors
</Heading>
<GoldSponsors className="mt-4" showSupportBanner={ false } />
</Container>

<Container className="text-center pyb-6" wide as="section">
<Heading
level="h3"
typeStyle="heading-lg"
className="mb-4"
>
Silver Sponsors
</Heading>
<SilverSponsors className="mt-4" showSupportBanner={ false } />
</Container>


<Container className="text-center py-6" wide as="section">
<Heading
level="h3"
typeStyle="heading-md-semibold"
className="mb-4"
>
Want to Sponsor Us?
</Heading>
<Paragraph className="mt-2 md:w-1/2 md:mx-auto">
These great organizations are already supporting AsyncAPI. Want to become a sponsor?
<TextLink href="https://opencollective.com/asyncapi" target="_blank">
Support us!
</TextLink>
</Paragraph>
</Container>
</section>
<Container className="text-center py-6 pb-20" wide>
<Heading level="h3" typeStyle="heading-lg" className="mb-4">
Supported by
</Heading>
<Paragraph className="mt-3 max-w-2xl mx-auto sm:mt-4 pb-4">
The following companies support us by letting us use their products for free. Interested in supporting us too?
<TextLink href="mailto:info@asyncapi.io" target="_blank">
Email us
</TextLink> for more info.
</Paragraph>
<SupportUs className="mt-4" showSupportBanner={ false } />
</Container>
<Container className="text-center pb-20 mt-8" wide as="section">
<Heading level="h3" typeStyle="heading-lg" className="mb-8">
What the experts are saying
</Heading>
<Testimonial />
</Container>
</main>
</>
)
}
Expand Down
Loading