12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /src/components/ui/collapsible.tsx: -------------------------------------------------------------------------------- 1 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" 2 | 3 | const Collapsible = CollapsiblePrimitive.Root 4 | 5 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger 6 | 7 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent 8 | 9 | export { Collapsible, CollapsibleTrigger, CollapsibleContent } 10 | -------------------------------------------------------------------------------- /src/components/ScrollToTop.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { useLocation } from 'react-router-dom'; 3 | 4 | const ScrollToTop = () => { 5 | const { pathname } = useLocation(); 6 | 7 | useEffect(() => { 8 | window.scrollTo(0, 0); 9 | }, [pathname]); 10 | 11 | return null; // This component doesn't render anything 12 | }; 13 | 14 | export default ScrollToTop; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ], 7 | "compilerOptions": { 8 | "baseUrl": ".", 9 | "paths": { 10 | "@/*": ["./src/*"] 11 | }, 12 | "noImplicitAny": false, 13 | "noUnusedParameters": false, 14 | "skipLibCheck": true, 15 | "allowJs": true, 16 | "noUnusedLocals": false, 17 | "strictNullChecks": false 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/index.css", 9 | "baseColor": "slate", 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 | } -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": false, 18 | "noUnusedParameters": false, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react-swc"; 3 | import path from "path"; 4 | 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig(({ mode }) => ({ 8 | server: { 9 | host: "::", // Allows access on any network interface 10 | port: 8080, // Change to the port you want 11 | }, 12 | preview: { 13 | allowedHosts: ['fastlytics.app'], // Allow access from these hosts 14 | }, 15 | plugins: [ 16 | react(), 17 | ]. 18 | filter(Boolean), 19 | resolve: { 20 | alias: { 21 | "@": path.resolve(__dirname, "./src"), 22 | }, 23 | }, 24 | })); 25 | -------------------------------------------------------------------------------- /src/hooks/use-mobile.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | /* Custom scrollbar for dropdowns */ 2 | .custom-scrollbar::-webkit-scrollbar { 3 | width: 6px; 4 | height: 6px; 5 | } 6 | 7 | .custom-scrollbar::-webkit-scrollbar-track { 8 | background: rgba(31, 41, 55, 0.3); 9 | border-radius: 8px; 10 | } 11 | 12 | .custom-scrollbar::-webkit-scrollbar-thumb { 13 | background: rgba(239, 68, 68, 0.3); 14 | border-radius: 8px; 15 | } 16 | 17 | .custom-scrollbar::-webkit-scrollbar-thumb:hover { 18 | background: rgba(239, 68, 68, 0.5); 19 | } 20 | 21 | /* Firefox scrollbar */ 22 | .custom-scrollbar { 23 | scrollbar-width: thin; 24 | scrollbar-color: rgba(239, 68, 68, 0.3) rgba(31, 41, 55, 0.3); 25 | } -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": false, 19 | "noUnusedLocals": false, 20 | "noUnusedParameters": false, 21 | "noImplicitAny": false, 22 | "noFallthroughCasesInSwitch": false, 23 | 24 | "baseUrl": ".", 25 | "paths": { 26 | "@/*": ["./src/*"] 27 | } 28 | }, 29 | "include": ["src"] 30 | } 31 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as LabelPrimitive from "@radix-ui/react-label" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const labelVariants = cva( 8 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 9 | ) 10 | 11 | const Label = React.forwardRef< 12 | React.ElementRef, 13 | React.ComponentPropsWithoutRef & 14 | VariantProps 15 | >(({ className, ...props }, ref) => ( 16 | 21 | )) 22 | Label.displayName = LabelPrimitive.Root.displayName 23 | 24 | export { Label } 25 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |

19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 |

--------------------------------------------------------------------------------
/src/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-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background 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-2 focus-visible:ring-ring focus-visible:ring-offset-2 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 |

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

--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Progress = React.forwardRef<
 7 |   React.ElementRef<typeof ProgressPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
 9 | >(({ className, value, ...props }, ref) => (
10 |   <ProgressPrimitive.Root
11 |     ref={ref}
12 |     className={cn(
13 |       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
14 |       className
15 |     )}
16 |     {...props}
17 |   >
18 |     <ProgressPrimitive.Indicator
19 |       className="h-full w-full flex-1 bg-primary transition-all"
20 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
21 |     />
22 |   </ProgressPrimitive.Root>
23 | ))
24 | Progress.displayName = ProgressPrimitive.Root.displayName
25 | 
26 | export { Progress }
27 |

--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from "@eslint/js";
 2 | import globals from "globals";
 3 | import reactHooks from "eslint-plugin-react-hooks";
 4 | import reactRefresh from "eslint-plugin-react-refresh";
 5 | import tseslint from "typescript-eslint";
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ["dist"] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ["**/*.{ts,tsx}"],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       "react-hooks": reactHooks,
18 |       "react-refresh": reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       "react-refresh/only-export-components": [
23 |         "warn",
24 |         { allowConstantExport: true },
25 |       ],
26 |       "@typescript-eslint/no-unused-vars": "off",
27 |     },
28 |   }
29 | );
30 |

--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: subhashhhhhh # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: fastlytics 
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
12 | polar: # Replace with a single Polar username
13 | buy_me_a_coffee: subhashh 
14 | thanks_dev: # Replace with a single thanks.dev username
15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
16 |

--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | import { useToast } from "@/hooks/use-toast"
 2 | import {
 3 |   Toast,
 4 |   ToastClose,
 5 |   ToastDescription,
 6 |   ToastProvider,
 7 |   ToastTitle,
 8 |   ToastViewport,
 9 | } from "@/components/ui/toast"
10 | 
11 | export function Toaster() {
12 |   const { toasts } = useToast()
13 | 
14 |   return (
15 |     <ToastProvider>
16 |       {toasts.map(function ({ id, title, description, action, ...props }) {
17 |         return (
18 |           <Toast key={id} {...props}>
19 |             <div className="grid gap-1">
20 |               {title && <ToastTitle>{title}</ToastTitle>}
21 |               {description && (
22 |                 <ToastDescription>{description}</ToastDescription>
23 |               )}
24 |             </div>
25 |             {action}
26 |             <ToastClose />
27 |           </Toast>
28 |         )
29 |       })}
30 |       <ToastViewport />
31 |     </ToastProvider>
32 |   )
33 | }
34 |

--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "next-themes"
 2 | import { Toaster as Sonner } from "sonner"
 3 | 
 4 | type ToasterProps = React.ComponentProps<typeof Sonner>
 5 | 
 6 | const Toaster = ({ ...props }: ToasterProps) => {
 7 |   const { theme = "system" } = useTheme()
 8 | 
 9 |   return (
10 |     <Sonner
11 |       theme={theme as ToasterProps["theme"]}
12 |       className="toaster group"
13 |       toastOptions={{
14 |         classNames: {
15 |           toast:
16 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
17 |           description: "group-[.toast]:text-muted-foreground",
18 |           actionButton:
19 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
20 |           cancelButton:
21 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
22 |         },
23 |       }}
24 |       {...props}
25 |     />
26 |   )
27 | }
28 | 
29 | export { Toaster }
30 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Subhash Gottumukkala
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |

--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 3 | import { Check } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Checkbox = React.forwardRef<
 8 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
 9 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10 | >(({ className, ...props }, ref) => (
11 |   <CheckboxPrimitive.Root
12 |     ref={ref}
13 |     className={cn(
14 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
15 |       className
16 |     )}
17 |     {...props}
18 |   >
19 |     <CheckboxPrimitive.Indicator
20 |       className={cn("flex items-center justify-center text-current")}
21 |     >
22 |       <Check className="h-4 w-4" />
23 |     </CheckboxPrimitive.Indicator>
24 |   </CheckboxPrimitive.Root>
25 | ))
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
27 | 
28 | export { Checkbox }
29 |

--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SliderPrimitive from "@radix-ui/react-slider"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Slider = React.forwardRef<
 7 |   React.ElementRef<typeof SliderPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SliderPrimitive.Root
11 |     ref={ref}
12 |     className={cn(
13 |       "relative flex w-full touch-none select-none items-center",
14 |       className
15 |     )}
16 |     {...props}
17 |   >
18 |     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
19 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
20 |     </SliderPrimitive.Track>
21 |     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
22 |   </SliderPrimitive.Root>
23 | ))
24 | Slider.displayName = SliderPrimitive.Root.displayName
25 | 
26 | export { Slider }
27 |

--------------------------------------------------------------------------------
/src/contexts/AuthContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext, ReactNode } from 'react';
 2 | 
 3 | // Define a simplified context type without auth features
 4 | interface AuthContextType {
 5 |   user: null;
 6 |   loading: boolean;
 7 |   signOut: () => void;
 8 |   setUser: () => void;
 9 | }
10 | 
11 | // Create the context with default values
12 | const AuthContext = createContext<AuthContextType>({
13 |   user: null,
14 |   loading: false,
15 |   signOut: () => {},
16 |   setUser: () => {},
17 | });
18 | 
19 | // Define the props for the provider component
20 | interface AuthProviderProps {
21 |   children: ReactNode;
22 | }
23 | 
24 | // Create a simplified provider component with no auth functionality
25 | export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
26 |   // Simple mock values
27 |   const value = {
28 |     user: null,
29 |     loading: false,
30 |     signOut: () => {},
31 |     setUser: () => {},
32 |   };
33 | 
34 |   return (
35 |     <AuthContext.Provider value={value}>
36 |       {children}
37 |     </AuthContext.Provider>
38 |   );
39 | };
40 | 
41 | // Custom hook to use the AuthContext
42 | export const useAuth = (): AuthContextType => {
43 |   return useContext(AuthContext);
44 | };
45 |

--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Switch = React.forwardRef<
 7 |   React.ElementRef<typeof SwitchPrimitives.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SwitchPrimitives.Root
11 |     className={cn(
12 |       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
13 |       className
14 |     )}
15 |     {...props}
16 |     ref={ref}
17 |   >
18 |     <SwitchPrimitives.Thumb
19 |       className={cn(
20 |         "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
21 |       )}
22 |     />
23 |   </SwitchPrimitives.Root>
24 | ))
25 | Switch.displayName = SwitchPrimitives.Root.displayName
26 | 
27 | export { Switch }
28 |

--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const TooltipProvider = TooltipPrimitive.Provider
 7 | 
 8 | const Tooltip = TooltipPrimitive.Root
 9 | 
10 | const TooltipTrigger = TooltipPrimitive.Trigger
11 | 
12 | const TooltipContent = React.forwardRef<
13 |   React.ElementRef<typeof TooltipPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |   <TooltipPrimitive.Content
17 |     ref={ref}
18 |     sideOffset={sideOffset}
19 |     className={cn(
20 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
21 |       className
22 |     )}
23 |     {...props}
24 |   />
25 | ))
26 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
27 | 
28 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
29 |

--------------------------------------------------------------------------------
/src/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-full 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 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 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 |

--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const HoverCard = HoverCardPrimitive.Root
 7 | 
 8 | const HoverCardTrigger = HoverCardPrimitive.Trigger
 9 | 
10 | const HoverCardContent = React.forwardRef<
11 |   React.ElementRef<typeof HoverCardPrimitive.Content>,
12 |   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14 |   <HoverCardPrimitive.Content
15 |     ref={ref}
16 |     align={align}
17 |     sideOffset={sideOffset}
18 |     className={cn(
19 |       "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
20 |       className
21 |     )}
22 |     {...props}
23 |   />
24 | ))
25 | HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
26 | 
27 | export { HoverCard, HoverCardTrigger, HoverCardContent }
28 |

--------------------------------------------------------------------------------
/src/contexts/SeasonContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState, useContext, ReactNode, useMemo } from 'react';
 2 | 
 3 | interface SeasonContextType {
 4 |   selectedYear: number;
 5 |   setSelectedYear: (year: number) => void;
 6 |   availableYears: number[];
 7 | }
 8 | 
 9 | const currentYear = new Date().getFullYear();
10 | const startYear = 2019;
11 | const defaultAvailableYears = Array.from(
12 |   { length: currentYear - startYear + 1 }, 
13 |   (_, i) => currentYear - i
14 | );
15 | 
16 | const SeasonContext = createContext<SeasonContextType | undefined>(undefined);
17 | 
18 | export const SeasonProvider = ({ children }: { children: ReactNode }) => {
19 |   const [selectedYear, setSelectedYear] = useState<number>(defaultAvailableYears[0]);
20 | 
21 |   const value = useMemo(() => ({
22 |     selectedYear,
23 |     setSelectedYear,
24 |     availableYears: defaultAvailableYears
25 |   }), [selectedYear]);
26 | 
27 |   return (
28 |     <SeasonContext.Provider value={value}>
29 |       {children}
30 |     </SeasonContext.Provider>
31 |   );
32 | };
33 | 
34 | export const useSeason = (): SeasonContextType => {
35 |   const context = useContext(SeasonContext);
36 |   if (context === undefined) {
37 |     throw new Error('useSeason must be used within a SeasonProvider');
38 |   }
39 |   return context;
40 | };
41 |

--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Popover = PopoverPrimitive.Root
 7 | 
 8 | const PopoverTrigger = PopoverPrimitive.Trigger
 9 | 
10 | const PopoverContent = React.forwardRef<
11 |   React.ElementRef<typeof PopoverPrimitive.Content>,
12 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14 |   <PopoverPrimitive.Portal>
15 |     <PopoverPrimitive.Content
16 |       ref={ref}
17 |       align={align}
18 |       sideOffset={sideOffset}
19 |       className={cn(
20 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   </PopoverPrimitive.Portal>
26 | ))
27 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
28 | 
29 | export { Popover, PopoverTrigger, PopoverContent }
30 |

--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Fastlytics</title>
 7 |     <meta name="description" content="F1 data visualization dashboard" />
 8 |     <meta name="author" content="Subhash Gottumulla;a" />
 9 | 
10 |     <meta property="og:title" content="Fastlytics" />
11 |     <meta property="og:description" content="Interactive F1 data visualization dashboard" />
12 |     <meta property="og:type" content="website" />
13 | 
14 |     <meta name="twitter:card" content="summary_large_image" />
15 |     <meta name="twitter:site" content="@ferrari4lifee" />
16 |     
17 |     <link rel="preconnect" href="https://fonts.googleapis.com">
18 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19 |     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
20 |     <link rel="icon" href="/favicon.ico" />
21 |     
22 |     <script defer src="https://analytics.subhashh.tech/script.js" data-website-id="46933b44-1ae1-4254-b2c6-fa4b161e17f2"></script>
23 |   </head>
24 | 
25 |   <body>
26 |     <div id="root"></div>
27 |     
28 |     <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
29 |     <script type="module" src="/src/main.tsx"></script>
30 | 
31 |

--------------------------------------------------------------------------------
/.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 | # Vite / Build Output
13 | /dist
14 | /dist-ssr
15 | /.vite
16 | *.local
17 | 
18 | # TypeScript
19 | *.tsbuildinfo
20 | 
21 | # Logs
22 | logs
23 | *.log
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | pnpm-debug.log*
28 | lerna-debug.log*
29 | 
30 | # Environment Variables
31 | .env*
32 | !.env.example
33 | 
34 | # Editor directories and files
35 | .vscode/*
36 | !.vscode/extensions.json
37 | .idea
38 | *.suo
39 | *.ntvs*
40 | *.njsproj
41 | *.sln
42 | *.sw?
43 | 
44 | # OS generated files
45 | .DS_Store
46 | Thumbs.db
47 | 
48 | # Optional npm cache directory
49 | .npm
50 | 
51 | # Optional eslint cache
52 | .eslintcache
53 | 
54 | # Optional PNPM lockfile (if applicable, but usually committed)
55 | # pnpm-lock.yaml
56 | 
57 | # Backend API Directory (Specific Rules)
58 | # Ignore the entire directory by default
59 | /backend-api/
60 | # But DO NOT ignore a .gitignore file within it, allowing specific un-ignores
61 | !/backend-api/.gitignore
62 | # Ignore environment files within the backend directory
63 | /backend-api/.env*
64 | # Ignore Python cache/compiled files
65 | /backend-api/cache/
66 | /backend-api/__pycache__/
67 | /backend-api/*.pyc
68 | /.kilocode/
69 | 
70 | # Wiki documentation (not tracked in Git)
71 | WIKI.md
72 | SECURITY.md
73 | 
74 | # Blog post about building Fastlytics
75 | building-fastlytics.md
76 |

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

--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TogglePrimitive from "@radix-ui/react-toggle"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const toggleVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-transparent",
13 |         outline:
14 |           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
15 |       },
16 |       size: {
17 |         default: "h-10 px-3",
18 |         sm: "h-9 px-2.5",
19 |         lg: "h-11 px-5",
20 |       },
21 |     },
22 |     defaultVariants: {
23 |       variant: "default",
24 |       size: "default",
25 |     },
26 |   }
27 | )
28 | 
29 | const Toggle = React.forwardRef<
30 |   React.ElementRef<typeof TogglePrimitive.Root>,
31 |   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
32 |     VariantProps<typeof toggleVariants>
33 | >(({ className, variant, size, ...props }, ref) => (
34 |   <TogglePrimitive.Root
35 |     ref={ref}
36 |     className={cn(toggleVariants({ variant, size, className }))}
37 |     {...props}
38 |   />
39 | ))
40 | 
41 | Toggle.displayName = TogglePrimitive.Root.displayName
42 | 
43 | export { Toggle, toggleVariants }
44 |

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

--------------------------------------------------------------------------------
/src/components/ui/LoadingSpinnerF1.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { cn } from '@/lib/utils';
 3 | 
 4 | interface LoadingSpinnerF1Props {
 5 |   className?: string;
 6 |   size?: number; // Size in pixels
 7 | }
 8 | 
 9 | const LoadingSpinnerF1: React.FC<LoadingSpinnerF1Props> = ({
10 |   className,
11 |   size = 48, // Default size
12 | }) => {
13 |   // Simple SVG spinning wheel design
14 |   // Colors can be adjusted to match theme (e.g., text-red-500)
15 |   return (
16 |     <svg
17 |       className={cn("animate-spin text-red-500", className)} // Use accent color
18 |       xmlns="http://www.w3.org/2000/svg"
19 |       fill="none"
20 |       viewBox="0 0 24 24"
21 |       width={size}
22 |       height={size}
23 |       stroke="currentColor"
24 |       strokeWidth="2"
25 |       strokeLinecap="round"
26 |       strokeLinejoin="round"
27 |     >
28 |       {/* Outer circle */}
29 |       <circle cx="12" cy="12" r="10" opacity="0.25" strokeWidth="1.5" />
30 |       {/* Inner structure - simplified wheel spokes */}
31 |       <line x1="12" y1="2" x2="12" y2="6" opacity="0.75" />
32 |       <line x1="12" y1="18" x2="12" y2="22" opacity="0.75" />
33 |       <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" opacity="0.75" />
34 |       <line x1="16.24" y1="16.24" x2="19.07" y2="19.07" opacity="0.75" />
35 |       <line x1="2" y1="12" x2="6" y2="12" opacity="0.75" />
36 |       <line x1="18" y1="12" x2="22" y2="12" opacity="0.75" />
37 |       <line x1="4.93" y1="19.07" x2="7.76" y2="16.24" opacity="0.75" />
38 |       <line x1="16.24" y1="7.76" x2="19.07" y2="4.93" opacity="0.75" />
39 |        {/* Optional: Add a moving segment for more dynamism */}
40 |        {/* <path d="M2 12h4l3 3 4-6 3 3h4" opacity="1" strokeWidth="2"/> */}
41 |     </svg>
42 |   );
43 | };
44 | 
45 | export default LoadingSpinnerF1;
46 |

--------------------------------------------------------------------------------
/src/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 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
 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 |

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

--------------------------------------------------------------------------------
/src/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
 1 | import { GripVertical } from "lucide-react"
 2 | import * as ResizablePrimitive from "react-resizable-panels"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const ResizablePanelGroup = ({
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
10 |   <ResizablePrimitive.PanelGroup
11 |     className={cn(
12 |       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | )
18 | 
19 | const ResizablePanel = ResizablePrimitive.Panel
20 | 
21 | const ResizableHandle = ({
22 |   withHandle,
23 |   className,
24 |   ...props
25 | }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
26 |   withHandle?: boolean
27 | }) => (
28 |   <ResizablePrimitive.PanelResizeHandle
29 |     className={cn(
30 |       "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
31 |       className
32 |     )}
33 |     {...props}
34 |   >
35 |     {withHandle && (
36 |       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
37 |         <GripVertical className="h-2.5 w-2.5" />
38 |       </div>
39 |     )}
40 |   </ResizablePrimitive.PanelResizeHandle>
41 | )
42 | 
43 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
44 |

--------------------------------------------------------------------------------
/src/components/TrackProgress.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react';
 3 | 
 4 | interface TrackProgressProps {
 5 |   progress: number;
 6 |   trackColor?: string;
 7 |   progressColor?: string;
 8 | }
 9 | 
10 | const TrackProgress = ({ 
11 |   progress, 
12 |   trackColor = "rgba(255,255,255,0.1)", 
13 |   progressColor = "#ff2800" 
14 | }: TrackProgressProps) => {
15 |   const strokeWidth = 6;
16 |   const radius = 35;
17 |   const circumference = 2 * Math.PI * radius;
18 |   const strokeDashoffset = circumference - (progress / 100) * circumference;
19 | 
20 |   return (
21 |     <div className="relative inline-flex items-center justify-center">
22 |       <svg className="transform -rotate-90" width="80" height="80">
23 |         {/* Track */}
24 |         <circle
25 |           cx="40"
26 |           cy="40"
27 |           r={radius}
28 |           fill="transparent"
29 |           stroke={trackColor}
30 |           strokeWidth={strokeWidth}
31 |         />
32 |         
33 |         {/* Progress */}
34 |         <circle
35 |           cx="40"
36 |           cy="40"
37 |           r={radius}
38 |           fill="transparent"
39 |           stroke={progressColor}
40 |           strokeWidth={strokeWidth}
41 |           strokeDasharray={circumference}
42 |           strokeDashoffset={strokeDashoffset}
43 |           strokeLinecap="round"
44 |           className="animate-loading-track"
45 |           style={{ '--stroke-dashoffset': strokeDashoffset } as React.CSSProperties}
46 |         />
47 | 
48 |         {/* Start/Finish Line */}
49 |         <line
50 |           x1="40"
51 |           y1={40 - radius - 2}
52 |           x2="40"
53 |           y2={40 - radius + 8}
54 |           stroke="white"
55 |           strokeWidth="2"
56 |         />
57 |       </svg>
58 |       
59 |       <div className="absolute text-center">
60 |         <span className="text-xl font-bold">{progress}%</span>
61 |       </div>
62 |     </div>
63 |   );
64 | };
65 | 
66 | export default TrackProgress;
67 |

--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 3 | import { type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | import { toggleVariants } from "@/components/ui/toggle"
 7 | 
 8 | const ToggleGroupContext = React.createContext<
 9 |   VariantProps<typeof toggleVariants>
10 | >({
11 |   size: "default",
12 |   variant: "default",
13 | })
14 | 
15 | const ToggleGroup = React.forwardRef<
16 |   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
17 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
18 |     VariantProps<typeof toggleVariants>
19 | >(({ className, variant, size, children, ...props }, ref) => (
20 |   <ToggleGroupPrimitive.Root
21 |     ref={ref}
22 |     className={cn("flex items-center justify-center gap-1", className)}
23 |     {...props}
24 |   >
25 |     <ToggleGroupContext.Provider value={{ variant, size }}>
26 |       {children}
27 |     </ToggleGroupContext.Provider>
28 |   </ToggleGroupPrimitive.Root>
29 | ))
30 | 
31 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
32 | 
33 | const ToggleGroupItem = React.forwardRef<
34 |   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
35 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
36 |     VariantProps<typeof toggleVariants>
37 | >(({ className, children, variant, size, ...props }, ref) => {
38 |   const context = React.useContext(ToggleGroupContext)
39 | 
40 |   return (
41 |     <ToggleGroupPrimitive.Item
42 |       ref={ref}
43 |       className={cn(
44 |         toggleVariants({
45 |           variant: context.variant || variant,
46 |           size: context.size || size,
47 |         }),
48 |         className
49 |       )}
50 |       {...props}
51 |     >
52 |       {children}
53 |     </ToggleGroupPrimitive.Item>
54 |   )
55 | })
56 | 
57 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
58 | 
59 | export { ToggleGroup, ToggleGroupItem }
60 |

--------------------------------------------------------------------------------
/src/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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 |

--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Tabs = TabsPrimitive.Root
 7 | 
 8 | const TabsList = React.forwardRef<
 9 |   React.ElementRef<typeof TabsPrimitive.List>,
10 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
11 | >(({ className, ...props }, ref) => (
12 |   <TabsPrimitive.List
13 |     ref={ref}
14 |     className={cn(
15 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | TabsList.displayName = TabsPrimitive.List.displayName
22 | 
23 | const TabsTrigger = React.forwardRef<
24 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
26 | >(({ className, ...props }, ref) => (
27 |   <TabsPrimitive.Trigger
28 |     ref={ref}
29 |     className={cn(
30 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
31 |       className
32 |     )}
33 |     {...props}
34 |   />
35 | ))
36 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
37 | 
38 | const TabsContent = React.forwardRef<
39 |   React.ElementRef<typeof TabsPrimitive.Content>,
40 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
41 | >(({ className, ...props }, ref) => (
42 |   <TabsPrimitive.Content
43 |     ref={ref}
44 |     className={cn(
45 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
46 |       className
47 |     )}
48 |     style={{ animation: 'none', transform: 'none', transition: 'none', ...props.style }}
49 |     {...props}
50 |   />
51 | ))
52 | TabsContent.displayName = TabsPrimitive.Content.displayName
53 | 
54 | export { Tabs, TabsList, TabsTrigger, TabsContent }
55 |

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

--------------------------------------------------------------------------------
/src/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-lg border bg-card text-card-foreground shadow-sm",
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 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 |

--------------------------------------------------------------------------------
/src/components/DriverComparison.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react';
 3 | import { 
 4 |   ResponsiveContainer, 
 5 |   RadarChart, 
 6 |   PolarGrid, 
 7 |   PolarAngleAxis, 
 8 |   PolarRadiusAxis, 
 9 |   Radar, 
10 |   Legend 
11 | } from 'recharts';
12 | import { cn } from "@/lib/utils";
13 | 
14 | interface DriverComparisonProps {
15 |   data: any[];
16 |   className?: string;
17 |   delay?: number;
18 | }
19 | 
20 | const DriverComparison: React.FC<DriverComparisonProps> = ({ 
21 |   data, 
22 |   className,
23 |   delay = 0 
24 | }) => {
25 |   // Get the driver ids from the first data item (excluding 'attribute')
26 |   const drivers = Object.keys(data[0] || {}).filter(key => key !== 'attribute');
27 |   
28 |   // Define colors for drivers
29 |   const driverColors: Record<string, string> = {
30 |     verstappen: '#1e41ff', // Red Bull blue
31 |     hamilton: '#6cd3bf',   // Mercedes teal
32 |     leclerc: '#ff2800',    // Ferrari red
33 |     norris: '#ff8700',     // McLaren orange
34 |     russell: '#6cd3bf',    // Mercedes teal
35 |     sainz: '#ff2800',      // Ferrari red
36 |     piastri: '#ff8700',    // McLaren orange
37 |     perez: '#1e41ff',      // Red Bull blue
38 |   };
39 |   
40 |   return (
41 |     <div 
42 |       className={cn("chart-container", className)}
43 |       style={{ '--delay': delay } as React.CSSProperties}
44 |     >
45 |       <h2 className="text-lg font-semibold mb-4">Driver Performance Comparison</h2>
46 |       <ResponsiveContainer width="100%" height={400}>
47 |         <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
48 |           <PolarGrid stroke="rgba(255,255,255,0.2)" />
49 |           <PolarAngleAxis 
50 |             dataKey="attribute" 
51 |             tick={{ fill: 'rgba(255,255,255,0.7)' }}
52 |           />
53 |           <PolarRadiusAxis stroke="rgba(255,255,255,0.5)" tick={{ fill: 'rgba(255,255,255,0.7)' }} />
54 |           
55 |           {drivers.map(driver => (
56 |             <Radar 
57 |               key={driver}
58 |               name={driver.charAt(0).toUpperCase() + driver.slice(1)} 
59 |               dataKey={driver} 
60 |               stroke={driverColors[driver] || '#888'} 
61 |               fill={driverColors[driver] || '#888'} 
62 |               fillOpacity={0.6} 
63 |             />
64 |           ))}
65 |           
66 |           <Legend />
67 |         </RadarChart>
68 |       </ResponsiveContainer>
69 |     </div>
70 |   );
71 | };
72 | 
73 | export default DriverComparison;
74 |

--------------------------------------------------------------------------------
/src/components/ui/input-otp.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { OTPInput, OTPInputContext } from "input-otp"
 3 | import { Dot } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const InputOTP = React.forwardRef<
 8 |   React.ElementRef<typeof OTPInput>,
 9 |   React.ComponentPropsWithoutRef<typeof OTPInput>
10 | >(({ className, containerClassName, ...props }, ref) => (
11 |   <OTPInput
12 |     ref={ref}
13 |     containerClassName={cn(
14 |       "flex items-center gap-2 has-[:disabled]:opacity-50",
15 |       containerClassName
16 |     )}
17 |     className={cn("disabled:cursor-not-allowed", className)}
18 |     {...props}
19 |   />
20 | ))
21 | InputOTP.displayName = "InputOTP"
22 | 
23 | const InputOTPGroup = React.forwardRef<
24 |   React.ElementRef<"div">,
25 |   React.ComponentPropsWithoutRef<"div">
26 | >(({ className, ...props }, ref) => (
27 |   <div ref={ref} className={cn("flex items-center", className)} {...props} />
28 | ))
29 | InputOTPGroup.displayName = "InputOTPGroup"
30 | 
31 | const InputOTPSlot = React.forwardRef<
32 |   React.ElementRef<"div">,
33 |   React.ComponentPropsWithoutRef<"div"> & { index: number }
34 | >(({ index, className, ...props }, ref) => {
35 |   const inputOTPContext = React.useContext(OTPInputContext)
36 |   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
37 | 
38 |   return (
39 |     <div
40 |       ref={ref}
41 |       className={cn(
42 |         "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
43 |         isActive && "z-10 ring-2 ring-ring ring-offset-background",
44 |         className
45 |       )}
46 |       {...props}
47 |     >
48 |       {char}
49 |       {hasFakeCaret && (
50 |         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
51 |           <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
52 |         </div>
53 |       )}
54 |     </div>
55 |   )
56 | })
57 | InputOTPSlot.displayName = "InputOTPSlot"
58 | 
59 | const InputOTPSeparator = React.forwardRef<
60 |   React.ElementRef<"div">,
61 |   React.ComponentPropsWithoutRef<"div">
62 | >(({ ...props }, ref) => (
63 |   <div ref={ref} role="separator" {...props}>
64 |     <Dot />
65 |   </div>
66 | ))
67 | InputOTPSeparator.displayName = "InputOTPSeparator"
68 | 
69 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
70 |

--------------------------------------------------------------------------------
/src/pages/NotFound.tsx:
--------------------------------------------------------------------------------
 1 | import { useLocation, useNavigate } from "react-router-dom";
 2 | import { useEffect } from "react";
 3 | import { Button } from "@/components/ui/button";
 4 | import { AlertCircle, Home } from "lucide-react";
 5 | import Navbar from "@/components/Navbar";
 6 | 
 7 | const NotFound = () => {
 8 |   const location = useLocation();
 9 |   const navigate = useNavigate();
10 | 
11 |   useEffect(() => {
12 |     console.error(
13 |       "404 Error: User attempted to access non-existent route:",
14 |       location.pathname
15 |     );
16 |   }, [location.pathname]);
17 | 
18 |   return (
19 |     <div className="min-h-screen bg-gradient-to-b from-gray-950 via-black to-gray-950 text-white">
20 |       <Navbar />
21 |       
22 |       <div className="container mx-auto px-4 py-16 flex flex-col items-center justify-center min-h-[80vh]">
23 |         <div className="animate-pulse mb-8">
24 |           <AlertCircle className="h-24 w-24 text-red-500" />
25 |         </div>
26 |         
27 |         <div className="text-center max-w-md">
28 |           <h1 className="text-5xl md:text-6xl font-extrabold mb-4 bg-gradient-to-r from-red-500 to-red-700 bg-clip-text text-transparent">404</h1>
29 |           <h2 className="text-2xl md:text-3xl font-bold mb-6 text-gray-100">Page Not Found</h2>
30 |           
31 |           <p className="text-gray-400 mb-8">
32 |             The page you're looking for doesn't exist or has been moved. 
33 |             This section of the track is under construction.
34 |           </p>
35 |           
36 |           <div className="flex flex-col md:flex-row gap-4 justify-center">
37 |             <Button 
38 |               onClick={() => navigate(-1)}
39 |               variant="outline" 
40 |               className="border-gray-700 bg-gray-900 hover:bg-gray-800 text-gray-200"
41 |             >
42 |               Go Back
43 |             </Button>
44 |             
45 |             <Button 
46 |               onClick={() => navigate("/dashboard")}
47 |               className="bg-red-600 hover:bg-red-700 text-white flex items-center gap-2"
48 |             >
49 |               <Home className="h-4 w-4" />
50 |               Dashboard
51 |             </Button>
52 |           </div>
53 |         </div>
54 |         
55 |         <div className="mt-16 flex gap-3">
56 |           <div className="h-1 w-16 bg-red-600 rounded-full"></div>
57 |           <div className="h-1 w-8 bg-red-800 rounded-full"></div>
58 |           <div className="h-1 w-4 bg-red-900 rounded-full"></div>
59 |         </div>
60 |       </div>
61 |     </div>
62 |   );
63 | };
64 | 
65 | export default NotFound;
66 |

--------------------------------------------------------------------------------
/src/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { ChevronLeft, ChevronRight } from "lucide-react";
 3 | import { DayPicker } from "react-day-picker";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | import { buttonVariants } from "@/components/ui/button";
 7 | 
 8 | export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 9 | 
10 | function Calendar({
11 |   className,
12 |   classNames,
13 |   showOutsideDays = true,
14 |   ...props
15 | }: CalendarProps) {
16 |   return (
17 |     <DayPicker
18 |       showOutsideDays={showOutsideDays}
19 |       className={cn("p-3", className)}
20 |       classNames={{
21 |         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
22 |         month: "space-y-4",
23 |         caption: "flex justify-center pt-1 relative items-center",
24 |         caption_label: "text-sm font-medium",
25 |         nav: "space-x-1 flex items-center",
26 |         nav_button: cn(
27 |           buttonVariants({ variant: "outline" }),
28 |           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
29 |         ),
30 |         nav_button_previous: "absolute left-1",
31 |         nav_button_next: "absolute right-1",
32 |         table: "w-full border-collapse space-y-1",
33 |         head_row: "flex",
34 |         head_cell:
35 |           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
36 |         row: "flex w-full mt-2",
37 |         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
38 |         day: cn(
39 |           buttonVariants({ variant: "ghost" }),
40 |           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
41 |         ),
42 |         day_range_end: "day-range-end",
43 |         day_selected:
44 |           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
45 |         day_today: "bg-accent text-accent-foreground",
46 |         day_outside:
47 |           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
48 |         day_disabled: "text-muted-foreground opacity-50",
49 |         day_range_middle:
50 |           "aria-selected:bg-accent aria-selected:text-accent-foreground",
51 |         day_hidden: "invisible",
52 |         ...classNames,
53 |       }}
54 |       components={{
55 |         IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
56 |         IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
57 |       }}
58 |       {...props}
59 |     />
60 |   );
61 | }
62 | Calendar.displayName = "Calendar";
63 | 
64 | export { Calendar };
65 |

--------------------------------------------------------------------------------
/src/components/F1Card.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { cn } from "@/lib/utils";
 3 | import { ArrowUp, ArrowDown, MinusCircle } from 'lucide-react'; // Import icons
 4 | 
 5 | interface F1CardProps {
 6 |   title: string;
 7 |   value: string | number;
 8 |   team: 'ferrari' | 'mercedes' | 'mclaren' | 'redbull' | 'astonmartin' | 'alpine' | 'williams' | 'haas' | 'alfaromeo' | 'alphatauri' | 'gray'; // Added missing teams + gray
 9 |   icon?: React.ReactNode;
10 |   points_change?: number; // Use points_change instead of change
11 |   subValue?: string | null; // Optional sub-value (e.g., lap time)
12 |   className?: string;
13 |   style?: React.CSSProperties;
14 |   isRookie?: boolean; // Add isRookie prop
15 | }
16 | 
17 | const F1Card = ({ title, value, team, icon, points_change, subValue, className, style, isRookie }: F1CardProps) => {
18 | 
19 |   // Function to determine change indicator color and icon (copied from standings pages)
20 |   const getChangeIndicator = (change: number | undefined) => {
21 |     if (change === undefined) {
22 |        return null;
23 |     }
24 |     if (change > 0) {
25 |       return { color: 'text-green-500', icon: <ArrowUp className="h-4 w-4" /> };
26 |     } else if (change < 0) {
27 |       return { color: 'text-red-500', icon: <ArrowDown className="h-4 w-4" /> };
28 |     } else { // change === 0
29 |       return { color: 'text-gray-500', icon: <MinusCircle className="h-4 w-4" /> };
30 |     }
31 |   };
32 | 
33 |   const indicator = getChangeIndicator(points_change);
34 | 
35 |   return (
36 |     <div className={cn(`team-card bg-f1-${team}-gradient border border-f1-${team}/30 rounded-lg p-4 shadow-md`, className)} style={style}> {/* Use team prop for styling */}
37 |       <div className="flex justify-between items-start">
38 |         <div>
39 |           <div className="flex items-center gap-2 mb-1">
40 |             <h3 className="text-sm text-gray-300 font-medium">{title}</h3>
41 |             {isRookie && (
42 |               <span className="text-xs px-1.5 py-0.5 bg-blue-600/40 text-blue-200 rounded font-medium">
43 |                 Rookie
44 |               </span>
45 |             )}
46 |           </div>
47 |           <div className="text-2xl font-bold text-white">{value}</div>
48 |           {/* Display subValue (lap time) if available */}
49 |           {subValue && (
50 |             <div className="text-xs text-gray-400 font-mono mt-0.5">{subValue}</div>
51 |           )}
52 | 
53 |           {/* Display points change indicator if available */}
54 |           {indicator && (
55 |             <div className={cn("text-sm mt-1 flex items-center gap-1", indicator.color)} title="Points Change Since Last Race">
56 |               {indicator.icon}
57 |               <span>{points_change !== 0 ? Math.abs(points_change ?? 0) : '-'}</span>
58 |             </div>
59 |           )}
60 |         </div>
61 | 
62 |         {icon && (
63 |           <div className="p-2 rounded-full bg-background/50">
64 |             {icon}
65 |           </div>
66 |         )}
67 |       </div>
68 |     </div>
69 |   );
70 | };
71 | 
72 | export default F1Card;
73 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🏎️ Fastlytics 
 2 | 
 3 | *A lightning-fast platform for Formula 1 fans to explore historical data, compare drivers, and simulate race strategies – no engineering degree required.*  
 4 | 
 5 | 
 6 | ## 🚀 Features  
 7 | 
 8 | ### 🏁 **Core Features**  
 9 | - **Lap Time Comparisons**: Compare drivers’ laps side-by-side (e.g., *Hamilton vs. Verstappen at Monaco*).  
10 | - **Gear Shift Visualization**: See how drivers attack corners with animated gear shift maps.  
11 | - **Tire Strategy Breakdowns**: Analyze pit stop efficiency and compound performance.  
12 | - **Position Change Graphs**: Relive epic battles with lap-by-lap position swings.  
13 | - **Track Evolution Analysis**: Watch how lap times drop as rubber builds up on the circuit.  
14 | 
15 | ---
16 | 
17 | ## 🛠️ Tech Stack  
18 | 
19 | | **Category**       | **Tools**                                                                 |  
20 | |---------------------|---------------------------------------------------------------------------|  
21 | | **Frontend**        | React, Tailwind CSS, shadcn/ui, Lucide React, Custom Charts     |  
22 | | **Backend**         | Fast-F1 API, Supabase (Auth + PostgreSQL), Cloudflare R2 (Storage)       |  
23 | | **Infrastructure**  | Docker, Oracle, Redis (Caching)                          |  
24 | | **Misc**            | Python (Data Processing), |  
25 | 
26 | ---
27 | 
28 | ## ⚡ Quick Start  
29 | 
30 | ### Prerequisites
31 | 
32 | - Node.js v18+
33 | - Python 3.10+
34 | - Docker (for local Supabase/PostgreSQL)
35 | 
36 | ### Installation
37 | 
38 | 1. Clone the repository:
39 |    ```bash
40 |    git clone https://github.com/subhashhhhhh/Fastlytics.git
41 |    ```
42 | 
43 | 2. Install frontend dependencies:
44 |    ```bash
45 |    npm install
46 |    ```
47 | 
48 | 3. Install backend dependencies:
49 |    ```bash
50 |    git clone https://github.com/subhashhhhhh/Fastlytics-Backend.git
51 |    pip install -r requirements.txt
52 |    ```
53 | 
54 | ### Environment Setup
55 | 
56 | 1. Configure environment variables:
57 |    ```bash
58 |    cp .env.example .env
59 |    ```
60 | 
61 | 2. Configure backend environment variables:
62 |    ```bash
63 |    cd backend-api
64 |    cp .env.example .env
65 |    ```
66 |    
67 | ## 🤝 Contributing  
68 | **We welcome pit crew members!**  
69 | 1. Fork the repository.  
70 | 2. Create a branch: `git checkout -b feature/brazilian-gp-2023`.  
71 | 3. Commit changes: `git commit -m "Added Hamilton’s magic telemetry"`.  
72 | 4. Push: `git push origin feature/brazilian-gp-2023`.  
73 | 5. Submit a PR.  
74 | 
75 | *No toxic rivalries allowed – this is a Ferrari/Mercedes/Red Bull neutral zone.* 🏳️  
76 | 
77 | ---
78 | 
79 | ## 📜 License  
80 | MIT License – *Do whatever you want, but don’t blame us if your AI predicts Stroll as 2024 champion.*  
81 | 
82 | ---
83 | 
84 | ## 🙏 Acknowledgments  
85 | - **Fast-F1**: For the incredible Python library that makes this possible.  
86 | - **Supabase**: For auth and database.  
87 | - **You**: For not asking why we included the 2022 Ferrari strategy engine.  
88 | 
89 | ---
90 | 
91 | *Built with ❤️ and excessive caffeine by Subhash Gottumukkala.*  
92 | 
93 | ---
94 |

--------------------------------------------------------------------------------
/public/placeholder.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { Toaster } from "@/components/ui/toaster";
 2 | import { Toaster as Sonner } from "@/components/ui/sonner";
 3 | import { TooltipProvider } from "@/components/ui/tooltip";
 4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 5 | import { BrowserRouter, Routes, Route } from "react-router-dom";
 6 | import Dashboard from "./pages/Dashboard";
 7 | import Landing from "./pages/Landing"; // Updated import
 8 | import Race from "./pages/Race";
 9 | import TeamStandings from "./pages/TeamStandings";
10 | import DriverStandings from "./pages/DriverStandings";
11 | import Races from "./pages/Races";
12 | import NotFound from "./pages/NotFound";
13 | import PrivacyPolicy from "./pages/PrivacyPolicy";
14 | import TermsOfService from "./pages/TermsOfService";
15 | import FAQ from "./pages/FAQ";
16 | import Footer from "./components/Footer";
17 | import LandingFooter from "./components/LandingFooter";
18 | import { SeasonProvider } from "./contexts/SeasonContext";
19 | import { AuthProvider } from "./contexts/AuthContext";
20 | import ScrollToTop from "@/components/ScrollToTop";
21 | 
22 | const queryClient = new QueryClient();
23 | 
24 | // Layout component to add footer to pages
25 | const MainLayout = ({ children }: { children: React.ReactNode }) => (
26 |   <div className="min-h-screen flex flex-col">
27 |     {children}
28 |     <Footer />
29 |   </div>
30 | );
31 | 
32 | // Landing layout with custom footer
33 | const LandingLayout = ({ children }: { children: React.ReactNode }) => (
34 |   <div className="min-h-screen flex flex-col">
35 |     {children}
36 |     <LandingFooter />
37 |   </div>
38 | );
39 | 
40 | const App = () => (
41 |   <QueryClientProvider client={queryClient}>
42 |     <TooltipProvider>
43 |       <Toaster />
44 |       <Sonner />
45 |       <SeasonProvider>
46 |         <AuthProvider>
47 |           <BrowserRouter>
48 |             <ScrollToTop />
49 |             <Routes>
50 |               {/* Landing Page Route (with LandingFooter) */}
51 |               <Route path="/" element={<LandingLayout><Landing /></LandingLayout>} />
52 | 
53 |               {/* Public Info Pages */}
54 |               <Route path="/privacy-policy" element={<MainLayout><PrivacyPolicy /></MainLayout>} />
55 |               <Route path="/terms-of-service" element={<MainLayout><TermsOfService /></MainLayout>} />
56 |               <Route path="/faq" element={<MainLayout><FAQ /></MainLayout>} />
57 | 
58 |               {/* All routes are now public */}
59 |               <Route path="/dashboard" element={<MainLayout><Dashboard /></MainLayout>} />
60 |               <Route path="/race/:raceId" element={<MainLayout><Race /></MainLayout>} />
61 |               <Route path="/races" element={<MainLayout><Races /></MainLayout>} />
62 |               <Route path="/standings/teams" element={<MainLayout><TeamStandings /></MainLayout>} />
63 |               <Route path="/standings/drivers" element={<MainLayout><DriverStandings /></MainLayout>} />
64 | 
65 |               {/* 404 page */}
66 |               <Route path="*" element={<MainLayout><NotFound /></MainLayout>} />
67 |             </Routes>
68 |           </BrowserRouter>
69 |         </AuthProvider>
70 |       </SeasonProvider>
71 |     </TooltipProvider>
72 |   </QueryClientProvider>
73 | );
74 | 
75 | export default App;
76 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vite_react_shadcn_ts",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "build:dev": "vite build --mode development",
10 |     "lint": "eslint .",
11 |     "preview": "vite preview"
12 |   },
13 |   "dependencies": {
14 |     "@heroicons/react": "^2.2.0",
15 |     "@hookform/resolvers": "^3.9.0",
16 |     "@radix-ui/react-accordion": "^1.2.0",
17 |     "@radix-ui/react-alert-dialog": "^1.1.1",
18 |     "@radix-ui/react-aspect-ratio": "^1.1.0",
19 |     "@radix-ui/react-avatar": "^1.1.0",
20 |     "@radix-ui/react-checkbox": "^1.1.1",
21 |     "@radix-ui/react-collapsible": "^1.1.0",
22 |     "@radix-ui/react-context-menu": "^2.2.1",
23 |     "@radix-ui/react-dialog": "^1.1.2",
24 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
25 |     "@radix-ui/react-hover-card": "^1.1.1",
26 |     "@radix-ui/react-label": "^2.1.0",
27 |     "@radix-ui/react-menubar": "^1.1.1",
28 |     "@radix-ui/react-navigation-menu": "^1.2.0",
29 |     "@radix-ui/react-popover": "^1.1.1",
30 |     "@radix-ui/react-progress": "^1.1.0",
31 |     "@radix-ui/react-radio-group": "^1.2.0",
32 |     "@radix-ui/react-scroll-area": "^1.1.0",
33 |     "@radix-ui/react-select": "^2.1.1",
34 |     "@radix-ui/react-separator": "^1.1.0",
35 |     "@radix-ui/react-slider": "^1.2.0",
36 |     "@radix-ui/react-slot": "^1.1.0",
37 |     "@radix-ui/react-switch": "^1.1.0",
38 |     "@radix-ui/react-tabs": "^1.1.0",
39 |     "@radix-ui/react-toast": "^1.2.1",
40 |     "@radix-ui/react-toggle": "^1.1.0",
41 |     "@radix-ui/react-toggle-group": "^1.1.0",
42 |     "@radix-ui/react-tooltip": "^1.1.4",
43 |     "@supabase/supabase-js": "^2.49.4",
44 |     "@tanstack/react-query": "^5.56.2",
45 |     "@tanstack/react-table": "^8.21.2",
46 |     "@tremor/react": "^3.18.7",
47 |     "class-variance-authority": "^0.7.1",
48 |     "clsx": "^2.1.1",
49 |     "cmdk": "^1.0.0",
50 |     "date-fns": "^3.6.0",
51 |     "embla-carousel-react": "^8.3.0",
52 |     "framer-motion": "^12.8.0",
53 |     "html-to-image": "^1.11.13",
54 |     "input-otp": "^1.2.4",
55 |     "lucide-react": "^0.462.0",
56 |     "next-themes": "^0.3.0",
57 |     "react": "^18.3.1",
58 |     "react-day-picker": "^8.10.1",
59 |     "react-dom": "^18.3.1",
60 |     "react-hook-form": "^7.53.0",
61 |     "react-resizable-panels": "^2.1.3",
62 |     "react-router-dom": "^6.26.2",
63 |     "recharts": "^2.12.7",
64 |     "simple-icons": "^14.12.0",
65 |     "sonner": "^1.5.0",
66 |     "tailwind-merge": "^2.5.2",
67 |     "tailwindcss-animate": "^1.0.7",
68 |     "vaul": "^0.9.3",
69 |     "zod": "^3.23.8"
70 |   },
71 |   "devDependencies": {
72 |     "@eslint/js": "^9.9.0",
73 |     "@tailwindcss/typography": "^0.5.15",
74 |     "@types/node": "^22.5.5",
75 |     "@types/react": "^18.3.3",
76 |     "@types/react-dom": "^18.3.0",
77 |     "@vitejs/plugin-react-swc": "^3.5.0",
78 |     "autoprefixer": "^10.4.20",
79 |     "eslint": "^9.9.0",
80 |     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
81 |     "eslint-plugin-react-refresh": "^0.4.9",
82 |     "globals": "^15.9.0",
83 |     "lovable-tagger": "^1.1.7",
84 |     "postcss": "^8.4.47",
85 |     "tailwindcss": "^3.4.11",
86 |     "typescript": "^5.5.3",
87 |     "typescript-eslint": "^8.0.1",
88 |     "vite": "^6.2.6"
89 |   }
90 | }
91 |

--------------------------------------------------------------------------------
/src/components/ui/breadcrumb.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Slot } from "@radix-ui/react-slot"
  3 | import { ChevronRight, MoreHorizontal } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const Breadcrumb = React.forwardRef<
  8 |   HTMLElement,
  9 |   React.ComponentPropsWithoutRef<"nav"> & {
 10 |     separator?: React.ReactNode
 11 |   }
 12 | >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
 13 | Breadcrumb.displayName = "Breadcrumb"
 14 | 
 15 | const BreadcrumbList = React.forwardRef<
 16 |   HTMLOListElement,
 17 |   React.ComponentPropsWithoutRef<"ol">
 18 | >(({ className, ...props }, ref) => (
 19 |   <ol
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ))
 28 | BreadcrumbList.displayName = "BreadcrumbList"
 29 | 
 30 | const BreadcrumbItem = React.forwardRef<
 31 |   HTMLLIElement,
 32 |   React.ComponentPropsWithoutRef<"li">
 33 | >(({ className, ...props }, ref) => (
 34 |   <li
 35 |     ref={ref}
 36 |     className={cn("inline-flex items-center gap-1.5", className)}
 37 |     {...props}
 38 |   />
 39 | ))
 40 | BreadcrumbItem.displayName = "BreadcrumbItem"
 41 | 
 42 | const BreadcrumbLink = React.forwardRef<
 43 |   HTMLAnchorElement,
 44 |   React.ComponentPropsWithoutRef<"a"> & {
 45 |     asChild?: boolean
 46 |   }
 47 | >(({ asChild, className, ...props }, ref) => {
 48 |   const Comp = asChild ? Slot : "a"
 49 | 
 50 |   return (
 51 |     <Comp
 52 |       ref={ref}
 53 |       className={cn("transition-colors hover:text-foreground", className)}
 54 |       {...props}
 55 |     />
 56 |   )
 57 | })
 58 | BreadcrumbLink.displayName = "BreadcrumbLink"
 59 | 
 60 | const BreadcrumbPage = React.forwardRef<
 61 |   HTMLSpanElement,
 62 |   React.ComponentPropsWithoutRef<"span">
 63 | >(({ className, ...props }, ref) => (
 64 |   <span
 65 |     ref={ref}
 66 |     role="link"
 67 |     aria-disabled="true"
 68 |     aria-current="page"
 69 |     className={cn("font-normal text-foreground", className)}
 70 |     {...props}
 71 |   />
 72 | ))
 73 | BreadcrumbPage.displayName = "BreadcrumbPage"
 74 | 
 75 | const BreadcrumbSeparator = ({
 76 |   children,
 77 |   className,
 78 |   ...props
 79 | }: React.ComponentProps<"li">) => (
 80 |   <li
 81 |     role="presentation"
 82 |     aria-hidden="true"
 83 |     className={cn("[&>svg]:size-3.5", className)}
 84 |     {...props}
 85 |   >
 86 |     {children ?? <ChevronRight />}
 87 |   </li>
 88 | )
 89 | BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 90 | 
 91 | const BreadcrumbEllipsis = ({
 92 |   className,
 93 |   ...props
 94 | }: React.ComponentProps<"span">) => (
 95 |   <span
 96 |     role="presentation"
 97 |     aria-hidden="true"
 98 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
 99 |     {...props}
100 |   >
101 |     <MoreHorizontal className="h-4 w-4" />
102 |     <span className="sr-only">More</span>
103 |   </span>
104 | )
105 | BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
106 | 
107 | export {
108 |   Breadcrumb,
109 |   BreadcrumbList,
110 |   BreadcrumbItem,
111 |   BreadcrumbLink,
112 |   BreadcrumbPage,
113 |   BreadcrumbSeparator,
114 |   BreadcrumbEllipsis,
115 | }
116 |

--------------------------------------------------------------------------------
/src/components/ui/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | import { ButtonProps, buttonVariants } from "@/components/ui/button"
  6 | 
  7 | const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  8 |   <nav
  9 |     role="navigation"
 10 |     aria-label="pagination"
 11 |     className={cn("mx-auto flex w-full justify-center", className)}
 12 |     {...props}
 13 |   />
 14 | )
 15 | Pagination.displayName = "Pagination"
 16 | 
 17 | const PaginationContent = React.forwardRef<
 18 |   HTMLUListElement,
 19 |   React.ComponentProps<"ul">
 20 | >(({ className, ...props }, ref) => (
 21 |   <ul
 22 |     ref={ref}
 23 |     className={cn("flex flex-row items-center gap-1", className)}
 24 |     {...props}
 25 |   />
 26 | ))
 27 | PaginationContent.displayName = "PaginationContent"
 28 | 
 29 | const PaginationItem = React.forwardRef<
 30 |   HTMLLIElement,
 31 |   React.ComponentProps<"li">
 32 | >(({ className, ...props }, ref) => (
 33 |   <li ref={ref} className={cn("", className)} {...props} />
 34 | ))
 35 | PaginationItem.displayName = "PaginationItem"
 36 | 
 37 | type PaginationLinkProps = {
 38 |   isActive?: boolean
 39 | } & Pick<ButtonProps, "size"> &
 40 |   React.ComponentProps<"a">
 41 | 
 42 | const PaginationLink = ({
 43 |   className,
 44 |   isActive,
 45 |   size = "icon",
 46 |   ...props
 47 | }: PaginationLinkProps) => (
 48 |   <a
 49 |     aria-current={isActive ? "page" : undefined}
 50 |     className={cn(
 51 |       buttonVariants({
 52 |         variant: isActive ? "outline" : "ghost",
 53 |         size,
 54 |       }),
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | )
 60 | PaginationLink.displayName = "PaginationLink"
 61 | 
 62 | const PaginationPrevious = ({
 63 |   className,
 64 |   ...props
 65 | }: React.ComponentProps<typeof PaginationLink>) => (
 66 |   <PaginationLink
 67 |     aria-label="Go to previous page"
 68 |     size="default"
 69 |     className={cn("gap-1 pl-2.5", className)}
 70 |     {...props}
 71 |   >
 72 |     <ChevronLeft className="h-4 w-4" />
 73 |     <span>Previous</span>
 74 |   </PaginationLink>
 75 | )
 76 | PaginationPrevious.displayName = "PaginationPrevious"
 77 | 
 78 | const PaginationNext = ({
 79 |   className,
 80 |   ...props
 81 | }: React.ComponentProps<typeof PaginationLink>) => (
 82 |   <PaginationLink
 83 |     aria-label="Go to next page"
 84 |     size="default"
 85 |     className={cn("gap-1 pr-2.5", className)}
 86 |     {...props}
 87 |   >
 88 |     <span>Next</span>
 89 |     <ChevronRight className="h-4 w-4" />
 90 |   </PaginationLink>
 91 | )
 92 | PaginationNext.displayName = "PaginationNext"
 93 | 
 94 | const PaginationEllipsis = ({
 95 |   className,
 96 |   ...props
 97 | }: React.ComponentProps<"span">) => (
 98 |   <span
 99 |     aria-hidden
100 |     className={cn("flex h-9 w-9 items-center justify-center", className)}
101 |     {...props}
102 |   >
103 |     <MoreHorizontal className="h-4 w-4" />
104 |     <span className="sr-only">More pages</span>
105 |   </span>
106 | )
107 | PaginationEllipsis.displayName = "PaginationEllipsis"
108 | 
109 | export {
110 |   Pagination,
111 |   PaginationContent,
112 |   PaginationEllipsis,
113 |   PaginationItem,
114 |   PaginationLink,
115 |   PaginationNext,
116 |   PaginationPrevious,
117 | }
118 |

--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ))
 17 | Table.displayName = "Table"
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ))
 25 | TableHeader.displayName = "TableHeader"
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ))
 37 | TableBody.displayName = "TableBody"
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ))
 52 | TableFooter.displayName = "TableFooter"
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | TableRow.displayName = "TableRow"
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ))
 82 | TableHead.displayName = "TableHead"
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ))
 94 | TableCell.displayName = "TableCell"
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ))
106 | TableCaption.displayName = "TableCaption"
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | }
118 |

--------------------------------------------------------------------------------
/src/components/FeatureAnnouncementBanner.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { Sparkles, X, ArrowRight } from 'lucide-react';
 3 | import { Link } from 'react-router-dom';
 4 | import { cn } from '@/lib/utils';
 5 | 
 6 | interface FeatureAnnouncementBannerProps {
 7 |   id: string; // Unique identifier for this announcement
 8 |   title: string;
 9 |   message: string;
10 |   linkText?: string;
11 |   linkHref?: string;
12 |   expiresInDays?: number; // How many days the banner should show
13 |   className?: string;
14 | }
15 | 
16 | const FeatureAnnouncementBanner: React.FC<FeatureAnnouncementBannerProps> = ({
17 |   id,
18 |   title,
19 |   message,
20 |   linkText,
21 |   linkHref,
22 |   expiresInDays = 7,
23 |   className
24 | }) => {
25 |   const [isVisible, setIsVisible] = useState(false);
26 |   
27 |   useEffect(() => {
28 |     // Check if this announcement has been dismissed
29 |     const dismissedAnnouncements = JSON.parse(localStorage.getItem('dismissedAnnouncements') || '{}');
30 |     
31 |     // If there's an expiry date stored, check if it's passed
32 |     if (dismissedAnnouncements[id]) {
33 |       const expiryDate = new Date(dismissedAnnouncements[id]);
34 |       if (new Date() > expiryDate) {
35 |         // Expired, show again
36 |         delete dismissedAnnouncements[id];
37 |         localStorage.setItem('dismissedAnnouncements', JSON.stringify(dismissedAnnouncements));
38 |         setIsVisible(true);
39 |       } else {
40 |         // Not expired, keep hidden
41 |         setIsVisible(false);
42 |       }
43 |     } else {
44 |       // Never dismissed, show it
45 |       setIsVisible(true);
46 |     }
47 |   }, [id, expiresInDays]);
48 |   
49 |   const dismissAnnouncement = () => {
50 |     const dismissedAnnouncements = JSON.parse(localStorage.getItem('dismissedAnnouncements') || '{}');
51 |     
52 |     // Set expiry date
53 |     const expiryDate = new Date();
54 |     expiryDate.setDate(expiryDate.getDate() + expiresInDays);
55 |     
56 |     dismissedAnnouncements[id] = expiryDate.toISOString();
57 |     localStorage.setItem('dismissedAnnouncements', JSON.stringify(dismissedAnnouncements));
58 |     
59 |     setIsVisible(false);
60 |   };
61 |   
62 |   if (!isVisible) return null;
63 |   
64 |   return (
65 |     <div className={cn("bg-gradient-to-r from-purple-900/70 via-indigo-800/70 to-blue-900/70 text-white py-3 px-4 rounded-lg shadow-lg border border-purple-500/30 mb-6 relative backdrop-blur-sm", className)}>
66 |       <div className="flex items-start">
67 |         <Sparkles className="h-5 w-5 text-purple-300 mr-3 mt-0.5 flex-shrink-0" />
68 |         <div className="flex-1">
69 |           <h3 className="font-bold text-lg text-white">{title}</h3>
70 |           <p className="text-purple-100 my-1">{message}</p>
71 |           {linkText && linkHref && (
72 |             <Link 
73 |               to={linkHref} 
74 |               className="inline-flex items-center text-purple-200 hover:text-white text-sm font-medium mt-1"
75 |             >
76 |               {linkText} <ArrowRight className="ml-1 h-3 w-3" />
77 |             </Link>
78 |           )}
79 |         </div>
80 |         <button 
81 |           onClick={dismissAnnouncement}
82 |           className="text-purple-200 hover:text-white ml-2 p-1 flex-shrink-0"
83 |           aria-label="Dismiss"
84 |         >
85 |           <X className="h-5 w-5" />
86 |         </button>
87 |       </div>
88 |     </div>
89 |   );
90 | };
91 | 
92 | export default FeatureAnnouncementBanner;

--------------------------------------------------------------------------------
/src/data/mockData.ts:
--------------------------------------------------------------------------------
 1 | // Mock data for demonstration purposes - Standings data removed, fetched via API now.
 2 | 
 3 | // --- Interfaces (Keep for type safety) ---
 4 | 
 5 | interface TeamStanding {
 6 |   year: number;
 7 |   rank?: number;
 8 |   team: string;
 9 |   shortName: string;
10 |   points: number;
11 |   change: number | null;
12 |   wins: number;
13 |   podiums: number;
14 |   teamColor: string;
15 | }
16 | 
17 | interface DriverStanding {
18 |   year: number;
19 |   rank: number;
20 |   name: string;
21 |   shortName: string;
22 |   team: string;
23 |   points: number;
24 |   change: number | null;
25 |   wins: number;
26 |   podiums: number;
27 |   teamColor: string;
28 | }
29 | 
30 | // Keep main structure if helper functions still reference it, but empty the arrays
31 | export const standingsData: { teams: TeamStanding[], drivers: DriverStanding[] } = {
32 |   teams: [], // Remove mock team data
33 |   drivers: [] // Remove mock driver data
34 | };
35 | 
36 | // --- Other Mock Data (Keep if still used elsewhere, e.g., charts before API integration) ---
37 | 
38 | // Mock data for race results (Keep simple for now, will be replaced by API call)
39 | export const raceResultsData = [
40 |   { year: 2025, event: 'Chinese Grand Prix', driver: 'Oscar Piastri', team: 'mclaren', change: 22 },
41 |   { year: 2024, event: 'Bahrain Grand Prix', driver: 'Max Verstappen', team: 'redbull', change: null },
42 |   { year: 2024, event: 'Saudi Arabian Grand Prix', driver: 'Sergio Perez', team: 'redbull', change: null },
43 |   { year: 2024, event: 'Australian Grand Prix', driver: 'Carlos Sainz', team: 'ferrari', change: null },
44 |   { year: 2023, event: 'Bahrain Grand Prix', driver: 'Max Verstappen', team: 'redbull', change: null },
45 |   { year: 2023, event: 'Saudi Arabian Grand Prix', driver: 'Sergio Perez', team: 'redbull', change: null },
46 |   { year: 2023, event: 'Australian Grand Prix', driver: 'Max Verstappen', team: 'redbull', change: null },
47 |   { year: 2023, event: 'Azerbaijan Grand Prix', driver: 'Sergio Perez', team: 'redbull', change: null },
48 | ];
49 | 
50 | // Mock data for lap times comparison (Keep if RacingChart hasn't been fully updated everywhere)
51 | export const lapTimesData = [
52 |   { lap: 1, driverA: 95.5, driverB: 96.1 },
53 |   { lap: 2, driverA: 94.8, driverB: 95.2 },
54 |   { lap: 3, driverA: 94.5, driverB: 94.9 },
55 | ];
56 | 
57 | // Mock data for tire strategy (Keep if TireStrategy component hasn't been fully updated everywhere)
58 | export const tireStrategyData = [
59 |   { driver: 'VER', stints: [{ compound: 'Medium', laps: 18 }, { compound: 'Hard', laps: 40 }] },
60 |   { driver: 'HAM', stints: [{ compound: 'Medium', laps: 20 }, { compound: 'Hard', laps: 38 }] },
61 | ];
62 | 
63 | // Mock data for driver comparison radar chart (Keep if DriverComparison uses it)
64 | export const driverComparisonData = [
65 |     { attribute: 'Qualifying Pace', verstappen: 95, hamilton: 92 },
66 |     { attribute: 'Race Pace', verstappen: 98, hamilton: 96 },
67 |     { attribute: 'Consistency', verstappen: 90, hamilton: 94 },
68 |     { attribute: 'Tire Management', verstappen: 88, hamilton: 95 },
69 |     { attribute: 'Overtaking', verstappen: 96, hamilton: 93 },
70 |     { attribute: 'Wet Weather', verstappen: 92, hamilton: 97 },
71 | ];
72 | 
73 | // Remove old helper functions if they are no longer needed
74 | // export const getTeamStandings = (year: number): TeamStanding[] => { ... };
75 | // export const getDriverStandings = (year: number): DriverStanding[] => { ... };
76 |

--------------------------------------------------------------------------------
/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Drawer as DrawerPrimitive } from "vaul"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | 
  6 | const Drawer = ({
  7 |   shouldScaleBackground = true,
  8 |   ...props
  9 | }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
 10 |   <DrawerPrimitive.Root
 11 |     shouldScaleBackground={shouldScaleBackground}
 12 |     {...props}
 13 |   />
 14 | )
 15 | Drawer.displayName = "Drawer"
 16 | 
 17 | const DrawerTrigger = DrawerPrimitive.Trigger
 18 | 
 19 | const DrawerPortal = DrawerPrimitive.Portal
 20 | 
 21 | const DrawerClose = DrawerPrimitive.Close
 22 | 
 23 | const DrawerOverlay = React.forwardRef<
 24 |   React.ElementRef<typeof DrawerPrimitive.Overlay>,
 25 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 26 | >(({ className, ...props }, ref) => (
 27 |   <DrawerPrimitive.Overlay
 28 |     ref={ref}
 29 |     className={cn("fixed inset-0 z-50 bg-black/80", className)}
 30 |     {...props}
 31 |   />
 32 | ))
 33 | DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 34 | 
 35 | const DrawerContent = React.forwardRef<
 36 |   React.ElementRef<typeof DrawerPrimitive.Content>,
 37 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 38 | >(({ className, children, ...props }, ref) => (
 39 |   <DrawerPortal>
 40 |     <DrawerOverlay />
 41 |     <DrawerPrimitive.Content
 42 |       ref={ref}
 43 |       className={cn(
 44 |         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
 45 |         className
 46 |       )}
 47 |       {...props}
 48 |     >
 49 |       <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
 50 |       {children}
 51 |     </DrawerPrimitive.Content>
 52 |   </DrawerPortal>
 53 | ))
 54 | DrawerContent.displayName = "DrawerContent"
 55 | 
 56 | const DrawerHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
 62 |     {...props}
 63 |   />
 64 | )
 65 | DrawerHeader.displayName = "DrawerHeader"
 66 | 
 67 | const DrawerFooter = ({
 68 |   className,
 69 |   ...props
 70 | }: React.HTMLAttributes<HTMLDivElement>) => (
 71 |   <div
 72 |     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 73 |     {...props}
 74 |   />
 75 | )
 76 | DrawerFooter.displayName = "DrawerFooter"
 77 | 
 78 | const DrawerTitle = React.forwardRef<
 79 |   React.ElementRef<typeof DrawerPrimitive.Title>,
 80 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 81 | >(({ className, ...props }, ref) => (
 82 |   <DrawerPrimitive.Title
 83 |     ref={ref}
 84 |     className={cn(
 85 |       "text-lg font-semibold leading-none tracking-tight",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 92 | 
 93 | const DrawerDescription = React.forwardRef<
 94 |   React.ElementRef<typeof DrawerPrimitive.Description>,
 95 |   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 96 | >(({ className, ...props }, ref) => (
 97 |   <DrawerPrimitive.Description
 98 |     ref={ref}
 99 |     className={cn("text-sm text-muted-foreground", className)}
100 |     {...props}
101 |   />
102 | ))
103 | DrawerDescription.displayName = DrawerPrimitive.Description.displayName
104 | 
105 | export {
106 |   Drawer,
107 |   DrawerPortal,
108 |   DrawerOverlay,
109 |   DrawerTrigger,
110 |   DrawerClose,
111 |   DrawerContent,
112 |   DrawerHeader,
113 |   DrawerFooter,
114 |   DrawerTitle,
115 |   DrawerDescription,
116 | }
117 |

--------------------------------------------------------------------------------
/src/components/MobileWarningBanner.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { AlertCircle, X } from 'lucide-react';
  3 | import { cn } from '@/lib/utils';
  4 | 
  5 | interface MobileWarningBannerProps {
  6 |   id: string; // Unique identifier for this warning
  7 |   expiresInDays?: number; // How many days before showing the warning again
  8 |   className?: string;
  9 | }
 10 | 
 11 | const MobileWarningBanner: React.FC<MobileWarningBannerProps> = ({
 12 |   id,
 13 |   expiresInDays = 1,
 14 |   className
 15 | }) => {
 16 |   const [isVisible, setIsVisible] = useState(false);
 17 |   const [isMobile, setIsMobile] = useState(false);
 18 |   
 19 |   // Check if the device is mobile based on screen size
 20 |   useEffect(() => {
 21 |     const checkIfMobile = () => {
 22 |       setIsMobile(window.innerWidth < 768);
 23 |     };
 24 |     
 25 |     // Initial check
 26 |     checkIfMobile();
 27 |     
 28 |     // Add event listener for window resize
 29 |     window.addEventListener('resize', checkIfMobile);
 30 |     
 31 |     // Cleanup
 32 |     return () => window.removeEventListener('resize', checkIfMobile);
 33 |   }, []);
 34 |   
 35 |   useEffect(() => {
 36 |     if (!isMobile) {
 37 |       setIsVisible(false);
 38 |       return;
 39 |     }
 40 |     
 41 |     // Check if this warning has been dismissed
 42 |     const dismissedWarnings = JSON.parse(localStorage.getItem('dismissedWarnings') || '{}');
 43 |     
 44 |     // If there's an expiry date stored, check if it's passed
 45 |     if (dismissedWarnings[id]) {
 46 |       const expiryDate = new Date(dismissedWarnings[id]);
 47 |       if (new Date() > expiryDate) {
 48 |         // Expired, show again
 49 |         delete dismissedWarnings[id];
 50 |         localStorage.setItem('dismissedWarnings', JSON.stringify(dismissedWarnings));
 51 |         setIsVisible(true);
 52 |       } else {
 53 |         // Not expired, keep hidden
 54 |         setIsVisible(false);
 55 |       }
 56 |     } else {
 57 |       // Never dismissed, show it
 58 |       setIsVisible(true);
 59 |     }
 60 |   }, [id, expiresInDays, isMobile]);
 61 |   
 62 |   const dismissWarning = () => {
 63 |     const dismissedWarnings = JSON.parse(localStorage.getItem('dismissedWarnings') || '{}');
 64 |     
 65 |     // Set expiry date
 66 |     const expiryDate = new Date();
 67 |     expiryDate.setDate(expiryDate.getDate() + expiresInDays);
 68 |     
 69 |     dismissedWarnings[id] = expiryDate.toISOString();
 70 |     localStorage.setItem('dismissedWarnings', JSON.stringify(dismissedWarnings));
 71 |     
 72 |     setIsVisible(false);
 73 |   };
 74 |   
 75 |   if (!isVisible || !isMobile) return null;
 76 |   
 77 |   return (
 78 |     <div className={cn(
 79 |       "bg-amber-950/80 border border-amber-500/30 text-amber-100 py-3 px-4 rounded-lg shadow-lg mb-6 relative backdrop-blur-sm",
 80 |       className
 81 |     )}>
 82 |       <div className="flex items-start">
 83 |         <AlertCircle className="h-5 w-5 text-amber-300 mr-3 mt-0.5 flex-shrink-0" />
 84 |         <div className="flex-1">
 85 |           <h3 className="font-bold text-base text-amber-200">Best viewed on desktop</h3>
 86 |           <p className="text-amber-100 my-1 text-sm">
 87 |             For the best experience with charts and data visualizations, we recommend using a larger screen.
 88 |           </p>
 89 |         </div>
 90 |         <button 
 91 |           onClick={dismissWarning}
 92 |           className="text-amber-200 hover:text-white ml-2 p-1 flex-shrink-0"
 93 |           aria-label="Dismiss"
 94 |         >
 95 |           <X className="h-5 w-5" />
 96 |         </button>
 97 |       </div>
 98 |     </div>
 99 |   );
100 | };
101 | 
102 | export default MobileWarningBanner;

--------------------------------------------------------------------------------
/src/pages/FAQ.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Navbar from '@/components/Navbar'; // Assuming a standard Navbar
 3 | import { ArrowLeft } from 'lucide-react';
 4 | import { Button } from '@/components/ui/button';
 5 | import { useNavigate } from 'react-router-dom';
 6 | import {
 7 |   Accordion,
 8 |   AccordionContent,
 9 |   AccordionItem,
10 |   AccordionTrigger,
11 | } from "@/components/ui/accordion"; // Import Accordion components
12 | 
13 | const faqs = [
14 |   {
15 |     question: "What data sources does Fastlytics use?",
16 |     answer: "Fastlytics primarily uses the FastF1 Python library, which accesses publicly available Formula 1 timing data, weather data, and session information. Data accuracy is dependent on these upstream sources.",
17 |   },
18 |   {
19 |     question: "How often is the data updated?",
20 |     answer: "Historical data (results, standings, charts) is pre-processed and cached by the backend script. The backend script needs to be run periodically to update historical data for completed events.",
21 |   },
22 |   {
23 |     question: "Is Fastlytics affiliated with Formula 1?",
24 |     answer: "No, Fastlytics is an independent project and is not affiliated with, endorsed by, or associated with Formula One group companies. F1, FORMULA ONE, FORMULA 1, FIA FORMULA ONE WORLD CHAMPIONSHIP, GRAND PRIX and related marks are trade marks of Formula One Licensing B.V.",
25 |   },
26 |   {
27 |     question: "Why is some data missing or unavailable?",
28 |     answer: "Data availability depends on the upstream sources accessed by the FastF1 library. Sometimes, specific telemetry channels or historical data points might not be available for certain sessions or years. Additionally, the backend processor script must be run successfully to generate cached data.",
29 |   },
30 |   {
31 |     question: "How can I report a bug or suggest a feature?",
32 |     answer: "Please use the project's GitHub repository issue tracker.",
33 |   },
34 |   {
35 |     question: "How is my account data secured?",
36 |     answer: "We use Supabase for authentication and database management. Passwords are hashed, and we implement security measures to protect your data. Please refer to our Privacy Policy for more details.",
37 |   },
38 | ];
39 | 
40 | const FAQ = () => {
41 |   const navigate = useNavigate();
42 | 
43 |   return (
44 |     <div className="min-h-screen bg-gradient-to-b from-gray-950 via-black to-gray-950 text-white">
45 |       <Navbar />
46 |       <div className="container mx-auto px-4 md:px-8 py-12 max-w-4xl">
47 |          <Button
48 |           variant="ghost"
49 |           size="icon"
50 |           className="absolute top-20 left-4 md:left-8 text-gray-300 hover:bg-gray-800 hover:text-white z-10"
51 |           onClick={() => navigate(-1)} // Go back to previous page
52 |         >
53 |           <ArrowLeft className="h-5 w-5" />
54 |         </Button>
55 | 
56 |         <h1 className="text-3xl md:text-4xl font-bold text-center mb-10 text-white tracking-tight">Frequently Asked Questions</h1>
57 | 
58 |         <Accordion type="single" collapsible className="w-full space-y-4">
59 |           {faqs.map((faq, index) => (
60 |             <AccordionItem
61 |               key={index}
62 |               value={`item-${index}`}
63 |               className="bg-gray-900/50 border border-gray-700/80 rounded-lg px-4 md:px-6 transition-colors hover:bg-gray-800/70"
64 |             >
65 |               <AccordionTrigger className="text-left text-base md:text-lg font-medium hover:no-underline text-gray-100 py-4">
66 |                 {faq.question}
67 |               </AccordionTrigger>
68 |               <AccordionContent className="text-gray-300 text-sm md:text-base pb-4">
69 |                 {faq.answer}
70 |               </AccordionContent>
71 |             </AccordionItem>
72 |           ))}
73 |         </Accordion>
74 |       </div>
75 |     </div>
76 |   );
77 | };
78 | 
79 | export default FAQ;
80 |

--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  3 | import { X } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const Dialog = DialogPrimitive.Root
  8 | 
  9 | const DialogTrigger = DialogPrimitive.Trigger
 10 | 
 11 | const DialogPortal = DialogPrimitive.Portal
 12 | 
 13 | const DialogClose = DialogPrimitive.Close
 14 | 
 15 | const DialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <DialogPrimitive.Overlay
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ))
 28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 29 | 
 30 | const DialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof DialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 33 | >(({ className, children, ...props }, ref) => (
 34 |   <DialogPortal>
 35 |     <DialogOverlay />
 36 |     <DialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     >
 44 |       {children}
 45 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 46 |         <X className="h-4 w-4" />
 47 |         <span className="sr-only">Close</span>
 48 |       </DialogPrimitive.Close>
 49 |     </DialogPrimitive.Content>
 50 |   </DialogPortal>
 51 | ))
 52 | DialogContent.displayName = DialogPrimitive.Content.displayName
 53 | 
 54 | const DialogHeader = ({
 55 |   className,
 56 |   ...props
 57 | }: React.HTMLAttributes<HTMLDivElement>) => (
 58 |   <div
 59 |     className={cn(
 60 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 61 |       className
 62 |     )}
 63 |     {...props}
 64 |   />
 65 | )
 66 | DialogHeader.displayName = "DialogHeader"
 67 | 
 68 | const DialogFooter = ({
 69 |   className,
 70 |   ...props
 71 | }: React.HTMLAttributes<HTMLDivElement>) => (
 72 |   <div
 73 |     className={cn(
 74 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 75 |       className
 76 |     )}
 77 |     {...props}
 78 |   />
 79 | )
 80 | DialogFooter.displayName = "DialogFooter"
 81 | 
 82 | const DialogTitle = React.forwardRef<
 83 |   React.ElementRef<typeof DialogPrimitive.Title>,
 84 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 85 | >(({ className, ...props }, ref) => (
 86 |   <DialogPrimitive.Title
 87 |     ref={ref}
 88 |     className={cn(
 89 |       "text-lg font-semibold leading-none tracking-tight",
 90 |       className
 91 |     )}
 92 |     {...props}
 93 |   />
 94 | ))
 95 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 96 | 
 97 | const DialogDescription = React.forwardRef<
 98 |   React.ElementRef<typeof DialogPrimitive.Description>,
 99 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
100 | >(({ className, ...props }, ref) => (
101 |   <DialogPrimitive.Description
102 |     ref={ref}
103 |     className={cn("text-sm text-muted-foreground", className)}
104 |     {...props}
105 |   />
106 | ))
107 | DialogDescription.displayName = DialogPrimitive.Description.displayName
108 | 
109 | export {
110 |   Dialog,
111 |   DialogPortal,
112 |   DialogOverlay,
113 |   DialogClose,
114 |   DialogTrigger,
115 |   DialogContent,
116 |   DialogHeader,
117 |   DialogFooter,
118 |   DialogTitle,
119 |   DialogDescription,
120 | }
121 |

--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | import type { Config } from "tailwindcss";
  3 | 
  4 | export default {
  5 | 	darkMode: ["class"],
  6 | 	content: [
  7 | 		"./pages/**/*.{ts,tsx}",
  8 | 		"./components/**/*.{ts,tsx}",
  9 | 		"./app/**/*.{ts,tsx}",
 10 | 		"./src/**/*.{ts,tsx}",
 11 | 	],
 12 | 	prefix: "",
 13 | 	theme: {
 14 | 		container: {
 15 | 			center: true,
 16 | 			padding: '2rem',
 17 | 			screens: {
 18 | 				'2xl': '1400px'
 19 | 			}
 20 | 		},
 21 | 		extend: {
 22 | 			colors: {
 23 | 				border: 'hsl(var(--border))',
 24 | 				input: 'hsl(var(--input))',
 25 | 				ring: 'hsl(var(--ring))',
 26 | 				background: 'hsl(var(--background))',
 27 | 				foreground: 'hsl(var(--foreground))',
 28 | 				primary: {
 29 | 					DEFAULT: 'hsl(var(--primary))',
 30 | 					foreground: 'hsl(var(--primary-foreground))'
 31 | 				},
 32 | 				secondary: {
 33 | 					DEFAULT: 'hsl(var(--secondary))',
 34 | 					foreground: 'hsl(var(--secondary-foreground))'
 35 | 				},
 36 | 				destructive: {
 37 | 					DEFAULT: 'hsl(var(--destructive))',
 38 | 					foreground: 'hsl(var(--destructive-foreground))'
 39 | 				},
 40 | 				muted: {
 41 | 					DEFAULT: 'hsl(var(--muted))',
 42 | 					foreground: 'hsl(var(--muted-foreground))'
 43 | 				},
 44 | 				accent: {
 45 | 					DEFAULT: 'hsl(var(--accent))',
 46 | 					foreground: 'hsl(var(--accent-foreground))'
 47 | 				},
 48 | 				popover: {
 49 | 					DEFAULT: 'hsl(var(--popover))',
 50 | 					foreground: 'hsl(var(--popover-foreground))'
 51 | 				},
 52 | 				card: {
 53 | 					DEFAULT: 'hsl(var(--card))',
 54 | 					foreground: 'hsl(var(--card-foreground))'
 55 | 				},
 56 | 				// F1 team colors
 57 | 				f1: {
 58 | 					ferrari: '#ff2800',
 59 | 					mercedes: '#6c779f',
 60 | 					mclaren: '#ff8700',
 61 | 					redbull: '#1e41ff',
 62 | 					astonmartin: '#00594f',
 63 | 					alpine: '#0090ff',
 64 | 					williams: '#0093d0',
 65 | 					haas: '#ffffff',
 66 | 					alfaromeo: '#900000',
 67 | 					alphatauri: '#4e7c9b',
 68 | 				},
 69 | 				// Tire compounds
 70 | 				tire: {
 71 | 					soft: '#ff2800',
 72 | 					medium: '#ffcc00',
 73 | 					hard: '#ffffff',
 74 | 					intermediate: '#43b02a',
 75 | 					wet: '#0067ad',
 76 | 				}
 77 | 			},
 78 | 			fontFamily: {
 79 | 				sans: ['Space Grotesk', 'Inter', 'sans-serif'],
 80 | 			},
 81 | 			borderRadius: {
 82 | 				lg: 'var(--radius)',
 83 | 				md: 'calc(var(--radius) - 2px)',
 84 | 				sm: 'calc(var(--radius) - 4px)'
 85 | 			},
 86 | 			keyframes: {
 87 | 				'accordion-down': {
 88 | 					from: { height: '0' },
 89 | 					to: { height: 'var(--radix-accordion-content-height)' },
 90 | 				},
 91 | 				'accordion-up': {
 92 | 					from: { height: 'var(--radix-accordion-content-height)' },
 93 | 					to: { height: '0' },
 94 | 				},
 95 | 				'pulse-glow': {
 96 | 					'0%, 100%': { boxShadow: '0 0 0 0 rgba(255, 40, 0, 0)' },
 97 | 					'50%': { boxShadow: '0 0 15px 3px rgba(255, 40, 0, 0.6)' },
 98 | 				},
 99 | 				'telemetry-in': {
100 | 					'0%': { transform: 'scaleX(0)', opacity: '0', transformOrigin: 'left' },
101 | 					'100%': { transform: 'scaleX(1)', opacity: '1', transformOrigin: 'left' }
102 | 				},
103 | 				'slide-in-right': {
104 | 					'0%': { transform: 'translateX(100%)', opacity: '0' },
105 | 					'100%': { transform: 'translateX(0)', opacity: '1' }
106 | 				},
107 | 				'slide-in-left': {
108 | 					'0%': { transform: 'translateX(-100%)', opacity: '0' },
109 | 					'100%': { transform: 'translateX(0)', opacity: '1' }
110 | 				},
111 | 				'fade-in': {
112 | 					'0%': { opacity: '0' },
113 | 					'100%': { opacity: '1' }
114 | 				},
115 | 				'loading-track': {
116 | 					'0%': { strokeDashoffset: '100' },
117 | 					'100%': { strokeDashoffset: '0' }
118 | 				}
119 | 			},
120 | 			animation: {
121 | 				'accordion-down': 'accordion-down 0.2s ease-out',
122 | 				'accordion-up': 'accordion-up 0.2s ease-out',
123 | 				'pulse-glow': 'pulse-glow 2s infinite',
124 | 				'telemetry-in': 'telemetry-in 0.6s ease-out forwards',
125 | 				'slide-in-right': 'slide-in-right 0.5s ease-out forwards',
126 | 				'slide-in-left': 'slide-in-left 0.5s ease-out forwards',
127 | 				'fade-in': 'fade-in 0.5s ease-out forwards',
128 | 				'loading-track': 'loading-track 2s ease-in-out forwards'
129 | 			},
130 | 			backgroundImage: {
131 | 				'carbon-fiber': 'url("data:image/svg+xml,%3Csvg width=\'40\' height=\'40\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23151515\' fill-opacity=\'0.7\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M0 20L20 0h10L0 30zM30 0L0 30v10L40 0zM0 0h10L0 10z\'/%3E%3C/g%3E%3C/svg%3E")',
132 | 			}
133 | 		}
134 | 	},
135 | 	plugins: [require("tailwindcss-animate")],
136 | } satisfies Config;
137 |

--------------------------------------------------------------------------------
/src/components/DiscordCommunityBanner.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { ArrowRight, Users, MessageCircle } from 'lucide-react';
 3 | import { cn } from '@/lib/utils';
 4 | 
 5 | interface DiscordCommunityBannerProps {
 6 |   className?: string;
 7 | }
 8 | 
 9 | const DiscordCommunityBanner: React.FC<DiscordCommunityBannerProps> = ({
10 |   className
11 | }) => {
12 |   return (
13 |     <div className={cn(
14 |       "bg-gradient-to-r from-gray-900 via-gray-900/95 to-gray-900 text-white py-4 px-5 rounded-lg shadow-lg border border-gray-700/50 mb-6 relative backdrop-blur-sm",
15 |       className
16 |     )}>
17 |       <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
18 |         {/* Accurate Discord logo SVG */}
19 |         <div className="flex-shrink-0 bg-[#5865F2]/10 p-3 rounded-full border border-[#5865F2]/20">
20 |           <svg 
21 |             width="28" 
22 |             height="22" 
23 |             viewBox="0 0 28 22" 
24 |             fill="none" 
25 |             xmlns="http://www.w3.org/2000/svg"
26 |             className="h-7 w-7 text-[#5865F2]"
27 |           >
28 |             <path d="M23.7187 1.84344C21.9054 0.997185 19.9603 0.380116 17.9207 0.0309116C17.8975 0.0262264 17.8743 0.0356183 17.863 0.0567879C17.6189 0.486116 17.3476 1.04356 17.1549 1.48388C15.003 1.15824 12.8628 1.15824 10.7544 1.48388C10.5617 1.0388 10.2811 0.486116 10.0354 0.0567879C10.0242 0.0371612 10.001 0.0277693 9.97778 0.0309116C7.93906 0.379178 5.99406 0.996247 4.17968 1.84344C4.17031 1.84813 4.16187 1.85563 4.15625 1.86501C0.607492 7.15138 -0.362915 12.2988 0.112492 17.3902C0.114367 17.4089 0.124054 17.4277 0.137492 17.4387C2.46406 19.178 4.71562 20.2589 6.92187 20.9761C6.94531 20.9839 6.97031 20.9761 6.98437 20.9574C7.49843 20.238 7.9594 19.4801 8.35625 18.6839C8.37187 18.6527 8.35625 18.6152 8.32343 18.6027C7.59375 18.3199 6.89687 17.9801 6.22812 17.5949C6.19218 17.573 6.18906 17.5215 6.22187 17.4965C6.35781 17.3933 6.49375 17.2855 6.62343 17.1762C6.6375 17.1652 6.65625 17.1621 6.67187 17.1699C11.0772 19.2324 15.8344 19.2324 20.1844 17.1699C20.2 17.1621 20.2187 17.1652 20.2328 17.1777C20.3625 17.2855 20.4984 17.3933 20.6359 17.4965C20.6687 17.5215 20.6672 17.573 20.6312 17.5949C19.9625 17.9886 19.2656 18.3199 18.5344 18.6011C18.5016 18.6136 18.4875 18.6527 18.5031 18.6839C18.9094 19.4801 19.3703 20.2363 19.8734 20.9558C19.8859 20.9761 19.9125 20.9839 19.9359 20.9761C22.1531 20.2589 24.4047 19.178 26.7312 17.4387C26.7453 17.4277 26.7547 17.4105 26.7562 17.3917C27.3297 11.5152 25.7937 6.41267 23.8234 1.86657C23.8187 1.85563 23.8102 1.84813 23.7984 1.84344H23.7187ZM9.0625 14.2652C7.7125 14.2652 6.60312 13.0351 6.60312 11.5277C6.60312 10.0199 7.69375 8.79013 9.0625 8.79013C10.4422 8.79013 11.5422 10.0324 11.5312 11.5277C11.5312 13.0351 10.4312 14.2652 9.0625 14.2652ZM18.9609 14.2652C17.6109 14.2652 16.5015 13.0351 16.5015 11.5277C16.5015 10.0199 17.5922 8.79013 18.9609 8.79013C20.3406 8.79013 21.4406 10.0324 21.4297 11.5277C21.4297 13.0351 20.3406 14.2652 18.9609 14.2652Z" fill="currentColor"/>
29 |           </svg>
30 |         </div>
31 |         
32 |         <div className="flex-1">
33 |           <h3 className="font-bold text-lg text-white mb-2">Join Our Discord Community!</h3>
34 |           <p className="text-gray-300 mb-3">Connect with other F1 fans, discuss races, share analysis, and get the latest updates from the Fastlytics team. We're building a community of passionate Formula 1 fans who love data.</p>
35 |           
36 |           <div className="flex flex-wrap gap-4 mt-2">
37 |             <div className="flex items-center gap-2 bg-gray-800/70 px-3 py-1.5 rounded-md border border-gray-700/50">
38 |               <Users className="h-4 w-4 text-red-400" />
39 |               <span className="text-gray-200 text-sm">100+ Members</span>
40 |             </div>
41 |             <div className="flex items-center gap-2 bg-gray-800/70 px-3 py-1.5 rounded-md border border-gray-700/50">
42 |               <MessageCircle className="h-4 w-4 text-red-400" />
43 |               <span className="text-gray-200 text-sm">Active Discussions</span>
44 |             </div>
45 |             <a 
46 |               href="https://discord.gg/bSEGSMwFDn" 
47 |               target="_blank"
48 |               rel="noopener noreferrer"
49 |               className="inline-flex items-center bg-[#5865F2]/90 hover:bg-[#5865F2] text-white font-medium px-4 py-1.5 rounded-md transition-colors duration-200"
50 |             >
51 |               Join now <ArrowRight className="ml-1.5 h-3.5 w-3.5" />
52 |             </a>
53 |           </div>
54 |         </div>
55 |       </div>
56 |     </div>
57 |   );
58 | };
59 | 
60 | export default DiscordCommunityBanner;

--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  2 | import { cva, type VariantProps } from "class-variance-authority"
  3 | import { X } from "lucide-react"
  4 | import * as React from "react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const Sheet = SheetPrimitive.Root
  9 | 
 10 | const SheetTrigger = SheetPrimitive.Trigger
 11 | 
 12 | const SheetClose = SheetPrimitive.Close
 13 | 
 14 | const SheetPortal = SheetPrimitive.Portal
 15 | 
 16 | const SheetOverlay = React.forwardRef<
 17 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 18 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 19 | >(({ className, ...props }, ref) => (
 20 |   <SheetPrimitive.Overlay
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |     ref={ref}
 27 |   />
 28 | ))
 29 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 30 | 
 31 | const sheetVariants = cva(
 32 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 33 |   {
 34 |     variants: {
 35 |       side: {
 36 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 37 |         bottom:
 38 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 39 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 40 |         right:
 41 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 42 |       },
 43 |     },
 44 |     defaultVariants: {
 45 |       side: "right",
 46 |     },
 47 |   }
 48 | )
 49 | 
 50 | interface SheetContentProps
 51 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 52 |   VariantProps<typeof sheetVariants> { }
 53 | 
 54 | const SheetContent = React.forwardRef<
 55 |   React.ElementRef<typeof SheetPrimitive.Content>,
 56 |   SheetContentProps
 57 | >(({ side = "right", className, children, ...props }, ref) => (
 58 |   <SheetPortal>
 59 |     <SheetOverlay />
 60 |     <SheetPrimitive.Content
 61 |       ref={ref}
 62 |       className={cn(sheetVariants({ side }), className)}
 63 |       {...props}
 64 |     >
 65 |       {children}
 66 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 67 |         <X className="h-4 w-4" />
 68 |         <span className="sr-only">Close</span>
 69 |       </SheetPrimitive.Close>
 70 |     </SheetPrimitive.Content>
 71 |   </SheetPortal>
 72 | ))
 73 | SheetContent.displayName = SheetPrimitive.Content.displayName
 74 | 
 75 | const SheetHeader = ({
 76 |   className,
 77 |   ...props
 78 | }: React.HTMLAttributes<HTMLDivElement>) => (
 79 |   <div
 80 |     className={cn(
 81 |       "flex flex-col space-y-2 text-center sm:text-left",
 82 |       className
 83 |     )}
 84 |     {...props}
 85 |   />
 86 | )
 87 | SheetHeader.displayName = "SheetHeader"
 88 | 
 89 | const SheetFooter = ({
 90 |   className,
 91 |   ...props
 92 | }: React.HTMLAttributes<HTMLDivElement>) => (
 93 |   <div
 94 |     className={cn(
 95 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 96 |       className
 97 |     )}
 98 |     {...props}
 99 |   />
100 | )
101 | SheetFooter.displayName = "SheetFooter"
102 | 
103 | const SheetTitle = React.forwardRef<
104 |   React.ElementRef<typeof SheetPrimitive.Title>,
105 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
106 | >(({ className, ...props }, ref) => (
107 |   <SheetPrimitive.Title
108 |     ref={ref}
109 |     className={cn("text-lg font-semibold text-foreground", className)}
110 |     {...props}
111 |   />
112 | ))
113 | SheetTitle.displayName = SheetPrimitive.Title.displayName
114 | 
115 | const SheetDescription = React.forwardRef<
116 |   React.ElementRef<typeof SheetPrimitive.Description>,
117 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
118 | >(({ className, ...props }, ref) => (
119 |   <SheetPrimitive.Description
120 |     ref={ref}
121 |     className={cn("text-sm text-muted-foreground", className)}
122 |     {...props}
123 |   />
124 | ))
125 | SheetDescription.displayName = SheetPrimitive.Description.displayName
126 | 
127 | export {
128 |   Sheet, SheetClose,
129 |   SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger
130 | }
131 | 
132 |

--------------------------------------------------------------------------------
/src/hooks/use-toast.ts:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import type {
  4 |   ToastActionElement,
  5 |   ToastProps,
  6 | } from "@/components/ui/toast"
  7 | 
  8 | const TOAST_LIMIT = 1
  9 | const TOAST_REMOVE_DELAY = 1000000
 10 | 
 11 | type ToasterToast = ToastProps & {
 12 |   id: string
 13 |   title?: React.ReactNode
 14 |   description?: React.ReactNode
 15 |   action?: ToastActionElement
 16 | }
 17 | 
 18 | const actionTypes = {
 19 |   ADD_TOAST: "ADD_TOAST",
 20 |   UPDATE_TOAST: "UPDATE_TOAST",
 21 |   DISMISS_TOAST: "DISMISS_TOAST",
 22 |   REMOVE_TOAST: "REMOVE_TOAST",
 23 | } as const
 24 | 
 25 | let count = 0
 26 | 
 27 | function genId() {
 28 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 29 |   return count.toString()
 30 | }
 31 | 
 32 | type ActionType = typeof actionTypes
 33 | 
 34 | type Action =
 35 |   | {
 36 |       type: ActionType["ADD_TOAST"]
 37 |       toast: ToasterToast
 38 |     }
 39 |   | {
 40 |       type: ActionType["UPDATE_TOAST"]
 41 |       toast: Partial<ToasterToast>
 42 |     }
 43 |   | {
 44 |       type: ActionType["DISMISS_TOAST"]
 45 |       toastId?: ToasterToast["id"]
 46 |     }
 47 |   | {
 48 |       type: ActionType["REMOVE_TOAST"]
 49 |       toastId?: ToasterToast["id"]
 50 |     }
 51 | 
 52 | interface State {
 53 |   toasts: ToasterToast[]
 54 | }
 55 | 
 56 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 57 | 
 58 | const addToRemoveQueue = (toastId: string) => {
 59 |   if (toastTimeouts.has(toastId)) {
 60 |     return
 61 |   }
 62 | 
 63 |   const timeout = setTimeout(() => {
 64 |     toastTimeouts.delete(toastId)
 65 |     dispatch({
 66 |       type: "REMOVE_TOAST",
 67 |       toastId: toastId,
 68 |     })
 69 |   }, TOAST_REMOVE_DELAY)
 70 | 
 71 |   toastTimeouts.set(toastId, timeout)
 72 | }
 73 | 
 74 | export const reducer = (state: State, action: Action): State => {
 75 |   switch (action.type) {
 76 |     case "ADD_TOAST":
 77 |       return {
 78 |         ...state,
 79 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 80 |       }
 81 | 
 82 |     case "UPDATE_TOAST":
 83 |       return {
 84 |         ...state,
 85 |         toasts: state.toasts.map((t) =>
 86 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 87 |         ),
 88 |       }
 89 | 
 90 |     case "DISMISS_TOAST": {
 91 |       const { toastId } = action
 92 | 
 93 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 94 |       // but I'll keep it here for simplicity
 95 |       if (toastId) {
 96 |         addToRemoveQueue(toastId)
 97 |       } else {
 98 |         state.toasts.forEach((toast) => {
 99 |           addToRemoveQueue(toast.id)
100 |         })
101 |       }
102 | 
103 |       return {
104 |         ...state,
105 |         toasts: state.toasts.map((t) =>
106 |           t.id === toastId || toastId === undefined
107 |             ? {
108 |                 ...t,
109 |                 open: false,
110 |               }
111 |             : t
112 |         ),
113 |       }
114 |     }
115 |     case "REMOVE_TOAST":
116 |       if (action.toastId === undefined) {
117 |         return {
118 |           ...state,
119 |           toasts: [],
120 |         }
121 |       }
122 |       return {
123 |         ...state,
124 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
125 |       }
126 |   }
127 | }
128 | 
129 | const listeners: Array<(state: State) => void> = []
130 | 
131 | let memoryState: State = { toasts: [] }
132 | 
133 | function dispatch(action: Action) {
134 |   memoryState = reducer(memoryState, action)
135 |   listeners.forEach((listener) => {
136 |     listener(memoryState)
137 |   })
138 | }
139 | 
140 | type Toast = Omit<ToasterToast, "id">
141 | 
142 | function toast({ ...props }: Toast) {
143 |   const id = genId()
144 | 
145 |   const update = (props: ToasterToast) =>
146 |     dispatch({
147 |       type: "UPDATE_TOAST",
148 |       toast: { ...props, id },
149 |     })
150 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
151 | 
152 |   dispatch({
153 |     type: "ADD_TOAST",
154 |     toast: {
155 |       ...props,
156 |       id,
157 |       open: true,
158 |       onOpenChange: (open) => {
159 |         if (!open) dismiss()
160 |       },
161 |     },
162 |   })
163 | 
164 |   return {
165 |     id: id,
166 |     dismiss,
167 |     update,
168 |   }
169 | }
170 | 
171 | function useToast() {
172 |   const [state, setState] = React.useState<State>(memoryState)
173 | 
174 |   React.useEffect(() => {
175 |     listeners.push(setState)
176 |     return () => {
177 |       const index = listeners.indexOf(setState)
178 |       if (index > -1) {
179 |         listeners.splice(index, 1)
180 |       }
181 |     }
182 |   }, [state])
183 | 
184 |   return {
185 |     ...state,
186 |     toast,
187 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
188 |   }
189 | }
190 | 
191 | export { useToast, toast }
192 |

--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-destructive", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-sm text-muted-foreground", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-sm font-medium text-destructive", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 |

--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | import { buttonVariants } from "@/components/ui/button"
  6 | 
  7 | const AlertDialog = AlertDialogPrimitive.Root
  8 | 
  9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 10 | 
 11 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 12 | 
 13 | const AlertDialogOverlay = React.forwardRef<
 14 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 15 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 16 | >(({ className, ...props }, ref) => (
 17 |   <AlertDialogPrimitive.Overlay
 18 |     className={cn(
 19 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |     ref={ref}
 24 |   />
 25 | ))
 26 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 27 | 
 28 | const AlertDialogContent = React.forwardRef<
 29 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 30 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 31 | >(({ className, ...props }, ref) => (
 32 |   <AlertDialogPortal>
 33 |     <AlertDialogOverlay />
 34 |     <AlertDialogPrimitive.Content
 35 |       ref={ref}
 36 |       className={cn(
 37 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 38 |         className
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   </AlertDialogPortal>
 43 | ))
 44 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 45 | 
 46 | const AlertDialogHeader = ({
 47 |   className,
 48 |   ...props
 49 | }: React.HTMLAttributes<HTMLDivElement>) => (
 50 |   <div
 51 |     className={cn(
 52 |       "flex flex-col space-y-2 text-center sm:text-left",
 53 |       className
 54 |     )}
 55 |     {...props}
 56 |   />
 57 | )
 58 | AlertDialogHeader.displayName = "AlertDialogHeader"
 59 | 
 60 | const AlertDialogFooter = ({
 61 |   className,
 62 |   ...props
 63 | }: React.HTMLAttributes<HTMLDivElement>) => (
 64 |   <div
 65 |     className={cn(
 66 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 67 |       className
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | )
 72 | AlertDialogFooter.displayName = "AlertDialogFooter"
 73 | 
 74 | const AlertDialogTitle = React.forwardRef<
 75 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 76 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 77 | >(({ className, ...props }, ref) => (
 78 |   <AlertDialogPrimitive.Title
 79 |     ref={ref}
 80 |     className={cn("text-lg font-semibold", className)}
 81 |     {...props}
 82 |   />
 83 | ))
 84 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 85 | 
 86 | const AlertDialogDescription = React.forwardRef<
 87 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 88 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 89 | >(({ className, ...props }, ref) => (
 90 |   <AlertDialogPrimitive.Description
 91 |     ref={ref}
 92 |     className={cn("text-sm text-muted-foreground", className)}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | AlertDialogDescription.displayName =
 97 |   AlertDialogPrimitive.Description.displayName
 98 | 
 99 | const AlertDialogAction = React.forwardRef<
100 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
101 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
102 | >(({ className, ...props }, ref) => (
103 |   <AlertDialogPrimitive.Action
104 |     ref={ref}
105 |     className={cn(buttonVariants(), className)}
106 |     {...props}
107 |   />
108 | ))
109 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
110 | 
111 | const AlertDialogCancel = React.forwardRef<
112 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
113 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
114 | >(({ className, ...props }, ref) => (
115 |   <AlertDialogPrimitive.Cancel
116 |     ref={ref}
117 |     className={cn(
118 |       buttonVariants({ variant: "outline" }),
119 |       "mt-2 sm:mt-0",
120 |       className
121 |     )}
122 |     {...props}
123 |   />
124 | ))
125 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
126 | 
127 | export {
128 |   AlertDialog,
129 |   AlertDialogPortal,
130 |   AlertDialogOverlay,
131 |   AlertDialogTrigger,
132 |   AlertDialogContent,
133 |   AlertDialogHeader,
134 |   AlertDialogFooter,
135 |   AlertDialogTitle,
136 |   AlertDialogDescription,
137 |   AlertDialogAction,
138 |   AlertDialogCancel,
139 | }
140 |

--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ToastPrimitives from "@radix-ui/react-toast"
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 18 |       className
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ))
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 24 | 
 25 | const toastVariants = cva(
 26 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: "border bg-background text-foreground",
 31 |         destructive:
 32 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: "default",
 37 |     },
 38 |   }
 39 | )
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   )
 53 | })
 54 | Toast.displayName = ToastPrimitives.Root.displayName
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 64 |       className
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 79 |       className
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <X className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ))
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn("text-sm font-semibold", className)}
 96 |     {...props}
 97 |   />
 98 | ))
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn("text-sm opacity-90", className)}
108 |     {...props}
109 |   />
110 | ))
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | }
128 |

--------------------------------------------------------------------------------
/src/components/TeamPaceTable.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableCaption } from "@/components/ui/table";
 3 | import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 4 | import { TeamPaceData } from '@/lib/api';
 5 | import { cn, formatTime } from '@/lib/utils'; // Assuming formatTime exists
 6 | 
 7 | // Helper function to get team color class (Should be centralized)
 8 | const getTeamColorClass = (teamName: string | undefined): string => {
 9 |     if (!teamName) return 'gray';
10 |     const simpleName = teamName.toLowerCase().replace(/[^a-z0-9]/g, '');
11 |     if (simpleName.includes('mclaren')) return 'mclaren';
12 |     if (simpleName.includes('mercedes')) return 'mercedes';
13 |     if (simpleName.includes('redbull')) return 'redbull';
14 |     if (simpleName.includes('ferrari')) return 'ferrari';
15 |     if (simpleName.includes('alpine')) return 'alpine';
16 |     if (simpleName.includes('astonmartin')) return 'astonmartin';
17 |     if (simpleName.includes('williams')) return 'williams';
18 |     if (simpleName.includes('haas')) return 'haas';
19 |     if (simpleName.includes('sauber') || simpleName.includes('kick')) return 'alfaromeo';
20 |     if (simpleName.includes('racingbulls') || simpleName.includes('rb') || simpleName.includes('visa')) return 'alphatauri';
21 |     return 'gray';
22 | }
23 | 
24 | interface TeamPaceTableProps {
25 |     teamPaceData?: TeamPaceData[];
26 | }
27 | 
28 | const TeamPaceTable: React.FC<TeamPaceTableProps> = ({ teamPaceData }) => {
29 |     if (!teamPaceData || teamPaceData.length === 0) {
30 |         return (
31 |             <Card className="bg-gray-900/70 border border-gray-700/80 backdrop-blur-sm mt-4">
32 |                 <CardHeader>
33 |                     <CardTitle className="text-lg font-semibold text-white">Team Race Pace Ranking</CardTitle>
34 |                     <CardDescription className="text-xs text-gray-400">Based on median time of laps within 107% of the fastest lap.</CardDescription>
35 |                 </CardHeader>
36 |                 <CardContent>
37 |                     <p className="text-sm text-gray-400">No team pace data available for this session.</p>
38 |                 </CardContent>
39 |             </Card>
40 |         );
41 |     }
42 | 
43 |     return (
44 |         <Card className="bg-gray-900/70 border border-gray-700/80 backdrop-blur-sm animate-fade-in mt-4">
45 |             <CardHeader>
46 |                 <CardTitle className="text-lg font-semibold text-white">Team Race Pace Ranking</CardTitle>
47 |                 <CardDescription className="text-xs text-gray-400">Based on median time of laps within 107% of the fastest lap.</CardDescription>
48 |             </CardHeader>
49 |             <CardContent>
50 |                 <div className="overflow-x-auto">
51 |                     <Table>
52 |                         <TableHeader className="bg-gray-800/50">
53 |                             <TableRow className="border-gray-700">
54 |                                 <TableHead className="w-[50px] text-center text-white font-semibold">Rank</TableHead>
55 |                                 <TableHead className="text-white font-semibold">Team</TableHead>
56 |                                 <TableHead className="w-[120px] text-right text-white font-semibold">Median Pace</TableHead>
57 |                                 <TableHead className="w-[120px] text-right text-white font-semibold">Average Pace</TableHead>
58 |                                 <TableHead className="w-[100px] text-right text-white font-semibold">Std Dev (s)</TableHead>
59 |                             </TableRow>
60 |                         </TableHeader>
61 |                         <TableBody>
62 |                             {teamPaceData.map((team) => {
63 |                                 const teamColor = getTeamColorClass(team.teamName);
64 |                                 return (
65 |                                     <TableRow key={team.teamName} className="border-gray-700/50 hover:bg-gray-800/40 transition-colors">
66 |                                         <TableCell className="text-center font-medium">{team.rank}</TableCell>
67 |                                         <TableCell>
68 |                                             <span className="flex items-center gap-2">
69 |                                                 <span className={cn("w-2 h-2 rounded-full", `bg-f1-${teamColor}`)}></span>
70 |                                                 {team.teamName}
71 |                                             </span>
72 |                                         </TableCell>
73 |                                         <TableCell className="text-right font-mono text-sm">{formatTime(team.medianTime)}</TableCell>
74 |                                         <TableCell className="text-right font-mono text-sm">{formatTime(team.averageTime)}</TableCell>
75 |                                         <TableCell className="text-right font-mono text-xs">{team.stdDev.toFixed(3)}</TableCell>
76 |                                     </TableRow>
77 |                                 );
78 |                             })}
79 |                         </TableBody>
80 |                         <TableCaption className="text-xs text-gray-500 pt-2">Std Dev indicates lap time consistency (lower is more consistent).</TableCaption>
81 |                     </Table>
82 |                 </div>
83 |             </CardContent>
84 |         </Card>
85 |     );
86 | };
87 | 
88 | export default TeamPaceTable;

--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { type DialogProps } from "@radix-ui/react-dialog"
  3 | import { Command as CommandPrimitive } from "cmdk"
  4 | import { Search } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { Dialog, DialogContent } from "@/components/ui/dialog"
  8 | 
  9 | const Command = React.forwardRef<
 10 |   React.ElementRef<typeof CommandPrimitive>,
 11 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 12 | >(({ className, ...props }, ref) => (
 13 |   <CommandPrimitive
 14 |     ref={ref}
 15 |     className={cn(
 16 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 17 |       className
 18 |     )}
 19 |     {...props}
 20 |   />
 21 | ))
 22 | Command.displayName = CommandPrimitive.displayName
 23 | 
 24 | interface CommandDialogProps extends DialogProps {}
 25 | 
 26 | const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 27 |   return (
 28 |     <Dialog {...props}>
 29 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 30 |         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 31 |           {children}
 32 |         </Command>
 33 |       </DialogContent>
 34 |     </Dialog>
 35 |   )
 36 | }
 37 | 
 38 | const CommandInput = React.forwardRef<
 39 |   React.ElementRef<typeof CommandPrimitive.Input>,
 40 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 41 | >(({ className, ...props }, ref) => (
 42 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 43 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 44 |     <CommandPrimitive.Input
 45 |       ref={ref}
 46 |       className={cn(
 47 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 48 |         className
 49 |       )}
 50 |       {...props}
 51 |     />
 52 |   </div>
 53 | ))
 54 | 
 55 | CommandInput.displayName = CommandPrimitive.Input.displayName
 56 | 
 57 | const CommandList = React.forwardRef<
 58 |   React.ElementRef<typeof CommandPrimitive.List>,
 59 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 60 | >(({ className, ...props }, ref) => (
 61 |   <CommandPrimitive.List
 62 |     ref={ref}
 63 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 64 |     {...props}
 65 |   />
 66 | ))
 67 | 
 68 | CommandList.displayName = CommandPrimitive.List.displayName
 69 | 
 70 | const CommandEmpty = React.forwardRef<
 71 |   React.ElementRef<typeof CommandPrimitive.Empty>,
 72 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 73 | >((props, ref) => (
 74 |   <CommandPrimitive.Empty
 75 |     ref={ref}
 76 |     className="py-6 text-center text-sm"
 77 |     {...props}
 78 |   />
 79 | ))
 80 | 
 81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 82 | 
 83 | const CommandGroup = React.forwardRef<
 84 |   React.ElementRef<typeof CommandPrimitive.Group>,
 85 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 86 | >(({ className, ...props }, ref) => (
 87 |   <CommandPrimitive.Group
 88 |     ref={ref}
 89 |     className={cn(
 90 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 91 |       className
 92 |     )}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | 
 97 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 98 | 
 99 | const CommandSeparator = React.forwardRef<
100 |   React.ElementRef<typeof CommandPrimitive.Separator>,
101 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
102 | >(({ className, ...props }, ref) => (
103 |   <CommandPrimitive.Separator
104 |     ref={ref}
105 |     className={cn("-mx-1 h-px bg-border", className)}
106 |     {...props}
107 |   />
108 | ))
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110 | 
111 | const CommandItem = React.forwardRef<
112 |   React.ElementRef<typeof CommandPrimitive.Item>,
113 |   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
114 | >(({ className, ...props }, ref) => (
115 |   <CommandPrimitive.Item
116 |     ref={ref}
117 |     className={cn(
118 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
119 |       className
120 |     )}
121 |     {...props}
122 |   />
123 | ))
124 | 
125 | CommandItem.displayName = CommandPrimitive.Item.displayName
126 | 
127 | const CommandShortcut = ({
128 |   className,
129 |   ...props
130 | }: React.HTMLAttributes<HTMLSpanElement>) => {
131 |   return (
132 |     <span
133 |       className={cn(
134 |         "ml-auto text-xs tracking-widest text-muted-foreground",
135 |         className
136 |       )}
137 |       {...props}
138 |     />
139 |   )
140 | }
141 | CommandShortcut.displayName = "CommandShortcut"
142 | 
143 | export {
144 |   Command,
145 |   CommandDialog,
146 |   CommandInput,
147 |   CommandList,
148 |   CommandEmpty,
149 |   CommandGroup,
150 |   CommandItem,
151 |   CommandShortcut,
152 |   CommandSeparator,
153 | }
154 |

--------------------------------------------------------------------------------
/src/pages/TermsOfService.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Navbar from '@/components/Navbar'; // Assuming a standard Navbar
 3 | import { ArrowLeft } from 'lucide-react';
 4 | import { Button } from '@/components/ui/button';
 5 | import { useNavigate } from 'react-router-dom';
 6 | 
 7 | const TermsOfService = () => {
 8 |   const navigate = useNavigate();
 9 | 
10 |   return (
11 |     <div className="min-h-screen bg-gradient-to-b from-gray-950 via-black to-gray-950 text-white">
12 |       <Navbar />
13 |       <div className="container mx-auto px-4 md:px-8 py-12 max-w-4xl">
14 |          <Button
15 |           variant="ghost"
16 |           size="icon"
17 |           className="absolute top-20 left-4 md:left-8 text-gray-300 hover:bg-gray-800 hover:text-white z-10"
18 |           onClick={() => navigate(-1)} // Go back to previous page
19 |         >
20 |           <ArrowLeft className="h-5 w-5" />
21 |         </Button>
22 | 
23 |         <h1 className="text-3xl md:text-4xl font-bold text-center mb-8 text-white tracking-tight">Terms of Service</h1>
24 | 
25 |         <div className="prose prose-invert prose-lg mx-auto bg-gray-900/50 p-6 md:p-8 rounded-lg border border-gray-700/80">
26 |           <p>Last updated: {new Date().toLocaleDateString()}</p>
27 | 
28 |           <h2>1. Agreement to Terms</h2>
29 |           <p>
30 |             By using Fastlytics (the "Service"), you agree to be bound by these Terms of Service ("Terms"). If you disagree with any part of the terms, then you do not have permission to access the Service.
31 |           </p>
32 | 
33 |           <h2>2. Accounts</h2>
34 |           <p>
35 |             When you create an account with us, you guarantee that the information you provide us is accurate, complete, and current at all times. Inaccurate, incomplete, or obsolete information may result in the immediate termination of your account on the Service. You are responsible for maintaining the confidentiality of your account and password.
36 |           </p>
37 | 
38 |           <h2>3. Intellectual Property</h2>
39 |           <p>
40 |             The Service and its original content (excluding Content provided by users), features and functionality are and will remain the exclusive property of Fastlytics and its licensors. The Service is protected by copyright, trademark, and other laws of both the [Your Country] and foreign countries. Our trademarks and trade dress may not be used in connection with any product or service without the prior written consent of Fastlytics.
41 |           </p>
42 |            <p>
43 |             Formula 1 related data is sourced from publicly available APIs (e.g., FastF1 library) and is subject to their respective terms and conditions. Fastlytics is not affiliated with Formula One group companies. F1, FORMULA ONE, FORMULA 1, FIA FORMULA ONE WORLD CHAMPIONSHIP, GRAND PRIX and related marks are trade marks of Formula One Licensing B.V.
44 |           </p>
45 | 
46 |           <h2>4. User Content</h2>
47 |           <p>
48 |             Our Service may allow you to post, link, store, share and otherwise make available certain information, text, graphics, videos, or other material ("Content"). You are responsible for the Content that you post on or through the Service, including its legality, reliability, and appropriateness.
49 |           </p>
50 | 
51 |           <h2>5. Prohibited Uses</h2>
52 |           <p>
53 |             You may use the Service only for lawful purposes and in accordance with Terms. You agree not to use the Service in any way that violates any applicable national or international law or regulation.
54 |           </p>
55 | 
56 |           <h2>6. Termination</h2>
57 |           <p>
58 |             We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of the Terms.
59 |           </p>
60 | 
61 |           <h2>7. Limitation Of Liability</h2>
62 |           <p>
63 |             In no event shall Fastlytics, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your access to or use of or inability to access or use the Service.
64 |           </p>
65 | 
66 |           <h2>8. Disclaimer</h2>
67 |           <p>
68 |             Your use of the Service is at your sole risk. The Service is provided on an "AS IS" and "AS AVAILABLE" basis. The Service is provided without warranties of any kind, whether express or implied, including, but not limited to, implied warranties of merchantability, fitness for a particular purpose, non-infringement or course of performance. Data accuracy is dependent on upstream sources and is not guaranteed.
69 |           </p>
70 | 
71 |           <h2>9. Governing Law</h2>
72 |           <p>
73 |             These Terms shall be governed and construed in accordance with the laws of India, without regard to its conflict of law provisions.
74 |           </p>
75 | 
76 |           <h2>10. Changes</h2>
77 |           <p>
78 |             We reserve the right, at our sole discretion, to modify or replace these Terms at any time. We will provide notice of any changes by posting the new Terms of Service on this page.
79 |           </p>
80 | 
81 |           <h2>11. Contact Us</h2>
82 |           <p>
83 |             If you have any questions about these Terms, please contact us at contact@fastlytics.app
84 |           </p>
85 |         </div>
86 |       </div>
87 |     </div>
88 |   );
89 | };
90 | 
91 | export default TermsOfService;
92 |

--------------------------------------------------------------------------------
/src/components/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
  3 | import { cva } from "class-variance-authority"
  4 | import { ChevronDown } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const NavigationMenu = React.forwardRef<
  9 |   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
 10 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 11 | >(({ className, children, ...props }, ref) => (
 12 |   <NavigationMenuPrimitive.Root
 13 |     ref={ref}
 14 |     className={cn(
 15 |       "relative z-10 flex max-w-max flex-1 items-center justify-center",
 16 |       className
 17 |     )}
 18 |     {...props}
 19 |   >
 20 |     {children}
 21 |     <NavigationMenuViewport />
 22 |   </NavigationMenuPrimitive.Root>
 23 | ))
 24 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 25 | 
 26 | const NavigationMenuList = React.forwardRef<
 27 |   React.ElementRef<typeof NavigationMenuPrimitive.List>,
 28 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 29 | >(({ className, ...props }, ref) => (
 30 |   <NavigationMenuPrimitive.List
 31 |     ref={ref}
 32 |     className={cn(
 33 |       "group flex flex-1 list-none items-center justify-center space-x-1",
 34 |       className
 35 |     )}
 36 |     {...props}
 37 |   />
 38 | ))
 39 | NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 40 | 
 41 | const NavigationMenuItem = NavigationMenuPrimitive.Item
 42 | 
 43 | const navigationMenuTriggerStyle = cva(
 44 |   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 45 | )
 46 | 
 47 | const NavigationMenuTrigger = React.forwardRef<
 48 |   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
 49 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 50 | >(({ className, children, ...props }, ref) => (
 51 |   <NavigationMenuPrimitive.Trigger
 52 |     ref={ref}
 53 |     className={cn(navigationMenuTriggerStyle(), "group", className)}
 54 |     {...props}
 55 |   >
 56 |     {children}{" "}
 57 |     <ChevronDown
 58 |       className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
 59 |       aria-hidden="true"
 60 |     />
 61 |   </NavigationMenuPrimitive.Trigger>
 62 | ))
 63 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 64 | 
 65 | const NavigationMenuContent = React.forwardRef<
 66 |   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
 67 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 68 | >(({ className, ...props }, ref) => (
 69 |   <NavigationMenuPrimitive.Content
 70 |     ref={ref}
 71 |     className={cn(
 72 |       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
 73 |       className
 74 |     )}
 75 |     {...props}
 76 |   />
 77 | ))
 78 | NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 79 | 
 80 | const NavigationMenuLink = NavigationMenuPrimitive.Link
 81 | 
 82 | const NavigationMenuViewport = React.forwardRef<
 83 |   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
 84 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 85 | >(({ className, ...props }, ref) => (
 86 |   <div className={cn("absolute left-0 top-full flex justify-center")}>
 87 |     <NavigationMenuPrimitive.Viewport
 88 |       className={cn(
 89 |         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
 90 |         className
 91 |       )}
 92 |       ref={ref}
 93 |       {...props}
 94 |     />
 95 |   </div>
 96 | ))
 97 | NavigationMenuViewport.displayName =
 98 |   NavigationMenuPrimitive.Viewport.displayName
 99 | 
100 | const NavigationMenuIndicator = React.forwardRef<
101 |   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
102 |   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
103 | >(({ className, ...props }, ref) => (
104 |   <NavigationMenuPrimitive.Indicator
105 |     ref={ref}
106 |     className={cn(
107 |       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
108 |       className
109 |     )}
110 |     {...props}
111 |   >
112 |     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
113 |   </NavigationMenuPrimitive.Indicator>
114 | ))
115 | NavigationMenuIndicator.displayName =
116 |   NavigationMenuPrimitive.Indicator.displayName
117 | 
118 | export {
119 |   navigationMenuTriggerStyle,
120 |   NavigationMenu,
121 |   NavigationMenuList,
122 |   NavigationMenuItem,
123 |   NavigationMenuContent,
124 |   NavigationMenuTrigger,
125 |   NavigationMenuLink,
126 |   NavigationMenuIndicator,
127 |   NavigationMenuViewport,
128 | }
129 |

--------------------------------------------------------------------------------
/src/components/KeyMomentsHighlight.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
  3 | import { LapPositionDataPoint } from '@/lib/api'; // Use the correct type
  4 | import { ArrowDown, ArrowUp, Zap } from 'lucide-react';
  5 | 
  6 | interface KeyMomentsHighlightProps {
  7 |     lapData?: LapPositionDataPoint[]; // Use the correct type
  8 | }
  9 | 
 10 | const KeyMomentsHighlight: React.FC<KeyMomentsHighlightProps> = ({ lapData }) => {
 11 |     if (!lapData || lapData.length === 0) {
 12 |         return null;
 13 |     }
 14 | 
 15 |     let biggestGain = { driver: '', change: 0, lap: 0, from: 0, to: 0 };
 16 |     let biggestLoss = { driver: '', change: 0, lap: 0, from: 0, to: 0 };
 17 | 
 18 |     const positionsByLap: { [lap: number]: { [driver: string]: number } } = {};
 19 | 
 20 |     // Organize data by lap and driver
 21 |     lapData.forEach(lapEntry => {
 22 |         if (!positionsByLap[lapEntry.lap_number]) {
 23 |             positionsByLap[lapEntry.lap_number] = {};
 24 |         }
 25 |         positionsByLap[lapEntry.lap_number][lapEntry.driver_code] = lapEntry.position;
 26 |     });
 27 | 
 28 |     const laps = Object.keys(positionsByLap).map(Number).sort((a, b) => a - b);
 29 | 
 30 |     // Iterate through laps to find changes
 31 |     for (let i = 1; i < laps.length; i++) {
 32 |         const currentLapNumber = laps[i];
 33 |         const previousLapNumber = laps[i - 1];
 34 |         const currentLapPositions = positionsByLap[currentLapNumber];
 35 |         const previousLapPositions = positionsByLap[previousLapNumber];
 36 | 
 37 |         for (const driver in currentLapPositions) {
 38 |             if (previousLapPositions && driver in previousLapPositions) {
 39 |                 const currentPos = currentLapPositions[driver];
 40 |                 const previousPos = previousLapPositions[driver];
 41 |                 const change = previousPos - currentPos; // Gain is positive, Loss is negative
 42 | 
 43 |                 if (change > biggestGain.change) {
 44 |                     biggestGain = { driver, change, lap: currentLapNumber, from: previousPos, to: currentPos };
 45 |                 }
 46 |                 if (change < biggestLoss.change) {
 47 |                     biggestLoss = { driver, change, lap: currentLapNumber, from: previousPos, to: currentPos };
 48 |                 }
 49 |             }
 50 |         }
 51 |     }
 52 | 
 53 |     // Don't render if no significant changes found
 54 |     if (biggestGain.change <= 1 && biggestLoss.change >= -1) { // Only show if gain > 1 or loss < -1
 55 |         return null;
 56 |     }
 57 | 
 58 |     return (
 59 |         <Card className="bg-gray-900/70 border border-gray-700/80 backdrop-blur-sm animate-fade-in mt-4">
 60 |             <CardHeader>
 61 |                 <CardTitle className="text-lg font-semibold text-white flex items-center gap-2"><Zap className="w-5 h-5 text-yellow-400"/> Key Moments</CardTitle>
 62 |                 <CardDescription className="text-xs text-gray-400">Largest single-lap position changes.</CardDescription>
 63 |             </CardHeader>
 64 |             <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
 65 |                 {biggestGain.change > 1 ? (
 66 |                     <div className="bg-green-900/30 p-3 rounded border border-green-700/50">
 67 |                         <p className="font-semibold text-green-300 flex items-center gap-1 mb-1">
 68 |                             <ArrowUp className="w-4 h-4"/> Biggest Gain
 69 |                         </p>
 70 |                         <p><span className="font-bold">{biggestGain.driver}</span> gained <span className="font-bold">{biggestGain.change}</span> places</p>
 71 |                         <p className="text-xs text-gray-400">Moved from P{biggestGain.from} to P{biggestGain.to} on Lap {biggestGain.lap}</p>
 72 |                     </div>
 73 |                 ) : (
 74 |                      <div className="bg-gray-800/50 p-3 rounded border border-gray-700/50">
 75 |                         <p className="font-semibold text-gray-300 flex items-center gap-1 mb-1">
 76 |                            No Significant Gains
 77 |                         </p>
 78 |                         <p className="text-xs text-gray-400">No driver gained more than 1 position in a single lap.</p>
 79 |                     </div>
 80 |                  )}
 81 | 
 82 |                 {biggestLoss.change < -1 ? (
 83 |                     <div className="bg-red-900/30 p-3 rounded border border-red-700/50">
 84 |                         <p className="font-semibold text-red-300 flex items-center gap-1 mb-1">
 85 |                            <ArrowDown className="w-4 h-4"/> Biggest Loss
 86 |                         </p>
 87 |                         <p><span className="font-bold">{biggestLoss.driver}</span> lost <span className="font-bold">{Math.abs(biggestLoss.change)}</span> places</p>
 88 |                         <p className="text-xs text-gray-400">Moved from P{biggestLoss.from} to P{biggestLoss.to} on Lap {biggestLoss.lap}</p>
 89 |                     </div>
 90 |                 ) : (
 91 |                      <div className="bg-gray-800/50 p-3 rounded border border-gray-700/50">
 92 |                         <p className="font-semibold text-gray-300 flex items-center gap-1 mb-1">
 93 |                            No Significant Losses
 94 |                         </p>
 95 |                          <p className="text-xs text-gray-400">No driver lost more than 1 position in a single lap.</p>
 96 |                     </div>
 97 |                  )}
 98 |             </CardContent>
 99 |         </Card>
100 |     );
101 | };
102 | 
103 | export default KeyMomentsHighlight;

--------------------------------------------------------------------------------
/src/pages/DriverDetailsPage.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react';
  2 | import { useParams } from 'react-router-dom';
  3 | import { getDriverDetails, DriverDetails as DriverDetailsType } from '@/lib/api'; // Import API function and type
  4 | import LoadingSpinnerF1 from '@/components/ui/LoadingSpinnerF1'; // Corrected import
  5 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
  6 | import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
  7 | 
  8 | // Local interface removed, using DriverDetailsType from api.ts
  9 | 
 10 | const DriverDetailsPage: React.FC = () => {
 11 |   const { driverId } = useParams<{ driverId: string }>();
 12 |   const [driverDetails, setDriverDetails] = useState<DriverDetailsType | null>(null); // Use imported type
 13 |   const [loading, setLoading] = useState(true);
 14 |   const [error, setError] = useState<string | null>(null);
 15 | 
 16 |   useEffect(() => {
 17 |     const fetchDetails = async () => {
 18 |       if (!driverId) {
 19 |         setError('Driver ID is missing.');
 20 |         setLoading(false);
 21 |         return;
 22 |       }
 23 |       setLoading(true);
 24 |       setError(null);
 25 |       try {
 26 |         // Use actual API call
 27 |         const data = await getDriverDetails(driverId);
 28 |         setDriverDetails(data);
 29 |       } catch (err) {
 30 |         console.error('Error fetching driver details:', err);
 31 |         // Provide a more specific error message if possible
 32 |         const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
 33 |         setError(`Failed to load driver details: ${errorMessage}`);
 34 |       } finally {
 35 |         setLoading(false);
 36 |       }
 37 |     };
 38 | 
 39 |     fetchDetails();
 40 |   }, [driverId]);
 41 | 
 42 |   if (loading) {
 43 |     return <div className="flex justify-center items-center h-screen"><LoadingSpinnerF1 /></div>;
 44 |   }
 45 | 
 46 |   if (error) {
 47 |     return <div className="text-red-500 text-center mt-10">{error}</div>;
 48 |   }
 49 | 
 50 |   if (!driverDetails) {
 51 |     return <div className="text-center mt-10">Driver details not found.</div>;
 52 |   }
 53 | 
 54 |   // Helper function to safely get initials
 55 |   const getInitials = (name: string | undefined): string => {
 56 |     if (!name) return '?';
 57 |     return name.split(' ').map(n => n[0]).join('').toUpperCase();
 58 |   };
 59 | 
 60 |   return (
 61 |     <div className="container mx-auto p-4 md:p-8">
 62 |       <Card className="overflow-hidden">
 63 |         <CardHeader className="bg-muted/40 p-4 md:p-6 flex flex-row items-center gap-4">
 64 |            <Avatar className="h-20 w-20 md:h-32 md:w-32 border-4 border-primary">
 65 |              {/* Use optional chaining and provide fallback image */}
 66 |              <AvatarImage src={driverDetails.imageUrl || '/placeholder.svg'} alt={driverDetails.name} className="object-cover" />
 67 |              <AvatarFallback>{getInitials(driverDetails.name)}</AvatarFallback>
 68 |            </Avatar>
 69 |            <div className="grid gap-1">
 70 |              <CardTitle className="text-2xl md:text-4xl font-bold">{driverDetails.name || 'N/A'}</CardTitle>
 71 |              <p className="text-sm md:text-base text-muted-foreground">{driverDetails.nationality || 'N/A'}</p>
 72 |              {/* Safely format date */}
 73 |              <p className="text-sm md:text-base text-muted-foreground">
 74 |                Born: {driverDetails.dateOfBirth ? new Date(driverDetails.dateOfBirth).toLocaleDateString() : 'N/A'}
 75 |              </p>
 76 |            </div>
 77 |         </CardHeader>
 78 |         <CardContent className="p-4 md:p-6 grid gap-6">
 79 |           {/* Conditionally render Biography if available */}
 80 |           {driverDetails.bio && (
 81 |             <div>
 82 |               <h3 className="text-lg md:text-xl font-semibold mb-2">Biography</h3>
 83 |               <p className="text-muted-foreground text-sm md:text-base">{driverDetails.bio}</p>
 84 |             </div>
 85 |           )}
 86 |           {/* Conditionally render Career Stats if available */}
 87 |           {driverDetails.careerStats && (
 88 |             <div>
 89 |               <h3 className="text-lg md:text-xl font-semibold mb-2">Career Stats</h3>
 90 |               <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
 91 |                 <div className="bg-muted p-3 rounded-lg">
 92 |                   <p className="text-2xl md:text-3xl font-bold">{driverDetails.careerStats.wins ?? '-'}</p>
 93 |                   <p className="text-xs md:text-sm text-muted-foreground">Wins</p>
 94 |                 </div>
 95 |                 <div className="bg-muted p-3 rounded-lg">
 96 |                   <p className="text-2xl md:text-3xl font-bold">{driverDetails.careerStats.podiums ?? '-'}</p>
 97 |                   <p className="text-xs md:text-sm text-muted-foreground">Podiums</p>
 98 |                 </div>
 99 |                 <div className="bg-muted p-3 rounded-lg">
100 |                   <p className="text-2xl md:text-3xl font-bold">{driverDetails.careerStats.poles ?? '-'}</p>
101 |                   <p className="text-xs md:text-sm text-muted-foreground">Pole Positions</p>
102 |                 </div>
103 |                 <div className="bg-muted p-3 rounded-lg">
104 |                   <p className="text-2xl md:text-3xl font-bold">{driverDetails.careerStats.championships ?? '-'}</p>
105 |                   <p className="text-xs md:text-sm text-muted-foreground">Championships</p>
106 |                 </div>
107 |               </div>
108 |             </div>
109 |           )} {/* Closing parenthesis for careerStats condition */}
110 |         </CardContent>
111 |       </Card>
112 |     </div>
113 |   );
114 | };
115 | 
116 | export default DriverDetailsPage;
117 |

--------------------------------------------------------------------------------
/src/lib/teamUtils.ts:
--------------------------------------------------------------------------------
  1 | // Team mapping to identify teammates
  2 | export const teamDriverMap: { [year: string]: { [team: string]: string[] } } = {
  3 |   '2025': {
  4 |     'Red Bull': ['VER', 'TSU'],
  5 |     'Ferrari': ['LEC', 'HAM'],
  6 |     'Mercedes': ['RUS', 'ANT'], // Antonelli
  7 |     'McLaren': ['NOR', 'PIA'],
  8 |     'Aston Martin': ['ALO', 'STR'],
  9 |     'Alpine': ['GAS', 'DOO'], // Doohan
 10 |     'Williams': ['ALB', 'SAI'],
 11 |     'Racing Bulls': ['LAW', 'HAD'], // Lawson, Hadjar
 12 |     'Sauber': ['HUL', 'BOR'], // Hulkenberg, Bortoleto
 13 |     'Haas': ['BEA', 'OCO'] // Bearman, Ocon
 14 |   },
 15 |   '2024': {
 16 |     'Red Bull': ['VER', 'PER'],
 17 |     'Mercedes': ['HAM', 'RUS'],
 18 |     'Ferrari': ['LEC', 'SAI', 'BEA'], // Including Bearman
 19 |     'McLaren': ['NOR', 'PIA'],
 20 |     'Aston Martin': ['ALO', 'STR'],
 21 |     'Alpine': ['GAS', 'OCO'],
 22 |     'Williams': ['ALB', 'SAR', 'COL'], // Including Colapinto
 23 |     'RB': ['RIC', 'TSU', 'LAW'], // Including Lawson
 24 |     'Sauber': ['BOT', 'ZHO'],
 25 |     'Haas': ['HUL', 'MAG', 'BEA'] // Including Bearman
 26 |   },
 27 |   '2023': {
 28 |     'Red Bull': ['VER', 'PER'],
 29 |     'Ferrari': ['LEC', 'SAI'],
 30 |     'Mercedes': ['HAM', 'RUS'],
 31 |     'Alpine': ['OCO', 'GAS'],
 32 |     'McLaren': ['NOR', 'PIA'],
 33 |     'Alfa Romeo': ['BOT', 'ZHO'],
 34 |     'Aston Martin': ['STR', 'ALO'],
 35 |     'Haas': ['MAG', 'HUL'],
 36 |     'AlphaTauri': ['TSU', 'DEV', 'RIC', 'LAW'], // All AlphaTauri drivers
 37 |     'Williams': ['ALB', 'SAR']
 38 |   },
 39 |   '2022': {
 40 |     'Mercedes': ['HAM', 'RUS'],
 41 |     'Red Bull': ['VER', 'PER'],
 42 |     'Ferrari': ['LEC', 'SAI'],
 43 |     'McLaren': ['NOR', 'RIC'],
 44 |     'Alpine': ['ALO', 'OCO'],
 45 |     'AlphaTauri': ['GAS', 'TSU'],
 46 |     'Aston Martin': ['VET', 'STR'],
 47 |     'Williams': ['LAT', 'ALB'],
 48 |     'Alfa Romeo': ['ZHO', 'BOT'],
 49 |     'Haas': ['MAG', 'MSC']
 50 |   },
 51 |   '2021': {
 52 |     'Mercedes': ['HAM', 'BOT'],
 53 |     'Red Bull': ['VER', 'PER'],
 54 |     'Ferrari': ['LEC', 'SAI'],
 55 |     'McLaren': ['NOR', 'RIC'],
 56 |     'Alpine': ['ALO', 'OCO'],
 57 |     'AlphaTauri': ['GAS', 'TSU'],
 58 |     'Aston Martin': ['VET', 'STR'],
 59 |     'Williams': ['LAT', 'RUS'],
 60 |     'Alfa Romeo': ['RAI', 'GIO'],
 61 |     'Haas': ['MSC', 'MAZ']
 62 |   },
 63 |   '2020': {
 64 |     'Mercedes': ['HAM', 'BOT'],
 65 |     'Red Bull': ['VER', 'ALB'],
 66 |     'Ferrari': ['VET', 'LEC'],
 67 |     'McLaren': ['NOR', 'SAI'],
 68 |     'Renault': ['RIC', 'OCO'],
 69 |     'AlphaTauri': ['GAS', 'KVY'],
 70 |     'Racing Point': ['PER', 'STR'],
 71 |     'Williams': ['RUS', 'LAT'],
 72 |     'Alfa Romeo': ['RAI', 'GIO'],
 73 |     'Haas': ['GRO', 'MAG']
 74 |   },
 75 |   '2019': {
 76 |     'Mercedes': ['HAM', 'BOT'],
 77 |     'Ferrari': ['VET', 'LEC'],
 78 |     'Red Bull': ['VER', 'GAS', 'ALB'],
 79 |     'McLaren': ['SAI', 'NOR'],
 80 |     'Renault': ['RIC', 'HUL'],
 81 |     'Toro Rosso': ['KVY', 'ALB', 'GAS'],
 82 |     'Racing Point': ['PER', 'STR'],
 83 |     'Alfa Romeo': ['RAI', 'GIO'],
 84 |     'Haas': ['GRO', 'MAG'],
 85 |     'Williams': ['RUS', 'KUB']
 86 |   }
 87 | };
 88 | 
 89 | /**
 90 |  * Helper function to determine if drivers are teammates
 91 |  * @param driver1 First driver code
 92 |  * @param driver2 Second driver code
 93 |  * @param year Season year
 94 |  * @returns Boolean indicating if drivers are teammates
 95 |  */
 96 | export const areTeammates = (driver1: string, driver2: string, year: number): boolean => {
 97 |   const yearStr = year.toString();
 98 |   
 99 |   // Use current year mapping if the specific year isn't defined
100 |   const yearMapping = teamDriverMap[yearStr] || teamDriverMap['2024'];
101 |   
102 |   // Check if both drivers are in the same team
103 |   for (const team in yearMapping) {
104 |     const drivers = yearMapping[team];
105 |     if (drivers.includes(driver1) && drivers.includes(driver2)) {
106 |       return true;
107 |     }
108 |   }
109 |   
110 |   return false;
111 | };
112 | 
113 | /**
114 |  * Helper function to generate distinctive line styles for teammates
115 |  */
116 | export const getLineStylesForDriver = (driver: string, teammates: string[], index: number): { strokeDasharray?: string, strokeWidth: number } => {
117 |   // Return different line styles based on driver's position in teammates array
118 |   if (teammates.length <= 1) {
119 |     // Not part of a team or only driver from team - use solid line
120 |     return { strokeWidth: 2.5 };
121 |   }
122 |   
123 |   // Find position of driver in teammates array
124 |   const driverIndex = teammates.indexOf(driver);
125 |   
126 |   // Alternate styles for teammates
127 |   switch (driverIndex % 3) {
128 |     case 0: // First driver - solid line
129 |       return { strokeWidth: 2.5 };
130 |     case 1: // Second driver - dashed line
131 |       return { strokeDasharray: '5,3', strokeWidth: 2.5 };
132 |     case 2: // Third driver (rare case) - dotted line
133 |       return { strokeDasharray: '2,2', strokeWidth: 3 };
134 |     default:
135 |       return { strokeWidth: 2.5 };
136 |   }
137 | };
138 | 
139 | /**
140 |  * Group drivers by team
141 |  */
142 | export const groupDriversByTeam = (drivers: string[], year: number): { [team: string]: string[] } => {
143 |   const yearStr = year.toString();
144 |   const yearMapping = teamDriverMap[yearStr] || teamDriverMap['2024'];
145 |   
146 |   const teamGroups: { [team: string]: string[] } = {};
147 |   
148 |   // First pass: add drivers to their teams
149 |   drivers.forEach(driver => {
150 |     for (const team in yearMapping) {
151 |       if (yearMapping[team].includes(driver)) {
152 |         if (!teamGroups[team]) {
153 |           teamGroups[team] = [];
154 |         }
155 |         teamGroups[team].push(driver);
156 |         break;
157 |       }
158 |     }
159 |   });
160 |   
161 |   return teamGroups;
162 | };

--------------------------------------------------------------------------------
/src/pages/PrivacyPolicy.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Navbar from '@/components/Navbar'; // Assuming a standard Navbar
  3 | import { ArrowLeft } from 'lucide-react';
  4 | import { Button } from '@/components/ui/button';
  5 | import { useNavigate } from 'react-router-dom';
  6 | 
  7 | const PrivacyPolicy = () => {
  8 |   const navigate = useNavigate();
  9 | 
 10 |   return (
 11 |     <div className="min-h-screen bg-gradient-to-b from-gray-950 via-black to-gray-950 text-white">
 12 |       <Navbar />
 13 |       <div className="container mx-auto px-4 md:px-8 py-12 max-w-4xl">
 14 |         <Button
 15 |           variant="ghost"
 16 |           size="icon"
 17 |           className="absolute top-20 left-4 md:left-8 text-gray-300 hover:bg-gray-800 hover:text-white z-10"
 18 |           onClick={() => navigate(-1)} // Go back to previous page
 19 |         >
 20 |           <ArrowLeft className="h-5 w-5" />
 21 |         </Button>
 22 | 
 23 |         <h1 className="text-3xl md:text-4xl font-bold text-center mb-8 text-white tracking-tight">Privacy Policy</h1>
 24 | 
 25 |         <div className="prose prose-invert prose-lg mx-auto bg-gray-900/50 p-6 md:p-8 rounded-lg border border-gray-700/80">
 26 |           <p>Last updated: {new Date().toLocaleDateString()}</p>
 27 | 
 28 |           <h2>1. Introduction</h2>
 29 |           <p>
 30 |             Welcome to Fastlytics ("we", "us", "our"). We are committed to protecting your personal information and your right to privacy. If you have any questions or concerns about this privacy notice, or our practices with regards to your personal information, please contact us.
 31 |           </p>
 32 | 
 33 |           <h2>2. Information We Collect</h2>
 34 |           <p>
 35 |             We collect personal information that you voluntarily provide to us when you register on the application, express an interest in obtaining information about us or our products and services, when you participate in activities on the application or otherwise when you contact us.
 36 |           </p>
 37 |           <p>
 38 |             The personal information that we collect depends on the context of your interactions with us and the application, the choices you make and the products and features you use. The personal information we collect may include the following: email address, username, password (hashed).
 39 |           </p>
 40 |            <p>
 41 |             We do not process sensitive information.
 42 |           </p>
 43 | 
 44 |           <h2>3. How We Use Your Information</h2>
 45 |           <p>
 46 |             We use personal information collected via our application for a variety of business purposes described below. We process your personal information for these purposes in reliance on our legitimate business interests, in order to enter into or perform a contract with you, with your consent, and/or for compliance with our legal obligations. We indicate the specific processing grounds we rely on next to each purpose listed below.
 47 |           </p>
 48 |           <ul>
 49 |             <li>To facilitate account creation and logon process.</li>
 50 |             <li>To manage user accounts.</li>
 51 |             <li>To send administrative information to you.</li>
 52 |             <li>To protect our Services.</li>
 53 |             <li>To respond to user inquiries/offer support to users.</li>
 54 |           </ul>
 55 | 
 56 |           <h2>4. Will Your Information Be Shared With Anyone?</h2>
 57 |           <p>
 58 |             We only share information with your consent, to comply with laws, to provide you with services, to protect your rights, or to fulfill business obligations. We do not sell your personal information.
 59 |           </p>
 60 |            <p>
 61 |             We may need to share your information with third-party vendors, service providers, contractors or agents who perform services for us or on our behalf and require access to such information to do that work (e.g., Supabase for authentication and database hosting).
 62 |           </p>
 63 | 
 64 |           <h2>5. How Long Do We Keep Your Information?</h2>
 65 |           <p>
 66 |             We will only keep your personal information for as long as it is necessary for the purposes set out in this privacy notice, unless a longer retention period is required or permitted by law (such as tax, accounting or other legal requirements).
 67 |           </p>
 68 | 
 69 |           <h2>6. How Do We Keep Your Information Safe?</h2>
 70 |           <p>
 71 |             We have implemented appropriate technical and organizational security measures designed to protect the security of any personal information we process. However, despite our safeguards and efforts to secure your information, no electronic transmission over the Internet or information storage technology can be guaranteed to be 100% secure.
 72 |           </p>
 73 | 
 74 |           <h2>7. Do We Collect Information From Minors?</h2>
 75 |           <p>
 76 |             We do not knowingly solicit data from or market to children under 18 years of age.
 77 |           </p>
 78 | 
 79 |           <h2>8. What Are Your Privacy Rights?</h2>
 80 |           <p>
 81 |             You may review, change, or terminate your account at any time by logging into your account and updating your profile or by contacting us using the contact information provided.
 82 |           </p>
 83 | 
 84 |           <h2>9. Updates To This Notice</h2>
 85 |           <p>
 86 |             We may update this privacy notice from time to time. The updated version will be indicated by an updated "Last updated" date and the updated version will be effective as soon as it is accessible.
 87 |           </p>
 88 | 
 89 |           <h2>10. How Can You Contact Us About This Notice?</h2>
 90 |           <p>
 91 |             If you have questions or comments about this notice, you may email us at contact@fastlytics.app
 92 |           </p>
 93 | 
 94 |         </div>
 95 |       </div>
 96 |     </div>
 97 |   );
 98 | };
 99 | 
100 | export default PrivacyPolicy;
101 |

--------------------------------------------------------------------------------
/src/pages/TeamDetailsPage.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react';
  2 | import { useParams } from 'react-router-dom';
  3 | import { getTeamDetails, TeamDetails as TeamDetailsType } from '@/lib/api'; // Import API function and type
  4 | import LoadingSpinnerF1 from '@/components/ui/LoadingSpinnerF1'; // Corrected import
  5 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
  6 | import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
  7 | 
  8 | // Local interface removed, using TeamDetailsType from api.ts
  9 | 
 10 | const TeamDetailsPage: React.FC = () => {
 11 |   const { teamId } = useParams<{ teamId: string }>();
 12 |   const [teamDetails, setTeamDetails] = useState<TeamDetailsType | null>(null); // Use imported type
 13 |   const [loading, setLoading] = useState(true);
 14 |   const [error, setError] = useState<string | null>(null);
 15 | 
 16 |   useEffect(() => {
 17 |     const fetchDetails = async () => {
 18 |       if (!teamId) {
 19 |         setError('Team ID is missing.');
 20 |         setLoading(false);
 21 |         return;
 22 |       }
 23 |       setLoading(true);
 24 |       setError(null);
 25 |       try {
 26 |         // Use actual API call - teamId from params is already decoded by react-router
 27 |         const data = await getTeamDetails(teamId);
 28 |         setTeamDetails(data);
 29 |       } catch (err) {
 30 |         console.error('Error fetching team details:', err);
 31 |         const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
 32 |         setError(`Failed to load team details: ${errorMessage}`);
 33 |       } finally {
 34 |         setLoading(false);
 35 |       }
 36 |     };
 37 | 
 38 |     fetchDetails();
 39 |   }, [teamId]);
 40 | 
 41 |   if (loading) {
 42 |     return <div className="flex justify-center items-center h-screen"><LoadingSpinnerF1 /></div>;
 43 |   }
 44 | 
 45 |   if (error) {
 46 |     return <div className="text-red-500 text-center mt-10">{error}</div>;
 47 |   }
 48 | 
 49 |   if (!teamDetails) {
 50 |     return <div className="text-center mt-10">Team details not found.</div>;
 51 |   }
 52 | 
 53 |   // Helper function to safely get initials
 54 |   const getInitials = (name: string | undefined): string => {
 55 |     if (!name) return '?';
 56 |     // Handle potential multi-word team names for initials
 57 |     const parts = name.split(' ');
 58 |     if (parts.length > 1) {
 59 |         return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 60 |     }
 61 |     return name.substring(0, 2).toUpperCase();
 62 |   };
 63 | 
 64 |   return (
 65 |     <div className="container mx-auto p-4 md:p-8">
 66 |       <Card className="overflow-hidden">
 67 |         <CardHeader className="bg-muted/40 p-4 md:p-6 flex flex-row items-center gap-4">
 68 |            <Avatar className="h-20 w-20 md:h-32 md:w-32 border-4 border-primary">
 69 |              {/* Use optional chaining and provide fallback image */}
 70 |              <AvatarImage src={teamDetails.imageUrl || '/placeholder.svg'} alt={teamDetails.name} className="object-contain p-1" />
 71 |              <AvatarFallback>{getInitials(teamDetails.name)}</AvatarFallback>
 72 |            </Avatar>
 73 |            <div className="grid gap-1">
 74 |              <CardTitle className="text-2xl md:text-4xl font-bold">{teamDetails.name || 'N/A'}</CardTitle>
 75 |              <p className="text-sm md:text-base text-muted-foreground">{teamDetails.nationality || 'N/A'}</p>
 76 |              <p className="text-sm md:text-base text-muted-foreground">Base: {teamDetails.base || 'N/A'}</p>
 77 |              <p className="text-sm md:text-base text-muted-foreground">First Entry: {teamDetails.firstEntry || 'N/A'}</p>
 78 |            </div>
 79 |         </CardHeader>
 80 |         <CardContent className="p-4 md:p-6 grid gap-6">
 81 |           {/* Conditionally render Team History if available */}
 82 |           {teamDetails.bio && (
 83 |             <div>
 84 |               <h3 className="text-lg md:text-xl font-semibold mb-2">Team History</h3>
 85 |               <p className="text-muted-foreground text-sm md:text-base">{teamDetails.bio}</p>
 86 |             </div>
 87 |           )}
 88 |           {/* Conditionally render Career Stats if available */}
 89 |           {teamDetails.careerStats && (
 90 |             <div>
 91 |               <h3 className="text-lg md:text-xl font-semibold mb-2">Career Stats</h3>
 92 |               <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 text-center">
 93 |                 <div className="bg-muted p-3 rounded-lg">
 94 |                   <p className="text-2xl md:text-3xl font-bold">{teamDetails.careerStats.wins ?? '-'}</p>
 95 |                   <p className="text-xs md:text-sm text-muted-foreground">Wins</p>
 96 |                 </div>
 97 |                 <div className="bg-muted p-3 rounded-lg">
 98 |                   <p className="text-2xl md:text-3xl font-bold">{teamDetails.careerStats.podiums ?? '-'}</p>
 99 |                   <p className="text-xs md:text-sm text-muted-foreground">Podiums</p>
100 |                 </div>
101 |                 <div className="bg-muted p-3 rounded-lg">
102 |                   <p className="text-2xl md:text-3xl font-bold">{teamDetails.careerStats.poles ?? '-'}</p>
103 |                   <p className="text-xs md:text-sm text-muted-foreground">Pole Positions</p>
104 |                 </div>
105 |                 <div className="bg-muted p-3 rounded-lg">
106 |                   <p className="text-2xl md:text-3xl font-bold">{teamDetails.careerStats.constructorsChampionships ?? '-'}</p>
107 |                   <p className="text-xs md:text-sm text-muted-foreground">Constructors' Titles</p>
108 |                 </div>
109 |                  <div className="bg-muted p-3 rounded-lg">
110 |                   <p className="text-2xl md:text-3xl font-bold">{teamDetails.careerStats.driversChampionships ?? '-'}</p>
111 |                   <p className="text-xs md:text-sm text-muted-foreground">Drivers' Titles</p>
112 |                 </div>
113 |               </div>
114 |             </div>
115 |           )} {/* Closing parenthesis for careerStats condition */}
116 |           {/* TODO: Add section for current drivers if data is available */}
117 |         </CardContent>
118 |       </Card>
119 |     </div>
120 |   );
121 | };
122 | 
123 | export default TeamDetailsPage;
124 |

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

--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import { motion } from 'framer-motion';
  4 | import { 
  5 |   Github, Twitter, Mail, Gauge, Heart, 
  6 |   ExternalLink
  7 | } from 'lucide-react';
  8 | 
  9 | const Footer = () => {
 10 |   const currentYear = new Date().getFullYear();
 11 | 
 12 |   const fadeInUp = {
 13 |     initial: { opacity: 0, y: 20 },
 14 |     animate: { opacity: 1, y: 0 },
 15 |     transition: { duration: 0.5 }
 16 |   };
 17 |   
 18 |   const featuresLinks = [
 19 |     { name: 'Dashboard', href: '/dashboard' },
 20 |     { name: 'Races', href: '/races' },
 21 |     { name: 'Standings', href: '/standings/drivers' },
 22 |   ];
 23 |   
 24 |   const quickLinks = [
 25 |     { name: 'Support us', href: 'https://ko-fi.com/fastlytics', external: true },
 26 |     { name: 'Discord', href: 'https://discord.gg/bSEGSMwFDn', external: true },
 27 |     { name: 'FAQ', href: '/faq' },
 28 |     { name: 'Privacy', href: '/privacy-policy' },
 29 |   ];
 30 |   
 31 |   const socialLinks = [
 32 |     { name: 'Twitter', href: 'https://x.com/fastlytics', icon: <Twitter className="h-5 w-5" /> },
 33 |     { name: 'GitHub', href: 'https://github.com/subhashhhhhh', icon: <Github className="h-5 w-5" /> },
 34 |     { name: 'Mail', href: 'mailto:contact@fastlytics.app', icon: <Mail className="h-5 w-5" /> },
 35 |   ];
 36 | 
 37 |   return (
 38 |     <footer className="bg-gradient-to-b from-black to-gray-950 border-t border-gray-800/30 mt-auto text-gray-400 relative overflow-hidden">
 39 |       {/* Decorative elements */}
 40 |       <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-red-600/0 via-red-600 to-red-600/0"></div>
 41 |       <div className="absolute -top-64 -left-64 w-[500px] h-[500px] rounded-full bg-red-900/5 blur-3xl pointer-events-none"></div>
 42 |       <div className="absolute bottom-1/4 -right-32 w-[300px] h-[300px] rounded-full bg-red-900/5 blur-3xl pointer-events-none"></div>
 43 |       
 44 |       <div className="container mx-auto py-12 px-4 md:px-8 relative z-0">
 45 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 mb-8">
 46 |           {/* Logo & Description */}
 47 |           <div className="lg:col-span-6 space-y-4">
 48 |             <Link 
 49 |               to="/dashboard" 
 50 |               className="flex items-center gap-2 text-white hover:text-red-500 transition-colors mb-2 w-fit"
 51 |             >
 52 |               <div className="relative">
 53 |                 <Gauge className="h-6 w-6 text-red-500" />
 54 |                 <motion.div 
 55 |                   className="absolute inset-0 rounded-full bg-red-500/20" 
 56 |                   animate={{ scale: [1, 1.3, 1] }} 
 57 |                   transition={{ duration: 2, repeat: Infinity, repeatType: "loop" }}
 58 |                 />
 59 |               </div>
 60 |               <span className="font-bold text-xl tracking-tight">Fast<span className="text-red-500">lytics</span></span>
 61 |             </Link>
 62 |             
 63 |             <p className="text-gray-400 max-w-sm leading-relaxed text-sm">
 64 |               Advanced F1 analytics and insights for racing fans.
 65 |             </p>
 66 |             
 67 |             <div className="flex items-center gap-3 pt-2">
 68 |               {socialLinks.map((link) => (
 69 |                 <motion.a
 70 |                   key={link.name}
 71 |                   href={link.href}
 72 |                   target="_blank"
 73 |                   rel="noopener noreferrer"
 74 |                   className="text-gray-500 hover:text-white p-2 rounded-full bg-gray-900/70 border border-gray-800/50 hover:border-red-500/30 hover:bg-gray-800 transition-all duration-200"
 75 |                   aria-label={link.name}
 76 |                   whileHover={{ y: -2, transition: { duration: 0.2 } }}
 77 |                 >
 78 |                   {link.icon}
 79 |                 </motion.a>
 80 |               ))}
 81 |             </div>
 82 |           </div>
 83 | 
 84 |           {/* Navigation Links */}
 85 |           <div className="lg:col-span-3">
 86 |             <h3 className="font-semibold mb-4 text-white text-sm tracking-wide">
 87 |               Navigate
 88 |             </h3>
 89 |             <ul className="space-y-2">
 90 |               {featuresLinks.map((link) => (
 91 |                 <li key={link.name}>
 92 |                   <Link 
 93 |                     to={link.href} 
 94 |                     className="text-gray-400 hover:text-white transition-colors text-sm hover:translate-x-1 transform duration-200 inline-block"
 95 |                   >
 96 |                     {link.name}
 97 |                   </Link>
 98 |                 </li>
 99 |               ))}
100 |             </ul>
101 |           </div>
102 | 
103 |           {/* Quick Links */}
104 |           <div className="lg:col-span-3">
105 |             <h3 className="font-semibold mb-4 text-white text-sm tracking-wide">
106 |               Quick Links
107 |             </h3>
108 |             <ul className="space-y-2">
109 |               {quickLinks.map((link) => (
110 |                 <li key={link.name}>
111 |                   {link.external ? (
112 |                     <a
113 |                       href={link.href}
114 |                       target="_blank"
115 |                       rel="noopener noreferrer"
116 |                       className="text-gray-400 hover:text-white transition-colors text-sm inline-flex items-center gap-1"
117 |                     >
118 |                       <span className="hover:translate-x-1 transition-transform duration-200">{link.name}</span>
119 |                       <ExternalLink className="h-3 w-3 opacity-70" />
120 |                     </a>
121 |                   ) : (
122 |                     <Link 
123 |                       to={link.href} 
124 |                       className="text-gray-400 hover:text-white transition-colors text-sm hover:translate-x-1 transform duration-200 inline-block"
125 |                     >
126 |                       {link.name}
127 |                     </Link>
128 |                   )}
129 |                 </li>
130 |               ))}
131 |             </ul>
132 |           </div>
133 |         </div>
134 | 
135 |         {/* Bottom Bar */}
136 |         <div className="pt-6 border-t border-gray-800/50 flex flex-col sm:flex-row justify-between items-center gap-4">
137 |           <div className="flex flex-col sm:flex-row items-center gap-4 text-xs text-gray-500">
138 |             <span>© {currentYear} Fastlytics. All rights reserved.</span>
139 |             <span>Not affiliated with Formula 1</span>
140 |           </div>
141 |           <div className="flex items-center text-gray-500 text-xs">
142 |             <span>Made with</span>
143 |             <Heart className="h-3 w-3 mx-1.5 text-red-500 fill-current animate-pulse" />
144 |             <span>for F1 fans by <a href="https://github.com/subhashhhhhh" target="_blank" rel="noopener noreferrer" className="text-white hover:text-red-400 transition-colors">Subhash</a></span>
145 |           </div>
146 |         </div>
147 |       </div>
148 |     </footer>
149 |   );
150 | };
151 | 
152 | export default Footer;
153 |

--------------------------------------------------------------------------------
/src/components/FloatingNavbar.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import { Button } from "@/components/ui/button";
  4 | import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
  5 | import { Menu, Gauge, ChevronRight } from 'lucide-react';
  6 | import { motion } from 'framer-motion';
  7 | 
  8 | interface FloatingNavbarProps {
  9 |   transparent?: boolean;
 10 | }
 11 | 
 12 | const FloatingNavbar: React.FC<FloatingNavbarProps> = ({ transparent = false }) => {
 13 |   const [scrollPosition, setScrollPosition] = useState(0);
 14 |   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 15 |   
 16 |   const navItems = [
 17 |     { name: 'Features', href: '#features' },
 18 |     { name: 'How It Works', href: '#how-it-works' },
 19 |     { name: 'Showcase', href: '#showcase' },
 20 |     { name: 'Community', href: '#community' }
 21 |   ];
 22 | 
 23 |   // Track scroll position for background opacity changes
 24 |   useEffect(() => {
 25 |     const handleScroll = () => {
 26 |       setScrollPosition(window.scrollY);
 27 |     };
 28 |     window.addEventListener('scroll', handleScroll);
 29 |     return () => window.removeEventListener('scroll', handleScroll);
 30 |   }, []);
 31 | 
 32 |   // Smooth scroll handler
 33 |   const handleScroll = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, href: string) => {
 34 |     e.preventDefault();
 35 |     const targetId = href.substring(1);
 36 |     const targetElement = document.getElementById(targetId);
 37 |     if (targetElement) {
 38 |       window.scrollTo({
 39 |         top: targetElement.offsetTop - 80, // Offset for navbar height
 40 |         behavior: 'smooth'
 41 |       });
 42 |       setMobileMenuOpen(false);
 43 |     }
 44 |   };
 45 | 
 46 |   // Calculate background opacity based on scroll position
 47 |   const backgroundOpacity = transparent 
 48 |     ? Math.min(scrollPosition / 300, 0.95) // Gradually increase opacity as user scrolls
 49 |     : 0.95; // Default opacity
 50 | 
 51 |   // Calculate blur based on scroll position
 52 |   const blurAmount = transparent
 53 |     ? Math.min(scrollPosition / 100, 10) // Gradually increase blur as user scrolls
 54 |     : 10; // Default blur
 55 | 
 56 |   return (
 57 |     <motion.nav 
 58 |       className="fixed top-0 left-0 right-0 z-50 w-full"
 59 |       initial={{ y: -100 }}
 60 |       animate={{ y: 0 }}
 61 |       transition={{ duration: 0.5, ease: "easeOut" }}
 62 |     >
 63 |       <div 
 64 |         className="w-full h-16 md:h-20"
 65 |         style={{ 
 66 |           backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})`,
 67 |           backdropFilter: `blur(${blurAmount}px)`,
 68 |           borderBottom: scrollPosition > 50 ? '1px solid rgba(75, 75, 75, 0.2)' : 'none',
 69 |           transition: 'all 0.3s ease-in-out'
 70 |         }}
 71 |       >
 72 |         <div className="max-w-7xl mx-auto h-full px-4 sm:px-6 lg:px-8 flex justify-between items-center">
 73 |           {/* Logo */}
 74 |           <Link to="/" className="flex items-center space-x-2">
 75 |             <motion.div 
 76 |               whileHover={{ rotate: 360 }}
 77 |               transition={{ duration: 0.6, ease: "easeInOut" }}
 78 |             >
 79 |               <Gauge className="h-7 w-7 text-red-500" />
 80 |             </motion.div>
 81 |             <motion.span 
 82 |               className="font-bold text-lg md:text-xl text-white"
 83 |               whileHover={{ scale: 1.05 }}
 84 |               transition={{ duration: 0.2 }}
 85 |             >
 86 |               Fast<span className="text-red-500">lytics</span>
 87 |             </motion.span>
 88 |           </Link>
 89 | 
 90 |           {/* Desktop Navigation */}
 91 |           <div className="hidden md:flex items-center space-x-1">
 92 |             <ul className="flex space-x-1">
 93 |               {navItems.map((item) => (
 94 |                 <motion.li key={item.name} whileHover={{ scale: 1.05 }}>
 95 |                   <a
 96 |                     href={item.href}
 97 |                     onClick={(e) => handleScroll(e, item.href)}
 98 |                     className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors relative group"
 99 |                   >
100 |                     {item.name}
101 |                     <motion.span 
102 |                       className="absolute bottom-0 left-0 w-0 h-0.5 bg-red-500 group-hover:w-full" 
103 |                       transition={{ duration: 0.3 }}
104 |                     />
105 |                   </a>
106 |                 </motion.li>
107 |               ))}
108 |             </ul>
109 |             <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
110 |               <Link to="/dashboard">
111 |                 <Button variant="default" size="sm" className="ml-4 bg-red-600 hover:bg-red-700 text-white">
112 |                   Explore Dashboard
113 |                   <ChevronRight className="ml-1 h-4 w-4" />
114 |                 </Button>
115 |               </Link>
116 |             </motion.div>
117 |           </div>
118 | 
119 |           {/* Mobile Menu Button */}
120 |           <div className="md:hidden">
121 |             <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
122 |               <SheetTrigger asChild>
123 |                 <Button variant="ghost" size="icon" className="text-gray-300 hover:text-white">
124 |                   <Menu className="h-6 w-6" />
125 |                   <span className="sr-only">Open menu</span>
126 |                 </Button>
127 |               </SheetTrigger>
128 |               <SheetContent side="right" className="w-[280px] bg-gray-900/95 backdrop-blur-md border-l-gray-800 text-white p-0">
129 |                 <div className="p-6 space-y-6">
130 |                   <div className="flex items-center space-x-2">
131 |                     <Gauge className="h-6 w-6 text-red-500" />
132 |                     <span className="font-bold text-lg">Fast<span className="text-red-500">lytics</span></span>
133 |                   </div>
134 |                   
135 |                   <div className="space-y-1 mt-6">
136 |                     {navItems.map((item) => (
137 |                       <a
138 |                         key={item.name}
139 |                         href={item.href}
140 |                         onClick={(e) => handleScroll(e, item.href)}
141 |                         className="flex items-center space-x-2 w-full px-4 py-3 rounded-md text-base font-medium text-gray-300 hover:bg-gray-800/70 hover:text-white transition-colors"
142 |                       >
143 |                         <span>{item.name}</span>
144 |                       </a>
145 |                     ))}
146 |                   </div>
147 |                   
148 |                   <div className="pt-6 mt-6 border-t border-gray-800">
149 |                     <Link to="/dashboard" onClick={() => setMobileMenuOpen(false)}>
150 |                       <Button className="w-full bg-red-600 hover:bg-red-700 text-white">
151 |                         Explore Dashboard
152 |                         <ChevronRight className="ml-1 h-4 w-4" />
153 |                       </Button>
154 |                     </Link>
155 |                   </div>
156 |                 </div>
157 |               </SheetContent>
158 |             </Sheet>
159 |           </div>
160 |         </div>
161 |       </div>
162 |     </motion.nav>
163 |   );
164 | };
165 | 
166 | export default FloatingNavbar;

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