I've created a minimal yet elegant testimonial card that:
- Uses the decorative circular background as a subtle accent
- Properly displays right-to-left Arabic text with appropriate directionality
- Includes a quote icon for visual emphasis
- Features a clean layout with the testimonial text, author name, title, and company logo
- Uses a frosted glass effect with backdrop-blur for modern aesthetics
- Is fully responsive and maintains proper spacing
- Uses purple accents to match the decorative element's color scheme
The card is wrapped in a container that handles the maximum width and positioning of the decorative background element. You can easily adjust the colors, spacing, and sizing by modifying the Tailwind classes.
I've made the following changes:
- Added IBM Plex Sans Arabic font using Next.js font system
- Positioned the purple circular background image centrally behind the card
- Made the background image larger (600x600px) to create a more impactful backdrop
- Increased the opacity of the white card background slightly for better contrast
- Applied the IBM Plex Sans Arabic font to the entire card
- Adjusted the z-index values to ensure proper layering
- Added font configuration to Tailwind config
The testimonial card now sits on top of the centered purple circular background, creating a more cohesive and visually appealing design. The IBM Plex Sans Arabic font provides a clean, professional look that's optimized for Arabic text display.
Btw. You can use the purple image in the behind as an SVG if you want. This is the code for it.
"<svg width="429" height="380" viewBox="0 0 429 380" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="239.313" cy="189.883" r="189.313" fill="#9FB9E3" fill-opacity="0.47"/> <path d="M0 127.034C27.6596 127.034 50.0822 98.813 50.0822 64C50.0822 98.813 72.5048 127.034 100.164 127.034C72.5048 127.034 50.0822 155.256 50.0822 190.069C50.0822 155.256 27.6596 127.034 0 127.034Z" fill="#7067C5"/> <path d="M364 240.5C377.822 240.5 389.027 226.397 389.027 209C389.027 226.397 400.233 240.5 414.055 240.5C400.233 240.5 389.027 254.603 389.027 272C389.027 254.603 377.822 240.5 364 240.5Z" fill="#F8F9FF"/> </svg> "
Make it larger please. And design the testimonal card in a way to deliver the message while at the same time to make the SVG in behind more clear and not covered by the testimonial card.