-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1af4f6b
commit ea970c2
Showing
7 changed files
with
233 additions
and
67 deletions.
There are no files selected for viewing
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import * as React from "react" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const Card = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| "rounded-xl border bg-card text-card-foreground shadow", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| Card.displayName = "Card" | ||
|
|
||
| const CardHeader = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("flex flex-col space-y-1.5 p-6", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| CardHeader.displayName = "CardHeader" | ||
|
|
||
| const CardTitle = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLHeadingElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <h3 | ||
| ref={ref} | ||
| className={cn("font-semibold leading-none tracking-tight", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| CardTitle.displayName = "CardTitle" | ||
|
|
||
| const CardDescription = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLParagraphElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <p | ||
| ref={ref} | ||
| className={cn("text-sm text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| CardDescription.displayName = "CardDescription" | ||
|
|
||
| const CardContent = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div ref={ref} className={cn("p-6 pt-0", className)} {...props} /> | ||
| )) | ||
| CardContent.displayName = "CardContent" | ||
|
|
||
| const CardFooter = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("flex items-center p-6 pt-0", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| CardFooter.displayName = "CardFooter" | ||
|
|
||
| export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } |
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as CheckboxPrimitive from "@radix-ui/react-checkbox" | ||
| import { Check } from "lucide-react" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const Checkbox = React.forwardRef< | ||
| React.ElementRef<typeof CheckboxPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <CheckboxPrimitive.Root | ||
| ref={ref} | ||
| className={cn( | ||
| "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <CheckboxPrimitive.Indicator | ||
| className={cn("flex items-center justify-center text-current")} | ||
| > | ||
| <Check className="h-4 w-4" /> | ||
| </CheckboxPrimitive.Indicator> | ||
| </CheckboxPrimitive.Root> | ||
| )) | ||
| Checkbox.displayName = CheckboxPrimitive.Root.displayName | ||
|
|
||
| export { Checkbox } |
This file contains 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,56 +1,63 @@ | ||
|
|
||
| import { Button } from "@/app/components/ui/button"; | ||
| import { ArrowRight, Wallet } from "lucide-react"; | ||
| import Link from "next/link"; | ||
| import * as React from "react"; | ||
|
|
||
| export function HeroSection() { | ||
| return ( | ||
| <div className="relative flex flex-col items-center justify-center min-h-[90vh] text-center px-4 overflow-hidden"> | ||
| {/* Gradient Background */} | ||
| <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-background" /> | ||
|
|
||
| {/* Animated Grid Background */} | ||
| <div className="absolute inset-0 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" /> | ||
|
|
||
| <div className="relative z-10"> | ||
| <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary mb-8"> | ||
| <span className="relative flex h-2 w-2"> | ||
| <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" /> | ||
| <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" /> | ||
| </span> | ||
| Live on Stellar Network | ||
| </div> | ||
|
|
||
| <h1 className="text-4xl sm:text-6xl font-bold tracking-tight mb-8 bg-clip-text from-primary to-primary/70"> | ||
| The Future of | ||
| <span className="block mt-2">Secure Trading</span> | ||
| </h1> | ||
|
|
||
| <p className="text-xl text-muted-foreground max-w-[600px] mb-12"> | ||
| Experience trustless trading with built-in Stellar escrow protection. | ||
| Your gateway to secure, decentralized commerce. | ||
| </p> | ||
|
|
||
| <div className="flex flex-col sm:flex-row gap-4 justify-center items-center"> | ||
| <Button size="lg" className="group"> | ||
| <Wallet className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" /> | ||
| Connect Wallet | ||
| </Button> | ||
| <Button variant="outline" size="lg" className="group"> | ||
| Explore Marketplace | ||
| <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" /> | ||
| </Button> | ||
| </div> | ||
|
|
||
| {/* Live Stats Ticker */} | ||
| <div className="mt-16 flex gap-8 justify-center items-center text-sm text-muted-foreground"> | ||
| <div className="flex items-center gap-2"> | ||
| <span className="inline-block w-2 h-2 rounded-full bg-green-500"></span> | ||
| Network Status: Active | ||
| </div> | ||
| <div>24h Volume: $1.2M</div> | ||
| <div>Gas: 0.001 XLM</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div className="relative flex flex-col items-center justify-center min-h-[90vh] text-center px-4 overflow-hidden"> | ||
| {/* Gradient Background */} | ||
| <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-background" /> | ||
|
|
||
| {/* Animated Grid Background */} | ||
| <div className="absolute inset-0 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" /> | ||
|
|
||
| <div className="relative z-10"> | ||
| <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary mb-8"> | ||
| <span className="relative flex h-2 w-2"> | ||
| <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" /> | ||
| <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" /> | ||
| </span> | ||
| Live on Stellar Network | ||
| </div> | ||
|
|
||
| <h1 className="text-4xl sm:text-6xl font-bold tracking-tight mb-8 bg-clip-text from-primary to-primary/70"> | ||
| The Future of | ||
| <span className="block mt-2">Secure Trading</span> | ||
| </h1> | ||
|
|
||
| <p className="text-xl text-muted-foreground max-w-[600px] mb-12"> | ||
| Experience trustless trading with built-in Stellar escrow protection. | ||
| Your gateway to secure, decentralized commerce. | ||
| </p> | ||
|
|
||
| <div className="flex flex-col sm:flex-row gap-4 justify-center items-center"> | ||
| <Button size="lg" className="group"> | ||
| <Wallet className="mr-2 h-4 w-4 transition-transform group-hover:scale-110" /> | ||
| Connect Wallet | ||
| </Button> | ||
| <Link | ||
| href="/marketplace | ||
| " | ||
| > | ||
| <Button variant="outline" size="lg" className="group"> | ||
| Explore Marketplace | ||
| <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" /> | ||
| </Button> | ||
| </Link> | ||
| </div> | ||
|
|
||
| {/* Live Stats Ticker */} | ||
| <div className="mt-16 flex gap-8 justify-center items-center text-sm text-muted-foreground"> | ||
| <div className="flex items-center gap-2"> | ||
| <span className="inline-block w-2 h-2 rounded-full bg-green-500"></span> | ||
| Network Status: Active | ||
| </div> | ||
| <div>24h Volume: $1.2M</div> | ||
| <div>Gas: 0.001 XLM</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains 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 |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import * as React from "react" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| export interface InputProps | ||
| extends React.InputHTMLAttributes<HTMLInputElement> {} | ||
|
|
||
| const Input = React.forwardRef<HTMLInputElement, InputProps>( | ||
| ({ className, type, ...props }, ref) => { | ||
| return ( | ||
| <input | ||
| type={type} | ||
| className={cn( | ||
| "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", | ||
| className | ||
| )} | ||
| ref={ref} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } | ||
| ) | ||
| Input.displayName = "Input" | ||
|
|
||
| export { Input } |
This file contains 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 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 |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as SliderPrimitive from "@radix-ui/react-slider" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const Slider = React.forwardRef< | ||
| React.ElementRef<typeof SliderPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SliderPrimitive.Root | ||
| ref={ref} | ||
| className={cn( | ||
| "relative flex w-full touch-none select-none items-center", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary"> | ||
| <SliderPrimitive.Range className="absolute h-full bg-primary" /> | ||
| </SliderPrimitive.Track> | ||
| <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" /> | ||
| </SliderPrimitive.Root> | ||
| )) | ||
| Slider.displayName = SliderPrimitive.Root.displayName | ||
|
|
||
| export { Slider } |
This file contains 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