Skip to content

Fix landing UI #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zzzzshawn wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix landing UI #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
793d0f4
fix: fixed landing ui to match our design system
zzzzshawn Nov 16, 2025
d5378e4
fix
zzzzshawn Nov 16, 2025
db48eef
chore: use design tokens instead of hardcoded values
apsinghdev Nov 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 222 additions & 29 deletions apps/web/src/components/faq/FaqSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from "react";
import {
Accordion,
AccordionContent,
Expand All @@ -6,50 +7,242 @@ import {
} from "@/components/ui/accordion";
import Header from "../ui/header";
import { faqs } from "./faqData";
import Image from "next/image";

export function FaqSection() {
return (
<div className="flex flex-col border-b border-[#252525]" id="faq">
<Header title="Frequently Asked Questions" />
<div className="w-full px-[30px] lg:px-[50px] py-8 lg:py-12 relative">
<div
style={{
height: "100%",
"--pattern-fg": "#252525",
borderRight: "1px solid #252525",
backgroundImage:
"repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
backgroundSize: "10px 10px",
backgroundAttachment: "fixed",
} as React.CSSProperties}
className="w-[30px] lg:w-[50px] absolute left-0 top-0"
style={
{
height: "100%",
"--pattern-fg": "#252525",
borderRight: "1px solid #252525",
backgroundImage:
"repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
backgroundSize: "10px 10px",
backgroundAttachment: "fixed",
} as React.CSSProperties
}
className="w-[30px] lg:w-[50px] absolute left-0 top-0 z-30"
/>

<div
style={{
height: "100%",
"--pattern-fg": "#252525",
borderLeft: "1px solid #252525",
backgroundImage:
"repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
backgroundSize: "10px 10px",
backgroundAttachment: "fixed",
} as React.CSSProperties}
className="w-[30px] lg:w-[50px] absolute right-0 top-0"
style={
{
height: "100%",
"--pattern-fg": "#252525",
borderLeft: "1px solid #252525",
backgroundImage:
"repeating-linear-gradient(315deg, #252525 0, #252525 1px, transparent 0, transparent 50%)",
backgroundSize: "10px 10px",
backgroundAttachment: "fixed",
} as React.CSSProperties
}
className="w-[30px] lg:w-[50px] absolute right-0 top-0 z-30"
/>

<div className="max-w-4xl mx-auto">
<Accordion type="single" collapsible className="w-full space-y-4">
<div className="absolute w-full h-full top-0 left-0">
<Image
src="/assets/mask.svg"
alt="background"
fill
className="object-cover w-full h-full opacity-40 [mask-image:radial-gradient(circle_at_center,transparent_0%,transparent_40%,black_60%,black_100%)]"
/>
<div className="absolute h-full w-full bg-gradient-to-t from-surface-primary/75 via-transparent to-surface-primary/75 top-0 left-1/2 -translate-x-1/2"></div>
<div className="absolute h-full w-full bg-gradient-to-r from-surface-primary/75 via-transparent to-surface-primary/75 top-0 left-1/2 -translate-x-1/2"></div>
</div>
<div className="max-w-4xl mx-auto relative">
<Accordion
type="single"
collapsible
className="w-full space-y-4 px-2"
>
{faqs.map((faq, index) => (
<AccordionItem
value={`item-${index}`}
<AccordionItem
value={`item-${index}`}
key={index}
className="border border-[#252525] rounded-lg bg-[#151515]/20 backdrop-blur-xl overflow-hidden"
className=" rounded-2xl border border-border overflow-hidden relative z-10"
>
<AccordionTrigger className="px-6 py-4 text-left text-base lg:text-lg font-medium hover:bg-[#252525]/30 transition-colors [&[data-state=open]]:bg-[#252525]/50">
<svg
width="894"
height="126"
viewBox="0 0 894 126"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute top-0 left-0 z-0 pointer-events-none opacity-30"
>
<g clip-path="url(#clip0_288_24)">
<g filter="url(#filter0_n_288_24)">
<g filter="url(#filter1_f_288_24)">
<ellipse
cx="570.829"
cy="-239.222"
rx="814.829"
ry="819.778"
fill="#A556FB"
/>
</g>
<g filter="url(#filter2_f_288_24)">
<ellipse
cx="571.517"
cy="-239.221"
rx="685.036"
ry="689.298"
fill="#4922E5"
/>
</g>
<g filter="url(#filter3_f_288_24)">
<ellipse
cx="386"
cy="-239"
rx="585"
ry="585.5"
fill="#101010"
/>
</g>
</g>
</g>
<defs>
<filter
id="filter0_n_288_24"
x="-244"
y="-1059"
width="1629.66"
height="1639.56"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feTurbulence
type="fractalNoise"
baseFrequency="0.1428571492433548 0.1428571492433548"
stitchTiles="stitch"
numOctaves="3"
result="noise"
seed="3305"
/>
<feColorMatrix
in="noise"
type="luminanceToAlpha"
result="alphaNoise"
/>
<feComponentTransfer
in="alphaNoise"
result="coloredNoise1"
>
<feFuncA
type="discrete"
tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "
/>
</feComponentTransfer>
<feComposite
operator="in"
in2="shape"
in="coloredNoise1"
result="noise1Clipped"
/>
<feFlood
flood-color="rgba(0, 0, 0, 0.12)"
result="color1Flood"
/>
<feComposite
operator="in"
in2="noise1Clipped"
in="color1Flood"
result="color1"
/>
<feMerge result="effect1_noise_288_24">
<feMergeNode in="shape" />
<feMergeNode in="color1" />
</feMerge>
</filter>
<filter
id="filter1_f_288_24"
x="-324"
y="-1139"
width="1789.66"
height="1799.56"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="40"
result="effect1_foregroundBlur_288_24"
/>
</filter>
<filter
id="filter2_f_288_24"
x="-273.518"
y="-1088.52"
width="1690.07"
height="1698.6"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="80"
result="effect1_foregroundBlur_288_24"
/>
</filter>
<filter
id="filter3_f_288_24"
x="-399"
y="-1024.5"
width="1570"
height="1571"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="100"
result="effect1_foregroundBlur_288_24"
/>
</filter>
<clipPath id="clip0_288_24">
<rect
width="1512"
height="864"
fill="white"
transform="translate(-337 -467)"
/>
</clipPath>
</defs>
</svg>

<AccordionTrigger className="px-6 py-4 text-left text-base lg:text-lg font-medium transition-colors z-30">
{faq.question}
</AccordionTrigger>
<AccordionContent className="px-6 pb-4 text-[#d1d1d1] text-sm lg:text-base leading-relaxed">
<AccordionContent className="px-6 pb-4 text-text-primary text-sm lg:text-base leading-relaxed z-50">
{faq.answer}
</AccordionContent>
</AccordionItem>
Expand All @@ -59,4 +252,4 @@ export function FaqSection() {
</div>
</div>
);
}
}
2 changes: 0 additions & 2 deletions apps/web/src/components/landing-sections/Brands.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ const Brands = () => {
<span
className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1.5rem,10vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
style={{
textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
}}
>
{queryCount}
Expand All @@ -56,7 +55,6 @@ const Brands = () => {
<span
className="md:text-8xl md:text-[80px] text-2xl sm:text-5xl relative pointer-events-none text-center bg-gradient-to-b from-brand-purple to-[#341e7b] to-80% bg-clip-text text-transparent text-[clamp(1.5rem,10vw,6rem)] overflow-hidden font-mono tracking-tighter font-medium"
style={{
textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
}}
>
{userCount}
Expand Down
61 changes: 54 additions & 7 deletions apps/web/src/components/landing-sections/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,23 @@ const Hero = () => {
className="w-full lg:max-w-3xl space-y-3 text-center"
>
<motion.div
variants={itemVariants}
className="flex items-center justify-center gap-2 mb-4 [will-change:transform,opacity] motion-reduce:transition-none motion-reduce:transform-none"
initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{ duration: 1, ease: "easeOut", type: "spring" }}
className="flex items-center justify-center gap-2 p-[1px] bg-gradient-to-r from-[#823ed6] via-[#411FC6] to-[#823ed6] w-max rounded-full mx-auto relative overflow-hidden"
>
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 backdrop-blur-sm border border">
<span className="text-text-secondary text-sm font-medium">Backed by</span>


<div className="inline-flex items-center gap-2 px-16 justify-center py-1.5 rounded-full bg-[#131313] backdrop-blur-sm overflow-hidden relative ">
<SvgLines className="absolute right-0 z-10" />
<SvgLines className="absolute left-0 z-10 -scale-x-[1]" />

<span className=" text-sm font-medium">Backed by</span>
<div className="flex items-center gap-1.5">
<div className="w-5 h-5 bg-gradient-to-br from-[#FF6154] to-[#FF8C00] rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">U</span>
<div className="w-5 h-5 bg-gradient-to-br from-[#f85446] to-[#ff8000] rounded-sm flex items-center justify-center">
<span className=" text-xs font-bold">U</span>
</div>
<span className="text-white text-sm font-medium">sers</span>
<span className=" text-sm font-medium">sers</span>
</div>
</div>
</motion.div>
Expand Down Expand Up @@ -105,3 +112,43 @@ const Hero = () => {
};

export default Hero;

const SvgLines = ({ ...props }) => {
return (
<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} >
<path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" stroke-width="0.733333" />
<rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" stroke-width="0.733333" />
<path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" stroke-width="0.733333" />
<path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" stroke-width="0.733333" />
<path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" stroke-width="0.733333" />
<path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" stroke-width="0.733333" />
<defs>
<linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse">
<stop stop-color="#8D49E2" />
<stop offset="1" stop-color="#411FC6" />
</linearGradient>
<linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#411FC6" />
<stop offset="1" stop-color="#8D49E2" />
</linearGradient>
<linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse">
<stop stop-color="#411FC6" />
<stop offset="1" stop-color="#8D49E2" />
</linearGradient>
<linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse">
<stop stop-color="#411FC6" />
<stop offset="1" stop-color="#8D49E2" />
</linearGradient>
<linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse">
<stop stop-color="#8D49E2" />
<stop offset="0.5" stop-color="#411FC6" />
<stop offset="1" stop-color="#6734D4" />
</linearGradient>
<linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse">
<stop stop-color="#8D49E2" />
<stop offset="1" stop-color="#411FC6" />
</linearGradient>
</defs>
</svg>
)
}
Comment on lines +116 to +154
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fix SVG attribute naming to use camelCase.

React JSX requires SVG attributes to be written in camelCase. The hyphenated attributes stroke-width and clip-path will cause React warnings in development and may not work as expected.

Apply this diff to fix the SVG attributes:

 const SvgLines = ({ ...props }) => {
   return (
     <svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} >
-      <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" stroke-width="0.733333" />
-      <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" stroke-width="0.733333" />
-      <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" stroke-width="0.733333" />
-      <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" stroke-width="0.733333" />
-      <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" stroke-width="0.733333" />
-      <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" stroke-width="0.733333" />
+      <path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" strokeWidth="0.733333" />
+      <rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" strokeWidth="0.733333" />
+      <path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" strokeWidth="0.733333" />
+      <path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" strokeWidth="0.733333" />
+      <path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" strokeWidth="0.733333" />
+      <path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" strokeWidth="0.733333" />
       <defs>
         <linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#8D49E2" />
-          <stop offset="1" stop-color="#411FC6" />
+          <stop stopColor="#8D49E2" />
+          <stop offset="1" stopColor="#411FC6" />
         </linearGradient>
         <linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#411FC6" />
-          <stop offset="1" stop-color="#8D49E2" />
+          <stop stopColor="#411FC6" />
+          <stop offset="1" stopColor="#8D49E2" />
         </linearGradient>
         <linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#411FC6" />
-          <stop offset="1" stop-color="#8D49E2" />
+          <stop stopColor="#411FC6" />
+          <stop offset="1" stopColor="#8D49E2" />
         </linearGradient>
         <linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#411FC6" />
-          <stop offset="1" stop-color="#8D49E2" />
+          <stop stopColor="#411FC6" />
+          <stop offset="1" stopColor="#8D49E2" />
         </linearGradient>
         <linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#8D49E2" />
-          <stop offset="0.5" stop-color="#411FC6" />
-          <stop offset="1" stop-color="#6734D4" />
+          <stop stopColor="#8D49E2" />
+          <stop offset="0.5" stopColor="#411FC6" />
+          <stop offset="1" stopColor="#6734D4" />
         </linearGradient>
         <linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#8D49E2" />
-          <stop offset="1" stop-color="#411FC6" />
+          <stop stopColor="#8D49E2" />
+          <stop offset="1" stopColor="#411FC6" />
         </linearGradient>
       </defs>
     </svg>
   )
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const SvgLines = ({ ...props }) => {
return (
<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} >
<path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" stroke-width="0.733333" />
<rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" stroke-width="0.733333" />
<path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" stroke-width="0.733333" />
<path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" stroke-width="0.733333" />
<path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" stroke-width="0.733333" />
<path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" stroke-width="0.733333" />
<defs>
<linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse">
<stop stop-color="#8D49E2" />
<stop offset="1" stop-color="#411FC6" />
</linearGradient>
<linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#411FC6" />
<stop offset="1" stop-color="#8D49E2" />
</linearGradient>
<linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse">
<stop stop-color="#411FC6" />
<stop offset="1" stop-color="#8D49E2" />
</linearGradient>
<linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse">
<stop stop-color="#411FC6" />
<stop offset="1" stop-color="#8D49E2" />
</linearGradient>
<linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse">
<stop stop-color="#8D49E2" />
<stop offset="0.5" stop-color="#411FC6" />
<stop offset="1" stop-color="#6734D4" />
</linearGradient>
<linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse">
<stop stop-color="#8D49E2" />
<stop offset="1" stop-color="#411FC6" />
</linearGradient>
</defs>
</svg>
)
}
const SvgLines = ({ ...props }) => {
return (
<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} >
<path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" strokeWidth="0.733333" />
<rect x="-0.366667" y="0.366667" width="5.13333" height="5.13333" rx="1.1" transform="matrix(-1 0 0 1 20.628 0)" stroke="url(#paint1_linear_621_3137)" strokeWidth="0.733333" />
<path d="M4.40039 8.67676H1.4668C0.859463 8.67697 0.367188 9.16996 0.367188 9.77734V12.7109C0.367398 13.3181 0.859593 13.8103 1.4668 13.8105H4.40039C5.00777 13.8105 5.50077 13.3183 5.50098 12.7109V9.77734C5.50098 9.16983 5.0079 8.67676 4.40039 8.67676Z" stroke="url(#paint2_linear_621_3137)" strokeWidth="0.733333" />
<path d="M14.7656 16.3662H11.832C11.2247 16.3664 10.7324 16.8594 10.7324 17.4668V20.4004C10.7326 21.0076 11.2248 21.4998 11.832 21.5H14.7656C15.373 21.5 15.866 21.0077 15.8662 20.4004V17.4668C15.8662 16.8593 15.3731 16.3662 14.7656 16.3662Z" stroke="url(#paint3_linear_621_3137)" strokeWidth="0.733333" />
<path d="M59.0078 11.2444C59.0078 11.2444 53.1411 3.17773 47.2745 3.17773C41.4078 3.17773 21.1189 3.17773 21.1189 3.17773" stroke="url(#paint4_linear_621_3137)" strokeWidth="0.733333" />
<path d="M42.877 11.2442C42.877 11.2442 38.6378 19.0664 34.3987 19.0664C30.1595 19.0664 15.4992 19.0664 15.4992 19.0664" stroke="url(#paint5_linear_621_3137)" strokeWidth="0.733333" />
<defs>
<linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse">
<stop stopColor="#8D49E2" />
<stop offset="1" stopColor="#411FC6" />
</linearGradient>
<linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse">
<stop stopColor="#411FC6" />
<stop offset="1" stopColor="#8D49E2" />
</linearGradient>
<linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse">
<stop stopColor="#411FC6" />
<stop offset="1" stopColor="#8D49E2" />
</linearGradient>
<linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse">
<stop stopColor="#411FC6" />
<stop offset="1" stopColor="#8D49E2" />
</linearGradient>
<linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse">
<stop stopColor="#8D49E2" />
<stop offset="0.5" stopColor="#411FC6" />
<stop offset="1" stopColor="#6734D4" />
</linearGradient>
<linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse">
<stop stopColor="#8D49E2" />
<stop offset="1" stopColor="#411FC6" />
</linearGradient>
</defs>
</svg>
)
}
🤖 Prompt for AI Agents 
In apps/web/src/components/landing-sections/Hero.tsx around lines 89 to 127, the
SVG uses hyphenated SVG attributes (e.g., stroke-width, stop-color, clip-path)
which must be converted to React JSX camelCase names; update all hyphenated
attributes in this SVG to their camelCase equivalents (strokeWidth, stopColor,
clipPath, etc.), ensure any other dashed attributes are converted, and keep the
rest of the element structure and props spread intact.

Loading