Fix landing UI #177
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 z-30" | ||
| /> | ||
|
|
||
| <div | ||
| style={{ | ||
| height: "100%", | ||
|
|
@@ -35,21 +36,84 @@ export function FaqSection() { | |
| backgroundSize: "10px 10px", | ||
| backgroundAttachment: "fixed", | ||
| } as React.CSSProperties} | ||
| className="w-[30px] lg:w-[50px] absolute right-0 top-0 z-30" | ||
| /> | ||
|
|
||
| <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-[#101010]/75 via-transparent to-[#101010]/75 top-0 left-1/2 -translate-x-1/2"></div> | ||
| <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> | ||
| </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}`} | ||
| key={index} | ||
| className=" rounded-2xl border border-[#202020] overflow-hidden relative z-10" | ||
apsinghdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| > | ||
| <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-[#ffffff] text-sm lg:text-base leading-relaxed z-50"> | ||
| {faq.answer} | ||
| </AccordionContent> | ||
apsinghdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| </AccordionItem> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| "use client"; | ||
| import React, { useState } from "react"; | ||
| 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 ? <X size={28} /> : <Menu size={28} />} | ||
| </button> | ||
| <Link href={`/`} className="text-xl md:text-2xl font-medium tracking-tighter flex items-center gap-2"> | ||
| <div className="w-8 md:w-10 aspect-square overflow-hidden relative"> | ||
| <Image | ||
| src="/assets/logo.svg" | ||
|
|
@@ -74,7 +74,7 @@ const Navbar = () => { | |
| /> | ||
| </div> | ||
| <span>Opensox AI</span> | ||
| </Link> | ||
| </div> | ||
| <div className="hidden md:flex items-center gap-5 tracking-tight text-lg font-light text-text-tertiary"> | ||
| {links.map((link, index) => { | ||
|
|
@@ -93,15 +93,17 @@ const Navbar = () => { | |
| ); | ||
| })} | ||
| </div> | ||
| <div className="hidden lg:flex items-center gap-3"> | ||
| <Link | ||
| href="https://github.com/apsinghdev/opensox" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="" | ||
| > | ||
| <SecondaryButton classname="px-3 py-2 text-sm whitespace-nowrap md:px-5 md:py-4 md:text-base"> | ||
| <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> | ||
| <span className="text-sm font-medium">Contribute</span> | ||
| </SecondaryButton> | ||
| </Link> | ||
| <Link href="/dashboard/home" className="cursor-pointer z-30"> | ||
| <PrimaryButton classname="px-3 py-2 text-sm whitespace-nowrap md:px-5 md:py-3 md:text-base"> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -28,13 +28,13 @@ const AccordionTrigger = React.forwardRef< | |
| <AccordionPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn( | ||
| "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} | ||
| <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 " /> | ||
| </AccordionPrimitive.Trigger> | ||
| </AccordionPrimitive.Header> | ||
| )) | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 ( | ||
| <motion.button | ||
| onClick={onClick} | ||
| 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)} | ||
| transition={animate ? transition : undefined} | ||
| > | ||
| {children} | ||
| </motion.button> | ||
| ) | ||
| } | ||
|
|
||
| export default PrimaryButton | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.