Source Code
b2b-saas-bento-grid.tsx
1import React from 'react'
2import SmartSimpleBrilliant from './smart-simple-brilliant';
3import YourWorkInSync from './your-work-in-sync';
4import EffortlessIntegration from './effortless-integration';
5import NumbersThatSpeak from './numbers-that-speak';
6
7function Badge({ icon, text }: { icon: React.ReactNode; text: string }) {
8 return (
9 <div className="px-[14px] py-[6px] bg-white shadow-[0px_0px_0px_4px_rgba(55,50,47,0.05)] overflow-hidden rounded-[90px] flex justify-start items-center gap-[8px] border border-[rgba(2,6,23,0.08)] shadow-xs">
10 <div className="w-[14px] h-[14px] relative overflow-hidden flex items-center justify-center">{icon}</div>
11 <div className="text-center flex justify-center flex-col text-[#37322F] text-xs font-medium leading-3 font-sans">
12 {text}
13 </div>
14 </div>
15 )
16}
17
18const B2BSAASBentoGrid = () => {
19 return (
20 <div className="w-full bg-[#F7F5F3] border-b border-[rgba(55,50,47,0.12)] flex flex-col justify-center items-center">
21 {/* Header Section */}
22 <div className="w-full px-4 sm:px-6 md:px-8 lg:px-0 py-8 sm:py-12 md:py-16 border-b border-[rgba(55,50,47,0.12)] flex justify-center items-center gap-6">
23 <div className="w-full max-w-[1060px] lg:w-[1060px] flex justify-center items-center">
24 <div className="w-full max-w-[616px] lg:w-[616px] px-4 sm:px-6 py-4 sm:py-5 shadow-[0px_2px_4px_rgba(50,45,43,0.06)] overflow-hidden rounded-lg flex flex-col justify-start items-center gap-3 sm:gap-4 shadow-none">
25 <Badge
26 icon={
27 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
28 <rect x="1" y="1" width="4" height="4" stroke="#37322F" strokeWidth="1" fill="none" />
29 <rect x="7" y="1" width="4" height="4" stroke="#37322F" strokeWidth="1" fill="none" />
30 <rect x="1" y="7" width="4" height="4" stroke="#37322F" strokeWidth="1" fill="none" />
31 <rect x="7" y="7" width="4" height="4" stroke="#37322F" strokeWidth="1" fill="none" />
32 </svg>
33 }
34 text="Bento grid"
35 />
36 <div className="w-full max-w-[598.06px] lg:w-[598.06px] text-center flex justify-center flex-col text-[#49423D] text-xl sm:text-2xl md:text-3xl lg:text-5xl font-semibold leading-tight md:leading-[60px] font-sans tracking-tight">
37 Built for absolute clarity and focused work
38 </div>
39 <div className="self-stretch text-center text-[#605A57] text-sm sm:text-base font-normal leading-6 sm:leading-7 font-sans">
40 Stay focused with tools that organize, connect
41 <br />
42 and turn information into confident decisions.
43 </div>
44 </div>
45 </div>
46 </div>
47
48 {/* Bento Grid Content */}
49 <div className="w-full flex justify-center items-start">
50 <div className="w-full max-w-[1060px] lg:w-[1060px] flex justify-center items-start">
51 <div className="w-4 sm:w-6 md:w-8 lg:w-12 self-stretch relative overflow-hidden">
52 {/* Left decorative pattern */}
53 <div className="w-[120px] sm:w-[140px] md:w-[162px] left-[-40px] sm:left-[-50px] md:left-[-58px] top-[-120px] absolute flex flex-col justify-start items-start">
54 {Array.from({ length: 200 }).map((_, i) => (
55 <div
56 key={i}
57 className="self-stretch h-3 sm:h-4 rotate-[-45deg] origin-top-left outline outline-[0.5px] outline-[rgba(3,7,18,0.08)] outline-offset-[-0.25px]"
58 />
59 ))}
60 </div>
61 </div>
62
63 <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-0 border-l border-r border-[rgba(55,50,47,0.12)]">
64 {/* Top Left - Smart. Simple. Brilliant. */}
65 <div className="border-b border-r-0 md:border-r border-[rgba(55,50,47,0.12)] p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-start items-start gap-4 sm:gap-6 bg-white">
66 <div className="flex flex-col gap-2">
67 <h3 className="text-[#37322F] text-lg sm:text-xl font-semibold leading-tight font-sans">
68 Smart. Simple. Brilliant.
69 </h3>
70 <p className="text-[#605A57] text-sm md:text-base font-normal leading-relaxed font-sans">
71 Your data is beautifully organized so you see everything clearly without the clutter.
72 </p>
73 </div>
74 <div className="w-full h-[200px] sm:h-[250px] md:h-[300px] rounded-lg flex items-center justify-center overflow-hidden">
75 <SmartSimpleBrilliant
76 width="100%"
77 height="100%"
78 theme="light"
79 className="scale-50 sm:scale-75 md:scale-90 lg:scale-95"
80 />
81 </div>
82 </div>
83
84 {/* Top Right - Your work, in sync */}
85 <div className="border-b border-[rgba(55,50,47,0.12)] p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-start items-start gap-4 sm:gap-6 bg-white">
86 <div className="flex flex-col gap-2">
87 <h3 className="text-[#37322F] font-semibold leading-tight font-sans text-lg sm:text-xl">
88 Your work, in sync
89 </h3>
90 <p className="text-[#605A57] text-sm md:text-base font-normal leading-relaxed font-sans">
91 Every update flows instantly across your team and keeps collaboration effortless and fast.
92 </p>
93 </div>
94 <div className="w-full h-[200px] sm:h-[250px] md:h-[300px] rounded-lg flex overflow-hidden text-right items-center justify-center">
95 <YourWorkInSync
96 width="400"
97 height="250"
98 theme="light"
99 className="scale-75 sm:scale-90 md:scale-95"
100 />
101 </div>
102 </div>
103
104 {/* Bottom Left - Effortless integration */}
105 <div className="border-r-0 md:border-r border-[rgba(55,50,47,0.12)] p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-start items-start gap-4 sm:gap-6 bg-white">
106 <div className="flex flex-col gap-2">
107 <h3 className="text-[#37322F] text-lg sm:text-xl font-semibold leading-tight font-sans">
108 Effortless integration
109 </h3>
110 <p className="text-[#605A57] text-sm md:text-base font-normal leading-relaxed font-sans">
111 All your favorite tools connect in one place and work together seamlessly by design.
112 </p>
113 </div>
114 <div className="w-full h-[200px] sm:h-[250px] md:h-[300px] rounded-lg flex overflow-hidden justify-center items-center relative bg-transparent">
115 <div className="w-full h-full flex items-center justify-center bg-transparent">
116 <EffortlessIntegration width={400} height={250} className="max-w-full max-h-full" />
117 </div>
118 {/* Gradient mask for soft bottom edge */}
119 <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent pointer-events-none"></div>
120 </div>
121 </div>
122
123 {/* Bottom Right - Numbers that speak */}
124 <div className="p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-start items-start gap-4 sm:gap-6 bg-white">
125 <div className="flex flex-col gap-2">
126 <h3 className="text-[#37322F] text-lg sm:text-xl font-semibold leading-tight font-sans">
127 Numbers that speak
128 </h3>
129 <p className="text-[#605A57] text-sm md:text-base font-normal leading-relaxed font-sans">
130 Track growth with precision and turn raw data into confident decisions you can trust.
131 </p>
132 </div>
133 <div className="w-full h-[200px] sm:h-[250px] md:h-[300px] rounded-lg flex overflow-visible items-center justify-center relative">
134 <NumbersThatSpeak
135 width={482}
136 height={300}
137 theme="light"
138 className="scale-75 sm:scale-90 md:scale-95"
139 />
140 {/* Gradient mask for soft bottom edge */}
141 <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent pointer-events-none"></div>
142 </div>
143 </div>
144 </div>
145
146 <div className="w-4 sm:w-6 md:w-8 lg:w-12 self-stretch relative overflow-hidden">
147 {/* Right decorative pattern */}
148 <div className="w-[120px] sm:w-[140px] md:w-[162px] left-[-40px] sm:left-[-50px] md:left-[-58px] top-[-120px] absolute flex flex-col justify-start items-start">
149 {Array.from({ length: 200 }).map((_, i) => (
150 <div
151 key={i}
152 className="self-stretch h-3 sm:h-4 rotate-[-45deg] origin-top-left outline outline-[0.5px] outline-[rgba(3,7,18,0.08)] outline-offset-[-0.25px]"
153 />
154 ))}
155 </div>
156 </div>
157 </div>
158 </div>
159 </div>
160 )
161}
162
163export default B2BSAASBentoGrid
164
