From 793d0f417f446b445e0908e6560afdd52df5ffe4 Mon Sep 17 00:00:00 2001 From: zzzzshawn Date: Mon, 17 Nov 2025 00:04:04 +0530 Subject: [PATCH 1/3] fix: fixed landing ui to match our design system --- apps/web/src/components/faq/FaqSection.tsx | 82 +++++++++++++++++-- .../components/landing-sections/Brands.tsx | 2 - .../src/components/landing-sections/Hero.tsx | 61 ++++++++++++-- .../components/landing-sections/navbar.tsx | 14 ++-- apps/web/src/components/ui/accordion.tsx | 4 +- apps/web/src/components/ui/custom-button.tsx | 16 ++++ 6 files changed, 153 insertions(+), 26 deletions(-) diff --git a/apps/web/src/components/faq/FaqSection.tsx b/apps/web/src/components/faq/FaqSection.tsx index f46b3931..4384abf4 100644 --- a/apps/web/src/components/faq/FaqSection.tsx +++ b/apps/web/src/components/faq/FaqSection.tsx @@ -6,6 +6,7 @@ import { } from "@/components/ui/accordion"; import Header from "../ui/header"; import { faqs } from "./faqData"; +import Image from "next/image"; export function FaqSection() { return ( @@ -22,9 +23,9 @@ export function FaqSection() { backgroundSize: "10px 10px", backgroundAttachment: "fixed", } as React.CSSProperties} - className="w-[30px] lg:w-[50px] absolute left-0 top-0" + className="w-[30px] lg:w-[50px] absolute left-0 top-0 z-30" /> - +
-
+
+ background +
+
+
+
{faqs.map((faq, index) => ( - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {faq.question} - + {faq.answer} diff --git a/apps/web/src/components/landing-sections/Brands.tsx b/apps/web/src/components/landing-sections/Brands.tsx index 2437f035..7faccfcf 100644 --- a/apps/web/src/components/landing-sections/Brands.tsx +++ b/apps/web/src/components/landing-sections/Brands.tsx @@ -36,7 +36,6 @@ const Brands = () => { {queryCount} @@ -56,7 +55,6 @@ const Brands = () => { {userCount} diff --git a/apps/web/src/components/landing-sections/Hero.tsx b/apps/web/src/components/landing-sections/Hero.tsx index ab348352..9fcdf195 100644 --- a/apps/web/src/components/landing-sections/Hero.tsx +++ b/apps/web/src/components/landing-sections/Hero.tsx @@ -48,16 +48,23 @@ const Hero = () => { className="w-full lg:max-w-3xl space-y-3 text-center" > -
- Backed by + + +
+ + + + Backed by
-
- U +
+ U
- sers + sers
@@ -105,3 +112,43 @@ const Hero = () => { }; export default Hero; + +const SvgLines = ({ ...props }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/apps/web/src/components/landing-sections/navbar.tsx b/apps/web/src/components/landing-sections/navbar.tsx index a38855cb..c6281116 100644 --- a/apps/web/src/components/landing-sections/navbar.tsx +++ b/apps/web/src/components/landing-sections/navbar.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useState } from "react"; -import PrimaryButton from "../ui/custom-button"; +import PrimaryButton, { SecondaryButton } from "../ui/custom-button"; import { motion, useScroll, useMotionValueEvent } from "framer-motion"; import Image from "next/image"; import { Terminal, Github, Menu, X } from "lucide-react"; @@ -64,7 +64,7 @@ const Navbar = () => { > {isOpen ? : } -
+
{ />
Opensox AI -
+
{links.map((link, index) => { @@ -98,10 +98,12 @@ const Navbar = () => { href="https://github.com/apsinghdev/opensox" target="_blank" rel="noopener noreferrer" - 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" + className="" > - - Contribute + + + Contribute + diff --git a/apps/web/src/components/ui/accordion.tsx b/apps/web/src/components/ui/accordion.tsx index 9bcccfdf..f22c7bb1 100644 --- a/apps/web/src/components/ui/accordion.tsx +++ b/apps/web/src/components/ui/accordion.tsx @@ -28,13 +28,13 @@ const AccordionTrigger = React.forwardRef< svg]:rotate-180", + "flex flex-1 items-center justify-between py-2 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180", className )} {...props} > {children} - + )) diff --git a/apps/web/src/components/ui/custom-button.tsx b/apps/web/src/components/ui/custom-button.tsx index 803c0b05..2005a15e 100644 --- a/apps/web/src/components/ui/custom-button.tsx +++ b/apps/web/src/components/ui/custom-button.tsx @@ -28,4 +28,20 @@ const PrimaryButton = ({ children, animate = true, classname, onClick }: { child ) } +export const SecondaryButton = ({ children, animate = true, classname, onClick }: { children: React.ReactNode, animate?: boolean, classname?: string, onClick?: () => void }) => { + const transition = { + duration: 0.1, + ease: "easeInOut", + } + return ( + + {children} + + ) +} + export default PrimaryButton From d5378e4c62a8614616f4b08141f1e4a787f03d25 Mon Sep 17 00:00:00 2001 From: zzzzshawn Date: Mon, 17 Nov 2025 00:06:58 +0530 Subject: [PATCH 2/3] fix --- apps/web/src/components/faq/FaqSection.tsx | 2 +- apps/web/src/components/landing-sections/navbar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/faq/FaqSection.tsx b/apps/web/src/components/faq/FaqSection.tsx index 4384abf4..07fad45b 100644 --- a/apps/web/src/components/faq/FaqSection.tsx +++ b/apps/web/src/components/faq/FaqSection.tsx @@ -50,7 +50,7 @@ export function FaqSection() {
- + {faqs.map((faq, index) => ( { ); })}
-
+
Date: Sun, 30 Nov 2025 20:20:01 +0530 Subject: [PATCH 3/3] chore: use design tokens instead of hardcoded values --- apps/web/src/components/faq/FaqSection.tsx | 225 ++++++++++++++++----- 1 file changed, 177 insertions(+), 48 deletions(-) diff --git a/apps/web/src/components/faq/FaqSection.tsx b/apps/web/src/components/faq/FaqSection.tsx index 07fad45b..f4ad32e6 100644 --- a/apps/web/src/components/faq/FaqSection.tsx +++ b/apps/web/src/components/faq/FaqSection.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Accordion, AccordionContent, @@ -14,28 +15,32 @@ export function FaqSection() {
@@ -46,74 +51,198 @@ export function FaqSection() { 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%)]" /> -
-
+
+
- + {faqs.map((faq, index) => ( - + - + - + - + - + - - - - - + + + + + - - - + + + - + - - + + - + - - + + - + - - + + - + - {faq.question} - + {faq.answer} @@ -123,4 +252,4 @@ export function FaqSection() {
); -} \ No newline at end of file +}