Source Code
case-study-cards.tsx
1"use client";
2
3const caseStudies = [
4 {
5 logo: (
6 <svg viewBox="0 0 512 214" className="h-8">
7 <path
8 fill="#635BFF"
9 d="M512 110.08c0-36.409-17.636-65.138-51.342-65.138c-33.85 0-54.33 28.73-54.33 64.854c0 42.808 24.179 64.426 58.88 64.426c16.925 0 29.725-3.84 39.396-9.244v-28.445c-9.67 4.836-20.764 7.823-34.844 7.823c-13.796 0-26.027-4.836-27.591-21.618h69.547c0-1.85.284-9.245.284-12.658m-70.258-13.511c0-16.071 9.814-22.756 18.774-22.756c8.675 0 17.92 6.685 17.92 22.756zm-90.31-51.627c-13.939 0-22.899 6.542-27.876 11.094l-1.85-8.818h-31.288v165.83l35.555-7.537l.143-40.249c5.12 3.698 12.657 8.96 25.173 8.96c25.458 0 48.64-20.48 48.64-65.564c-.142-41.245-23.609-63.716-48.498-63.716m-8.534 97.991c-8.391 0-13.37-2.986-16.782-6.684l-.143-52.765c3.698-4.124 8.818-6.968 16.925-6.968c12.942 0 21.902 14.506 21.902 33.137c0 19.058-8.818 33.28-21.902 33.28M241.493 36.551l35.698-7.68V0l-35.698 7.538zm0 10.809h35.698v124.444h-35.698zm-38.257 10.524L200.96 47.36h-30.72v124.444h35.556V87.467c8.39-10.951 22.613-8.96 27.022-7.396V47.36c-4.551-1.707-21.191-4.836-29.582 10.524m-71.112-41.386l-34.702 7.395l-.142 113.92c0 21.05 15.787 36.551 36.836 36.551c11.662 0 20.195-2.133 24.888-4.693V140.8c-4.55 1.849-27.022 8.391-27.022-12.658V77.653h27.022V47.36h-27.022zM35.982 83.484c0-5.546 4.551-7.68 12.09-7.68c10.808 0 24.461 3.272 35.27 9.103V51.484c-11.804-4.693-23.466-6.542-35.27-6.542C19.2 44.942 0 60.018 0 85.192c0 39.252 54.044 32.995 54.044 49.92c0 6.541-5.688 8.675-13.653 8.675c-11.804 0-26.88-4.836-38.827-11.378v33.849c13.227 5.689 26.596 8.106 38.827 8.106c29.582 0 49.92-14.648 49.92-40.106c-.142-42.382-54.329-34.845-54.329-50.774"
10 />
11 </svg>
12 ),
13 description:
14 "Stripe partnered with leading developer communities to increase brand awareness and drive qualified traffic, resulting in higher conversion rates and sustained user growth.",
15 result: "5x conversion rate",
16 },
17 {
18 logo: (
19 <svg viewBox="0 0 256 292" preserveAspectRatio="xMidYMid" className="h-8">
20 <path
21 d="M223.774 57.34c-.201-1.46-1.48-2.268-2.537-2.357-1.055-.088-23.383-1.743-23.383-1.743s-15.507-15.395-17.209-17.099c-1.703-1.703-5.029-1.185-6.32-.805-.19.056-3.388 1.043-8.678 2.68-5.18-14.906-14.322-28.604-30.405-28.604-.444 0-.901.018-1.358.044C129.31 3.407 123.644.779 118.75.779c-37.465 0-55.364 46.835-60.976 70.635-14.558 4.511-24.9 7.718-26.221 8.133-8.126 2.549-8.383 2.805-9.45 10.462C21.3 95.806.038 260.235.038 260.235l165.678 31.042 89.77-19.42S223.973 58.8 223.775 57.34zM156.49 40.848l-14.019 4.339c.005-.988.01-1.96.01-3.023 0-9.264-1.286-16.723-3.349-22.636 8.287 1.04 13.806 10.469 17.358 21.32zm-27.638-19.483c2.304 5.773 3.802 14.058 3.802 25.238 0 .572-.005 1.095-.01 1.624-9.117 2.824-19.024 5.89-28.953 8.966 5.575-21.516 16.025-31.908 25.161-35.828zm-11.131-10.537c1.617 0 3.246.549 4.805 1.622-12.007 5.65-24.877 19.88-30.312 48.297l-22.886 7.088C75.694 46.16 90.81 10.828 117.72 10.828z"
22 fill="#95BF46"
23 />
24 <path
25 d="M221.237 54.983c-1.055-.088-23.383-1.743-23.383-1.743s-15.507-15.395-17.209-17.099c-.637-.634-1.496-.959-2.394-1.099l-12.527 256.233 89.762-19.418S223.972 58.8 223.774 57.34c-.201-1.46-1.48-2.268-2.537-2.357"
26 fill="#5E8E3E"
27 />
28 <path
29 d="M135.242 104.585l-11.069 32.926s-9.698-5.176-21.586-5.176c-17.428 0-18.305 10.937-18.305 13.693 0 15.038 39.2 20.8 39.2 56.024 0 27.713-17.577 45.558-41.277 45.558-28.44 0-42.984-17.7-42.984-17.7l7.615-25.16s14.95 12.835 27.565 12.835c8.243 0 11.596-6.49 11.596-11.232 0-19.616-32.16-20.491-32.16-52.724 0-27.129 19.472-53.382 58.778-53.382 15.145 0 22.627 4.338 22.627 4.338"
30 fill="#FFF"
31 />
32 </svg>
33 ),
34 description:
35 "Shopify utilized targeted campaigns across e-commerce platforms to reach merchants and entrepreneurs, generating massive engagement and platform signups across multiple markets.",
36 result: "2.5M impressions",
37 },
38 {
39 logo: (
40 <svg className="size-8" viewBox="0 0 824 824" fill="none"><rect width="824" height="824" rx="184" fill="white" /><circle cx="606" cy="582" r="50" fill="#2E2E2E" /><path fill-rule="evenodd" clip-rule="evenodd" d="M216 237.833C216 212.52 236.52 192 261.833 192C287.146 192 307.667 212.52 307.667 237.833V512.833C307.667 538.146 287.146 558.667 261.833 558.667C236.52 558.667 216 538.146 216 512.833V237.833ZM417.668 311.166C417.668 285.853 438.188 265.333 463.501 265.333C488.814 265.333 509.335 285.853 509.335 311.166V586.166C509.335 611.479 488.814 632 463.501 632C438.188 632 417.668 611.479 417.668 586.166V480.75C417.668 466.916 409.226 454.483 396.367 449.38L392.535 447.86C371.664 439.577 348.346 439.992 327.782 449.011C315.561 454.371 307.668 466.452 307.668 479.796V344.203C307.668 357.547 315.561 369.628 327.782 374.988C348.346 384.007 371.664 384.422 392.535 376.14L396.367 374.619C409.226 369.516 417.668 357.084 417.668 343.25V311.166Z" fill="#2E2E2E" /></svg>
41 ),
42 description:
43 "Heptabase revolutionized their digital presence through strategic influencer partnerships and content marketing, achieving remarkable engagement and exponential user acquisition.",
44 result: "10x user growth",
45 },
46];
47
48export const CaseStudyCards = () => {
49 return (
50 <div className="w-full min-h-screen bg-foreground/95 flex items-center justify-center p-8">
51 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl">
52 {caseStudies.map((study, index) => (
53 <div
54 key={index}
55 className="relative w-full bg-[#242424] rounded-3xl px-8 py-12 border border-[#333]"
56 >
57 {/* Logo */}
58 <div className="mb-8">{study.logo}</div>
59
60 {/* Description */}
61 <div className="mb-12">
62 <p className="text-[#a0a0a0] text-base leading-relaxed">
63 {study.description}
64 </p>
65 </div>
66
67 {/* Results Section */}
68 <div className="mb-4">
69 <p className="text-[#a0a0a0] text-sm mb-2">Results:</p>
70 <h2 className="text-white text-2xl font-bold">{study.result}</h2>
71 </div>
72 </div>
73 ))}
74 </div>
75 </div>
76 );
77};
78
