### Clone ARIM Technologies Repository

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Clones the ARIM Technologies official website repository from GitHub and navigates into the project directory. Requires Git to be installed.

```bash
# Navigate to your desired directory
cd /path/to/your/projects

# Clone the repository
git clone https://github.com/your-username/arim-technologies-official.git

# Navigate into the project directory
cd arim-technologies-official/website
```

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

### Run ARIM Technologies Project in Development Mode

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Starts the development server for the ARIM Technologies website, enabling features like Hot Module Replacement (HMR) and fast refresh. The project will be accessible at http://localhost:3000/.

```bash
# Start the development server
npm run dev

# The website will be available at:
# http://localhost:3000/
```

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

### Build and Verify ARIM Technologies Project

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Builds the project to verify the installation and dependencies. A successful build indicates that the project is set up correctly and ready for development or deployment.

```bash
# Check if everything is installed correctly
npm run build

# If successful, you should see:
# ✓ built in X.XXs
```

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

### Troubleshoot Module Resolution Issues

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Guides on resolving module resolution problems within the project. This typically involves verifying that all dependencies are correctly installed or reinstalling specific packages.

```bash
# Check if all dependencies are installed
npm ls

# Reinstall specific package
npm install package-name@version
```

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

### Install Project Dependencies

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Installs all necessary project dependencies using either npm or yarn. This step is crucial after cloning the repository to ensure all required packages are available.

```bash
# Install all required packages
npm install

# Or if you prefer yarn
yarn install
```

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

### Preview ARIM Production Build

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

This command allows you to preview the production build of the ARIM Technologies website locally. It starts a local server to test the deployed version before actual deployment.

```bash
npm run preview
```

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

### Create Production Build and Preview

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Generates an optimized production build of the ARIM Technologies website and provides a way to preview it locally. This is used to test the final deployed version before release.

```bash
# Create a production build
npm run build

# Preview the production build locally
npm run preview
```

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

### Bash Script for Update and Deployment

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

A standard bash script for pulling the latest code, installing dependencies, building the project, and previewing before deploying to production.

```bash
# Standard update workflow
git pull origin main
npm install
npm run build
npm run preview  # Test locally
# Deploy to production
```

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

### Troubleshoot Failed Dependency Installation

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Offers solutions for issues encountered during dependency installation. This involves clearing the npm cache, removing the `node_modules` and `package-lock.json` files, and reinstalling dependencies.

```bash
# Clear npm cache
npm cache clean --force

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
```

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

### Pull Latest Changes and Update Dependencies

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Fetches the latest changes from the main branch, installs new dependencies, and rebuilds the project. It also includes commands to check for outdated packages, update all packages, or update specific packages.

```bash
# Fetch and pull latest changes
git pull origin main

# Install any new dependencies
npm install

# Rebuild if necessary
npm run build

# Check for outdated packages
npm outdated

# Update packages (be careful with major versions)
npm update

# Or update specific packages
npm install package-name@latest
```

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

### Recommended VS Code Extensions for ARIM Technologies Development

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

A JSON configuration listing recommended VS Code extensions to enhance the development experience for the ARIM Technologies project. These include tools for Tailwind CSS, TypeScript, Prettier, ESLint, and more.

```json
{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-json",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}
```

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

### Deploy ARIM Website to Vercel

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

This snippet shows how to deploy the ARIM Technologies website using Vercel. It includes installing the Vercel CLI, navigating to the website directory, and running the Vercel deploy command.

```bash
npm install -g vercel
cd website
vercel
```

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

### GitHub Actions for Production Deployment

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

A GitHub Actions workflow file (`deploy.yml`) to automate the deployment process to production. It checks out code, sets up Node.js, installs dependencies, builds the project, and deploys to Netlify.

```yaml
# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run build
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.2
        with:
          publish-dir: './build'
          production-branch: main
```

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

### Deploy ARIM Website to GitHub Pages

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Steps to deploy the ARIM Technologies website to GitHub Pages. This involves configuring the 'homepage' in package.json, installing the 'gh-pages' package, and adding deploy scripts.

```json
{
  "homepage": "https://yourusername.github.io/repository-name"
}
```

```json
{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}
```

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

### Troubleshoot Build and Linting Errors

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Provides commands to diagnose and fix build and code quality issues. It includes checking TypeScript compilation, ESLint for code style, and Prettier for code formatting.

```bash
# Check TypeScript errors
npx tsc --noEmit

# Check ESLint errors
npm run lint

# Fix formatting issues
npm run format
```

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

### Starting Development Server with npm

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/ADDING_NEW_PAGES.md

Command to start the development server for the project using npm. This command is essential for local development and testing of new features.

```bash
npm run dev
```

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

### Google Cloud Storage Bucket Operations

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Commands for managing Google Cloud Storage buckets, including creation, file upload, and making objects publicly viewable. Requires `gsutil` to be installed and configured.

```bash
gsutil mb gs://your-website-bucket
```

```bash
gsutil -m cp -r build/* gs://your-website-bucket/
```

```bash
gsutil iam ch allUsers:objectViewer gs://your-website-bucket
```

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

### React Code Splitting with Lazy Loading

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Example of implementing code splitting in a React application using `React.lazy` for lazy loading components and `Suspense` for handling the loading state.

```typescript
// Lazy load components
const LazyContactForm = React.lazy(() => import('./ContactForm'));

// Use Suspense
<Suspense fallback={<div>Loading...</div>}>
  <LazyContactForm />
</Suspense>
```

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

### Troubleshoot Port Already in Use

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Provides commands to resolve the 'Port already in use' error during development. It includes methods to find and kill the process using the port or to run the development server on an alternative port.

```bash
# Error: Port 3000 is already in use
# Solution: Kill the process or use a different port
lsof -ti:3000 | xargs kill -9

# Or specify a different port
npm run dev -- --port 3001
```

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

### Build ARIM Website for Production

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

This snippet demonstrates the command to create a production build for the ARIM Technologies website using npm. It navigates to the website directory and executes the build script.

```bash
cd website
npm run build
```

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

### ARIM Technologies Environment Variables Configuration

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/SETUP_INSTALLATION.md

Defines environment variables for local development by creating a `.env.local` file. These variables, such as application title and contact information, are used to customize the website's behavior.

```plaintext
# .env.local
VITE_APP_TITLE=ARIM Technologies
VITE_APP_DESCRIPTION=Professional IT Services
VITE_CONTACT_EMAIL=contact@arimtech.com
VITE_CONTACT_PHONE=+40 724 866 640
```

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

### Deploy ARIM Website to Netlify

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Instructions for deploying the ARIM Technologies website to Netlify. This involves pushing code to GitHub, configuring Netlify with build commands and publish directories, and setting up a custom domain.

```bash
git add .
git commit -m "Ready for deployment"
git push origin main
```

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

### Deploy ARIM Website via FTP/SFTP

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Instructions for deploying the ARIM Technologies website using FTP/SFTP. This involves building the project and uploading the contents of the 'build/' directory to the server's public root.

```bash
npm run build
```

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

### Email and Phone Contact Links

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Provides examples of creating clickable email and phone links using anchor tags with 'mailto:' and 'tel:' protocols respectively.

```typescript
// Email links
<a href="mailto:contact@arimtech.com" className="hover:text-[#b0c4b1] transition-colors">
  contact@arimtech.com
</a>

// Phone links
<a href="tel:+40724866640" className="hover:text-[#b0c4b1] transition-colors">
  +40 724 866 640
</a>
```

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

### Nginx Configuration for Serving Files

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Sets up Nginx to serve static files or fall back to index.html for routing, suitable for single-page applications.

```nginx
location / {
  try_files $uri $uri/ /index.html;
}
```

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

### Display Content Based on Screen Size

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Provides an example of conditionally rendering content for mobile and desktop views using Tailwind CSS's responsive display utilities.

```typescript
// Show different content for mobile vs desktop
<div className="block sm:hidden">
  <p>Mobile-specific content</p>
</div>

<div className="hidden sm:block">
  <p>Desktop-specific content</p>
</div>
```

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

### Component Documentation Example with JSDoc

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/ADDING_NEW_PAGES.md

Provides an example of documenting a React component (`BlogCard`) using JSDoc comments. This includes detailing props like title, excerpt, date, author, image, and slug for better code understanding and maintainability.

```typescript
/**
 * BlogCard component for displaying individual blog posts
 * @param title - The title of the blog post
 * @param excerpt - A brief summary of the post content
 * @param date - Publication date
 * @param author - Author name
 * @param image - Optional featured image
 * @param slug - URL slug for the post
 */
export function BlogCard({ title, excerpt, date, author, image, slug }: BlogCardProps) {
  // Component implementation
}
```

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

### Vite Bundle Analyzer Configuration

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Configuration for adding a bundle analyzer to a Vite project using `rollup-plugin-visualizer`. This helps in analyzing the bundle size and composition.

```bash
# Install bundle analyzer
npm install --save-dev rollup-plugin-visualizer
```

```typescript
# Add to vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: 'bundle-analysis.html'
    })
  ]
});
```

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

### Bash: Dependency Installation and Cache Clearing

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Resolves 'package not found' errors by instructing to install missing packages, verify 'package.json', clear npm cache, and reinstall all dependencies.

```bash
# Install missing package
npm install package-name

# Check package.json for correct dependencies
# Clear npm cache
npm cache clean --force

# Reinstall all dependencies
rm -rf node_modules package-lock.json
npm install
```

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

### Environment Variable Configuration

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Configuration of environment variables for development and production environments using `.env` files. Also includes build-time configuration for application version and build time using Vite.

```bash
# .env.local (development)
VITE_APP_TITLE=ARIM Technologies (Dev)
VITE_CONTACT_EMAIL=dev@arimtech.com

# .env.production (production)
VITE_APP_TITLE=ARIM Technologies
VITE_CONTACT_EMAIL=contact@arimtech.com
```

```typescript
// vite.config.ts
export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    __BUILD_TIME__: JSON.stringify(new Date().toISOString())
  }
});
```

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

### Apache .htaccess for Rewriting

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Configures Apache to rewrite requests, serving index.html for non-existent files or directories, commonly used for single-page applications.

```apache
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
```

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

### Netlify Build Hook Trigger

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

A bash command to trigger a Netlify deployment via a build hook URL. This is useful for automating deployments when changes are pushed to the repository.

```bash
# Trigger deployment via webhook
curl -X POST https://api.netlify.com/build_hooks/YOUR_HOOK_ID
```

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

### Troubleshooting Build Failures

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Commands and common issues to check when a build process fails. Includes running the build command and identifying potential problems like TypeScript errors, missing dependencies, or environment variable issues.

```bash
# Check for errors
npm run build

# Common issues:
# - TypeScript errors
# - Missing dependencies
# - Environment variables not set
```

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

### Bash: Bundle Size Analysis

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Helps diagnose slow loading performance by guiding users to check their website's bundle size after building the project and identifying large files in the output.

```bash
# Check bundle size
npm run build
# Look for large files in build output
```

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

### Page Navigation Link

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Demonstrates how to implement navigation links within a React application using an onClick handler for programmatic navigation and a Link component for declarative navigation.

```typescript
// In navigation components
<button onClick={() => onNavigate('services')}> 
  Servicii
</button>

// Direct link navigation
<Link to={PATHS[PAGE.services]}>Servicii</Link>
```

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

### Responsive Text Sizing for Headings

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Demonstrates how to apply responsive text sizing to a heading element across various screen sizes using Tailwind CSS classes.

```typescript
// Responsive text sizing
<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
  Responsive Heading
</h1>
```

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

### Upload ARIM Website Files using AWS CLI

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

This snippet demonstrates how to upload the ARIM Technologies website build files to an AWS S3 bucket using the AWS CLI. It includes creating a bucket and synchronizing the build directory.

```bash
aws s3 mb s3://your-website-bucket
aws s3 sync build/ s3://your-website-bucket --delete
```

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

### Troubleshooting Deployment Issues

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Provides steps to diagnose and fix deployment problems where the website is not accessible after deployment. This includes checking deployment logs, verifying build file uploads, server configuration, and routing setup.

```bash
npm run build
npm run preview
```

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

### HTML Security Headers

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Meta tags for configuring security headers in an HTML file or server configuration to enhance website security. Includes Content Security Policy, X-Frame-Options, and X-Content-Type-Options.

```html
<!-- Add to index.html or configure on server -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta http-equiv="X-Frame-Options" content="DENY">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
```

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

### Create BlogCard Component

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/ADDING_NEW_PAGES.md

An example of a reusable BlogCard component for displaying blog post summaries. It includes props for title, excerpt, date, author, image, and slug, and uses a UI Card component for styling.

```typescript
// src/components/blog/BlogCard.tsx
import React from 'react';
import { Card } from '../ui/Card';

interface BlogCardProps {
  title: string;
  excerpt: string;
  date: string;
  author: string;
  image?: string;
  slug: string;
}

export function BlogCard({ title, excerpt, date, author, image, slug }: BlogCardProps) {
  return (
    <Card className="hover:shadow-xl transition-shadow duration-300">
      {image && (
        <img 
          src={image} 
          alt={title}
          className="w-full h-48 object-cover rounded-t-lg"
        />
      )}
      
      <div className="p-6">
        <div className="flex items-center text-sm text-gray-600 mb-3">
          <span>{date}</span>
          <span className="mx-2">•</span>
          <span>{author}</span>
        </div>
        
        <h3 className="font-['Roboto_Serif:Bold',_sans-serif] font-bold text-[#1a1a1a] text-xl sm:text-2xl mb-3">
          {title}
        </h3>
        
        <p className="font-['Public_Sans:Regular',_sans-serif] font-normal text-[#1a1a1a] text-base leading-relaxed mb-4">
          {excerpt}
        </p>
        
        <button className="text-[#b0c4b1] hover:text-[#9bb19c] font-medium transition-colors">
          Citește mai mult →
        </button>
      </div>
    </Card>
  );
}
```

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

### Bash: Package Update and Version Conflict Resolution

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Guides on managing version conflicts and peer dependency warnings by checking for outdated packages, updating them carefully, inspecting peer dependency requirements, and using exact versions when necessary.

```bash
# Check for outdated packages
npm outdated

# Update packages carefully
npm update

# Check peer dependency requirements
npm ls package-name

# Use exact versions if needed
npm install package-name@exact-version
```

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

### CSS: Tailwind CSS Responsive Design

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMPONENT_ARCHITECTURE.md

Illustrates responsive design using Tailwind CSS breakpoints. The example shows how to apply different text sizes to a heading based on screen size (sm, lg, xl).

```html
<h2 className="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl">
  Responsive Title
</h2>
```

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

### TypeScript: Browser Feature Support and Polyfills

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Addresses cross-browser compatibility issues by advising to check browser support for features, use polyfills for older browsers, and test across multiple browsers. Includes examples of browser-specific CSS.

```typescript
// Check browser support for features
// Use polyfills for older browsers
// Test in multiple browsers during development

// Add browser-specific CSS if needed
@supports (-webkit-appearance: none) {
  /* Safari-specific styles */
}
```

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

### Update Image Alt Text

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Provides an example of updating the 'alt' attribute for an image tag to ensure accessibility. The alt text should be meaningful and descriptive.

```typescript
<img 
  src={serviceImage} 
  alt="Dezvoltare software personalizată pentru companii" 
  className="w-full h-auto" 
/>
```

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

### Optimizing Development Server Startup

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Provides solutions for slow development server startup times (`npm run dev`). This includes clearing `node_modules` and reinstalling, using a faster package manager like pnpm, and checking for large dependencies.

```bash
rm -rf node_modules package-lock.json
npm install
```

```bash
npm install -g pnpm
pnpm install
```

```bash
npm ls --depth=0
```

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

### Optimizare Build cu Vite

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/SITEMAP.md

Configurarea unui proiect pentru build-uri optimizate folosind Vite, un instrument modern de build frontend, pentru performanță îmbunătățită.

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'esbuild',
    rollupOptions: {
      // Example: Code splitting configuration
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString() + '/vendor';
          }
        }
      }
    }
  }
});

```

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

### Build and Deployment Commands

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/SITEMAP.md

Provides essential npm commands for managing the development server and building the project for production. These commands are crucial for the project's lifecycle.

```Bash
npm run dev          # Development server (port 3000)
npm run build        # Production build
```

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

### TypeScript: Single Responsibility Principle Example

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMPONENT_ARCHITECTURE.md

Demonstrates the Single Responsibility Principle in React components. The 'Good' example shows a Button component with a single purpose, while the 'Bad' example illustrates a component with multiple responsibilities.

```typescript
export function Button({ onClick, children, variant }: ButtonProps) {
  return <button onClick={onClick} className={getVariantClasses(variant)}>{children}</button>;
}

export function ButtonWithForm({ onClick, children, onSubmit, formData }: ButtonFormProps) {
  // This component does too many things
}
```

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

### React: Composition Over Inheritance Example

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMPONENT_ARCHITECTURE.md

Illustrates the principle of Composition over Inheritance in React. The 'Good' example shows how to compose components like Card, CardHeader, CardTitle, and CardContent for flexibility. The 'Bad' example shows inheritance, which can lead to tight coupling.

```jsx
<Card>
  <CardHeader>
    <CardTitle>Service Title</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Service description</p>
  </CardContent>
</Card>

class ServiceCard extends Card {
  // This creates tight coupling
}
```

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

### Production Build Output Structure

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/SITEMAP.md

Illustrates the directory structure and file contents generated after running the production build command. It highlights the bundled CSS and JavaScript files, along with the HTML entry point.

```Bash
build/
├── assets/
│   ├── index-C8Fk2kgk.css    # 116KB CSS bundle
│   └── index-Db_doohN.js     # 269KB JS bundle
└── index.html                # 467B HTML entry point
```

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

### Update Brand Colors

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Shows how to update primary, secondary, and text colors used in the application by defining them as constants, likely for theming purposes.

```typescript
// Update colors in components
const primaryColor = "#b0c4b1";  // Primary green
const secondaryColor = "#dedbd2"; // Secondary beige
const textColor = "#1a1a1a";     // Text color
```

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

### Anchor Link for Section Navigation

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Shows how to create an anchor link that smoothly scrolls the user to a specific section of the page, identified by an ID.

```typescript
// Jump to specific sections
<a href="#services" className="scroll-smooth">
  Vezi serviciile noastre
</a>
```

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

### Bash: Image Optimization Commands

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Provides guidance on optimizing images for web use using command-line tools or services. Recommends appropriate formats and resizing techniques.

```bash
# Optimize images before adding to assets
# Use tools like ImageOptim, TinyPNG, or Squoosh
# Convert to appropriate formats (PNG for logos, JPEG for photos)
# Resize to appropriate dimensions
```

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

### Formspree API Endpoint Configuration

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/DEPLOYMENT_GUIDE.md

Configuration for the Formspree API endpoint in a React application (ContactForm.tsx), dynamically setting the endpoint based on the Node environment.

```typescript
// Update in ContactForm.tsx
const FORM_ENDPOINT = process.env.NODE_ENV === 'production' 
  ? "https://formspree.io/f/PRODUCTION_FORM_ID"
  : "https://formspree.io/f/DEV_FORM_ID";
```

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

### Update Font Family

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Demonstrates how to change the font family for headings or other text elements using Tailwind CSS by specifying the font class and weight.

```typescript
// Update font classes
<h1 className="font-['Your_Font:Bold',_sans-serif] font-bold">
  New Title
</h1>
```

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

### Update Contact Details

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Demonstrates how to update contact information such as email, phone number, and location within a React component, likely for a contact page.

```typescript
// Update contact information in ContactPage.tsx
const contactInfo = [
  {
    icon: <ContactIcon size="small" />,
    title: "Email",
    content: "your-new-email@domain.com"  // Update this
  },
  {
    icon: <PhoneIcon />,
    title: "Telefon",
    content: "+40 XXX XXX XXX"  // Update this
  },
  {
    icon: <LocationIcon />,
    title: "Locație",
    content: "New City, New County, România"  // Update this
  }
];
```

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

### Providing Information for Help

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Details the essential information to include when seeking help for a technical issue. This ensures that those assisting have all the necessary context to provide effective solutions.

```bash
# Error message (exact text)
# Steps to reproduce
# Expected vs actual behavior
# Browser and OS information
# Relevant code snippets
# What you've already tried
```

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

### Formspree Contact Form Configuration

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Shows how to configure a contact form for integration with Formspree by updating the form endpoint and defining the form fields with their properties.

```typescript
// Update form endpoint
const FORM_ENDPOINT = "https://formspree.io/f/YOUR_FORM_ID";

// Update form fields
const formFields = [
  { name: "name", label: "Numele tău", type: "text", required: true },
  { name: "email", label: "Email", type: "email", required: true },
  { name: "message", label: "Mesajul tău", type: "textarea", required: true }
];
```

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

### Package Configuration (package.json)

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/PROJECT_STRUCTURE.md

Defines the project's metadata, scripts, dependencies, and development dependencies. It specifies the project name, version, build and development scripts using Vite, and lists core dependencies like React and React Router, as well as development tools like TypeScript and Tailwind CSS.

```json
{
  "name": "ARIM TECHNOLOGIES",
  "version": "0.1.0",
  "scripts": {
    "dev": "vite",              # Development server
    "build": "vite build",       # Production build
    "preview": "vite preview"    # Preview production build
  },
  "dependencies": {
    "react": "^18.0.0",         # React framework
    "react-dom": "^18.0.0",     # React DOM rendering
    "react-router-dom": "^6.0.0" # Client-side routing
  },
  "devDependencies": {
    "@types/react": "^18.0.0",  # React TypeScript types
    "@vitejs/plugin-react-swc": "^3.0.0", # Vite React plugin
    "tailwindcss": "^4.1.3",    # CSS framework
    "typescript": "^5.0.0"      # TypeScript compiler
  }
}
```

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

### React: Conditional Rendering Example

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMPONENT_ARCHITECTURE.md

Demonstrates conditional rendering in a React component using TypeScript. The `Layout` component conditionally renders a `HeroSection` based on the `hasHero` prop.

```typescript
export function Layout({ children, hasHero = false }: LayoutProps) {
  return (
    <div className="min-h-screen">
      <Header />
      {hasHero && <HeroSection />}
      <main>{children}</main>
      <Footer />
    </div>
  );
}
```

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

### Configure Vite for React Project

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/PROJECT_STRUCTURE.md

Sets up the Vite build tool for a React project, including essential plugins, path aliases for source files, build targets, output directory, and development server settings.

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
  build: {
    target: 'esnext',
    outDir: 'build'
  },
  server: {
    port: 3000,
    open: true
  }
});
```

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

### CSS: Vendor Prefixes and Fallbacks

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Solves CSS compatibility problems by demonstrating the use of vendor prefixes for non-standard properties and providing fallbacks for unsupported CSS features.

```css
/* Use vendor prefixes when needed */
.element {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
}

/* Use fallbacks for unsupported properties */
.element {
  background: #b0c4b1; /* Fallback */
  background: linear-gradient(45deg, #b0c4b1, #dedbd2);
}
```

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

### Adjust Font Sizes Responsively

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Shows how to apply responsive font sizes to a heading element using Tailwind CSS, adjusting the size based on different screen breakpoints.

```typescript
// Update text sizes
<h2 className="text-2xl sm:text-3xl lg:text-4xl">
  Responsive Title
</h2>
```

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

### External Social Media Link

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Illustrates how to create an external link, specifically for social media, using an anchor tag with appropriate attributes for opening in a new tab and security.

```typescript
// Footer social links
<a 
  href="https://facebook.com/arimtech" 
  target="_blank" 
  rel="noopener noreferrer"
  className="hover:text-[#b0c4b1] transition-colors"
>
  Facebook
</a>
```

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

### Fix TypeScript 'Property does not exist on type' Error

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMMON_ISSUES.md

Addresses TypeScript errors related to non-existent properties on a type by guiding users to update the interface definition in the component file.

```bash
# Error: Property 'onClick' does not exist on type 'ButtonProps'
# Solution: Update the interface definition
```

```typescript
// Update the interface in the component file
interface ButtonProps {
  onClick?: () => void;
  children: React.ReactNode;
  // ... other props
}
```

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

### Navigare Programatică cu React Router

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/SITEMAP.md

Exemplu de navigare programatică în aplicații React folosind hook-urile `useNavigate` și `useLocation` din React Router DOM pentru a schimba ruta curentă.

```javascript
import { useNavigate, useLocation } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();
  const location = useLocation();

  const goToAbout = () => {
    navigate('/despre');
  };

  return (
    <button onClick={goToAbout}>
      Go to About Page
    </button>
  );
}
```

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

### Documentation Structure (Markdown)

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/SITEMAP.md

This snippet outlines the structure for documentation files, including attributions and development guidelines.

```Markdown
src/
├── Attributions.md           # Atribuiri pentru componente și imagini
└── guidelines/
    └── Guidelines.md         # Template pentru ghiduri de dezvoltare
```

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

### Testing Button Accessibility with Jest

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMPONENT_ARCHITECTURE.md

Ensures that components adhere to accessibility standards by testing for proper ARIA attributes. This example verifies that a `Button` component correctly receives and renders an `aria-label` attribute.

```typescript
describe('Button Accessibility', () => {
  it('has proper ARIA attributes', () => {
    render(<Button aria-label="Submit form">Submit</Button>);
    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Submit form');
  });
});
```

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

### TypeScript: Functional Component with Hooks

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/COMPONENT_ARCHITECTURE.md

A functional React component using TypeScript and hooks (`useState`, `useEffect`). This example, `AnimatedServiceCard`, demonstrates managing component visibility with state and effects, likely for animations.

```typescript
import React, { useState, useEffect } from 'react';

export function AnimatedServiceCard({ icon, title, description }: ServiceCardProps) {
  const [isVisible, setIsVisible] = useState(false);
  
  useEffect(() => {
    // Intersection Observer logic
  }, []);

  return (
    <div className={`transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
      {icon}
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}
```

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

### Integrare Formspree pentru Formulare

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/SITEMAP.md

Utilizarea bibliotecii @formspree/react pentru integrarea formularelor cu Formspree, incluzând validarea datelor și gestionarea stărilor de succes sau eroare.

```javascript
import { useForm } from '@formspree/react';

function MyForm() {
  const [state, handleSubmit] = useForm("mrbabvkv");
  if (state.succeeded) {
    return <p>Thanks for submitting!</p>;
  }
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">
        Email Address
      </label>
      <input
        id="email"
        type="email"
        name="email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

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

### Update Background Colors with Tailwind CSS

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

Illustrates how to apply custom background colors to HTML elements using Tailwind CSS utility classes, by dynamically setting the color value.

```typescript
// Update background colors
<div className="bg-[#your-color]">
  {/* Content */}
</div>
```

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

### Website Structure - Main Pages

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/PROJECT_OVERVIEW.md

This outlines the main pages of the ARIM Technologies website and their corresponding URL paths. It provides a clear structure for the website's navigation and content organization.

```Text
Website Structure:
Main Pages:
1. Home (`/`)
2. Services (`/servicii`)
3. About (`/despre`)
4. Contact (`/contact`)
```

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

### Create New Page Component

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

This TypeScript code defines a basic React functional component for a new page. It includes a container div with basic styling and a placeholder for the page title and content.

```typescript
// src/pages/NewPage.tsx
export function NewPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1>New Page Title</h1>
      {/* Page content */}
    </div>
  );
}
```

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

### Constants Directory Structure (src/constants/)

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/PROJECT_STRUCTURE.md

Details the contents of the 'constants' directory, specifically highlighting the 'navigation.ts' file which manages application navigation, including page identifiers, URL paths, and menu item configurations.

```tree
constants/
└── navigation.ts                # Navigation configuration
    ├── PAGE enum                # Page identifiers
    ├── PATHS object             # URL path mapping
    ├── pathToPage function      # Path to page converter
    └── NAV_ITEMS array          # Navigation menu items
```

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

### Update Footer Services List (TypeScript)

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

This snippet shows how to update the list of services displayed in the footer. It uses JSX to render an unordered list of links, with comments indicating where to add more services.

```TypeScript
// Services Section
<div className="text-center sm:text-left">
  <h4 className="font-['Roboto_Serif:Bold',_sans-serif] font-bold text-[#1a1a1a] text-base sm:text-lg mb-3 sm:mb-4">
    Servicii
  </h4>
  <ul className="space-y-2">
    <li><a href="#" className="hover:text-[#b0c4b1] transition-colors">Dezvoltare Software</a></li>
    <li><a href="#" className="hover:text-[#b0c4b1] transition-colors">Web Development</a></li>
    {/* Add more services */}
  </ul>
</div>
```

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

### Import and Use New Image Asset (TypeScript)

Source: https://github.com/swoldemort/arim-technologies-official/blob/main/website/docs/CONTENT_MANAGEMENT.md

This TypeScript code demonstrates the process of adding a new image to the project and using it within a component. It covers importing the image from the assets directory and rendering it using an `img` tag with specified attributes.

```TypeScript
import newImage from '../assets/new-service-image.png';

// Use in component
<img src={newImage} alt="New Service" className="w-full h-auto" />
```