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.

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

Implementing Testimonial Section #47

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

yassataiseer
Copy link

My current changes to this repository involve developing the testimonial section of the website I have attached a video demo below.

  • Fixes issue Implement Testimonials section #9
  • The testimonial component gives a horizontal scroll view with cards and excess text is cut off to avoid an overflow of characters
  • Tested on smaller screens and follows a similar design to the IndustriesGrid
2024-03-09_04-06-23.mp4

Copy link

netlify bot commented Mar 9, 2024

Deploy Preview for cosmic-klepon-3c693c ready!

Name Link
🔨 Latest commit 9d39685
🔍 Latest deploy log https://app.netlify.com/sites/cosmic-klepon-3c693c/deploys/66022442304d7200086b2eb0
😎 Deploy Preview https://deploy-preview-47--cosmic-klepon-3c693c.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@yassataiseer yassataiseer changed the title Implementing Testamonial Section Implementing Testimonial Section Mar 10, 2024
@abrichr
Copy link
Member

abrichr commented Mar 12, 2024

Thank you @yassataiseer !

This is what I see at https://deploy-preview-47--cosmic-klepon-3c693c.netlify.app/:

image

A few thoughts:

  • testimonials should be centered
  • author name/description should not be cut off
  • use an em dash for quotes, not two hyphens, i.e. not --
  • there could be more padding between author name/description and the horizontal line

Just some thoughts. Please feel free to be a bit more creative with the styling/appearance (e.g. hover animations).

Please also include the testimonial in the screenshot of the email in the description here: OpenAdaptAI/OpenAdapt#564

Thank you!

@yassataiseer
Copy link
Author

Hi, thanks for the feedback! How should the text not be cut off? I do not want it to overflow, should I include some character count? Other feedback is being changed accordingly. The testimony in OpenAdaptAI/OpenAdapt#564 has its name cutoff.

@yassataiseer
Copy link
Author

yassataiseer commented Mar 14, 2024

hi @abrichr I have implemented the following changes and attached a demo below.

  • Centered all testimonials
  • Added em dash
  • Allowed for embedded HTML tags to make UI more customizable such as bolding and line breaks(really any HTML tag)
  • Added hover animations and further developed the style

I attempted to guess the name of the person who wrote the testimony here: OpenAdaptAI/OpenAdapt#564. Please let me know the actual name so i can fix it.

2024-03-14_19-12-07.mp4

@abrichr
Copy link
Member

abrichr commented Mar 23, 2024

Thank you @yassataiseer !

How should the text not be cut off?

Ideally it should continue on the next line, and not end with an ellpisis (...).

Please let me know the actual name so i can fix it.

Kibeom Kim

@@ -0,0 +1,96 @@
.header{
Copy link
Member

Choose a reason for hiding this comment

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

Please fix formatting 🙏

import { faWindows, faApple } from '@fortawesome/free-brands-svg-icons';
import styles from './Testimonies.module.css';

export default function Testimonies() {
Copy link
Member

Choose a reason for hiding this comment

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

Please rename to "Testimonials"

import styles from './Testimonies.module.css';

export default function Testimonies() {
const TestimonyData = [
Copy link
Member

Choose a reason for hiding this comment

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

<br>
Anyway I'm very happy to get here thanks to OpenAdapter!
<br>
<br>
Copy link
Member

@abrichr abrichr Mar 25, 2024

Choose a reason for hiding this comment

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

Please use <p> instead of <br/>

@yassataiseer
Copy link
Author

Alright made the following fixes:

  • rename to "Testimonials"
  • changed variables to camelCase
  • goes to next line when author name is overflowing
  • fixed css formating
  • changed from <br> to <p>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants