🔠 Typography :

• Fonts:
  • Sans-serif (font-sans): Used for main headings (h1–h4) to maintain a modern and clean look.
  • Serif (font-serif): Applied to paragraphs, blockquotes, lists, and various smaller text elements to create a classic and readable design.
• Heading Styles:
  • h1: Extra-large text, responsive from 5xl to 7xl, with tight line height and spacing for page titles.
  • h2: Large heading, responsive from 5xl to 6xl, used for major sections, with mt-8 for spacing.
  • h3 and h4: Medium (2xl) and small (xl) heading sizes for subheadings, with tight tracking.
• Paragraph & Text Elements:
  • Paragraph (p): Serif font, muted foreground color, leading-8 for readability.
  • Lead Text (lead): Used for introductory or emphasized text with text-xl and muted color.
  • Large & Small Text: Defined with serif font for contrast, with large as lg and bold, small as sm with tight line height.
• Special Text Styles:
  • Blockquote: Serif font, left border (border-l-2), and italic, with padding for emphasis.
  • List: Serif font, indented (ml-6) with a bullet style, each list item spaced with top margin.
  • Muted Text (muted): Small, muted text for secondary information.
  • Links (link): Serif font, primary color with an underline and hover effect for clear interaction.
• Responsive Adjustments:
  • Font sizes adjust on larger screens (e.g., lg:text-7xl for h1), ensuring legibility across devices.

🎨 Styling

• Fonts:
  • Inter: Primary font for general text.
  • Nokora: Additional font, likely used for specific sections or for diversity in text styling.
• Tailwind Setup:
  • Base, Components, Utilities: Tailwind’s @base, @components, and @utilities layers are included to structure the CSS according to Tailwind conventions.
• Root Variables:
  • Color Palette: Custom CSS variables are defined for various UI elements:
    • Background (-background), Foreground (-foreground), and Card (-card) with Foreground (-card-foreground).
    • Primary, Secondary, Muted, and Accent colors, each with foreground options for text color contrast.
    • Destructive colors for error or alert actions, with matching foreground color.
    • Border and Input colors for general use in form elements and dividers.
    • Ring color for focus or highlight effects.
    • Chart Colors: Five custom chart colors (-chart-1 to -chart-5) for data visualizations or specific color-coded UI components.
    • Radius: Default border-radius of 0.5rem for rounded UI elements.
• Global Styles:
  • Border: Applied across all elements to standardize the border color (border-border).
  • Body Styling: Background and text colors are set globally for consistency.
  • Inner Width Utility: .innerWidth class defined to set a maximum width, center content, and add padding (px-6) for responsiveness, maxed at 7xl.
• Font Family on Body:
  • Inter is explicitly set as the body font, providing a consistent look and feel across the entire project.

📁 Folder Structures

• Folder Structure:
  • assets: Static files (images, icons).
  • components: Split into common (reusable), layout (layout components), section (page sections), and ui (ShadCN UI components).
  • hooks: Custom React hooks.
  • lib: Utility functions and shared data.
  • pages: Page components.
  • services: API services.
  • store: Global state management.
• Styling:
  • Use TailwindCSS and tailwind-merge for utility styling.
  • Material-UI for theme-based components.
  • ShadCN UI for consistent elements like Avatar, Button, Badge.
  • styled-components or @emotion/styled for advanced CSS-in-JS.
• Core Libraries:
  • Redux Toolkit and react-redux for state management.
  • react-router-dom for routing.
  • framer-motion and @motionone/utils for animations.
  • Radix UI for accessible primitives.
• Naming & Organization:
  • Use PascalCase for components and camelCase for hooks.
  • Group components logically and keep naming consistent for readability.