style: modernize smoking aids page with better mobile layout and card design
This commit is contained in:
Avery Felts
parent
876da1c80b
commit
14126837df
@ -2,26 +2,32 @@
|
||||
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ExternalLink, Sparkles, Wind, Pill, Coffee } from 'lucide-react';
|
||||
import { ExternalLink, Sparkles, Wind, Pill, Coffee, Star, Quote } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { useTheme } from '@/lib/theme-context';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
const smokingAids = [
|
||||
{
|
||||
id: 'breathing-necklace',
|
||||
title: '528Hz Anxiety Relief Breathing Necklace',
|
||||
description: 'A mindfulness tool designed to help you manage cravings and anxiety through deep breathing exercises. The 528Hz frequency is associated with relaxation and healing.',
|
||||
category: 'Mindfulness',
|
||||
rating: 4.6,
|
||||
description: 'A discreet mindfulness tool designed to help you manage cravings and anxiety through deep breathing exercises. The 528Hz frequency is associated with relaxation and healing.',
|
||||
benefit: 'Helps replace the physical hand-to-mouth habit while promoting calming deep breaths during stressful moments or cravings.',
|
||||
image: 'https://m.media-amazon.com/images/I/51VJ5HANaRL._AC_SY695_.jpg',
|
||||
url: 'https://amzn.to/3Z2BuCk',
|
||||
icon: Wind,
|
||||
color: 'text-sky-400',
|
||||
bgColor: 'bg-sky-500/10',
|
||||
borderColor: 'border-sky-500/20',
|
||||
buttonColor: 'bg-sky-500 hover:bg-sky-600',
|
||||
},
|
||||
{
|
||||
id: 'nicotine-lozenge',
|
||||
title: 'Nicotine Polacrilex Lozenge (2mg, Cherry)',
|
||||
title: 'Nicotine Polacrilex Lozenge (2mg)',
|
||||
category: 'NRT',
|
||||
rating: 4.5,
|
||||
description: 'Effective nicotine replacement therapy to help control withdrawal symptoms. These lozenges provide a controlled dose of nicotine to ease you off cigarettes.',
|
||||
benefit: 'Reduces physical withdrawal symptoms like irritability and intense cravings, making the transition to being smoke-free smoother.',
|
||||
image: 'https://m.media-amazon.com/images/I/61h+Z88Ev9S._AC_SX679_.jpg',
|
||||
@ -29,11 +35,14 @@ const smokingAids = [
|
||||
icon: Pill,
|
||||
color: 'text-red-400',
|
||||
bgColor: 'bg-red-500/10',
|
||||
borderColor: 'border-red-500/20',
|
||||
buttonColor: 'bg-red-500 hover:bg-red-600',
|
||||
},
|
||||
{
|
||||
id: 'recovery-complex',
|
||||
title: 'QuitK Recovery Complex',
|
||||
category: 'Supplement',
|
||||
rating: 4.4,
|
||||
description: 'A comprehensive supplement blend containing Magnesium, Ashwagandha, and GABA designed specifically to support your body during the detox process.',
|
||||
benefit: 'Supports mood stability and relaxation while your body clears out toxins, helping to minimize the mental strain of quitting.',
|
||||
image: 'https://m.media-amazon.com/images/I/51HWgmCW1-L._AC_SX679_.jpg',
|
||||
@ -41,11 +50,14 @@ const smokingAids = [
|
||||
icon: Sparkles,
|
||||
color: 'text-purple-400',
|
||||
bgColor: 'bg-purple-500/10',
|
||||
borderColor: 'border-purple-500/20',
|
||||
buttonColor: 'bg-purple-500 hover:bg-purple-600',
|
||||
},
|
||||
{
|
||||
id: 'mullein-tea',
|
||||
title: 'Tarbust Mullein Tea for Lung Detox',
|
||||
category: 'Herbal',
|
||||
rating: 4.7,
|
||||
description: 'Organic herbal tea formulated with Mullein leaf, traditionally used to support respiratory health and clear congestion.',
|
||||
benefit: 'Aids in clearing mucus and toxins from your lungs, supporting your body\'s natural healing process as you recover from smoking.',
|
||||
image: 'https://m.media-amazon.com/images/I/81NU8bv72uL._SX679_PIbundle-20,TopRight,0,0_SX679SY693SH20_.jpg',
|
||||
@ -53,6 +65,7 @@ const smokingAids = [
|
||||
icon: Coffee,
|
||||
color: 'text-green-400',
|
||||
bgColor: 'bg-green-500/10',
|
||||
borderColor: 'border-green-500/20',
|
||||
buttonColor: 'bg-green-500 hover:bg-green-600',
|
||||
},
|
||||
];
|
||||
@ -61,85 +74,105 @@ export default function SmokingAidsPage() {
|
||||
const { theme } = useTheme();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-20 pt-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto space-y-12">
|
||||
{/* Header Section */}
|
||||
<div className="text-center space-y-4 max-w-3xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<h1
|
||||
className="text-4xl sm:text-5xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-orange-400"
|
||||
>
|
||||
Tools for Your Journey
|
||||
<div className="min-h-screen pb-24 pt-28 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto space-y-16">
|
||||
{/* Hero Section */}
|
||||
<div className="relative text-center space-y-6 max-w-4xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-700">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-32 bg-purple-500/20 rounded-full blur-3xl -z-10" />
|
||||
|
||||
<h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight">
|
||||
Tools for Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-orange-400">Freedom</span>
|
||||
</h1>
|
||||
<p
|
||||
className="text-lg text-muted-foreground"
|
||||
>
|
||||
Quitting is hard, but you don't have to do it alone. We've curated a selection of aids that can support your physical and mental recovery process.
|
||||
<p className="text-lg sm:text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
||||
Transform your journey with tools designed to support your physical recovery and mental resilience. You don't have to do this alone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Grid Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{smokingAids.map((item) => (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
|
||||
{smokingAids.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="animate-in fade-in slide-in-from-bottom-8 duration-1000 fill-mode-both"
|
||||
className="group animate-in fade-in slide-in-from-bottom-12 fill-mode-both"
|
||||
style={{ animationDelay: `${index * 150}ms` }}
|
||||
>
|
||||
<Card className="h-full flex flex-col overflow-hidden border-border/50 hover:border-border/80 transition-all duration-300 hover:shadow-2xl group bg-card/50 backdrop-blur-sm">
|
||||
<div className="relative h-64 w-full bg-white/5 p-6 flex items-center justify-center overflow-hidden">
|
||||
<div className={`absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity duration-700 ${item.bgColor.replace('/10', '/30')}`} />
|
||||
<div className="relative w-full h-full max-w-[200px] aspect-square transition-transform duration-500 group-hover:scale-110">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-contain"
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
/>
|
||||
<Card className="h-full flex flex-col overflow-hidden border-border/40 hover:border-border/80 transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 bg-card/30 backdrop-blur-xl relative">
|
||||
{/* Decorative gradient blob */}
|
||||
<div className={`absolute -top-24 -right-24 w-48 h-48 rounded-full blur-3xl opacity-20 transition-opacity duration-500 group-hover:opacity-30 ${item.bgColor.replace('/10', '')}`} />
|
||||
|
||||
<div className="flex flex-col sm:flex-row h-full">
|
||||
{/* Image Section - Top on mobile, Left on desktop */}
|
||||
<div className="relative w-full sm:w-2/5 h-64 sm:h-auto bg-gradient-to-br from-white/5 to-white/0 p-6 flex items-center justify-center shrink-0">
|
||||
<div className="relative w-full h-full sm:w-40 sm:h-40 transition-transform duration-500 group-hover:scale-105">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-contain drop-shadow-xl"
|
||||
sizes="(max-width: 640px) 100vw, 300px"
|
||||
/>
|
||||
</div>
|
||||
<Badge variant="secondary" className="absolute top-4 left-4 backdrop-blur-md bg-background/50 border-white/10">
|
||||
{item.category}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className={`absolute top-4 right-4 p-2 rounded-full backdrop-blur-md ${item.bgColor}`}>
|
||||
<item.icon className={`w-5 h-5 ${item.color}`} />
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="flex flex-col flex-grow p-6 sm:p-8">
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold group-hover:text-primary transition-colors line-clamp-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1 mt-2">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-3.5 h-3.5 ${i < Math.floor(item.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-muted'}`}
|
||||
/>
|
||||
))}
|
||||
<span className="text-xs text-muted-foreground ml-2">({item.rating})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`p-2.5 rounded-xl ${item.bgColor} ${item.color} shrink-0`}>
|
||||
<item.icon className="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
<div className={`mt-auto p-4 rounded-xl ${item.bgColor} border ${item.borderColor} mb-6`}>
|
||||
<div className="flex gap-3">
|
||||
<Quote className={`w-4 h-4 ${item.color} shrink-0 flip-x`} />
|
||||
<p className="text-xs font-medium italic opacity-90">
|
||||
{item.benefit}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
asChild
|
||||
className={`w-full text-white font-semibold shadow-lg transition-all duration-300 hover:ring-2 hover:ring-offset-2 hover:ring-offset-background ${item.buttonColor} rounded-xl h-12`}
|
||||
>
|
||||
<a href={item.url} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-2">
|
||||
View on Amazon
|
||||
<ExternalLink className="w-4 h-4 ml-1" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl sm:text-2xl group-hover:text-primary transition-colors">
|
||||
{item.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-base mt-2">
|
||||
{item.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex-grow">
|
||||
<div className={`p-4 rounded-lg bg-secondary/50 border border-border/50`}>
|
||||
<p className="text-sm font-medium leading-relaxed">
|
||||
<span className={`${item.color} font-bold`}>Why it helps: </span>
|
||||
{item.benefit}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="pt-0">
|
||||
<Button
|
||||
asChild
|
||||
className={`w-full text-white font-medium shadow-lg transition-all duration-300 ${item.buttonColor}`}
|
||||
size="lg"
|
||||
>
|
||||
<a href={item.url} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-2">
|
||||
View on Amazon
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Disclaimer */}
|
||||
<div className="text-center text-sm text-muted-foreground/60 max-w-2xl mx-auto pt-8 border-t border-border/20">
|
||||
<p>
|
||||
Disclaimer: As an Amazon Associate, we earn from qualifying purchases. This comes at no extra cost to you and helps support the development of QuitTraq.
|
||||
Please consult with a healthcare professional before starting any new supplement or nicotine replacement therapy.
|
||||
{/* Trust/Disclaimer Section */}
|
||||
<div className="border-t border-border/40 py-12 text-center space-y-4">
|
||||
<p className="text-sm text-muted-foreground max-w-2xl mx-auto px-4">
|
||||
<span className="block font-medium mb-1 text-foreground/80">Transparency Note</span>
|
||||
As an Amazon Associate, we earn from qualifying purchases. This helps support the development of QuitTraq at no extra cost to you.
|
||||
Always consult with a healthcare professional before starting any new supplement or nicotine replacement therapy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user