Labyricorn/voicebox
1
0
Fork 0
mirror of https://github.com/jamiepine/voicebox.git synced 2026-09-15 04:40:40 -07:00
Code Issues Packages Projects Releases Wiki Activity

Enhance UI components and styles for improved user experience

Browse Source 
- Updated global styles in globals.css for better dark mode support and background effects.
- Enhanced DownloadSection and FeatureCard components with hover effects and improved layout.
- Refined Header component with better backdrop blur and tracking for text.
- Improved button styles for consistency and added shadow effects for better visibility.
- Adjusted Card and Section components for better spacing and visual hierarchy.
This commit is contained in:
Jamie Pine
2026-01-25 13:48:13 -08:00
parent d3ca3a9deb
commit 05036dfef6
7 changed files with 48 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
landing/src/app/globals.css
+23 -19
View File
@@ -27,25 +27,26 @@
}
.dark {
--background: 0 0% 0%;
--foreground: 0 0% 100%;
--card: 0 0% 0%;
--card-foreground: 0 0% 100%;
--popover: 0 0% 0%;
--popover-foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 0 0% 0%;
--secondary: 0 0% 10%;
--secondary-foreground: 0 0% 100%;
--muted: 0 0% 10%;
--background: 0 0% 3%;
--foreground: 0 0% 98%;
--card: 0 0% 8% / 0.6;
--card-foreground: 0 0% 98%;
--popover: 0 0% 8% / 0.8;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 8%;
--secondary: 0 0% 12% / 0.5;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 12% / 0.4;
--muted-foreground: 0 0% 65%;
--accent: 0 0% 10%;
--accent-foreground: 0 0% 100%;
--destructive: 0 0% 100%;
--destructive-foreground: 0 0% 0%;
--border: 0 0% 20%;
--input: 0 0% 20%;
--ring: 0 0% 100%;
--accent: 0 0% 15% / 0.5;
--accent-foreground: 0 0% 98%;
--destructive: 0 62% 50%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 15% / 0.5;
--input: 0 0% 15% / 0.5;
--ring: 0 0% 98% / 0.2;
--radius: 1rem;
}
}
@@ -54,7 +55,10 @@
@apply border-border;
}
body {
@apply bg-background text-foreground;
@apply bg-background text-foreground antialiased;
background-image:
radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.03) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(255, 255, 255, 0.02) 0px, transparent 50%);
}
}
landing/src/components/DownloadSection.tsx
+2 -2
View File
@@ -35,10 +35,10 @@ export function DownloadSection() {
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
{downloads.map(({ platform, icon: Icon, link, description }) => (
<Card key={platform} className="hover:border-primary/50 transition-colors">
<Card key={platform} className="hover:border-primary/50 hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-1">
<CardContent className="p-6">
<div className="flex flex-col items-center text-center space-y-4">
<div className="p-3 rounded-lg bg-muted">
<div className="p-3 rounded-xl bg-muted/50 backdrop-blur-sm border border-border">
<Icon className="h-8 w-8" />
</div>
<div>
landing/src/components/Header.tsx
+2 -2
View File
@@ -7,11 +7,11 @@ import { GITHUB_REPO } from '@/lib/constants';
export function Header() {
return (
<header className="border-b border-border bg-background/80 backdrop-blur-xl sticky top-0 z-50">
<header className="border-b border-border bg-background/60 backdrop-blur-2xl sticky top-0 z-50 supports-[backdrop-filter]:bg-background/40">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<Link href="/" className="flex items-center gap-2 font-bold text-xl sm:text-2xl hover:opacity-80 transition-opacity">
<Link href="/" className="flex items-center gap-2 font-bold text-xl sm:text-2xl hover:opacity-80 transition-opacity tracking-tight">
voicebox
</Link>
landing/src/components/ui/button.tsx
+9 -9
View File
@@ -4,25 +4,25 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium 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',
'inline-flex items-center justify-center whitespace-nowrap rounded-xl text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-black/20 active:scale-[0.98]',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-lg shadow-destructive/20 active:scale-[0.98]',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
'border border-border bg-background/50 backdrop-blur-sm hover:bg-accent/50 hover:border-border transition-all active:scale-[0.98]',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
'bg-secondary text-secondary-foreground hover:bg-secondary/80 backdrop-blur-sm active:scale-[0.98]',
ghost: 'hover:bg-accent/50 hover:text-accent-foreground backdrop-blur-sm active:scale-[0.98]',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md text-lg px-8',
icon: 'h-10 w-10',
sm: 'h-9 rounded-lg px-3',
lg: 'h-12 rounded-xl text-base px-8 font-semibold',
icon: 'h-10 w-10 rounded-xl',
},
},
defaultVariants: {
landing/src/components/ui/card.tsx
+3 -3
View File
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
<div
ref={ref}
className={cn(
'rounded-lg border bg-card text-card-foreground shadow-sm',
'rounded-2xl border border-border bg-card backdrop-blur-xl text-card-foreground shadow-lg shadow-black/20',
className
)}
{...props}
@@ -22,7 +22,7 @@ const CardHeader = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('flex flex-col space-y-1.5 p-6', className)}
className={cn('flex flex-col space-y-1.5 p-6 pb-4', className)}
{...props}
/>
));
@@ -59,7 +59,7 @@ const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
<div ref={ref} className={cn('p-6 pt-4', className)} {...props} />
));
CardContent.displayName = 'CardContent';
landing/src/components/ui/feature-card.tsx
+8 -2
View File
@@ -11,9 +11,15 @@ interface FeatureCardProps {
export function FeatureCard({ title, description, icon, className }: FeatureCardProps) {
return (
<Card className={cn('text-center', className)}>
<Card className={cn('text-center hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 transition-all duration-300 hover:-translate-y-1', className)}>
<CardHeader>
{icon && <div className="flex justify-center mb-2">{icon}</div>}
{icon && (
<div className="flex justify-center mb-3">
<div className="p-3 rounded-xl bg-muted/50 backdrop-blur-sm border border-border">
{icon}
</div>
</div>
)}
<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
</CardHeader>
<CardContent>
landing/src/components/ui/section.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface SectionProps {
export function Section({ children, className, id }: SectionProps) {
return (
<section id={id} className={cn('space-y-4 sm:space-y-6', className)}>
<section id={id} className={cn('space-y-6 sm:space-y-8', className)}>
{children}
</section>
);