feat: Add Smoking Aids page with Amazon affiliate products and update navigation

next.config.ts

@@ -1,7 +1,14 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  // No special configuration needed - using native D1 API
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'm.media-amazon.com',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

prisma.config.ts

@@ -0,0 +1,14 @@
+// This file was generated by Prisma, and assumes you have installed the following:
+// npm install --save-dev prisma dotenv
+import "dotenv/config";
+import { defineConfig } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: process.env["DATABASE_URL"],
+  },
+});

src/app/smoking-aids/page.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+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 Image from 'next/image';
+import { useTheme } from '@/lib/theme-context';
+
+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.',
+        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',
+        buttonColor: 'bg-sky-500 hover:bg-sky-600',
+    },
+    {
+        id: 'nicotine-lozenge',
+        title: 'Nicotine Polacrilex Lozenge (2mg, Cherry)',
+        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',
+        url: 'https://amzn.to/4rfQl8s',
+        icon: Pill,
+        color: 'text-red-400',
+        bgColor: 'bg-red-500/10',
+        buttonColor: 'bg-red-500 hover:bg-red-600',
+    },
+    {
+        id: 'recovery-complex',
+        title: 'QuitK Recovery Complex',
+        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',
+        url: 'https://amzn.to/3NFU1Sx',
+        icon: Sparkles,
+        color: 'text-purple-400',
+        bgColor: 'bg-purple-500/10',
+        buttonColor: 'bg-purple-500 hover:bg-purple-600',
+    },
+    {
+        id: 'mullein-tea',
+        title: 'Tarbust Mullein Tea for Lung Detox',
+        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',
+        url: 'https://amzn.to/3LzNpEM',
+        icon: Coffee,
+        color: 'text-green-400',
+        bgColor: 'bg-green-500/10',
+        buttonColor: 'bg-green-500 hover:bg-green-600',
+    },
+];
+
+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
+                </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>
+            </div>
+
+            {/* Grid Section */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                {smokingAids.map((item) => (
+                    <div
+                        key={item.id}
+                        className="animate-in fade-in slide-in-from-bottom-8 duration-1000 fill-mode-both"
+                    >
+                        <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"
+                                    />
+                                </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}`} />
+                                </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.
+                </p>
+            </div>
+        </div>
+    );
+}

src/components/UserHeader.tsx

@@ -22,7 +22,7 @@ import { fetchPreferences, fetchReminderSettings, saveReminderSettings, Reminder
 import { useNotifications } from '@/hooks/useNotifications';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Cigarette, Leaf, LogOut, Home, ChevronDown, Sun, Moon, Bell, BellOff, BellRing, Menu } from 'lucide-react';
+import { Cigarette, Leaf, LogOut, Home, ChevronDown, Sun, Moon, Bell, BellOff, BellRing, Menu, Sparkles } from 'lucide-react';
 import { useTheme } from '@/lib/theme-context';
 import { InstallAppButton } from './InstallAppButton';
 
@@ -186,6 +186,11 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
                   <Leaf className="mr-3 h-4 w-4 text-green-400" />
                   <span>Track Marijuana Usage</span>
                 </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => handleNavigate('/smoking-aids')}>
+                  <Sparkles className="mr-3 h-4 w-4 text-purple-400" />
+                  <span>Smoking Aids</span>
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>