feat: new visulima website

.cursor/rules/general-code-commenting.mdc

@@ -0,0 +1,11 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+---
+description: Ensures helpful comments are added to the code and that old, relevant comments are preserved.
+globs: **/*.*
+---
+- Always add helpful comments to the code explaining what you are doing.
+- Never delete old comments, unless they are no longer relevant because the code has been rewritten or deleted.

.cursor/rules/naming-conventions-rule.mdc

@@ -0,0 +1,12 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+---
+description: Enforces specific naming conventions for React and TypeScript code to maintain consistency.
+globs: **/*.{ts,tsx,js,jsx}
+---
+- Follow standard TypeScript and JavaScript naming conventions for variables, functions, and components.
+- Component names should be PascalCase.
+- Variable and function names should be camelCase.

.cursor/rules/performance-optimization-rule.mdc

@@ -0,0 +1,13 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+---
+description: Rules to optimize performance of React and TypeScript components.
+globs: **/*.{ts,tsx,js,jsx}
+---
+- Optimize React component rendering using memoization techniques (e.g., React.memo).
+- Avoid unnecessary re-renders.
+- Lazy load components and images when possible.
+- Use efficient data structures and algorithms.

.cursor/rules/react-and-typescript-general-rules.mdc

@@ -0,0 +1,23 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+---
+description: General rules for React and TypeScript projects, focusing on code clarity and best practices.
+globs: **/*.{ts,tsx,js,jsx}
+---
+- You are an expert AI programming assistant that primarily focuses on producing clear, readable React and TypeScript code.
+- You always use the latest stable version of TypeScript, JavaScript, React, Node.js, Tanstack Start, Shaden UI, Tailwind CSS v4 and you are familiar with the latest features and best practices.
+- You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
+- Follow the user’s requirements carefully & to the letter.
+- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
+- Confirm, then write code!
+- Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.
+- Focus on readability over being performant.
+- Fully implement all requested functionality.
+- Leave NO todo’s, placeholders or missing pieces.
+- Ensure code is complete! Verify thoroughly finalized.
+- Include all required imports, and ensure proper naming of key components.
+- Be concise. Minimize any other prose.
+- If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing. If you do not know the answer, say so instead of guessing.

.cursor/rules/tailwind-css-v4.mdc

@@ -0,0 +1,223 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+// Update globs depending on your framework
+---
+name: tailwind_v4
+description: Guide for using Tailwind CSS v4 instead of v3.x
+globs: ["**/*.{js,ts,jsx,tsx,mdx,css}"]
+tags:
+  - tailwind
+  - css
+---
+
+# Tailwind CSS v4
+
+## Core Changes
+
+- **CSS-first configuration**: Configuration is now done in CSS instead of JavaScript
+  - Use `@theme` directive in CSS instead of `tailwind.config.js`
+  - Example:
+    ```css
+    @import "tailwindcss";
+
+    @theme {
+      --font-display: "Satoshi", "sans-serif";
+      --breakpoint-3xl: 1920px;
+      --color-avocado-500: oklch(0.84 0.18 117.33);
+      --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+    }
+    ```
+- Legacy `tailwind.config.js` files can still be imported using the `@config` directive:
+  ```css
+  @import "tailwindcss";
+  @config "../../tailwind.config.js";
+  ```
+- **CSS import syntax**: Use `@import "tailwindcss"` instead of `@tailwind` directives
+  - Old: `@tailwind base; @tailwind components; @tailwind utilities;`
+  - New: `@import "tailwindcss";`
+
+- **Package changes**:
+  - PostCSS plugin is now `@tailwindcss/postcss` (not `tailwindcss`)
+  - CLI is now `@tailwindcss/cli`
+  - Vite plugin is `@tailwindcss/vite`
+  - No need for `postcss-import` or `autoprefixer` anymore
+
+- **Native CSS cascade layers**: Uses real CSS `@layer` instead of Tailwind's custom implementation
+
+## Theme Configuration
+
+- **CSS theme variables**: All design tokens are available as CSS variables
+  - Namespace format: `--category-name` (e.g., `--color-blue-500`, `--font-sans`)
+  - Access in CSS: `var(--color-blue-500)`
+  - Available namespaces:
+    - `--color-*` : Color utilities like `bg-red-500` and `text-sky-300`
+    - `--font-*` : Font family utilities like `font-sans`
+    - `--text-*` : Font size utilities like `text-xl`
+    - `--font-weight-*` : Font weight utilities like `font-bold`
+    - `--tracking-*` : Letter spacing utilities like `tracking-wide`
+    - `--leading-*` : Line height utilities like `leading-tight`
+    - `--breakpoint-*` : Responsive breakpoint variants like `sm:*`
+    - `--container-*` : Container query variants like `@sm:*` and size utilities like `max-w-md`
+    - `--spacing-*` : Spacing and sizing utilities like `px-4` and `max-h-16`
+    - `--radius-*` : Border radius utilities like `rounded-sm`
+    - `--shadow-*` : Box shadow utilities like `shadow-md`
+    - `--inset-shadow-*` : Inset box shadow utilities like `inset-shadow-xs`
+    - `--drop-shadow-*` : Drop shadow filter utilities like `drop-shadow-md`
+    - `--blur-*` : Blur filter utilities like `blur-md`
+    - `--perspective-*` : Perspective utilities like `perspective-near`
+    - `--aspect-*` : Aspect ratio utilities like `aspect-video`
+    - `--ease-*` : Transition timing function utilities like `ease-out`
+    - `--animate-*` : Animation utilities like `animate-spin`
+
+
+- **Simplified theme configuration**: Many utilities no longer need theme configuration
+  - Utilities like `grid-cols-12`, `z-40`, and `opacity-70` work without configuration
+  - Data attributes like `data-selected:opacity-100` don't need configuration
+
+- **Dynamic spacing scale**: Derived from a single spacing value
+  - Default: `--spacing: 0.25rem`
+  - Every multiple of the base value is available (e.g., `mt-21` works automatically)
+
+- **Overriding theme namespaces**:
+  - Override entire namespace: `--font-*: initial;`
+  - Override entire theme: `--*: initial;`
+
+
+## New Features
+
+- **Container query support**: Built-in now, no plugin needed
+  - `@container` for container context
+  - `@sm:`, `@md:`, etc. for container-based breakpoints
+  - `@max-md:` for max-width container queries
+  - Combine with `@min-md:@max-xl:hidden` for ranges
+
+- **3D transforms**:
+  - `transform-3d` enables 3D transforms
+  - `rotate-x-*`, `rotate-y-*`, `rotate-z-*` for 3D rotation
+  - `scale-z-*` for z-axis scaling
+  - `translate-z-*` for z-axis translation
+  - `perspective-*` utilities (`perspective-near`, `perspective-distant`, etc.)
+  - `perspective-origin-*` utilities
+  - `backface-visible` and `backface-hidden`
+
+- **Gradient enhancements**:
+  - Linear gradient angles: `bg-linear-45` (renamed from `bg-gradient-*`)
+  - Gradient interpolation: `bg-linear-to-r/oklch`, `bg-linear-to-r/srgb`
+  - Conic and radial gradients: `bg-conic`, `bg-radial-[at_25%_25%]`
+
+- **Shadow enhancements**:
+  - `inset-shadow-*` and `inset-ring-*` utilities
+  - Can be composed with regular `shadow-*` and `ring-*`
+
+- **New CSS property utilities**:
+  - `field-sizing-content` for auto-resizing textareas
+  - `scheme-light`, `scheme-dark` for `color-scheme` property
+  - `font-stretch-*` utilities for variable fonts
+
+## New Variants
+
+- **Composable variants**: Chain variants together
+  - Example: `group-has-data-potato:opacity-100`
+
+- **New variants**:
+  - `starting` variant for `@starting-style` transitions
+  - `not-*` variant for `:not()` pseudo-class
+  - `inert` variant for `inert` attribute
+  - `nth-*` variants (`nth-3:`, `nth-last-5:`, `nth-of-type-4:`, `nth-last-of-type-6:`)
+  - `in-*` variant (like `group-*` but without adding `group` class)
+  - `open` variant now supports `:popover-open`
+  - `**` variant for targeting all descendants
+
+## Custom Extensions
+
+- **Custom utilities**: Use `@utility` directive
+  ```css
+  @utility tab-4 {
+    tab-size: 4;
+  }
+  ```
+
+- **Custom variants**: Use `@variant` directive
+  ```css
+  @variant pointer-coarse (@media (pointer: coarse));
+  @variant theme-midnight (&:where([data-theme="midnight"] *));
+  ```
+
+- **Plugins**: Use `@plugin` directive
+  ```css
+  @plugin "@tailwindcss/typography";
+  ```
+
+## Breaking Changes
+
+- **Removed deprecated utilities**:
+  - `bg-opacity-*` → Use `bg-black/50` instead
+  - `text-opacity-*` → Use `text-black/50` instead
+  - And others: `border-opacity-*`, `divide-opacity-*`, etc.
+
+- **Renamed utilities**:
+  - `shadow-sm` → `shadow-xs` (and `shadow` → `shadow-sm`)
+  - `drop-shadow-sm` → `drop-shadow-xs` (and `drop-shadow` → `drop-shadow-sm`)
+  - `blur-sm` → `blur-xs` (and `blur` → `blur-sm`)
+  - `rounded-sm` → `rounded-xs` (and `rounded` → `rounded-sm`)
+  - `outline-none` → `outline-hidden` (for the old behavior)
+
+- **Default style changes**:
+  - Default border color is now `currentColor` (was `gray-200`)
+  - Default `ring` width is now 1px (was 3px)
+  - Placeholder text now uses current color at 50% opacity (was `gray-400`)
+  - Hover styles only apply on devices that support hover (`@media (hover: hover)`)
+
+- **Syntax changes**:
+  - CSS variables in arbitrary values: `bg-(--brand-color)` instead of `bg-[--brand-color]`
+  - Stacked variants now apply left-to-right (not right-to-left)
+  - Use CSS variables instead of `theme()` function 
+
+## Advanced Configuration
+
+- **Using a prefix**:
+  ```css
+  @import "tailwindcss" prefix(tw);
+  ```
+  - Results in classes like `tw:flex`, `tw:bg-red-500`, `tw:hover:bg-red-600`
+
+- **Source detection**:
+  - Automatic by default (ignores `.gitignore` files and binary files)
+  - Add sources: `@source "../node_modules/@my-company/ui-lib";`
+  - Disable automatic detection: `@import "tailwindcss" source(none);`
+
+- **Legacy config files**:
+  ```css
+  @import "tailwindcss";
+  @config "../../tailwind.config.js";
+  ```
+
+- **Dark mode configuration**:
+  ```css
+  @import "tailwindcss";
+  @variant dark (&:where(.dark, .dark *));
+  ```
+
+- **Container customization**: Extend with `@utility`
+  ```css
+  @utility container {
+    margin-inline: auto;
+    padding-inline: 2rem;
+  }
+  ```
+
+- **Using `@apply` in Vue/Svelte**:
+  ```html
+  <style>
+    @import "../../my-theme.css" theme(reference);
+    /* or */
+    @import "tailwindcss/theme" theme(reference);
+
+    h1 {
+      @apply font-bold text-2xl text-red-500;
+    }
+  </style>
+  ```

.cursor/rules/tanstack-rule.mdc

@@ -0,0 +1,11 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+---
+description: General rules for Tanstack Start.
+globs: **/*.{ts,tsx,js,jsx}
+---
+- If you try to import a Link use import { Link } from "@tanstack/react-router" not import { Link } from "@tanstack/react-router"
+- No need to import import * as React from "react"

.cursor/rules/typescript-usage-rule.mdc

@@ -0,0 +1,13 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+---
+description: Specific guidelines for TypeScript usage, including strict typing and interface usage.
+globs: **/*.{ts,tsx}
+---
+- Utilize TypeScript's features to ensure type safety.
+- Prefer interfaces over types when defining object shapes.
+- Use generics to create reusable components and functions.
+- Enforce strict typing and avoid 'any' type as much as possible.

.cursor/rules/ui-and-styling-rule.mdc

@@ -0,0 +1,12 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+---
+description: Guidelines for UI and styling, focusing on Tailwind CSS and Shaden UI best practices.
+globs: **/*.{ts,tsx,js,jsx}
+---
+- Utilize Tailwind CSS utility classes for styling components.
+- Follow Shaden UI component guidelines and best practices.
+- Ensure UI is responsive and accessible.

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.github/CODEOWNERS

@@ -0,0 +1 @@
+*               @prisis