https://radicalimaging.com/components/QuoteWall.jsx

1// Quote wall — sits directly under the featured Dr. White testimonial.
2// Depth layer of the social-proof stack: four named, verbatim client quotes,
3// laid out 2×2 on white. No photos yet — clean monogram fallback in the brand
4// style. Each card's company echoes a name in the Proof grid above; where a
5// person carried Radical to their next company, we show the "then → now" tie.
6
7const QUOTES = [
8  {
9    quote:
10      "I worked with Radical to adapt a custom OHIF solution to a Cloud environment. I was impressed with the Radical team\u2019s deep understanding of medical image annotation, and how quickly they scoped our custom Cloud environment\u2019s capabilities. The project would not have been possible without them, and they were a pleasure to work with.",
11    name: 'Alex Weston',
12    initials: 'AW',
13    company: 'Mayo Clinic',
14  },
15  {
16    quote:
17      "We\u2019ve made great progress on our cardiology viewer with Radical Imaging\u2019s help. Their developers are focused, meticulous and really understand the technology we\u2019re using. I appreciate the direct involvement of their tech leads on our projects; their expertise in medical imaging in general and the OHIF framework in particular gives me confidence that we can tackle any hard problems we might face.",
18    name: 'Jeffrey Soble',
19    initials: 'JS',
20    company: 'Ascend',
21  },
22  {
23    quote:
24      "As a practicing urologist, I needed a tool that could dramatically improve the speed and quality of prostate MRI interpretation. Radical Imaging quickly understood my vision and turned it into a working MVP. Their OHIF customizations and seamless AI integration have dramatically improved speed, efficiency, and accuracy \u2014 giving us a strong foundation to build the next-generation prostate MRI viewer.",
25    name: 'Dr. Tom Sanford',
26    initials: 'TS',
27    company: 'Acurix',
28    note: 'Founder & CEO \u00b7 Practicing Urologist',
29  },
30  {
31    quote:
32      "The engineers at Radical Imaging are easy to work with, they feel like part of our team. We\u2019ve been able to accelerate development of some high-profile features of our product thanks to their high level of ownership and dedication.",
33    name: 'Chris Hafey',
34    initials: 'CH',
35    company: 'Nucleus Health',
36  },
37];
38
39const QuoteCard = ({ q }) => (
40  <figure
41    style={{
42      margin: 0,
43      display: 'flex',
44      flexDirection: 'column',
45      background: '#fff',
46      border: '1px solid var(--border-hairline)',
47      borderRadius: 'var(--radius-lg)',
48      padding: '36px 36px 28px',
49      boxShadow: 'var(--shadow-1)',
50    }}
51  >
52    {/* Opening quote mark — brand accent */}
53    <span
54      aria-hidden="true"
55      style={{
56        fontFamily: 'Georgia, serif',
57        fontSize: 56,
58        lineHeight: 0.8,
59        height: 28,
60        color: 'var(--color-oxford-blue)',
61        marginBottom: 18,
62      }}
63    >
64      &ldquo;
65    </span>
66
67    <blockquote
68      style={{
69        margin: 0,
70        flex: 1,
71        fontSize: 17.5,
72        lineHeight: 1.62,
73        letterSpacing: '-0.005em',
74        color: 'var(--color-oxford-blue)',
75        textWrap: 'pretty',
76      }}
77    >
78      {q.quote}
79    </blockquote>
80
81    {/* Attribution lockup */}
82    <figcaption
83      style={{
84        marginTop: 28,
85        paddingTop: 22,
86        borderTop: '1px solid var(--border-hairline)',
87        display: 'flex',
88        alignItems: 'center',
89        gap: 16,
90      }}
91    >
92      <div
93        aria-hidden="true"
94        style={{
95          flex: '0 0 auto',
96          width: 50,
97          height: 50,
98          borderRadius: '50%',
99          background: 'var(--color-oxford-blue)',
100          color: '#fff',
101          display: 'flex',
102          alignItems: 'center',
103          justifyContent: 'center',
104          fontSize: 16,
105          fontWeight: 600,
106          letterSpacing: '0.02em',
107          boxShadow: '0 0 0 1px rgba(9,37,64,0.06), 0 0 0 4px rgba(40,224,221,0.0)',
108        }}
109      >
110        {q.initials}
111      </div>
112      <div style={{ minWidth: 0 }}>
113        <div
114          style={{
115            fontSize: 16,
116            fontWeight: 600,
117            color: 'var(--color-oxford-blue)',
118            lineHeight: 1.3,
119          }}
120        >
121          {q.name}
122        </div>
123        <div
124          style={{
125            fontSize: 14.5,
126            color: 'var(--fg-2)',
127            marginTop: 2,
128            display: 'flex',
129            alignItems: 'baseline',
130            flexWrap: 'wrap',
131            gap: '0 8px',
132          }}
133        >

134          <span style={{ fontWeight: 500, color: 'var(--accent-on)' }}>{q.company}</span>
135          {q.note && (
136            <span style={{ fontSize: 13, color: 'var(--fg-3)' }}>{q.note}</span>
137          )}
138        </div>
139      </div>
140    </figcaption>
141  </figure>
142);
143
144const QuoteWall = () => (
145  <section
146    id="quotes"
147    className="band"
148    data-screen-label="07b Quote Wall"
149    style={{ background: '#fff', paddingTop: 88, paddingBottom: 40 }}
150  >
151    <div className="container">
152      <div className="eyebrow">More Client Voices</div>
153      <div
154        className="quote-wall-grid"
155        style={{
156          display: 'grid',
157          gridTemplateColumns: 'repeat(2, 1fr)',
158          gap: 24,
159          marginTop: 8,
160          alignItems: 'stretch',
161        }}
162      >
163        {QUOTES.map((q, i) => (
164          <QuoteCard key={i} q={q} />
165        ))}
166      </div>
167    </div>
168  </section>
169);
170
171window.QuoteWall = QuoteWall;