├── .eslintrc.json
├── app
    ├── icon.png
    ├── favicon.ico
    ├── twitter-image.png
    ├── opengraph-image.png
    ├── layout.tsx
    ├── a
    │   └── [id]
    │   │   └── page.tsx
    ├── globals.css
    ├── actions.ts
    ├── api
    │   └── check-aura
    │   │   └── route.ts
    └── page.tsx
├── assets
    ├── Logo.png
    ├── CardSideHandles.tsx
    ├── CardSideCover.tsx
    └── CardTopCover.tsx
├── next.config.mjs
├── postcss.config.mjs
├── lib
    └── utils.ts
├── .env.example
├── components
    ├── ui
    │   ├── skeleton.tsx
    │   ├── textarea.tsx
    │   ├── label.tsx
    │   ├── input.tsx
    │   ├── separator.tsx
    │   ├── badge.tsx
    │   ├── radio-group.tsx
    │   ├── avatar.tsx
    │   ├── alert.tsx
    │   ├── scroll-area.tsx
    │   ├── button.tsx
    │   ├── card.tsx
    │   ├── accordion.tsx
    │   ├── select.tsx
    │   └── dropdown-menu.tsx
    ├── GradientBackground.tsx
    ├── ShareButton.tsx
    └── SVGLogo.tsx
├── public
    ├── groq.svg
    └── deepseek.svg
├── components.json
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
└── tailwind.config.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "next/typescript"]
3 | }
4 | 


--------------------------------------------------------------------------------
/app/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zaidmukaddam/aura-checker/HEAD/app/icon.png


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zaidmukaddam/aura-checker/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/assets/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zaidmukaddam/aura-checker/HEAD/assets/Logo.png


--------------------------------------------------------------------------------
/app/twitter-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zaidmukaddam/aura-checker/HEAD/app/twitter-image.png


--------------------------------------------------------------------------------
/app/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zaidmukaddam/aura-checker/HEAD/app/opengraph-image.png


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | # Get the DEEPSEEK_API_KEY from https://platform.deepseek.com/api_keys
2 | # Get the EXA_API_KEY from https://dashboard.exa.ai/api-keys
3 | # Get the GROQ_API_KEY from https://console.groq.com/keys
4 | 
5 | # API Keys
6 | DEEPSEEK_API_KEY=YOUR_DEEPSEEK_API_KEY
7 | EXA_API_KEY=YOUR_EXA_API_KEY
8 | GROQ_API_KEY=YOUR_GROQ_API_KEY


--------------------------------------------------------------------------------
/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-primary/10", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/public/groq.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.3 26.3"><defs><style>.cls-1{fill:#f05237;}.cls-2{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Content"><circle class="cls-1" cx="13.15" cy="13.15" r="13.15"/><path class="cls-2" d="M13.17,6.88a4.43,4.43,0,0,0,0,8.85h1.45V14.07H13.17a2.77,2.77,0,1,1,2.77-2.76v4.07a2.74,2.74,0,0,1-4.67,2L10.1,18.51a4.37,4.37,0,0,0,3.07,1.29h.06a4.42,4.42,0,0,0,4.36-4.4V11.2a4.43,4.43,0,0,0-4.42-4.32"/></g></g></svg>
2 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | .env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef<
 6 |   HTMLTextAreaElement,
 7 |   React.ComponentProps<"textarea">
 8 | >(({ className, ...props }, ref) => {
 9 |   return (
10 |     <textarea
11 |       className={cn(
12 |         "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
13 |         className
14 |       )}
15 |       ref={ref}
16 |       {...props}
17 |     />
18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base 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 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 | 
31 | export { Separator }
32 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './globals.css'
 2 | import { Inter } from 'next/font/google'
 3 | import { Analytics } from "@vercel/analytics/react"
 4 | import { Toaster } from "react-hot-toast"
 5 | import GradientBackground from '@/components/GradientBackground'
 6 | import type { Metadata, Viewport } from 'next'
 7 | 
 8 | const inter = Inter({ subsets: ['latin'], weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] })
 9 | 
10 | 
11 | export const metadata: Metadata = {
12 |   metadataBase: new URL('https://check-aura.vercel.app'),
13 |   title: 'Aura Checker',
14 |   description: 'Get a vibe check on two Twitter users',
15 | }
16 |  
17 | export const viewport: Viewport = {
18 |   themeColor: '#141720',
19 | }
20 | 
21 | export default function RootLayout({
22 |   children,
23 | }: {
24 |   children: React.ReactNode
25 | }) {
26 |   return (
27 |     <html lang="en">
28 |       <body className={`${inter.className} min-h-screen w-screen overflow-x-hidden bg-black`}>
29 |         <Toaster position="top-center" />
30 |         <GradientBackground>
31 |           {children}
32 |         </GradientBackground>
33 |         <Analytics />
34 |       </body>
35 |     </html>
36 |   )
37 | }
38 | 
39 | 


--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/app/a/[id]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { neon } from '@neondatabase/serverless'
 2 | import { notFound } from 'next/navigation'
 3 | import Home from '@/app/page'
 4 | 
 5 | interface SharePageProps {
 6 |   params: {
 7 |     id: string
 8 |   }
 9 | }
10 | 
11 | async function getSharedData(id: string) {
12 |   try {
13 |     const sql = neon(process.env.DATABASE_URL!)
14 |     const result = await sql`
15 |       SELECT * FROM shares 
16 |       WHERE id = ${id}
17 |       LIMIT 1
18 |     `
19 |     return result[0] || null
20 |   } catch (error) {
21 |     console.error('Error fetching shared data:', error)
22 |     return null
23 |   }
24 | }
25 | 
26 | export default async function SharePage({ params }: SharePageProps) {
27 |   const sharedData = await getSharedData(params.id)
28 | 
29 |   if (!sharedData) {
30 |     notFound()
31 |   }
32 | 
33 |   // Add search params to pass initial state to the client component
34 |   const searchParams = new URLSearchParams({
35 |     auraUser: sharedData.aura_user,
36 |     auraSubject: sharedData.aura_subject,
37 |     result: sharedData.result,
38 |     reasoning: sharedData.reasoning,
39 |     userScore: sharedData.user_score.toString(),
40 |     subjectScore: sharedData.subject_score.toString(),
41 |   })
42 | 
43 |   // Redirect to home with search params
44 |   return <Home searchParams={searchParams.toString()} />
45 | } 


--------------------------------------------------------------------------------
/assets/CardSideHandles.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function CardLeftSideHandles({ ...props }: React.SVGProps<SVGSVGElement>) {
 4 |     return (
 5 |         <svg {...props} width="136" height="549" viewBox="0 0 136 549" fill="none" xmlns="http://www.w3.org/2000/svg">
 6 |             <path d="M136 30.712C136 13.7502 122.25 -7.41424e-07 105.288 0C93.8709 4.99051e-07 83.3962 6.33313 78.0918 16.4431L10.0744 146.081C3.45704 158.693 -8.4569e-05 172.723 -8.39464e-05 186.966L-0.00012207 362.034C-0.000121448 376.277 3.45702 390.307 10.0744 402.919L78.0918 532.557C83.3962 542.667 93.8709 549 105.288 549C122.25 549 136 535.25 136 518.288L136 30.712Z" fill="#B1C5FF" fill-opacity="0.05" />
 7 |         </svg>
 8 |     )
 9 | }
10 | 
11 | function CardRightSideHandles({ ...props }: React.SVGProps<SVGSVGElement>) {
12 |     return (
13 |         <svg {...props} width="136" height="549" viewBox="0 0 136 549" fill="none" xmlns="http://www.w3.org/2000/svg">
14 |             <path d="M0 30.712C7.41423e-07 13.7502 13.7503 -7.41424e-07 30.7121 0C42.129 4.99051e-07 52.6037 6.33313 57.9081 16.4431L125.926 146.081C132.543 158.693 136 172.723 136 186.966L136 362.034C136 376.277 132.543 390.307 125.926 402.919L57.9081 532.557C52.6037 542.667 42.129 549 30.7121 549C13.7503 549 1.33109e-05 535.25 1.17519e-05 518.288L0 30.712Z" fill="#B1C5FF" fill-opacity="0.05" />
15 |         </svg>
16 |     )
17 | }
18 | 
19 | export { CardLeftSideHandles, CardRightSideHandles }


--------------------------------------------------------------------------------
/assets/CardSideCover.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function CardRightSideCover({ ...props }: React.SVGProps<SVGSVGElement>) {
 4 |     return (
 5 |         <svg {...props} width="136" height="549" preserveAspectRatio="none" viewBox="0 0 136 549" fill="none" xmlns="http://www.w3.org/2000/svg">
 6 |             <path d="M0 30.712C7.41423e-07 13.7502 13.7503 -7.41424e-07 30.7121 0C42.129 4.99051e-07 52.6037 6.33313 57.9081 16.4431L125.926 146.081C132.543 158.693 136 172.723 136 186.966L136 362.034C136 376.277 132.543 390.307 125.926 402.919L57.9081 532.557C52.6037 542.667 42.129 549 30.7121 549C13.7503 549 1.33109e-05 535.25 1.17519e-05 518.288L0 30.712Z" fill="white" fill-opacity="0.05" />
 7 |         </svg>
 8 |     )
 9 | }
10 | 
11 | function CardLeftSideCover({ ...props }: React.SVGProps<SVGSVGElement>) {
12 |     return (
13 |         <svg {...props} width="136" height="549" preserveAspectRatio="none" viewBox="0 0 136 549" fill="none" xmlns="http://www.w3.org/2000/svg">
14 |             <path d="M136 30.712C136 13.7502 122.25 -7.41424e-07 105.288 0C93.871 4.99051e-07 83.3963 6.33311 78.0919 16.443L10.0745 146.081C3.45714 158.693 1.61836e-05 172.723 1.68062e-05 186.966L0 362.034C-3.35718e-06 376.277 3.45712 390.307 10.0745 402.919L78.0919 532.557C83.3963 542.667 93.871 549 105.288 549C122.25 549 136 535.25 136 518.288V30.712Z" fill="white" fill-opacity="0.05" />
15 |         </svg>
16 |     )
17 | }
18 | 
19 | 
20 | 
21 | export { CardRightSideCover, CardLeftSideCover }


--------------------------------------------------------------------------------
/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 5 | import { Circle } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const RadioGroup = React.forwardRef<
10 |   React.ElementRef<typeof RadioGroupPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
12 | >(({ className, ...props }, ref) => {
13 |   return (
14 |     <RadioGroupPrimitive.Root
15 |       className={cn("grid gap-2", className)}
16 |       {...props}
17 |       ref={ref}
18 |     />
19 |   )
20 | })
21 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
22 | 
23 | const RadioGroupItem = React.forwardRef<
24 |   React.ElementRef<typeof RadioGroupPrimitive.Item>,
25 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
26 | >(({ className, ...props }, ref) => {
27 |   return (
28 |     <RadioGroupPrimitive.Item
29 |       ref={ref}
30 |       className={cn(
31 |         "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
37 |         <Circle className="h-3.5 w-3.5 fill-primary" />
38 |       </RadioGroupPrimitive.Indicator>
39 |     </RadioGroupPrimitive.Item>
40 |   )
41 | })
42 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
43 | 
44 | export { RadioGroup, RadioGroupItem }
45 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Aura Checker
 2 | 
 3 | An AI-powered tool that helps you analyze and compare your digital aura with X(Twitter) posts. Generate personalized aura reports, understand relationship dynamics, and gain insights into your digital energy alignment with confidence.
 4 | 
 5 | ## Features
 6 | 
 7 | - **Personalized Aura Reports:** Receive tailored analyses based on your X(Twitter) activity and digital presence.
 8 | - **Digital Aura Analysis:** Understand patterns and factors influencing your digital energy.
 9 | - **Relationship Dynamics Insights:** Analyze the compatibility and interactions between different digital auras.
10 | - **Interactive UI:** User-friendly interface for seamless analysis and report generation.
11 | - **Powered by:** [Exa.AI](https://exa.ai), [DeepSeek R1](https://api-docs.deepseek.com/news/news250120), and [Vercel AI SDK](https://sdk.vercel.ai).
12 | 
13 | ## Tech Stack
14 | 
15 | - **Next.js**
16 | - **Tailwind CSS**
17 | - **Framer Motion**
18 | - **Vercel AI SDK**
19 | 
20 | ## Getting Started
21 | 
22 | 1. **Clone the repository**
23 |     ```bash
24 |     git clone https://github.com/zaidmukaddam/aura-checker.git
25 |     ```
26 | 2. **Navigate to the project directory**
27 |     ```bash
28 |     cd aura-checker
29 |     ```
30 | 3. **Install dependencies**
31 |     ```bash
32 |     bun install
33 |     ```
34 | 4. **Set up your environment variables**
35 |     ```bash
36 |     cp .env.example .env.local
37 |     # Add your API keys
38 |     ```
39 | 5. **Run the development server**
40 |     ```bash
41 |     npm run dev
42 |     ```
43 | 
44 | Open [http://localhost:3000](http://localhost:3000) to view the application.


--------------------------------------------------------------------------------
/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "aura-checker",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@ai-sdk/deepseek": "^0.1.4",
13 |     "@ai-sdk/groq": "^1.1.3",
14 |     "@neondatabase/serverless": "^0.10.4",
15 |     "@phosphor-icons/react": "^2.1.7",
16 |     "@radix-ui/react-accordion": "^1.2.2",
17 |     "@radix-ui/react-avatar": "^1.1.2",
18 |     "@radix-ui/react-dropdown-menu": "^2.1.5",
19 |     "@radix-ui/react-label": "^2.1.1",
20 |     "@radix-ui/react-radio-group": "^1.2.2",
21 |     "@radix-ui/react-scroll-area": "^1.2.2",
22 |     "@radix-ui/react-select": "^2.1.5",
23 |     "@radix-ui/react-separator": "^1.1.1",
24 |     "@radix-ui/react-slot": "^1.1.1",
25 |     "@vercel/analytics": "^1.4.1",
26 |     "ai": "^4.1.8",
27 |     "class-variance-authority": "^0.7.1",
28 |     "clsx": "^2.1.1",
29 |     "exa-js": "^1.4.8",
30 |     "framer-motion": "^12.0.5",
31 |     "geist": "^1.3.1",
32 |     "html-to-image": "^1.11.11",
33 |     "lucide-react": "^0.468.0",
34 |     "marked-react": "^3.0.0",
35 |     "next": "14.2.23",
36 |     "react": "^18",
37 |     "react-dom": "^18",
38 |     "react-hot-toast": "^2.5.1",
39 |     "tailwind-merge": "^2.5.5",
40 |     "tailwindcss-animate": "^1.0.7"
41 |   },
42 |   "devDependencies": {
43 |     "@tailwindcss/typography": "^0.5.16",
44 |     "@types/node": "^20",
45 |     "@types/react": "^18",
46 |     "@types/react-dom": "^18",
47 |     "autoprefixer": "^10.4.20",
48 |     "eslint": "^8",
49 |     "eslint-config-next": "14.2.16",
50 |     "postcss": "^8.4.49",
51 |     "tailwindcss": "^3.4.16",
52 |     "typescript": "^5"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const alertVariants = cva(
 7 |   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-background text-foreground",
12 |         destructive:
13 |           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | const Alert = React.forwardRef<
23 |   HTMLDivElement,
24 |   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25 | >(({ className, variant, ...props }, ref) => (
26 |   <div
27 |     ref={ref}
28 |     role="alert"
29 |     className={cn(alertVariants({ variant }), className)}
30 |     {...props}
31 |   />
32 | ))
33 | Alert.displayName = "Alert"
34 | 
35 | const AlertTitle = React.forwardRef<
36 |   HTMLParagraphElement,
37 |   React.HTMLAttributes<HTMLHeadingElement>
38 | >(({ className, ...props }, ref) => (
39 |   <h5
40 |     ref={ref}
41 |     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42 |     {...props}
43 |   />
44 | ))
45 | AlertTitle.displayName = "AlertTitle"
46 | 
47 | const AlertDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm [&_p]:leading-relaxed", className)}
54 |     {...props}
55 |   />
56 | ))
57 | AlertDescription.displayName = "AlertDescription"
58 | 
59 | export { Alert, AlertTitle, AlertDescription }
60 | 


--------------------------------------------------------------------------------
/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar }
49 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .text-balance {
 7 |     text-wrap: balance;
 8 |   }
 9 | }
10 | 
11 | @layer base {
12 |   :root {
13 |     --background: 0 0% 100%;
14 |     --foreground: 0 0% 3.9%;
15 |     --card: 0 0% 100%;
16 |     --card-foreground: 0 0% 3.9%;
17 |     --popover: 0 0% 100%;
18 |     --popover-foreground: 0 0% 3.9%;
19 |     --primary: 0 0% 9%;
20 |     --primary-foreground: 0 0% 98%;
21 |     --secondary: 0 0% 96.1%;
22 |     --secondary-foreground: 0 0% 9%;
23 |     --muted: 0 0% 96.1%;
24 |     --muted-foreground: 0 0% 45.1%;
25 |     --accent: 0 0% 96.1%;
26 |     --accent-foreground: 0 0% 9%;
27 |     --destructive: 0 84.2% 60.2%;
28 |     --destructive-foreground: 0 0% 98%;
29 |     --border: 0 0% 89.8%;
30 |     --input: 0 0% 89.8%;
31 |     --ring: 0 0% 3.9%;
32 |     --chart-1: 12 76% 61%;
33 |     --chart-2: 173 58% 39%;
34 |     --chart-3: 197 37% 24%;
35 |     --chart-4: 43 74% 66%;
36 |     --chart-5: 27 87% 67%;
37 |     --radius: 0.5rem;
38 |   }
39 |   .dark {
40 |     --background: 0 0% 3.9%;
41 |     --foreground: 0 0% 98%;
42 |     --card: 0 0% 3.9%;
43 |     --card-foreground: 0 0% 98%;
44 |     --popover: 0 0% 3.9%;
45 |     --popover-foreground: 0 0% 98%;
46 |     --primary: 0 0% 98%;
47 |     --primary-foreground: 0 0% 9%;
48 |     --secondary: 0 0% 14.9%;
49 |     --secondary-foreground: 0 0% 98%;
50 |     --muted: 0 0% 14.9%;
51 |     --muted-foreground: 0 0% 63.9%;
52 |     --accent: 0 0% 14.9%;
53 |     --accent-foreground: 0 0% 98%;
54 |     --destructive: 0 62.8% 30.6%;
55 |     --destructive-foreground: 0 0% 98%;
56 |     --border: 0 0% 14.9%;
57 |     --input: 0 0% 14.9%;
58 |     --ring: 0 0% 83.1%;
59 |     --chart-1: 220 70% 50%;
60 |     --chart-2: 160 60% 45%;
61 |     --chart-3: 30 80% 55%;
62 |     --chart-4: 280 65% 60%;
63 |     --chart-5: 340 75% 55%;
64 |   }
65 | }


--------------------------------------------------------------------------------
/assets/CardTopCover.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function CardTopLeftCover({ ...props }: React.SVGProps<SVGSVGElement>) {
 4 |     return (
 5 |         <svg {...props} width="165" height="162" viewBox="0 0 165 162" fill="none" xmlns="http://www.w3.org/2000/svg">
 6 |             <g opacity="0.5">
 7 |                 <path d="M164.5 36.902V-4C164.5 -10.6274 159.127 -16 152.5 -16H-12C-18.6274 -16 -24 -10.6274 -24 -4V150C-24 156.627 -18.6274 162 -12 162H39.402C46.8281 162 53.95 159.05 59.201 153.799L156.299 56.701C161.55 51.45 164.5 44.3281 164.5 36.902Z" fill="white" fillOpacity="0.1" />
 8 |                 <path d="M162.5 36.902V-4C162.5 -9.52285 158.023 -14 152.5 -14H-12C-17.5228 -14 -22 -9.52285 -22 -4V150C-22 155.523 -17.5228 160 -12 160H39.402C46.2976 160 52.9109 157.261 57.7868 152.385L154.885 55.2868C159.761 50.4109 162.5 43.7976 162.5 36.902Z" stroke="white" strokeOpacity="0.1" strokeWidth="4" />
 9 |             </g>
10 |         </svg>
11 | 
12 |     )
13 | }
14 | 
15 | function CardTopRightCover({ ...props }: React.SVGProps<SVGSVGElement>) {
16 |     return (
17 |         <svg {...props} width="165" height="162" viewBox="0 0 165 162" fill="none" xmlns="http://www.w3.org/2000/svg">
18 |             <g opacity="0.5">
19 |                 <path d="M0 36.902V-4C0 -10.6274 5.37259 -16 12 -16H176.5C183.127 -16 188.5 -10.6274 188.5 -4V150C188.5 156.627 183.127 162 176.5 162H125.098C117.672 162 110.55 159.05 105.299 153.799L8.20101 56.701C2.94999 51.45 0 44.3281 0 36.902Z" fill="white" fill-opacity="0.1" />
20 |                 <path d="M2 36.902V-4C2 -9.52285 6.47716 -14 12 -14H176.5C182.023 -14 186.5 -9.52285 186.5 -4V150C186.5 155.523 182.023 160 176.5 160H125.098C118.202 160 111.589 157.261 106.713 152.385L9.61522 55.2868C4.73928 50.4109 2 43.7976 2 36.902Z" stroke="white" stroke-opacity="0.1" stroke-width="4" />
21 |             </g>
22 |         </svg>
23 | 
24 |     )
25 | }
26 | 
27 | export { CardTopLeftCover, CardTopRightCover }


--------------------------------------------------------------------------------
/public/deepseek.svg:
--------------------------------------------------------------------------------
1 | <svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>DeepSeek</title><path d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z" fill="#4D6BFE"></path></svg>


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card py-6 text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 px-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLDivElement,
34 |   React.HTMLAttributes<HTMLDivElement>
35 | >(({ className, ...props }, ref) => (
36 |   <div
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLDivElement,
46 |   React.HTMLAttributes<HTMLDivElement>
47 | >(({ className, ...props }, ref) => (
48 |   <div
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("px-6 mt-4pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 5 | import { ChevronDown } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Accordion = AccordionPrimitive.Root
10 | 
11 | const AccordionItem = React.forwardRef<
12 |   React.ElementRef<typeof AccordionPrimitive.Item>,
13 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14 | >(({ className, ...props }, ref) => (
15 |   <AccordionPrimitive.Item
16 |     ref={ref}
17 |     className={cn("border-b", className)}
18 |     {...props}
19 |   />
20 | ))
21 | AccordionItem.displayName = "AccordionItem"
22 | 
23 | const AccordionTrigger = React.forwardRef<
24 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26 | >(({ className, children, ...props }, ref) => (
27 |   <AccordionPrimitive.Header className="flex">
28 |     <AccordionPrimitive.Trigger
29 |       ref={ref}
30 |       className={cn(
31 |         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       {children}
37 |       <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
38 |     </AccordionPrimitive.Trigger>
39 |   </AccordionPrimitive.Header>
40 | ))
41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42 | 
43 | const AccordionContent = React.forwardRef<
44 |   React.ElementRef<typeof AccordionPrimitive.Content>,
45 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46 | >(({ className, children, ...props }, ref) => (
47 |   <AccordionPrimitive.Content
48 |     ref={ref}
49 |     className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50 |     {...props}
51 |   >
52 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
53 |   </AccordionPrimitive.Content>
54 | ))
55 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
56 | 
57 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
58 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |     darkMode: ["class"],
 5 |     content: [
 6 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |   	extend: {
12 |   		colors: {
13 |   			background: 'hsl(var(--background))',
14 |   			foreground: 'hsl(var(--foreground))',
15 |   			card: {
16 |   				DEFAULT: 'hsl(var(--card))',
17 |   				foreground: 'hsl(var(--card-foreground))'
18 |   			},
19 |   			popover: {
20 |   				DEFAULT: 'hsl(var(--popover))',
21 |   				foreground: 'hsl(var(--popover-foreground))'
22 |   			},
23 |   			primary: {
24 |   				DEFAULT: 'hsl(var(--primary))',
25 |   				foreground: 'hsl(var(--primary-foreground))'
26 |   			},
27 |   			secondary: {
28 |   				DEFAULT: 'hsl(var(--secondary))',
29 |   				foreground: 'hsl(var(--secondary-foreground))'
30 |   			},
31 |   			muted: {
32 |   				DEFAULT: 'hsl(var(--muted))',
33 |   				foreground: 'hsl(var(--muted-foreground))'
34 |   			},
35 |   			accent: {
36 |   				DEFAULT: 'hsl(var(--accent))',
37 |   				foreground: 'hsl(var(--accent-foreground))'
38 |   			},
39 |   			destructive: {
40 |   				DEFAULT: 'hsl(var(--destructive))',
41 |   				foreground: 'hsl(var(--destructive-foreground))'
42 |   			},
43 |   			border: 'hsl(var(--border))',
44 |   			input: 'hsl(var(--input))',
45 |   			ring: 'hsl(var(--ring))',
46 |   			chart: {
47 |   				'1': 'hsl(var(--chart-1))',
48 |   				'2': 'hsl(var(--chart-2))',
49 |   				'3': 'hsl(var(--chart-3))',
50 |   				'4': 'hsl(var(--chart-4))',
51 |   				'5': 'hsl(var(--chart-5))'
52 |   			}
53 |   		},
54 |   		borderRadius: {
55 |   			lg: 'var(--radius)',
56 |   			md: 'calc(var(--radius) - 2px)',
57 |   			sm: 'calc(var(--radius) - 4px)'
58 |   		},
59 |   		keyframes: {
60 |   			'accordion-down': {
61 |   				from: {
62 |   					height: '0'
63 |   				},
64 |   				to: {
65 |   					height: 'var(--radix-accordion-content-height)'
66 |   				}
67 |   			},
68 |   			'accordion-up': {
69 |   				from: {
70 |   					height: 'var(--radix-accordion-content-height)'
71 |   				},
72 |   				to: {
73 |   					height: '0'
74 |   				}
75 |   			}
76 |   		},
77 |   		animation: {
78 |   			'accordion-down': 'accordion-down 0.2s ease-out',
79 |   			'accordion-up': 'accordion-up 0.2s ease-out'
80 |   		}
81 |   	}
82 |   },
83 |   plugins: [require("tailwindcss-animate"),require('@tailwindcss/typography')],
84 | };
85 | export default config;
86 | 


--------------------------------------------------------------------------------
/app/actions.ts:
--------------------------------------------------------------------------------
  1 | 'use server'
  2 | 
  3 | import { groq } from '@ai-sdk/groq'
  4 | import { generateObject } from 'ai'
  5 | import { z } from 'zod'
  6 | import { neon } from '@neondatabase/serverless'
  7 | 
  8 | const auraSchema = z.object({
  9 |   scores: z.object({
 10 |     user: z.number().min(0).max(100),
 11 |     subject: z.number().min(0).max(100),
 12 |   }),
 13 | })
 14 | 
 15 | const shareSchema = z.object({
 16 |   auraUser: z.string(),
 17 |   auraSubject: z.string(),
 18 |   scores: z.object({
 19 |     user: z.number(),
 20 |     subject: z.number()
 21 |   }),
 22 |   result: z.string(),
 23 |   reasoning: z.string()
 24 | })
 25 | 
 26 | export async function getAuraScores(message: string) {
 27 |   try {
 28 |     const { object } = await generateObject({
 29 |       model: groq('deepseek-r1-distill-llama-70b'),
 30 |       schema: auraSchema,
 31 |       temperature: 0.5,
 32 |       prompt: `Based on this comparison analysis: "${message}", generate aura compatibility scores between 0-100 for both users. You can be biased too. Consider the described attributes, engagement styles, and overall presence. The first user mentioned should be the "user" score, and the second user should be the "subject" score.`,
 33 |     })
 34 | 
 35 |     return {
 36 |       user: object.scores.user,
 37 |       subject: object.scores.subject
 38 |     }
 39 |   } catch (error) {
 40 |     console.error('Error generating aura scores:', error)
 41 |     return {
 42 |       user: 75,
 43 |       subject: 90
 44 |     }
 45 |   }
 46 | }
 47 | 
 48 | export async function createShareableLink(data: z.infer<typeof shareSchema>) {
 49 |   // Validate the data before proceeding
 50 |   const validatedData = shareSchema.parse(data)
 51 | 
 52 |   if (!validatedData) {
 53 |     throw new Error('Invalid data')
 54 |   }
 55 |   
 56 |   try {
 57 |     const sql = neon(process.env.DATABASE_URL!)
 58 |     
 59 |     // Create shares table if it doesn't exist
 60 |     await sql`
 61 |       CREATE TABLE IF NOT EXISTS shares (
 62 |         id TEXT PRIMARY KEY,
 63 |         aura_user TEXT NOT NULL,
 64 |         aura_subject TEXT NOT NULL,
 65 |         user_score INTEGER NOT NULL,
 66 |         subject_score INTEGER NOT NULL,
 67 |         result TEXT NOT NULL,
 68 |         reasoning TEXT NOT NULL,
 69 |         created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
 70 |       )
 71 |     `
 72 | 
 73 |     // Generate a random 6 character ID
 74 |     const shareId = Math.random().toString(36).substring(2, 8)
 75 | 
 76 |     // Insert the share data
 77 |     await sql`
 78 |       INSERT INTO shares (
 79 |         id, 
 80 |         aura_user, 
 81 |         aura_subject, 
 82 |         user_score, 
 83 |         subject_score, 
 84 |         result, 
 85 |         reasoning
 86 |       ) VALUES (
 87 |         ${shareId},
 88 |         ${data.auraUser},
 89 |         ${data.auraSubject},
 90 |         ${data.scores.user},
 91 |         ${data.scores.subject},
 92 |         ${data.result},
 93 |         ${data.reasoning}
 94 |       )
 95 |     `
 96 | 
 97 |     return { shareId }
 98 |   } catch (error) {
 99 |     console.error('Error creating shareable link:', error)
100 |     throw new Error('Failed to create shareable link')
101 |   }
102 | } 


--------------------------------------------------------------------------------
/components/GradientBackground.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function GradientBackground({ children }: { children: React.ReactNode }) {
 4 |     return (
 5 |         <div className='min-h-screen w-screen overflow-hidden bg-[#141720] text-white'>
 6 | 
 7 |             <div className='fixed top-0 left-0 right-0 bottom-0 z-50 mx-auto' style={{pointerEvents: 'none'}}>
 8 |                 {/* left ray */}
 9 |                 <svg width="1512" height="2024" className='absolute -top-[100vh] md:top-0 w-screen md:w-auto' viewBox="0 0 1512 2024" fill="none" xmlns="http://www.w3.org/2000/svg">
10 |                     <g style={{ mixBlendMode: 'plus-lighter', opacity: '0.4', filter: 'url(#filter0_f_1_31)' }}>
11 |                         <path d="M-239.218 -1035.55L1348.56 1810.93L-788.112 -785.143L-239.218 -1035.55Z" fill="url(#paint0_linear_1_31)" />
12 |                     </g>
13 |                     <defs>
14 |                         <filter id="filter0_f_1_31" x="-1088.11" y="-1335.55" width="2736.67" height="3446.48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
15 |                             <feFlood flood-opacity="0" result="BackgroundImageFix" />
16 |                             <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
17 |                             <feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_1_31" />
18 |                         </filter>
19 |                         <linearGradient id="paint0_linear_1_31" x1="-198.603" y1="-764.312" x2="1169.89" y2="1419.23" gradientUnits="userSpaceOnUse">
20 |                             <stop stop-color="#8E97FF" />
21 |                             <stop offset="1" stop-color="#8E97FF" stop-opacity="0" />
22 |                         </linearGradient>
23 |                     </defs>
24 |                 </svg>
25 | 
26 |                 {/* right ray */}
27 |                 <svg width="1512" height="2024" className='absolute right-0 -top-[100vh] md:top-0 w-screen md:w-auto' viewBox="0 0 1512 2024" fill="none" xmlns="http://www.w3.org/2000/svg">
28 |                     <g style={{ mixBlendMode: 'plus-lighter', opacity: '0.3', filter: 'url(#filter0_f_1_32)' }}>
29 |                         <path d="M1647.03 -1035.55L59.2588 1810.93L2195.93 -785.143L1647.03 -1035.55Z" fill="url(#paint0_linear_1_32)" />
30 |                     </g>
31 |                     <defs>
32 |                         <filter id="filter0_f_1_32" x="-240.741" y="-1335.55" width="2736.67" height="3446.48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
33 |                             <feFlood flood-opacity="0" result="BackgroundImageFix" />
34 |                             <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
35 |                             <feGaussianBlur stdDeviation="150" result="effect1_foregroundBlur_1_32" />
36 |                         </filter>
37 |                         <linearGradient id="paint0_linear_1_32" x1="1606.42" y1="-764.312" x2="237.924" y2="1419.23" gradientUnits="userSpaceOnUse">
38 |                             <stop stop-color="#8E97FF" />
39 |                             <stop offset="1" stop-color="#8E97FF" stop-opacity="0" />
40 |                         </linearGradient>
41 |                     </defs>
42 |                 </svg>
43 | 
44 |             </div>
45 | 
46 |             {children}
47 | 
48 |         </div>
49 |     )
50 | }
51 | 
52 | export default GradientBackground


--------------------------------------------------------------------------------
/app/api/check-aura/route.ts:
--------------------------------------------------------------------------------
 1 | import { groq } from '@ai-sdk/groq'
 2 | import Exa from 'exa-js'
 3 | import {
 4 |     convertToCoreMessages,
 5 |     streamText,
 6 |     experimental_wrapLanguageModel as wrapLanguageModel,
 7 |     extractReasoningMiddleware,
 8 | } from 'ai'
 9 | 
10 | const exa = new Exa(process.env.EXA_API_KEY as string)
11 | 
12 | const enhancedModel = wrapLanguageModel({
13 |     model: groq('deepseek-r1-distill-llama-70b'),
14 |     middleware: extractReasoningMiddleware({ tagName: 'think' }),
15 | });
16 | 
17 | export async function POST(req: Request) {
18 |     const { messages, auraUser, auraSubject } = await req.json()
19 | 
20 |     const userPosts = await exa.searchAndContents(
21 |         `${auraUser}`, {
22 |         type: "auto",
23 |         use_autoprompt: true,
24 |         numResults: 5,
25 |         text: true,
26 |         includeDomains: ['twitter.com', 'x.com'],
27 |     })
28 | 
29 |     const subjectPosts = await exa.searchAndContents(
30 |         `${auraSubject}`, {
31 |         type: "auto",
32 |         use_autoprompt: true,
33 |         numResults: 5,
34 |         text: true,
35 |         includeDomains: ['twitter.com', 'x.com'],
36 |     })
37 | 
38 |     const system = `You're a Gen-Z aura analyzer using social media presence of two parties.
39 |     
40 |     Analyze the vibes between @${auraUser} and @${auraSubject} based on their information/posts.
41 | 
42 |     Create a detailed comparison table. For each attribute, provide a short label followed by " - " and then a brief explanation.
43 | 
44 |     Do not give any other information other than the table as the table is the only output required!! remember this.
45 | 
46 |     Format as a markdown table with these exact attributes:
47 |     | ATTRIBUTES | @${auraUser} | @${auraSubject} |
48 |     |------------|--------------|-----------------|
49 |     | Energy Level | [Label] - [Explanation] | [Label] - [Explanation] |
50 |     | Engagement Style | [Label] - [Explanation] | [Label] - [Explanation] |
51 |     | Content Quality | [Label] - [Explanation] | [Label] - [Explanation] |
52 |     | Interaction Level | [Label] - [Explanation] | [Label] - [Explanation] |
53 |     | Community Vibes | [Label] - [Explanation] | [Label] - [Explanation] |
54 |     | Influence Level | [Label] - [Explanation] | [Label] - [Explanation] |
55 |     | Authenticity | [Label] - [Explanation] | [Label] - [Explanation] |
56 |     | Consistency | [Label] - [Explanation] | [Label] - [Explanation] |
57 |     | Adaptability | [Label] - [Explanation] | [Label] - [Explanation] |
58 | 
59 |     Example format for each cell:
60 |     "High - Frequently posts and engages with community"
61 |     "Collaborative - Actively seeks feedback and interaction"
62 | 
63 |     Posts by @${auraUser}:
64 |     ${userPosts.results.map(p => `${p.text}`).join('\n')}
65 | 
66 |     Posts by @${auraSubject}:
67 |     ${subjectPosts.results.map(p => `${p.text}`).join('\n')}`
68 | 
69 |     const response = streamText({
70 |         model: enhancedModel,
71 |         system,
72 |         messages: convertToCoreMessages(messages),
73 |         temperature: 0,
74 |         onChunk(event) {
75 |             if (event.chunk.type === "reasoning") {
76 |                 console.log(event.chunk.textDelta);
77 |             }
78 |         },
79 |         onStepFinish(event) {
80 |             if (event.warnings) {
81 |                 console.log('Warnings: ', event.warnings);
82 |             }
83 |         },
84 |         onFinish(event) {
85 |             console.log('Fin reason: ', event.finishReason);
86 |             console.log('Steps ', event.steps);
87 |             console.log('Messages: ', event.response.messages[event.response.messages.length - 1].content);
88 |         },
89 |     })
90 | 
91 |     return response.toDataStreamResponse({
92 |         sendReasoning: true,
93 |     })
94 | }


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectScrollUpButton = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 38 | >(({ className, ...props }, ref) => (
 39 |   <SelectPrimitive.ScrollUpButton
 40 |     ref={ref}
 41 |     className={cn(
 42 |       "flex cursor-default items-center justify-center py-1",
 43 |       className
 44 |     )}
 45 |     {...props}
 46 |   >
 47 |     <ChevronUp className="h-4 w-4" />
 48 |   </SelectPrimitive.ScrollUpButton>
 49 | ))
 50 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 51 | 
 52 | const SelectScrollDownButton = React.forwardRef<
 53 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 54 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 55 | >(({ className, ...props }, ref) => (
 56 |   <SelectPrimitive.ScrollDownButton
 57 |     ref={ref}
 58 |     className={cn(
 59 |       "flex cursor-default items-center justify-center py-1",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     <ChevronDown className="h-4 w-4" />
 65 |   </SelectPrimitive.ScrollDownButton>
 66 | ))
 67 | SelectScrollDownButton.displayName =
 68 |   SelectPrimitive.ScrollDownButton.displayName
 69 | 
 70 | const SelectContent = React.forwardRef<
 71 |   React.ElementRef<typeof SelectPrimitive.Content>,
 72 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 73 | >(({ className, children, position = "popper", ...props }, ref) => (
 74 |   <SelectPrimitive.Portal>
 75 |     <SelectPrimitive.Content
 76 |       ref={ref}
 77 |       className={cn(
 78 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 79 |         position === "popper" &&
 80 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 81 |         className
 82 |       )}
 83 |       position={position}
 84 |       {...props}
 85 |     >
 86 |       <SelectScrollUpButton />
 87 |       <SelectPrimitive.Viewport
 88 |         className={cn(
 89 |           "p-1",
 90 |           position === "popper" &&
 91 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 92 |         )}
 93 |       >
 94 |         {children}
 95 |       </SelectPrimitive.Viewport>
 96 |       <SelectScrollDownButton />
 97 |     </SelectPrimitive.Content>
 98 |   </SelectPrimitive.Portal>
 99 | ))
100 | SelectContent.displayName = SelectPrimitive.Content.displayName
101 | 
102 | const SelectLabel = React.forwardRef<
103 |   React.ElementRef<typeof SelectPrimitive.Label>,
104 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
105 | >(({ className, ...props }, ref) => (
106 |   <SelectPrimitive.Label
107 |     ref={ref}
108 |     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
109 |     {...props}
110 |   />
111 | ))
112 | SelectLabel.displayName = SelectPrimitive.Label.displayName
113 | 
114 | const SelectItem = React.forwardRef<
115 |   React.ElementRef<typeof SelectPrimitive.Item>,
116 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
117 | >(({ className, children, ...props }, ref) => (
118 |   <SelectPrimitive.Item
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <SelectPrimitive.ItemIndicator>
128 |         <Check className="h-4 w-4" />
129 |       </SelectPrimitive.ItemIndicator>
130 |     </span>
131 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
132 |   </SelectPrimitive.Item>
133 | ))
134 | SelectItem.displayName = SelectPrimitive.Item.displayName
135 | 
136 | const SelectSeparator = React.forwardRef<
137 |   React.ElementRef<typeof SelectPrimitive.Separator>,
138 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
139 | >(({ className, ...props }, ref) => (
140 |   <SelectPrimitive.Separator
141 |     ref={ref}
142 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
143 |     {...props}
144 |   />
145 | ))
146 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
147 | 
148 | export {
149 |   Select,
150 |   SelectGroup,
151 |   SelectValue,
152 |   SelectTrigger,
153 |   SelectContent,
154 |   SelectLabel,
155 |   SelectItem,
156 |   SelectSeparator,
157 |   SelectScrollUpButton,
158 |   SelectScrollDownButton,
159 | }
160 | 


--------------------------------------------------------------------------------
/components/ShareButton.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useRef, useEffect } from 'react'
  2 | import { ShareIcon, ChevronDown, DownloadIcon } from 'lucide-react'
  3 | import { XLogo } from '@phosphor-icons/react'
  4 | import toast from 'react-hot-toast'
  5 | 
  6 | interface ShareButtonProps {
  7 |   getImage?: () => Promise<string | null>;
  8 |   shareId?: string | null;
  9 |   getShareUrl?: () => string;
 10 | }
 11 | 
 12 | export default function ShareButton({ getImage, shareId, getShareUrl }: ShareButtonProps) {
 13 |   // Compute the share URL.
 14 |   // Priority: custom URL from getShareUrl, else use the shareId to construct a URL pointing to /a/[id],
 15 |   // otherwise fall back to window.location.href or a default URL.
 16 |   let shareUrl = ''
 17 |   if (getShareUrl) {
 18 |     shareUrl = getShareUrl()
 19 |   } else if (shareId) {
 20 |     const origin = typeof window !== 'undefined' ? window.location.origin : 'https://aura-checker.vercel.app'
 21 |     shareUrl = `${origin}/a/${shareId}`
 22 |   } else if (typeof window !== 'undefined') {
 23 |     shareUrl = window.location.href
 24 |   } else {
 25 |     shareUrl = 'https://aura-checker.vercel.app/'
 26 |   }
 27 | 
 28 |   // Build the Post on X URL with proper text encoding
 29 |   const xShareUrl = `https://x.com/intent/tweet?text=${encodeURIComponent(
 30 |     `Check your Aura now: ${shareUrl}`
 31 |   )}`
 32 | 
 33 |   // Dropdown open state
 34 |   const [dropdownOpen, setDropdownOpen] = useState(false)
 35 |   const containerRef = useRef<HTMLDivElement>(null)
 36 | 
 37 |   // Close dropdown on outside click
 38 |   useEffect(() => {
 39 |     function handleClickOutside(event: MouseEvent) {
 40 |       if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
 41 |         setDropdownOpen(false)
 42 |       }
 43 |     }
 44 |     document.addEventListener('mousedown', handleClickOutside)
 45 |     return () => {
 46 |       document.removeEventListener('mousedown', handleClickOutside)
 47 |     }
 48 |   }, [containerRef])
 49 | 
 50 |   // Handle native share
 51 |   const handleShare = async () => {
 52 |     try {
 53 |       // If an image is available, try to attach it in the native share.
 54 |       if (getImage) {
 55 |         const imageUrl = await getImage()
 56 |         if (imageUrl) {
 57 |           const response = await fetch(imageUrl)
 58 |           const blob = await response.blob()
 59 |           const file = new File([blob], 'aura-comparison.png', {
 60 |             type: blob.type || 'image/png',
 61 |           })
 62 |           
 63 |           // If the browser supports sharing files, use that method.
 64 |           if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
 65 |             await navigator.share({
 66 |               files: [file],
 67 |               title: 'Aura Comparison',
 68 |               text: 'Check out this Aura Comparison!',
 69 |             })
 70 |             return
 71 |           }
 72 |   
 73 |           // Fallback: if file share isn't supported, share the URL.
 74 |           if (navigator.share) {
 75 |             await navigator.share({
 76 |               title: 'Aura Comparison',
 77 |               text: 'Check out this Aura Comparison!',
 78 |               url: shareUrl,
 79 |             })
 80 |             return
 81 |           }
 82 |           
 83 |           // Fallback to clipboard if Web Share is not available.
 84 |           await navigator.clipboard.writeText(shareUrl)
 85 |           toast.success('Link copied to clipboard!')
 86 |           return
 87 |         }
 88 |       }
 89 |   
 90 |       // If no image is provided or image sharing failed, just share the text URL.
 91 |       if (navigator.share) {
 92 |         await navigator.share({
 93 |           title: 'Check your Aura now',
 94 |           text: 'Check your Aura now',
 95 |           url: shareUrl,
 96 |         })
 97 |       } else {
 98 |         await navigator.clipboard.writeText(`Check your Aura now: ${shareUrl}`)
 99 |         toast.success('Link copied to clipboard')
100 |       }
101 |     } catch (error) {
102 |       console.error('Error sharing:', error)
103 |       toast.error('Failed to share')
104 |     }
105 |   }
106 | 
107 |   // Handle image download option
108 |   const handleDownload = async () => {
109 |     try {
110 |       if (getImage) {
111 |         const imageUrl = await getImage()
112 |         if (imageUrl) {
113 |           const response = await fetch(imageUrl)
114 |           const blob = await response.blob()
115 |           const url = window.URL.createObjectURL(blob)
116 |           const anchor = document.createElement('a')
117 |           anchor.href = url
118 |           anchor.download = 'aura-comparison.png'
119 |           document.body.appendChild(anchor)
120 |           anchor.click()
121 |           anchor.remove()
122 |           window.URL.revokeObjectURL(url)
123 |           toast.success('Download initiated!')
124 |           return
125 |         }
126 |       }
127 |       toast.error('Image not available for download!')
128 |     } catch (error) {
129 |       console.error('Download error:', error)
130 |       toast.error('Failed to download image')
131 |     }
132 |   }
133 | 
134 |   return (
135 |     <div className="text-[#A6ACD8] text-sm flex items-center gap-2">
136 |       <div ref={containerRef} className="relative">
137 |         <button
138 |           onClick={() => setDropdownOpen(!dropdownOpen)}
139 |           className="flex items-center gap-2 h-9 justify-center rounded-l-3xl rounded-r-md px-4 bg-[#666C94]/20 hover:brightness-125 focus:outline-none transition-all duration-200"
140 |         >
141 |           <ShareIcon className="w-4 h-4" />
142 |           <span>Share</span>
143 |           <ChevronDown 
144 |             className={`w-3 h-3 transition-transform duration-200 ${
145 |               dropdownOpen ? 'rotate-180' : ''
146 |             }`}
147 |           />
148 |         </button>
149 | 
150 |         {dropdownOpen && (
151 |           <div className="absolute left-0 mt-2 w-56 rounded-lg shadow-lg bg-[#1F2433] border border-[#666C94]/20 backdrop-blur-xl z-50 overflow-hidden">
152 |             <div>
153 |               <button
154 |                 onClick={() => {
155 |                   handleShare()
156 |                   setDropdownOpen(false)
157 |                 }}
158 |                 className="flex items-center gap-3 w-full px-4 py-3 text-sm text-white hover:bg-[#293040] transition-colors duration-200"
159 |               >
160 |                 <ShareIcon className="w-4 h-4 text-[#666C94]" />
161 |                 Share on Device
162 |               </button>
163 |               <button
164 |                 onClick={() => {
165 |                   handleDownload()
166 |                   setDropdownOpen(false)
167 |                 }}
168 |                 className="flex items-center gap-3 w-full px-4 py-3 text-sm text-white hover:bg-[#293040] transition-colors duration-200"
169 |               >
170 |                 <DownloadIcon className="w-4 h-4 text-[#666C94]" />
171 |                 Download Image
172 |               </button>
173 |             </div>
174 |           </div>
175 |         )}
176 |       </div>
177 | 
178 |       <a
179 |         href={xShareUrl}
180 |         target="_blank"
181 |         rel="noopener noreferrer"
182 |         className="flex items-center gap-2 h-9 rounded-r-3xl rounded-l-md px-4 bg-[#666C94]/20 hover:brightness-125 transition-all duration-200"
183 |       >
184 |         <XLogo className="w-4 h-4" />
185 |         Post on X
186 |       </a>
187 |     </div>
188 |   )
189 | }


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const DropdownMenu = DropdownMenuPrimitive.Root
 10 | 
 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 12 | 
 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 14 | 
 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 16 | 
 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 18 | 
 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 20 | 
 21 | const DropdownMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <DropdownMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto" />
 38 |   </DropdownMenuPrimitive.SubTrigger>
 39 | ))
 40 | DropdownMenuSubTrigger.displayName =
 41 |   DropdownMenuPrimitive.SubTrigger.displayName
 42 | 
 43 | const DropdownMenuSubContent = React.forwardRef<
 44 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 45 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 46 | >(({ className, ...props }, ref) => (
 47 |   <DropdownMenuPrimitive.SubContent
 48 |     ref={ref}
 49 |     className={cn(
 50 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 51 |       className
 52 |     )}
 53 |     {...props}
 54 |   />
 55 | ))
 56 | DropdownMenuSubContent.displayName =
 57 |   DropdownMenuPrimitive.SubContent.displayName
 58 | 
 59 | const DropdownMenuContent = React.forwardRef<
 60 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 61 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 62 | >(({ className, sideOffset = 4, ...props }, ref) => (
 63 |   <DropdownMenuPrimitive.Portal>
 64 |     <DropdownMenuPrimitive.Content
 65 |       ref={ref}
 66 |       sideOffset={sideOffset}
 67 |       className={cn(
 68 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
 69 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 70 |         className
 71 |       )}
 72 |       {...props}
 73 |     />
 74 |   </DropdownMenuPrimitive.Portal>
 75 | ))
 76 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 77 | 
 78 | const DropdownMenuItem = React.forwardRef<
 79 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 80 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 81 |     inset?: boolean
 82 |   }
 83 | >(({ className, inset, ...props }, ref) => (
 84 |   <DropdownMenuPrimitive.Item
 85 |     ref={ref}
 86 |     className={cn(
 87 |       "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
 88 |       inset && "pl-8",
 89 |       className
 90 |     )}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 95 | 
 96 | const DropdownMenuCheckboxItem = React.forwardRef<
 97 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 98 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 99 | >(({ className, children, checked, ...props }, ref) => (
100 |   <DropdownMenuPrimitive.CheckboxItem
101 |     ref={ref}
102 |     className={cn(
103 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
104 |       className
105 |     )}
106 |     checked={checked}
107 |     {...props}
108 |   >
109 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
110 |       <DropdownMenuPrimitive.ItemIndicator>
111 |         <Check className="h-4 w-4" />
112 |       </DropdownMenuPrimitive.ItemIndicator>
113 |     </span>
114 |     {children}
115 |   </DropdownMenuPrimitive.CheckboxItem>
116 | ))
117 | DropdownMenuCheckboxItem.displayName =
118 |   DropdownMenuPrimitive.CheckboxItem.displayName
119 | 
120 | const DropdownMenuRadioItem = React.forwardRef<
121 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
122 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
123 | >(({ className, children, ...props }, ref) => (
124 |   <DropdownMenuPrimitive.RadioItem
125 |     ref={ref}
126 |     className={cn(
127 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
128 |       className
129 |     )}
130 |     {...props}
131 |   >
132 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
133 |       <DropdownMenuPrimitive.ItemIndicator>
134 |         <Circle className="h-2 w-2 fill-current" />
135 |       </DropdownMenuPrimitive.ItemIndicator>
136 |     </span>
137 |     {children}
138 |   </DropdownMenuPrimitive.RadioItem>
139 | ))
140 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
141 | 
142 | const DropdownMenuLabel = React.forwardRef<
143 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
144 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
145 |     inset?: boolean
146 |   }
147 | >(({ className, inset, ...props }, ref) => (
148 |   <DropdownMenuPrimitive.Label
149 |     ref={ref}
150 |     className={cn(
151 |       "px-2 py-1.5 text-sm font-semibold",
152 |       inset && "pl-8",
153 |       className
154 |     )}
155 |     {...props}
156 |   />
157 | ))
158 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
159 | 
160 | const DropdownMenuSeparator = React.forwardRef<
161 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
162 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
163 | >(({ className, ...props }, ref) => (
164 |   <DropdownMenuPrimitive.Separator
165 |     ref={ref}
166 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
167 |     {...props}
168 |   />
169 | ))
170 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
171 | 
172 | const DropdownMenuShortcut = ({
173 |   className,
174 |   ...props
175 | }: React.HTMLAttributes<HTMLSpanElement>) => {
176 |   return (
177 |     <span
178 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
179 |       {...props}
180 |     />
181 |   )
182 | }
183 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
184 | 
185 | export {
186 |   DropdownMenu,
187 |   DropdownMenuTrigger,
188 |   DropdownMenuContent,
189 |   DropdownMenuItem,
190 |   DropdownMenuCheckboxItem,
191 |   DropdownMenuRadioItem,
192 |   DropdownMenuLabel,
193 |   DropdownMenuSeparator,
194 |   DropdownMenuShortcut,
195 |   DropdownMenuGroup,
196 |   DropdownMenuPortal,
197 |   DropdownMenuSub,
198 |   DropdownMenuSubContent,
199 |   DropdownMenuSubTrigger,
200 |   DropdownMenuRadioGroup,
201 | }
202 | 


--------------------------------------------------------------------------------
/components/SVGLogo.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | function SVGLogo() {
 4 |     return (
 5 |         <div>
 6 |             <svg width="89" height="108" viewBox="0 0 89 108" fill="none" xmlns="http://www.w3.org/2000/svg">
 7 |                 <g opacity="0.7" filter="url(#filter0_b_1_7)">
 8 |                     <path d="M44.1818 9.81818C41.9675 9.81782 39.7924 10.4044 37.877 11.5185L6.3049 29.719L6.29535 29.7285C4.38017 30.8452 2.7908 32.4463 1.68607 34.3718C0.581347 36.2974 -3.15124e-05 38.48 4.23809e-05 40.7015V77.1169C-0.00570513 79.3401 0.573233 81.5256 1.67848 83.4529C2.78373 85.3803 4.37621 86.9813 6.29535 88.0946L6.30968 88.1042L37.8722 106.3H37.8818C39.7965 107.413 41.9707 108 44.1842 108C46.3977 108 48.5719 107.413 50.4867 106.3H50.4915L82.054 88.0994H82.0683C83.9856 86.9816 85.5763 85.3782 86.6812 83.4499C87.786 81.5216 88.3662 79.336 88.3636 77.1121V40.7111C88.3645 38.4888 87.7836 36.3052 86.6788 34.3787C85.574 32.4522 83.9842 30.8504 82.0683 29.7333L50.4962 11.5329L50.4867 11.5233C48.5717 10.4075 46.3966 9.81927 44.1818 9.81818Z" fill="#7B85FF" />
 9 |                     <path d="M44.1818 9.81818C41.9675 9.81782 39.7924 10.4044 37.877 11.5185L6.3049 29.719L6.29535 29.7285C4.38017 30.8452 2.7908 32.4463 1.68607 34.3718C0.581347 36.2974 -3.15124e-05 38.48 4.23809e-05 40.7015V77.1169C-0.00570513 79.3401 0.573233 81.5256 1.67848 83.4529C2.78373 85.3803 4.37621 86.9813 6.29535 88.0946L6.30968 88.1042L37.8722 106.3H37.8818C39.7965 107.413 41.9707 108 44.1842 108C46.3977 108 48.5719 107.413 50.4867 106.3H50.4915L82.054 88.0994H82.0683C83.9856 86.9816 85.5763 85.3782 86.6812 83.4499C87.786 81.5216 88.3662 79.336 88.3636 77.1121V40.7111C88.3645 38.4888 87.7836 36.3052 86.6788 34.3787C85.574 32.4522 83.9842 30.8504 82.0683 29.7333L50.4962 11.5329L50.4867 11.5233C48.5717 10.4075 46.3966 9.81927 44.1818 9.81818Z" fill="url(#paint0_linear_1_7)" />
10 |                 </g>
11 |                 <path d="M44.182 1.65408e-07C41.9677 -0.00035962 39.7926 0.586222 37.8772 1.70031L6.30509 19.9008L6.29553 19.9104C4.38035 21.027 2.79098 22.6281 1.68625 24.5537C0.58153 26.4792 0.000151593 28.6619 0.000225486 30.8833V67.2987C-0.00552203 69.5219 0.573416 71.7074 1.67866 73.6348C2.78391 75.5621 4.37639 77.1631 6.29553 78.2765L6.30986 78.286L37.8724 96.4817H37.8819C39.7967 97.5953 41.9709 98.1818 44.1844 98.1818C46.3979 98.1818 48.5721 97.5953 50.4869 96.4817H50.4917L82.0542 78.2812H82.0685C83.9858 77.1634 85.5765 75.56 86.6814 73.6317C87.7862 71.7034 88.3664 69.5178 88.3638 67.2939V30.8929C88.3647 28.6706 87.7837 26.487 86.679 24.5605C85.5742 22.634 83.9844 21.0322 82.0685 19.9152L50.4964 1.71468L50.4869 1.7051C48.5719 0.589337 46.3968 0.00109531 44.182 1.65408e-07Z" fill="#7B85FF" />
12 |                 <path d="M44.182 1.65408e-07C41.9677 -0.00035962 39.7926 0.586222 37.8772 1.70031L6.30509 19.9008L6.29553 19.9104C4.38035 21.027 2.79098 22.6281 1.68625 24.5537C0.58153 26.4792 0.000151593 28.6619 0.000225486 30.8833V67.2987C-0.00552203 69.5219 0.573416 71.7074 1.67866 73.6348C2.78391 75.5621 4.37639 77.1631 6.29553 78.2765L6.30986 78.286L37.8724 96.4817H37.8819C39.7967 97.5953 41.9709 98.1818 44.1844 98.1818C46.3979 98.1818 48.5721 97.5953 50.4869 96.4817H50.4917L82.0542 78.2812H82.0685C83.9858 77.1634 85.5765 75.56 86.6814 73.6317C87.7862 71.7034 88.3664 69.5178 88.3638 67.2939V30.8929C88.3647 28.6706 87.7837 26.487 86.679 24.5605C85.5742 22.634 83.9844 21.0322 82.0685 19.9152L50.4964 1.71468L50.4869 1.7051C48.5719 0.589337 46.3968 0.00109531 44.182 1.65408e-07Z" fill="url(#paint1_linear_1_7)" />
13 |                 <mask id="mask0_1_7" style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x="4" y="5" width="80" height="88">
14 |                     <path d="M44.1829 5.72728C42.2146 5.72696 40.2812 6.24436 38.5786 7.22704L10.5145 23.2808L10.506 23.2892C8.80364 24.2742 7.39086 25.6864 6.40889 27.3849C5.42691 29.0833 4.91013 31.0085 4.91019 32.968V65.0882C4.90509 67.0492 5.4197 68.9769 6.40214 70.6769C7.38458 72.3769 8.80012 73.7891 10.506 74.7711L10.5188 74.7796L38.5743 90.8291H38.5828C40.2848 91.8114 42.2175 92.3287 44.185 92.3287C46.1526 92.3287 48.0852 91.8114 49.7872 90.8291H49.7915L77.847 74.7753H77.8598C79.564 73.7894 80.978 72.3751 81.9601 70.6742C82.9422 68.9733 83.4579 67.0456 83.4556 65.0839V32.9764C83.4564 31.0162 82.94 29.0902 81.958 27.3909C80.976 25.6917 79.5628 24.2787 77.8598 23.2935L49.7957 7.23971L49.7872 7.23126C48.085 6.2471 46.1516 5.72825 44.1829 5.72728Z" fill="white" />
15 |                 </mask>
16 |                 <g mask="url(#mask0_1_7)">
17 |                     <path d="M44.1829 5.72728C42.2146 5.72696 40.2812 6.24436 38.5786 7.22704L10.5145 23.2808L10.506 23.2892C8.80364 24.2742 7.39086 25.6864 6.40889 27.3849C5.42691 29.0833 4.91013 31.0085 4.91019 32.968V65.0882C4.90509 67.0492 5.4197 68.9769 6.40214 70.6769C7.38458 72.3769 8.80012 73.7891 10.506 74.7711L10.5188 74.7796L38.5743 90.8291H38.5828C40.2848 91.8114 42.2175 92.3287 44.185 92.3287C46.1526 92.3287 48.0852 91.8114 49.7872 90.8291H49.7915L77.847 74.7753H77.8598C79.564 73.7894 80.978 72.3751 81.9601 70.6742C82.9422 68.9733 83.4579 67.0456 83.4556 65.0839V32.9764C83.4564 31.0162 82.94 29.0902 81.958 27.3909C80.976 25.6917 79.5628 24.2787 77.8598 23.2935L49.7957 7.23971L49.7872 7.23126C48.085 6.2471 46.1516 5.72825 44.1829 5.72728Z" fill="url(#paint2_linear_1_7)" />
18 |                     <path d="M44.1829 5.72728C42.2146 5.72696 40.2812 6.24436 38.5786 7.22704L10.5145 23.2808L10.506 23.2892C8.80364 24.2742 7.39086 25.6864 6.40889 27.3849C5.42691 29.0833 4.91013 31.0085 4.91019 32.968V65.0882C4.90509 67.0492 5.4197 68.9769 6.40214 70.6769C7.38458 72.3769 8.80012 73.7891 10.506 74.7711L10.5188 74.7796L38.5743 90.8291H38.5828C40.2848 91.8114 42.2175 92.3287 44.185 92.3287C46.1526 92.3287 48.0852 91.8114 49.7872 90.8291H49.7915L77.847 74.7753H77.8598C79.564 73.7894 80.978 72.3751 81.9601 70.6742C82.9422 68.9733 83.4579 67.0456 83.4556 65.0839V32.9764C83.4564 31.0162 82.94 29.0902 81.958 27.3909C80.976 25.6917 79.5628 24.2787 77.8598 23.2935L49.7957 7.23971L49.7872 7.23126C48.085 6.2471 46.1516 5.72825 44.1829 5.72728Z" fill="url(#paint3_linear_1_7)" />
19 |                     <path d="M69.7449 66.4538C69.7076 66.3785 69.6703 66.3407 69.6703 66.3407C68.8877 64.6806 67.0246 60.6435 66.4658 57.9271C65.9068 55.3237 64.938 52.7579 63.1495 50.8339C63.1122 50.7961 63.0749 50.7961 63.0376 50.7583C62.5534 50.23 62.1806 49.6265 62.0316 48.9474C61.5472 47.0609 60.653 43.0615 60.4294 39.9299C60.1685 36.1192 57.3739 33.2517 53.4241 32.6859C53.4241 32.6859 50.3313 30.4597 48.17 30.2711L47.5366 26.1962C47.5366 26.1962 48.8407 24.1589 48.9526 22.8007C48.9526 22.8007 50.5549 21.7064 48.9526 19.669C48.9526 19.669 50.0331 14.3115 44.183 13.7832C38.3328 14.3115 39.4133 19.669 39.4133 19.669C37.8111 21.7064 39.4133 22.8007 39.4133 22.8007C39.5252 24.1589 40.8293 26.1962 40.8293 26.1962L40.1959 30.2711C38.0346 30.4597 34.9418 32.6859 34.9418 32.6859C30.992 33.2517 28.1974 36.1192 27.9365 39.9299C27.7129 43.0615 26.8187 47.0609 26.3343 48.9474C26.1853 49.6265 25.8125 50.23 25.3283 50.7583C25.291 50.7961 25.2537 50.7961 25.2164 50.8339C23.4279 52.7579 22.4591 55.3237 21.9001 57.9271C21.3413 60.6435 19.4782 64.6806 18.6956 66.3407C18.6956 66.3407 18.6583 66.3785 18.621 66.4538C18.0995 67.1331 15.1929 71.3589 18.6956 72.1888C19.9997 72.4907 20.7823 72.2643 21.2667 71.8116C21.6021 71.5097 21.8257 71.0947 21.9001 70.7173C22.1236 69.9629 22.012 69.246 22.012 69.246C22.0863 68.4536 22.2728 67.8498 22.4218 67.3595C22.6827 66.6802 23.0552 66.0388 23.5023 65.473C27.6386 60.153 29.2035 56.4556 29.7625 54.3049C30.3586 52.1921 31.1783 50.1923 32.0355 48.1927C32.9181 46.1579 33.2708 44.6694 33.4034 43.6935C33.4458 43.3816 33.8761 43.331 33.9742 43.6298C35.8194 49.2495 35.0314 57.3517 34.4336 61.5242C34.0912 62.931 33.752 64.3247 33.4096 65.7316C30.645 73.7936 31.1786 85.6104 31.8119 92.4497C32.0355 95.0908 31.8492 97.7319 31.2156 100.335C29.8742 105.542 30.3586 117.238 30.6195 122.105C30.6941 123.577 30.3586 125.01 29.6879 126.293L28.7937 127.953C27.1169 130.594 29.0916 130.594 29.0916 130.594H33.4888C34.383 130.594 35.1281 129.802 35.091 128.859C34.8301 121.841 35.6498 116.672 36.0596 114.673C36.1715 114.069 36.3951 113.578 36.6186 113.012C37.9973 109.617 38.2209 102.863 38.2582 100.298C38.2582 99.7315 38.3701 99.1657 38.5563 98.5996C44.1084 82.4889 43.8568 74.3017 43.8568 74.3017H44.183H44.5091C44.5091 74.3017 44.2575 82.4889 49.8096 98.5996C49.9958 99.1657 50.1077 99.7315 50.1077 100.298C50.145 102.863 50.3686 109.617 51.7473 113.012C51.9708 113.578 52.1944 114.069 52.3063 114.673C52.7161 116.672 53.5358 121.841 53.2749 128.859C53.2378 129.802 53.9829 130.594 54.8772 130.594H59.2743C59.2743 130.594 61.249 130.594 59.5722 127.953L58.678 126.293C58.0073 125.01 57.6718 123.577 57.7464 122.105C58.0073 117.238 58.4917 105.542 57.1503 100.335C56.5167 97.7319 56.3304 95.0908 56.554 92.4497C57.1873 85.6104 57.7209 73.7936 54.9563 65.7316C54.6139 64.3247 54.2747 62.931 53.9323 61.5242C53.3345 57.3517 52.5465 49.2495 54.3917 43.6298C54.4898 43.331 54.9201 43.3816 54.9625 43.6935C55.0951 44.6694 55.4478 46.1579 56.3304 48.1927C57.1876 50.1923 58.0073 52.1921 58.6034 54.3049C59.1624 56.4556 60.7273 60.153 64.8636 65.473C65.3107 66.0388 65.6833 66.6802 65.9441 67.3595C66.0931 67.8498 66.2796 68.4536 66.3539 69.246C66.4285 69.6987 66.4658 70.1515 66.4658 70.7173C66.5402 71.0947 66.7638 71.5097 67.0992 71.8116C67.5836 72.2643 68.3662 72.4907 69.6703 72.1888C73.173 71.3589 70.2664 67.1331 69.7449 66.4538Z" fill="#151618" />
20 |                 </g>
21 |                 <g filter="url(#filter1_b_1_7)">
22 |                     <path d="M44.1827 7.23775H44.1835C46.3969 7.23885 48.5698 7.82845 50.4819 8.94569L50.7656 9.11147L50.769 9.11493L75.6651 23.5079L75.6758 23.5141C77.5858 24.6309 79.1689 26.2313 80.2684 28.154C81.3676 30.0763 81.9452 32.254 81.9445 34.4696C81.9445 34.4699 81.9445 34.4703 81.9445 34.4706V63.5874V63.5904H79.427C79.4291 65.3695 78.9662 67.1179 78.0849 68.6606C77.2035 70.2033 75.9346 71.486 74.4051 72.3802L44.1827 7.23775ZM44.1827 7.23775C41.9715 7.23739 39.8004 7.82438 37.889 8.9382C37.8874 8.9391 37.8859 8.94 37.8843 8.9409L12.7071 23.4964L12.4178 23.6636L12.3927 23.6889L44.1827 7.23775Z" stroke="black" stroke-opacity="0.6" stroke-width="5.03497" />
23 |                 </g>
24 |                 <defs>
25 |                     <filter id="filter0_b_1_7" x="-3.27273" y="6.54545" width="94.9091" height="104.727" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
26 |                         <feFlood floodOpacity="0" result="BackgroundImageFix" />
27 |                         <feGaussianBlur in="BackgroundImageFix" stdDeviation="1.63636" />
28 |                         <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1_7" />
29 |                         <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1_7" result="shape" />
30 |                     </filter>
31 |                     <filter id="filter1_b_1_7" x="-18.352" y="-17.5343" width="125.069" height="133.124" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
32 |                         <feFlood floodOpacity="0" result="BackgroundImageFix" />
33 |                         <feGaussianBlur in="BackgroundImageFix" stdDeviation="11.1273" />
34 |                         <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1_7" />
35 |                         <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1_7" result="shape" />
36 |                     </filter>
37 |                     <linearGradient id="paint0_linear_1_7" x1="0" y1="58.9091" x2="88.3636" y2="58.9091" gradientUnits="userSpaceOnUse">
38 |                         <stop stop-color="#939BFF" />
39 |                         <stop offset="1" stopColor="#5966FE" />
40 |                     </linearGradient>
41 |                     <linearGradient id="paint1_linear_1_7" x1="0.000183105" y1="49.0909" x2="88.3638" y2="49.0909" gradientUnits="userSpaceOnUse">
42 |                         <stop stop-color="#939BFF" />
43 |                         <stop offset="1" stopColor="#5966FE" />
44 |                     </linearGradient>
45 |                     <linearGradient id="paint2_linear_1_7" x1="44.1829" y1="5.72728" x2="44.1829" y2="92.3287" gradientUnits="userSpaceOnUse">
46 |                         <stop stop-color="#7B85FF" />
47 |                         <stop offset="1" stopColor="#8A92F9" />
48 |                     </linearGradient>
49 |                     <linearGradient id="paint3_linear_1_7" x1="4.91016" y1="49.028" x2="83.4556" y2="49.028" gradientUnits="userSpaceOnUse">
50 |                         <stop stop-color="#939BFF" />
51 |                         <stop offset="1" stopColor="#5966FE" />
52 |                     </linearGradient>
53 |                 </defs>
54 |             </svg>
55 | 
56 |         </div>
57 |     )
58 | }
59 | 
60 | export default SVGLogo


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | 
  3 | import { useEffect, useState, ReactNode, useRef } from 'react'
  4 | import { useChat } from 'ai/react'
  5 | import { motion } from 'framer-motion'
  6 | import { Input } from "@/components/ui/input"
  7 | import { Textarea } from "@/components/ui/textarea"
  8 | import Marked, { ReactRenderer } from 'marked-react'
  9 | import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
 10 | import Image from 'next/image'
 11 | import toast from 'react-hot-toast'
 12 | import Logo from '@/assets/Logo.png'
 13 | import { CardTopLeftCover, CardTopRightCover } from '@/assets/CardTopCover'
 14 | import { CardLeftSideCover, CardRightSideCover } from '@/assets/CardSideCover'
 15 | import { CardLeftSideHandles, CardRightSideHandles } from '@/assets/CardSideHandles'
 16 | import ShareButton from '@/components/ShareButton'
 17 | import { getAuraScores, createShareableLink } from './actions'
 18 | import { toPng } from 'html-to-image'
 19 | import Link from 'next/link'
 20 | import { useRouter } from 'next/navigation'
 21 | 
 22 | 
 23 | const loadingMessages = [
 24 |   "Fetching @{user} and @{subject}'s recent tweets...",
 25 |   "Analyzing engagement patterns and posting frequency...",
 26 |   "Calculating aura compatibility scores...",
 27 |   "Evaluating communication styles and interests...",
 28 |   "Comparing interaction patterns...",
 29 |   "Generating detailed compatibility report..."
 30 | ]
 31 | 
 32 | const renderer: Partial<ReactRenderer> = {
 33 |   heading: (children: ReactNode, level: number) => (
 34 |     <h2 className={`text-${level === 1 ? '2xl' : 'xl'} font-medium !text-zinc-100 my-4`}>
 35 |       {children}
 36 |     </h2>
 37 |   ),
 38 |   strong: (children: ReactNode) => (
 39 |     <strong className="!text-zinc-100 font-semibold">{children}</strong>
 40 |   ),
 41 |   paragraph: (children: ReactNode) => (
 42 |     <p className="text-zinc-300 mb-4 break-words">{children}</p>
 43 |   ),
 44 |   list: (children: ReactNode, ordered?: boolean) => (
 45 |     <ul className={`list-disc pl-4 mb-4 space-y-2 text-zinc-300 ${ordered ? 'list-decimal' : ''}`}>
 46 |       {children}
 47 |     </ul>
 48 |   ),
 49 |   listItem: (children: ReactNode) => (
 50 |     <li className="text-zinc-300 break-words">{children}</li>
 51 |   ),
 52 |   table: (children: ReactNode) => (
 53 |     <div className="overflow-x-auto !my-4 rounded-xl border border-[#2E3547]">
 54 |       <table className="w-full border-collapse bg-[#1F2433]/50 backdrop-blur-sm !m-0">
 55 |         {children}
 56 |       </table>
 57 |     </div>
 58 |   ),
 59 |   tableHeader: (children: ReactNode) => (
 60 |     <thead>
 61 |       {children}
 62 |     </thead>
 63 |   ),
 64 |   tableBody: (children: ReactNode) => (
 65 |     <tbody>
 66 |       {children}
 67 |     </tbody>
 68 |   ),
 69 |   tableRow: (children: ReactNode) => (
 70 |     <tr className="!transition-colors hover:!bg-[#2E3547]/30 [&:last-child_td]:border-b-0">
 71 |       {children}
 72 |     </tr>
 73 |   ),
 74 |   tableCell: (children: ReactNode[], flags: { header: boolean }) => (
 75 |     flags.header ? (
 76 |       <th className="!px-4 !py-3 !text-left !text-sm !font-semibold !text-white/90 !tracking-wide !bg-[#2E3547] border-b border-[#2E3547]">
 77 |         {children}
 78 |       </th>
 79 |     ) : (
 80 |       <td className="!px-4 !py-3 !text-sm !text-white/80 border-b border-[#2E3547]/70">
 81 |         {children}
 82 |       </td>
 83 |     )
 84 |   ),
 85 | }
 86 | 
 87 | interface HomeProps {
 88 |   searchParams?: string;
 89 | }
 90 | 
 91 | export default function Home({ searchParams }: HomeProps) {
 92 |   const router = useRouter()
 93 | 
 94 |   // Parse search params once
 95 |   const params = searchParams ? new URLSearchParams(searchParams) : null
 96 |   const isSharedView = !!params && 
 97 |     !!params.get('result') && 
 98 |     !!params.get('auraUser') && 
 99 |     !!params.get('auraSubject')
100 | 
101 |   // Initialize state with search params if available
102 |   const [auraUser, setAuraUser] = useState(params?.get('auraUser') || '')
103 |   const [auraSubject, setAuraSubject] = useState(params?.get('auraSubject') || '')
104 |   const [isSubmitted, setIsSubmitted] = useState(isSharedView)
105 |   const [loadingIdx, setLoadingIdx] = useState(0)
106 |   const [scores, setScores] = useState<{ user: number; subject: number; } | null>(
107 |     isSharedView ? {
108 |       user: parseInt(params?.get('userScore') || '0'),
109 |       subject: parseInt(params?.get('subjectScore') || '0')
110 |     } : null
111 |   )
112 |   const [shareId, setShareId] = useState<string | null>(null)
113 |   
114 |   // Refs
115 |   const scrollRef = useRef<HTMLDivElement>(null)
116 |   const cardRef = useRef<HTMLDivElement>(null)
117 | 
118 |   const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
119 |     api: '/api/check-aura',
120 |     body: { auraUser, auraSubject },
121 |     initialMessages: params ? [{
122 |       id: 'shared',
123 |       role: 'assistant',
124 |       content: params.get('result') || '',
125 |       reasoning: params.get('reasoning') || ''
126 |     }] : [],
127 |     async onFinish(message) {
128 |       // Generate aura scores based on AI's analysis
129 |       const auraScores = await getAuraScores(message.content);
130 |       setScores(auraScores);
131 | 
132 |       // Create shareable link
133 |       try {
134 |         const { shareId } = await createShareableLink({
135 |           auraUser,
136 |           auraSubject,
137 |           scores: auraScores,
138 |           result: message.content,
139 |           reasoning: message.reasoning || ''
140 |         })
141 |         setShareId(shareId)
142 |         
143 |         // Route to the share URL
144 |         router.push(`/a/${shareId}`)
145 |       } catch (error) {
146 |         console.error('Error creating share link:', error)
147 |         toast.error('Failed to create shareable link')
148 |       }
149 |     },
150 |   })
151 | 
152 |   const validateUsernames = (user: string, subject: string) => {
153 |     if (user.toLowerCase() === subject.toLowerCase()) {
154 |       toast.error("Comparing yourself to yourself? That's deep... but try someone else!", {
155 |         style: {
156 |           background: '#27272a',
157 |           color: '#fafafa',
158 |           border: '1px solid #3f3f46',
159 |         },
160 |         iconTheme: {
161 |           primary: '#71717a',
162 |           secondary: '#18181b',
163 |         },
164 |       });
165 |       return false;
166 |     }
167 |     return true;
168 |   };
169 | 
170 |   const handleUserChange = (e: React.ChangeEvent<HTMLInputElement>) => {
171 |     const cleanUsername = e.target.value.replace('@', '').trim();
172 |     setAuraUser(cleanUsername);
173 |   };
174 | 
175 |   const handleSubjectChange = (e: React.ChangeEvent<HTMLInputElement>) => {
176 |     const cleanUsername = e.target.value.replace('@', '').trim();
177 |     setAuraSubject(cleanUsername);
178 |   };
179 | 
180 |   const onSubmit = async (e: React.FormEvent) => {
181 |     e.preventDefault();
182 |     if (isSharedView) return;
183 |     if (!input.trim()) return;
184 |     if (!validateUsernames(auraUser, auraSubject)) return;
185 |     setIsSubmitted(true);
186 |     handleSubmit(e);
187 |   };
188 | 
189 |   useEffect(() => {
190 |     if (isLoading) {
191 |       const interval = setInterval(() => {
192 |         setLoadingIdx((prev) => (prev + 1) % loadingMessages.length)
193 |       }, 2000)
194 |       return () => clearInterval(interval)
195 |     }
196 |     setLoadingIdx(0)
197 |   }, [isLoading])
198 | 
199 |   const assistantMessages = messages.filter((m) => m.role === 'assistant')
200 |   const lastAssistantMessage = assistantMessages[assistantMessages.length - 1]
201 |   const streamingReasoning = lastAssistantMessage?.reasoning || ""
202 |   const result = lastAssistantMessage?.content || ""
203 |   const reasoning = streamingReasoning
204 | 
205 |   useEffect(() => {
206 |     if (scrollRef.current) {
207 |       scrollRef.current.scrollTop = scrollRef.current.scrollHeight
208 |     }
209 |   }, [messages, result])
210 | 
211 |   const getLoadingMessage = () => {
212 |     return loadingMessages[loadingIdx]
213 |       .replace('{user}', auraUser)
214 |       .replace('{subject}', auraSubject);
215 |   }
216 | 
217 |   const getCardImage = async () => {
218 |     if (!cardRef.current) return null
219 |     
220 |     try {
221 |       return await toPng(cardRef.current, {
222 |         quality: 1.0,
223 |         backgroundColor: '#111827',
224 |         pixelRatio: 2,
225 |         style: {
226 |           transform: 'scale(1)',
227 |           borderRadius: '32px'
228 |         }
229 |       })
230 |     } catch (error) {
231 |       toast.error('Failed to generate image')
232 |       console.error('Image generation error:', error)
233 |       return null
234 |     }
235 |   }
236 | 
237 |   const getShareUrl = () => {
238 |     return shareId ? `${window.location.origin}/a/${shareId}` : window.location.href
239 |   }
240 | 
241 |   return (
242 |     <div className="min-h-screen flex flex-col items-center px-2 sm:px-6 py-4 sm:py-20 text-sm md:text-[15px]">
243 |       <div className='w-full flex flex-col items-center relative z-10 max-w-[800px] mx-auto'>
244 |         <div className='relative w-full'>
245 |           <div 
246 |             ref={cardRef}
247 |             className="bg-[#1F2433] backdrop-blur-sm border-[5px] border-[#293040] p-2 sm:p-3 rounded-[24px] sm:rounded-[32px] relative overflow-hidden w-full"
248 |           >
249 |             <div className='w-full flex justify-end pb-2 sm:pb-3 px-2 relative z-30'>
250 |               {!isLoading && scores && (
251 |                 <ShareButton getImage={getCardImage} shareId={shareId} getShareUrl={getShareUrl} />
252 |               )}
253 |             </div>
254 | 
255 |             <motion.div
256 |               animate={{ height: isLoading ? '260px' : '162px' }}
257 |               className='absolute top-0 left-0 w-full flex overflow-visible justify-between z-20'
258 |             >
259 |               <CardTopLeftCover
260 |                 preserveAspectRatio='none'
261 |                 className={`relative scale-[65%] h-full md:scale-100 origin-top-left shrink-0 ${!isSubmitted ? 'left-0' : '-left-[300px]'} duration-500`}
262 |               />
263 |               <CardTopRightCover
264 |                 preserveAspectRatio='none'
265 |                 className={`relative h-full scale-[65%] md:scale-100 origin-top-right ${!isSubmitted ? 'right-0' : '-right-[300px]'} duration-500`}
266 |               />
267 |             </motion.div>
268 | 
269 |             {!isLoading && isSubmitted && (
270 |               <div className='absolute top-0 left-0 w-full flex justify-between h-full overflow-visible z-10'>
271 |                 <motion.div
272 |                   initial={{ x: "-200px" }}
273 |                   animate={{ x: "-40px" }}
274 |                   transition={{ duration: 0.5, ease: "easeInOut", delay: 0.2 }}
275 |                 >
276 |                   <CardLeftSideCover className="h-full w-[62px] md:w-auto relative rotate-180" />
277 |                 </motion.div>
278 |                 <motion.div
279 |                   initial={{ x: "200px" }}
280 |                   animate={{ x: "40px" }}
281 |                   transition={{ duration: 0.5, ease: "easeInOut", delay: 0.2 }}
282 |                 >
283 |                   <CardRightSideCover className="h-full w-[62px] md:w-auto relative rotate-180" />
284 |                 </motion.div>
285 |               </div>
286 |             )}
287 | 
288 |             {/* header */}
289 |             <div className='w-full flex flex-col gap-4 sm:gap-6 items-center my-4 sm:my-6'>
290 |               <Image
291 |                 src={Logo}
292 |                 alt='Aura Logo'
293 |                 width={200}
294 |                 height={200}
295 |                 className='w-16 sm:w-20 h-auto'
296 |               />
297 | 
298 |               <div className='flex flex-col gap-1 items-center'>
299 |                 <h1 className='text-2xl font-light'>Aura Checker</h1>
300 |                 <p className='opacity-70 font-light'>Compare your Aura with Twitter posts</p>
301 |               </div>
302 | 
303 |               {/*  */}
304 |               {isSubmitted && (
305 |                 <div className='flex flex-col md:flex-row p-2 sm:p-4 w-full gap-4 sm:gap-8 mt-2 sm:mt-4 max-w-[600px]'>
306 |                   <div className='flex flex-col items-center p-4 rounded-2xl w-full gap-3 relative overflow-hidden'
307 |                        style={{ 
308 |                          background: isLoading ? '#2E3547' : 
309 |                            (scores?.user && scores?.subject && scores.user >= scores.subject) ? 
310 |                            'linear-gradient(90deg, #939BFF 0%, #5966FE 100%)' : 
311 |                            '#2E3547' 
312 |                        }}>
313 |                     {isLoading && (
314 |                       <div className="absolute inset-0 bg-gradient-to-r from-[#2E3547] via-[#3a4156] to-[#2E3547] animate-shimmer" />
315 |                     )}
316 |                     <p className='text-4xl font-medium relative'>
317 |                       {scores?.user || '--'}
318 |                     </p>
319 |                     <div className='flex flex-col items-center gap-1 relative z-10'>
320 |                       <p className='text-sm text-white/70'>Aura points</p>
321 |                       <p className='text-white/80'>@{auraUser}</p>
322 |                     </div>
323 |                   </div>
324 | 
325 |                   <div className='flex flex-col items-center p-4 rounded-2xl w-full gap-3 relative overflow-hidden'
326 |                        style={{ 
327 |                          background: isLoading ? '#2E3547' : 
328 |                            (scores?.user && scores?.subject && scores.subject > scores.user) ? 
329 |                            'linear-gradient(90deg, #939BFF 0%, #5966FE 100%)' : 
330 |                            '#2E3547' 
331 |                        }}>
332 |                     {isLoading && (
333 |                       <div className="absolute inset-0 bg-gradient-to-r from-[#2E3547] via-[#3a4156] to-[#2E3547] animate-shimmer" />
334 |                     )}
335 |                     <p className='text-4xl font-medium relative'>
336 |                       {scores?.subject || '--'}
337 |                     </p>
338 |                     <div className='flex flex-col items-center gap-1 relative z-10'>
339 |                       <p className='text-sm text-white/70'>Aura points</p>
340 |                       <p className='text-white/80'>@{auraSubject}</p>
341 |                     </div>
342 |                   </div>
343 |                 </div>
344 |               )}
345 | 
346 |             </div>
347 | 
348 |             {/* form */}
349 |             {!isLoading && !isSubmitted && (
350 |               <>
351 |                 <form className='flex flex-col gap-2 pt-3 sm:pt-5'>
352 |                   <div className="relative flex gap-0 items-center w-full bg-[#2E3547] rounded-xl px-3 h-12">
353 |                     <span className="shrink-0">Your:</span>
354 |                     <Input
355 |                       placeholder="username"
356 |                       value={auraUser}
357 |                       onChange={handleUserChange}
358 |                       className="border-none placeholder:text-[#8B929F] focus-visible:ring-0 px-2"
359 |                       aria-label="Your X(Twitter) username"
360 |                     />
361 |                     <span className="absolute right-4 text-[#B1B6C0] opacity-70 text-xs font-medium">{`(X/Twitter)`}</span>
362 |                   </div>
363 | 
364 |                   <div className="relative flex gap-0 items-center w-full bg-[#2E3547] rounded-xl px-3 h-12">
365 |                     <span className="shrink-0">Their:</span>
366 |                     <Input
367 |                       placeholder="username"
368 |                       value={auraSubject}
369 |                       onChange={handleSubjectChange}
370 |                       className="border-none placeholder:text-[#8B929F] focus-visible:ring-0 px-2"
371 |                       aria-label="Their X(Twitter) username"
372 |                     />
373 |                     <span className="absolute right-4 text-[#B1B6C0] opacity-70 text-xs font-medium">{`(X/Twitter)`}</span>
374 |                   </div>
375 | 
376 |                   <div className="relative flex gap-0 w-full bg-[#2E3547] rounded-xl p-3">
377 |                     <Textarea
378 |                       placeholder="Describe anything you may have in common..."
379 |                       value={input}
380 |                       onChange={handleInputChange}
381 |                       className="border-none placeholder:text-[#8B929F] focus-visible:ring-0 p-0 min-h-20 resize-none"
382 |                       aria-label="Describe your situation"
383 |                     ></Textarea>
384 |                   </div>
385 | 
386 |                 </form>
387 | 
388 |                 <button
389 |                   onClick={onSubmit}
390 |                   style={{ background: 'linear-gradient(90deg, #939BFF 0%, #5966FE 100%)' }} 
391 |                   className='max-w-[800px] mt-3 w-full h-12 rounded-xl text-white'
392 |                 >
393 |                   Generate Aura Report ++
394 |                 </button>
395 |               </>
396 |             )}
397 | 
398 |             {/* Show the Create Your Own button inside the card when in shared view and no result */}
399 |             {isSharedView && !result && (
400 |               <div className='w-full flex flex-col gap-2 pt-3 sm:pt-5'>
401 |                 <Link 
402 |                   href="/"
403 |                   className='w-full h-12 rounded-xl text-white flex items-center justify-center hover:brightness-110 transition-all'
404 |                   style={{ background: 'linear-gradient(90deg, #939BFF 0%, #5966FE 100%)' }}
405 |                 >
406 |                   Generate Aura Report ++
407 |                 </Link>
408 |               </div>
409 |             )}
410 |           </div>
411 | 
412 |           {!isLoading && isSubmitted && (
413 |             <div className='w-full flex items-center justify-between absolute top-0 left-0 -z-10'>
414 |               <motion.div
415 |                 initial={{ x: "-20px", opacity: 0 }}
416 |                 animate={{ x: "-76px", opacity: 1 }}
417 |                 transition={{ duration: 0.5, ease: "easeInOut", delay: 0.5 }}
418 |               >
419 |                 <CardLeftSideHandles />
420 |               </motion.div>
421 |               <motion.div
422 |                 initial={{ x: "20px", opacity: 0 }}
423 |                 animate={{ x: "76px", opacity: 1 }}
424 |                 transition={{ duration: 0.5, ease: "easeInOut", delay: 0.5 }}
425 |               >
426 |                 <CardRightSideHandles />
427 |               </motion.div>
428 |             </div>
429 |           )}
430 |         </div>
431 | 
432 |         {(isSubmitted && !result) && (
433 |           <motion.div
434 |             initial={{ opacity: 0 }}
435 |             animate={{ opacity: 1 }}
436 |             className='w-full py-6 sm:py-10 p-3 sm:p-4 flex flex-col gap-3 items-center'
437 |           >
438 |             <p className='opacity-60'>{getLoadingMessage()}</p>
439 |             <div className='relative w-full md:max-w-[600px] mx-auto h-3 rounded-full bg-white/10'>
440 |               <motion.div
441 |                 className='h-full rounded-full'
442 |                 style={{ background: 'linear-gradient(90deg, #939BFF 0%, #5966FE 100%)' }}
443 |                 initial={{ width: '0%' }}
444 |                 animate={{ width: `${((loadingIdx + 1) / loadingMessages.length) * 100}%` }}
445 |                 transition={{ duration: 0.5 }}
446 |               />
447 |             </div>
448 |           </motion.div>
449 |         )}
450 | 
451 |         {result && (
452 |           <div className='relative pt-6 sm:pt-14 w-full flex flex-col items-center'>
453 |             <div className='flex flex-col gap-3 sm:gap-4 items-center max-w-[900px] w-full'>
454 |               <h2 className='text-xl sm:text-2xl md:text-3xl font-medium md:font-light text-center px-2'>
455 |                 Aura Compatibility Report
456 |               </h2>
457 |               <div className='flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 w-full'>
458 |                 <div className='h-8 rounded-full border border-white/15 px-3 sm:px-4 inline-flex items-center gap-2 text-sm text-white/70 whitespace-nowrap'>
459 |                   @{auraUser}
460 |                 </div>
461 |                 <span className='text-white/50'>x</span>
462 |                 <div className='h-8 rounded-full border border-white/15 px-3 sm:px-4 inline-flex items-center gap-2 text-sm text-white/70 whitespace-nowrap'>
463 |                   @{auraSubject}
464 |                 </div>
465 |               </div>
466 |             </div>
467 | 
468 |             <div className='mt-4 sm:mt-10 max-w-[900px] w-full mx-auto text-white/70 tracking-wider font-light leading-5 p-2 sm:p-4'>
469 |               {reasoning && (
470 |                 <Accordion
471 |                   collapsible
472 |                   type="single"
473 |                   defaultValue="reasoning"
474 |                   className="mb-8 max-w-2xl mx-auto w-full"
475 |                 >
476 |                   <AccordionItem
477 |                     value="reasoning"
478 |                     className="border-none rounded-lg bg-zinc-800/40 backdrop-blur-sm"
479 |                   >
480 |                     <AccordionTrigger className="w-full flex items-center justify-between p-4 text-sm font-medium !text-zinc-100 hover:bg-zinc-800/40 rounded-lg transition-all hover:no-underline">
481 |                       AI Reasoning Process
482 |                     </AccordionTrigger>
483 |                     <AccordionContent className="px-4 pb-4 pt-1">
484 |                       <div className="prose prose-sm sm:prose prose-invert prose-zinc w-full break-words">
485 |                         <Marked value={reasoning} renderer={renderer} />
486 |                       </div>
487 |                     </AccordionContent>
488 |                   </AccordionItem>
489 |                 </Accordion>
490 |               )}
491 |               {result && (
492 |                 <div className="prose prose-sm sm:prose prose-invert prose-zinc max-w-2xl mx-auto px-2 break-words">
493 |                   <Marked value={result} renderer={renderer} />
494 |                 </div>
495 |               )}
496 |             </div>
497 |           </div>
498 |         )}
499 |       </div>
500 |     </div>
501 |   )
502 | }


--------------------------------------------------------------------------------