From 95c944f60f44cbe6fe3ea73cd49c7505d35013ef Mon Sep 17 00:00:00 2001 From: aizuanjeme Date: Mon, 10 Aug 2026 04:11:21 +0100 Subject: [PATCH] feat: enhance testimonials section with new design and doodles - Refactored the Testimonials component to use a predefined array of testimonial items, improving maintainability and readability. - Introduced new SVG doodles (CircleScribble, Sparkle, SmileyDoodle) to enhance visual appeal in the testimonials section. - Updated the styling of testimonials for better responsiveness and aesthetics, including hover effects and improved layout. - Added a new Footer component with a custom Payjoin wordmark for branding consistency. - Adjusted custom CSS for footer styling and mobile menu behavior to enhance user experience. --- src/components/Doodles/index.tsx | 123 +++++++ src/components/FigmaDemo/index.jsx | 61 +++- src/components/HeaderContent/index.tsx | 329 +++++++++++++++--- .../HeaderContent/styles.module.css | 8 - src/components/HomepageFeatures/index.tsx | 146 ++++++-- src/components/LearnMore/index.tsx | 95 ++++- src/components/Testimonials/index.tsx | 178 +++++++--- src/css/custom.css | 48 ++- src/pages/index.tsx | 5 +- src/theme/Footer/index.tsx | 67 ++++ 10 files changed, 911 insertions(+), 149 deletions(-) create mode 100644 src/components/Doodles/index.tsx delete mode 100644 src/components/HeaderContent/styles.module.css create mode 100644 src/theme/Footer/index.tsx diff --git a/src/components/Doodles/index.tsx b/src/components/Doodles/index.tsx new file mode 100644 index 0000000..021a624 --- /dev/null +++ b/src/components/Doodles/index.tsx @@ -0,0 +1,123 @@ +/* + * Hand-drawn brand marks used to accent section headings. Each one positions + * itself absolutely, so the element it decorates has to be `relative` — for the + * word-level marks that means a `relative inline-block` span wrapping the word, + * so they measure against the word rather than the whole heading line. + */ + +/* + * Marker loop around a highlighted word, in the spirit of a circled word on + * paper: it overshoots and crosses itself rather than closing cleanly. + * preserveAspectRatio="none" stretches it to whatever the word measures, and + * non-scaling-stroke keeps the line an even weight through that stretch. + */ +export function CircleScribble() { + return ( + + + + ); +} + +/* Sparkle that sits over a highlighted word (Union.svg). */ +export function Sparkle() { + return ( + + + + ); +} + +/* + * The rotation lives inside the keyframe rather than in a `rotate-*` class, + * because an animated `transform` replaces the one Tailwind composes — the hand + * would snap upright the moment the animation took over. Rotated ~195deg, a + * negative translateY runs down-and-slightly-left in page space, so the gesture + * reads as poking at the frame below. Reduced motion keeps the pose, drops the + * movement. + */ +const handMotion = ` + @keyframes pjPoint { + 0%, 100% { transform: rotate(195deg) translateY(0); } + 50% { transform: rotate(195deg) translateY(-12px); } + } + + .pjPoint { animation: pjPoint 2.4s ease-in-out infinite; } + + @media (prefers-reduced-motion: reduce) { + .pjPoint { animation: none; transform: rotate(195deg); } + } +`; + +/* + * Hand (Vector.svg) that reaches toward whatever sits below it. The source art + * has the fingers pointing up, so it is flipped to angle down into the target. + * It hangs off the top edge of its parent, which must be `relative` and must + * leave enough headroom above itself for the hand to occupy — see the frame + * wrapper in FigmaDemo. Kept off phones, where there is no room beside the + * frame for it to sit without covering the content. + */ +export function PointingHand() { + return ( + <> + + + + + + ); +} + +/* Smiley parked in a band's corner (Group 1000011090.svg). */ +export function SmileyDoodle() { + return ( + + + + + + ); +} diff --git a/src/components/FigmaDemo/index.jsx b/src/components/FigmaDemo/index.jsx index 800ca94..1d28f70 100644 --- a/src/components/FigmaDemo/index.jsx +++ b/src/components/FigmaDemo/index.jsx @@ -1,20 +1,51 @@ +import { PointingHand } from "../Doodles"; + +const PROTOTYPE_SRC = + "https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2F7BpOmi30JgG6gIaE0T7fL4%2FPayjoin-Designs-Bitcoin-Wallet-UI-Kit-%2526-Design-System%3Fpage-id%3D4263%253A62592%26node-id%3D4954%253A70101%26viewport%3D-4364%252C-2385%252C0.48%26scaling%3Dmin-zoom%26starting-point-node-id%3D4954%253A70101"; + +/* + * Lightest band on the page: it lifts the demo out of the dark testimonial band + * above and steps back down into the closing band below, so the page reads + * darkest → lightest → settling rather than flat. + */ export default function FigmaDemo() { return ( -
-
-

Try it Yourself

- - Click through the app to see all it takes to payjoin - -