Skip to content

Commit 793d0f4

Browse files
zzzzshawnapsinghdev
zzzzshawn
authored and
apsinghdev
committed
fix: fixed landing ui to match our design system
1 parent c09dd19 commit 793d0f4

File tree

6 files changed

+153
-26
lines changed

6 files changed

+153
-26
lines changed

‎apps/web/src/components/faq/FaqSection.tsx‎

Lines changed: 73 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
} from "@/components/ui/accordion";
77
import Header from "../ui/header";
88
import { faqs } from "./faqData";
9+
import Image from "next/image";
910

1011
export function FaqSection() {
1112
return (
@@ -22,9 +23,9 @@ export function FaqSection() {
2223
backgroundSize: "10px 10px",
2324
backgroundAttachment: "fixed",
2425
} as React.CSSProperties}
25-
className="w-[30px] lg:w-[50px] absolute left-0 top-0"
26+
className="w-[30px] lg:w-[50px] absolute left-0 top-0 z-30"
2627
/>
27-
28+
2829
<div
2930
style={{
3031
height: "100%",
@@ -35,21 +36,84 @@ export function FaqSection() {
3536
backgroundSize: "10px 10px",
3637
backgroundAttachment: "fixed",
3738
} as React.CSSProperties}
38-
className="w-[30px] lg:w-[50px] absolute right-0 top-0"
39+
className="w-[30px] lg:w-[50px] absolute right-0 top-0 z-30"
3940
/>
4041

41-
<div className="max-w-4xl mx-auto">
42+
<div className="absolute w-full h-full top-0 left-0">
43+
<Image
44+
src="/assets/mask.svg"
45+
alt="background"
46+
fill
47+
className="object-cover w-full h-full opacity-40 [mask-image:radial-gradient(circle_at_center,transparent_0%,transparent_40%,black_60%,black_100%)]"
48+
/>
49+
<div className="absolute h-full w-full bg-gradient-to-t from-[#101010]/75 via-transparent to-[#101010]/75 top-0 left-1/2 -translate-x-1/2"></div>
50+
<div className="absolute h-full w-full bg-gradient-to-r from-[#101010]/75 via-transparent to-[#101010]/75 top-0 left-1/2 -translate-x-1/2"></div>
51+
</div>
52+
<div className="max-w-4xl mx-auto relative">
4253
<Accordion type="single" collapsible className="w-full space-y-4">
4354
{faqs.map((faq, index) => (
44-
<AccordionItem
45-
value={`item-${index}`}
55+
<AccordionItem
56+
value={`item-${index}`}
4657
key={index}
47-
className="border border-[#252525] rounded-lg bg-[#151515]/20 backdrop-blur-xl overflow-hidden"
58+
className=" rounded-2xl border border-[#202020] overflow-hidden relative z-10"
4859
>
49-
<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">
60+
<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">
61+
<g clip-path="url(#clip0_288_24)">
62+
<g filter="url(#filter0_n_288_24)">
63+
<g filter="url(#filter1_f_288_24)">
64+
<ellipse cx="570.829" cy="-239.222" rx="814.829" ry="819.778" fill="#A556FB" />
65+
</g>
66+
<g filter="url(#filter2_f_288_24)">
67+
<ellipse cx="571.517" cy="-239.221" rx="685.036" ry="689.298" fill="#4922E5" />
68+
</g>
69+
<g filter="url(#filter3_f_288_24)">
70+
<ellipse cx="386" cy="-239" rx="585" ry="585.5" fill="#101010" />
71+
</g>
72+
</g>
73+
</g>
74+
<defs>
75+
<filter id="filter0_n_288_24" x="-244" y="-1059" width="1629.66" height="1639.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
76+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
77+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
78+
<feTurbulence type="fractalNoise" baseFrequency="0.1428571492433548 0.1428571492433548" stitchTiles="stitch" numOctaves="3" result="noise" seed="3305" />
79+
<feColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise" />
80+
<feComponentTransfer in="alphaNoise" result="coloredNoise1">
81+
<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 " />
82+
</feComponentTransfer>
83+
<feComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped" />
84+
<feFlood flood-color="rgba(0, 0, 0, 0.12)" result="color1Flood" />
85+
<feComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1" />
86+
<feMerge result="effect1_noise_288_24">
87+
<feMergeNode in="shape" />
88+
<feMergeNode in="color1" />
89+
</feMerge>
90+
</filter>
91+
<filter id="filter1_f_288_24" x="-324" y="-1139" width="1789.66" height="1799.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
92+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
93+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
94+
<feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_288_24" />
95+
</filter>
96+
<filter id="filter2_f_288_24" x="-273.518" y="-1088.52" width="1690.07" height="1698.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
97+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
98+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
99+
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_288_24" />
100+
</filter>
101+
<filter id="filter3_f_288_24" x="-399" y="-1024.5" width="1570" height="1571" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
102+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
103+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
104+
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_288_24" />
105+
</filter>
106+
<clipPath id="clip0_288_24">
107+
<rect width="1512" height="864" fill="white" transform="translate(-337 -467)" />
108+
</clipPath>
109+
</defs>
110+
</svg>
111+
112+
113+
<AccordionTrigger className="px-6 py-4 text-left text-base lg:text-lg font-medium transition-colors z-30">
50114
{faq.question}
51115
</AccordionTrigger>
52-
<AccordionContent className="px-6 pb-4 text-[#d1d1d1] text-sm lg:text-base leading-relaxed">
116+
<AccordionContent className="px-6 pb-4 text-[#ffffff] text-sm lg:text-base leading-relaxed z-50">
53117
{faq.answer}
54118
</AccordionContent>
55119
</AccordionItem>

‎apps/web/src/components/landing-sections/Brands.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ const Brands = () => {
3636
<span
3737
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"
3838
style={{
39-
textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
4039
}}
4140
>
4241
{queryCount}
@@ -56,7 +55,6 @@ const Brands = () => {
5655
<span
5756
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"
5857
style={{
59-
textShadow: "0 0 40px rgba(145, 89, 226, 0.5)",
6058
}}
6159
>
6260
{userCount}

‎apps/web/src/components/landing-sections/Hero.tsx‎

Lines changed: 54 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,23 @@ const Hero = () => {
4848
className="w-full lg:max-w-3xl space-y-3 text-center"
4949
>
5050
<motion.div
51-
variants={itemVariants}
52-
className="flex items-center justify-center gap-2 mb-4 [will-change:transform,opacity] motion-reduce:transition-none motion-reduce:transform-none"
51+
initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
52+
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
53+
transition={{ duration: 1, ease: "easeOut", type: "spring" }}
54+
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"
5355
>
54-
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 backdrop-blur-sm border border">
55-
<span className="text-text-secondary text-sm font-medium">Backed by</span>
56+
57+
58+
<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 ">
59+
<SvgLines className="absolute right-0 z-10" />
60+
<SvgLines className="absolute left-0 z-10 -scale-x-[1]" />
61+
62+
<span className=" text-sm font-medium">Backed by</span>
5663
<div className="flex items-center gap-1.5">
57-
<div className="w-5 h-5 bg-gradient-to-br from-[#FF6154] to-[#FF8C00] rounded flex items-center justify-center">
58-
<span className="text-white text-xs font-bold">U</span>
64+
<div className="w-5 h-5 bg-gradient-to-br from-[#f85446] to-[#ff8000] rounded-sm flex items-center justify-center">
65+
<span className=" text-xs font-bold">U</span>
5966
</div>
60-
<span className="text-white text-sm font-medium">sers</span>
67+
<span className=" text-sm font-medium">sers</span>
6168
</div>
6269
</div>
6370
</motion.div>
@@ -105,3 +112,43 @@ const Hero = () => {
105112
};
106113

107114
export default Hero;
115+
116+
const SvgLines = ({ ...props }) => {
117+
return (
118+
<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} >
119+
<path d="M86.6328 11.2441H5.23281" stroke="url(#paint0_linear_621_3137)" stroke-width="0.733333" />
120+
<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" />
121+
<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" />
122+
<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" />
123+
<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" />
124+
<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" />
125+
<defs>
126+
<linearGradient id="paint0_linear_621_3137" x1="60.8652" y1="11" x2="5.23281" y2="11.7441" gradientUnits="userSpaceOnUse">
127+
<stop stop-color="#8D49E2" />
128+
<stop offset="1" stop-color="#411FC6" />
129+
</linearGradient>
130+
<linearGradient id="paint1_linear_621_3137" x1="3.99609" y1="0.5" x2="-1.00391" y2="5.5" gradientUnits="userSpaceOnUse">
131+
<stop stop-color="#411FC6" />
132+
<stop offset="1" stop-color="#8D49E2" />
133+
</linearGradient>
134+
<linearGradient id="paint2_linear_621_3137" x1="4.86523" y1="10" x2="1.36523" y2="15" gradientUnits="userSpaceOnUse">
135+
<stop stop-color="#411FC6" />
136+
<stop offset="1" stop-color="#8D49E2" />
137+
</linearGradient>
138+
<linearGradient id="paint3_linear_621_3137" x1="15.2305" y1="17.6895" x2="16.3652" y2="19" gradientUnits="userSpaceOnUse">
139+
<stop stop-color="#411FC6" />
140+
<stop offset="1" stop-color="#8D49E2" />
141+
</linearGradient>
142+
<linearGradient id="paint4_linear_621_3137" x1="59.3672" y1="3" x2="21.1189" y2="7.21107" gradientUnits="userSpaceOnUse">
143+
<stop stop-color="#8D49E2" />
144+
<stop offset="0.5" stop-color="#411FC6" />
145+
<stop offset="1" stop-color="#6734D4" />
146+
</linearGradient>
147+
<linearGradient id="paint5_linear_621_3137" x1="15.4992" y1="15.1553" x2="42.877" y2="15.1553" gradientUnits="userSpaceOnUse">
148+
<stop stop-color="#8D49E2" />
149+
<stop offset="1" stop-color="#411FC6" />
150+
</linearGradient>
151+
</defs>
152+
</svg>
153+
)
154+
}

‎apps/web/src/components/landing-sections/navbar.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22
import React, { useState } from "react";
3-
import PrimaryButton from "../ui/custom-button";
3+
import PrimaryButton, { SecondaryButton } from "../ui/custom-button";
44
import { motion, useScroll, useMotionValueEvent } from "framer-motion";
55
import Image from "next/image";
66
import { Terminal, Github, Menu, X } from "lucide-react";
@@ -64,7 +64,7 @@ const Navbar = () => {
6464
>
6565
{isOpen ? <X size={28} /> : <Menu size={28} />}
6666
</button>
67-
<div className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2">
67+
<Link href={`/`} className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2">
6868
<div className="w-8 md:w-10 aspect-square overflow-hidden relative">
6969
<Image
7070
src="/assets/logo.svg"
@@ -74,7 +74,7 @@ const Navbar = () => {
7474
/>
7575
</div>
7676
<span>Opensox AI</span>
77-
</div>
77+
</Link>
7878
</div>
7979
<div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-text-tertiary">
8080
{links.map((link, index) => {
@@ -98,10 +98,12 @@ const Navbar = () => {
9898
href="https://github.com/apsinghdev/opensox"
9999
target="_blank"
100100
rel="noopener noreferrer"
101-
className="hidden lg:flex items-center gap-2 px-4 py-2.5 bg-[#0d1117] hover:bg-[#161b22] transition-colors rounded-lg border border-[#30363d] text-white"
101+
className=""
102102
>
103-
<Github className="w-5 h-5" />
104-
<span className="text-sm font-medium">Contribute</span>
103+
<SecondaryButton classname="px-3 py-2 text-sm whitespace-nowrap md:px-5 md:py-4 md:text-base">
104+
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" className="size-5" width="32" height="32" viewBox="0 0 32 32"><path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z"></path></svg>
105+
<span className="text-sm font-medium">Contribute</span>
106+
</SecondaryButton>
105107
</Link>
106108
<Link href="/dashboard/home" className="cursor-pointer z-30">
107109
<PrimaryButton classname="px-3 py-2 text-sm whitespace-nowrap md:px-5 md:py-3 md:text-base">

‎apps/web/src/components/ui/accordion.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@ const AccordionTrigger = React.forwardRef<
2828
<AccordionPrimitive.Trigger
2929
ref={ref}
3030
className={cn(
31-
"flex flex-1 items-center hover:text-ox-purple justify-between py-2 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180",
31+
"flex flex-1 items-center justify-between py-2 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180",
3232
className
3333
)}
3434
{...props}
3535
>
3636
{children}
37-
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 hover:text-ox-purple" />
37+
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 " />
3838
</AccordionPrimitive.Trigger>
3939
</AccordionPrimitive.Header>
4040
))

‎apps/web/src/components/ui/custom-button.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,20 @@ const PrimaryButton = ({ children, animate = true, classname, onClick }: { child
2828
)
2929
}
3030

31+
export const SecondaryButton = ({ children, animate = true, classname, onClick }: { children: React.ReactNode, animate?: boolean, classname?: string, onClick?: () => void }) => {
32+
const transition = {
33+
duration: 0.1,
34+
ease: "easeInOut",
35+
}
36+
return (
37+
<motion.button
38+
onClick={onClick}
39+
className={cn("flex gap-2 border-[#eaeaea] items-center justify-center px-5 py-3 rounded-[16px] relative [box-shadow:0px_0px_13px_0px_#eaeaea90_inset] hover:[box-shadow:0px_0px_13px_0px_#eaeaeaaa_inset] transition-all duration-100 text-white font-medium", classname)}
40+
transition={animate ? transition : undefined}
41+
>
42+
{children}
43+
</motion.button>
44+
)
45+
}
46+
3147
export default PrimaryButton

0 commit comments

Comments
 (0)