diff --git a/.env.development b/.env.development
index f73563d48..92535d6e6 100644
--- a/.env.development
+++ b/.env.development
@@ -266,3 +266,20 @@ FINANCE_DATABASE_URL=postgresql://manacore:devpassword@localhost:5432/finance
 INVENTORY_BACKEND_PORT=3020
 INVENTORY_DATABASE_URL=postgresql://manacore:devpassword@localhost:5432/inventory
 INVENTORY_S3_PUBLIC_URL=http://localhost:9000/inventory-storage
+
+# ============================================
+# TECHBASE PROJECT
+# ============================================
+
+TECHBASE_BACKEND_PORT=3021
+TECHBASE_DATABASE_URL=postgresql://manacore:devpassword@localhost:5432/techbase
+
+# ============================================
+# WORLDREAM GAME
+# ============================================
+
+WORLDREAM_SUPABASE_URL=https://gbsrekoykkesullxdvbd.supabase.co
+WORLDREAM_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imdic3Jla295a2tlc3VsbHhkdmJkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTY1MTU3NzksImV4cCI6MjA3MjA5MTc3OX0.qQlZvHiB56oKTRD90fd8IasZeZELjXOA46f-hnOQA1g
+WORLDREAM_OPENAI_API_KEY=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
+WORLDREAM_GEMINI_API_KEY=AIzaSyB74aUj1KmJlcjNyT5uUiyDODQ6iYoAOjQ
+WORLDREAM_REPLICATE_API_TOKEN=r8_QlvkstNhIc6NBX1ktpQ6ibvzOE2d2UQ1Emamd
diff --git a/CLAUDE.md b/CLAUDE.md
index 04bd58490..745b300ed 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -55,6 +55,7 @@ These projects are temporarily archived and excluded from the workspace. To re-a
 | **reader**         | Reading app                      |
 | **uload**          | URL shortener                    |
 | **wisekeep**       | AI wisdom extraction from video  |
+| **techbase**       | Software comparison platform     |
 
 ## Development Commands
 
diff --git a/apps-archived/techbase/CLAUDE.md b/apps-archived/techbase/CLAUDE.md
new file mode 100644
index 000000000..d138d3b1b
--- /dev/null
+++ b/apps-archived/techbase/CLAUDE.md
@@ -0,0 +1,129 @@
+# TechBase Project Guide
+
+## Project Structure
+
+```
+apps/techbase/
+├── apps/
+│   ├── web/          # Astro web application (@techbase/web)
+│   └── backend/      # NestJS API server (@techbase/backend)
+└── package.json
+```
+
+## Commands
+
+### Root Level (from monorepo root)
+
+```bash
+pnpm techbase:dev           # Run all techbase apps
+pnpm dev:techbase:web       # Start web app only
+pnpm dev:techbase:backend   # Start backend only
+pnpm dev:techbase:app       # Start web + backend together
+pnpm techbase:db:push       # Push schema to database
+pnpm techbase:db:studio     # Open Drizzle Studio
+```
+
+### Project Level (from apps/techbase/)
+
+```bash
+pnpm dev                    # Run all apps
+pnpm dev:web                # Start web only
+pnpm dev:backend            # Start backend only
+pnpm build                  # Build all apps
+```
+
+## Technology Stack
+
+- **Web**: Astro 5.5.5, Tailwind CSS, Alpine.js, Fuse.js
+- **Backend**: NestJS 10, Drizzle ORM, PostgreSQL
+- **i18n**: German (default), English (via Astro Content Collections)
+
+## API Endpoints
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/health` | GET | Health check |
+| `/api/votes` | POST | Submit vote |
+| `/api/votes/:softwareId` | GET | Get votes for software |
+| `/api/votes/:softwareId/metrics` | GET | Get aggregated metrics |
+| `/api/votes/metrics/all` | GET | Get all software metrics |
+| `/api/comments` | POST | Submit comment |
+| `/api/comments/:softwareId` | GET | Get approved comments |
+| `/api/admin/comments` | GET | Get all comments (admin) |
+| `/api/admin/comments/pending` | GET | Get pending comments |
+| `/api/admin/comments/:id/approve` | PATCH | Approve comment |
+| `/api/admin/comments/:id/reject` | PATCH | Reject comment |
+| `/api/admin/comments/:id` | DELETE | Delete comment |
+
+## Database Schema
+
+### votes
+
+| Column | Type | Description |
+|--------|------|-------------|
+| id | UUID | Primary key |
+| software_id | VARCHAR(255) | Software identifier |
+| metric | VARCHAR(50) | Metric name (easeOfUse, featureRichness, etc.) |
+| rating | INTEGER | Rating value (1-5) |
+| ip_hash | VARCHAR(255) | Hashed IP for duplicate prevention |
+| created_at | TIMESTAMP | Creation timestamp |
+
+Unique constraint on (software_id, metric, ip_hash)
+
+### comments
+
+| Column | Type | Description |
+|--------|------|-------------|
+| id | UUID | Primary key |
+| software_id | VARCHAR(255) | Software identifier |
+| user_name | VARCHAR(100) | Comment author |
+| comment | TEXT | Comment content |
+| ip_hash | VARCHAR(255) | Hashed IP |
+| is_approved | BOOLEAN | Moderation status |
+| is_spam | BOOLEAN | Spam flag |
+| moderated_at | TIMESTAMP | Moderation timestamp |
+| moderated_by | VARCHAR(255) | Moderator identifier |
+| created_at | TIMESTAMP | Creation timestamp |
+
+## Environment Variables
+
+### Backend (.env)
+
+```env
+PORT=3021
+DATABASE_URL=postgresql://manacore:devpassword@localhost:5432/techbase
+MANA_CORE_AUTH_URL=http://localhost:3001
+CORS_ORIGINS=http://localhost:4321,http://localhost:5173
+```
+
+### Web (.env)
+
+```env
+PUBLIC_BACKEND_URL=http://localhost:3021
+```
+
+## Code Style Preferences
+
+- Use Tailwind CSS for styling
+- Use Alpine.js for client-side interactivity
+- Follow Astro's component structure
+- Keep logic in separate utility files
+- Use TypeScript for type safety
+- Backend follows NestJS module pattern
+
+## Key Directories
+
+### Web App
+
+- `src/components/`: UI components (SearchBar, VotingSystem, etc.)
+- `src/content/`: Content collections (software data in DE/EN)
+- `src/utils/`: Utility functions (i18n, search, api client)
+- `src/pages/`: Page routes and API endpoints
+- `src/layouts/`: Page layouts (Base, Admin)
+
+### Backend
+
+- `src/db/schema/`: Drizzle ORM schemas
+- `src/votes/`: Voting module (controller, service, DTOs)
+- `src/comments/`: Comments module with moderation
+- `src/health/`: Health check endpoint
diff --git a/apps-archived/techbase/apps/backend/drizzle.config.ts b/apps-archived/techbase/apps/backend/drizzle.config.ts
new file mode 100644
index 000000000..06df49447
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/drizzle.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+	dialect: 'postgresql',
+	schema: './src/db/schema/index.ts',
+	out: './src/db/migrations',
+	dbCredentials: {
+		url: process.env.DATABASE_URL || 'postgresql://manacore:devpassword@localhost:5432/techbase',
+	},
+	verbose: true,
+	strict: true,
+});
diff --git a/apps-archived/techbase/apps/backend/nest-cli.json b/apps-archived/techbase/apps/backend/nest-cli.json
new file mode 100644
index 000000000..b4a4fa09c
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/nest-cli.json
@@ -0,0 +1,10 @@
+{
+	"$schema": "https://json.schemastore.org/nest-cli",
+	"collection": "@nestjs/schematics",
+	"sourceRoot": "src",
+	"compilerOptions": {
+		"deleteOutDir": false,
+		"assets": [],
+		"watchAssets": false
+	}
+}
diff --git a/apps-archived/techbase/apps/backend/package.json b/apps-archived/techbase/apps/backend/package.json
new file mode 100644
index 000000000..ec6f11db5
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/package.json
@@ -0,0 +1,40 @@
+{
+	"name": "@techbase/backend",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"build": "nest build",
+		"start": "nest start",
+		"dev": "nest start --watch",
+		"start:dev": "nest start --watch",
+		"start:debug": "nest start --debug --watch",
+		"start:prod": "node dist/main",
+		"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+		"type-check": "tsc --noEmit",
+		"db:push": "drizzle-kit push",
+		"db:studio": "drizzle-kit studio"
+	},
+	"dependencies": {
+		"@manacore/shared-nestjs-auth": "workspace:*",
+		"@nestjs/common": "^10.4.15",
+		"@nestjs/config": "^3.3.0",
+		"@nestjs/core": "^10.4.15",
+		"@nestjs/platform-express": "^10.4.15",
+		"class-transformer": "^0.5.1",
+		"class-validator": "^0.14.1",
+		"dotenv": "^16.4.7",
+		"drizzle-kit": "^0.30.2",
+		"drizzle-orm": "^0.38.3",
+		"postgres": "^3.4.5",
+		"reflect-metadata": "^0.2.2",
+		"rxjs": "^7.8.1"
+	},
+	"devDependencies": {
+		"@nestjs/cli": "^10.4.9",
+		"@nestjs/schematics": "^10.2.3",
+		"@types/express": "^5.0.0",
+		"@types/node": "^22.10.2",
+		"tsx": "^4.19.2",
+		"typescript": "^5.7.2"
+	}
+}
diff --git a/apps-archived/techbase/apps/backend/src/app.module.ts b/apps-archived/techbase/apps/backend/src/app.module.ts
new file mode 100644
index 000000000..4db841ba6
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/app.module.ts
@@ -0,0 +1,20 @@
+import { Module } from '@nestjs/common';
+import { ConfigModule } from '@nestjs/config';
+import { DatabaseModule } from './db/database.module';
+import { HealthModule } from './health/health.module';
+import { VotesModule } from './votes/votes.module';
+import { CommentsModule } from './comments/comments.module';
+
+@Module({
+	imports: [
+		ConfigModule.forRoot({
+			isGlobal: true,
+			envFilePath: '.env',
+		}),
+		DatabaseModule,
+		HealthModule,
+		VotesModule,
+		CommentsModule,
+	],
+})
+export class AppModule {}
diff --git a/apps-archived/techbase/apps/backend/src/comments/comments.controller.ts b/apps-archived/techbase/apps/backend/src/comments/comments.controller.ts
new file mode 100644
index 000000000..626dc23d7
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/comments/comments.controller.ts
@@ -0,0 +1,57 @@
+import { Controller, Post, Get, Patch, Delete, Body, Param, Req } from '@nestjs/common';
+import { Request } from 'express';
+import { CommentsService } from './comments.service';
+import { CreateCommentDto } from './dto/create-comment.dto';
+
+@Controller('comments')
+export class CommentsController {
+	constructor(private readonly commentsService: CommentsService) {}
+
+	@Post()
+	async createComment(@Body() createCommentDto: CreateCommentDto, @Req() req: Request) {
+		const ipAddress = req.ip || req.socket.remoteAddress || 'unknown';
+		return this.commentsService.createComment(
+			createCommentDto.softwareId,
+			createCommentDto.userName,
+			createCommentDto.comment,
+			ipAddress
+		);
+	}
+
+	@Get(':softwareId')
+	async getComments(@Param('softwareId') softwareId: string) {
+		return this.commentsService.getApprovedComments(softwareId);
+	}
+}
+
+@Controller('admin/comments')
+export class AdminCommentsController {
+	constructor(private readonly commentsService: CommentsService) {}
+
+	@Get()
+	async getAllComments() {
+		return this.commentsService.getAllComments();
+	}
+
+	@Get('pending')
+	async getPendingComments() {
+		return this.commentsService.getPendingComments();
+	}
+
+	@Patch(':id/approve')
+	async approveComment(@Param('id') id: string) {
+		// TODO: Get actual moderator ID from auth
+		return this.commentsService.approveComment(id, 'admin');
+	}
+
+	@Patch(':id/reject')
+	async rejectComment(@Param('id') id: string) {
+		// TODO: Get actual moderator ID from auth
+		return this.commentsService.rejectComment(id, 'admin');
+	}
+
+	@Delete(':id')
+	async deleteComment(@Param('id') id: string) {
+		return this.commentsService.deleteComment(id);
+	}
+}
diff --git a/apps-archived/techbase/apps/backend/src/comments/comments.module.ts b/apps-archived/techbase/apps/backend/src/comments/comments.module.ts
new file mode 100644
index 000000000..ca49db65a
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/comments/comments.module.ts
@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { CommentsController, AdminCommentsController } from './comments.controller';
+import { CommentsService } from './comments.service';
+
+@Module({
+	controllers: [CommentsController, AdminCommentsController],
+	providers: [CommentsService],
+	exports: [CommentsService],
+})
+export class CommentsModule {}
diff --git a/apps-archived/techbase/apps/backend/src/comments/comments.service.ts b/apps-archived/techbase/apps/backend/src/comments/comments.service.ts
new file mode 100644
index 000000000..8c92c6336
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/comments/comments.service.ts
@@ -0,0 +1,91 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { eq, and, desc } from 'drizzle-orm';
+import { DATABASE_CONNECTION } from '../db/database.module';
+import { type Database } from '../db/connection';
+import { comments, type Comment, type NewComment } from '../db/schema';
+import { createHash } from 'crypto';
+
+@Injectable()
+export class CommentsService {
+	constructor(@Inject(DATABASE_CONNECTION) private db: Database) {}
+
+	private hashIp(ip: string): string {
+		return createHash('sha256').update(ip).digest('hex').substring(0, 32);
+	}
+
+	async createComment(
+		softwareId: string,
+		userName: string,
+		commentText: string,
+		ipAddress: string
+	): Promise<{ success: boolean; message: string }> {
+		const ipHash = this.hashIp(ipAddress);
+
+		const newComment: NewComment = {
+			softwareId,
+			userName,
+			comment: commentText,
+			ipHash,
+			isApproved: false,
+			isSpam: false,
+		};
+
+		await this.db.insert(comments).values(newComment);
+
+		return {
+			success: true,
+			message: 'Comment submitted successfully. It will be visible after moderation.',
+		};
+	}
+
+	async getApprovedComments(softwareId: string): Promise<Comment[]> {
+		return this.db
+			.select()
+			.from(comments)
+			.where(and(eq(comments.softwareId, softwareId), eq(comments.isApproved, true)))
+			.orderBy(desc(comments.createdAt));
+	}
+
+	async getAllComments(): Promise<Comment[]> {
+		return this.db.select().from(comments).orderBy(desc(comments.createdAt));
+	}
+
+	async getPendingComments(): Promise<Comment[]> {
+		return this.db
+			.select()
+			.from(comments)
+			.where(and(eq(comments.isApproved, false), eq(comments.isSpam, false)))
+			.orderBy(desc(comments.createdAt));
+	}
+
+	async approveComment(id: string, moderatorId: string): Promise<{ success: boolean }> {
+		await this.db
+			.update(comments)
+			.set({
+				isApproved: true,
+				moderatedAt: new Date(),
+				moderatedBy: moderatorId,
+			})
+			.where(eq(comments.id, id));
+
+		return { success: true };
+	}
+
+	async rejectComment(id: string, moderatorId: string): Promise<{ success: boolean }> {
+		await this.db
+			.update(comments)
+			.set({
+				isSpam: true,
+				moderatedAt: new Date(),
+				moderatedBy: moderatorId,
+			})
+			.where(eq(comments.id, id));
+
+		return { success: true };
+	}
+
+	async deleteComment(id: string): Promise<{ success: boolean }> {
+		await this.db.delete(comments).where(eq(comments.id, id));
+		return { success: true };
+	}
+}
diff --git a/apps-archived/techbase/apps/backend/src/comments/dto/create-comment.dto.ts b/apps-archived/techbase/apps/backend/src/comments/dto/create-comment.dto.ts
new file mode 100644
index 000000000..2088dbe0c
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/comments/dto/create-comment.dto.ts
@@ -0,0 +1,19 @@
+import { IsString, IsNotEmpty, MaxLength, MinLength } from 'class-validator';
+
+export class CreateCommentDto {
+	@IsString()
+	@IsNotEmpty()
+	softwareId: string;
+
+	@IsString()
+	@IsNotEmpty()
+	@MinLength(2)
+	@MaxLength(100)
+	userName: string;
+
+	@IsString()
+	@IsNotEmpty()
+	@MinLength(10)
+	@MaxLength(2000)
+	comment: string;
+}
diff --git a/apps-archived/techbase/apps/backend/src/db/connection.ts b/apps-archived/techbase/apps/backend/src/db/connection.ts
new file mode 100644
index 000000000..fccc63f4a
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/db/connection.ts
@@ -0,0 +1,38 @@
+import { drizzle } from 'drizzle-orm/postgres-js';
+import * as schema from './schema';
+
+// Use require for postgres to avoid ESM/CommonJS interop issues
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const postgres = require('postgres');
+
+let connection: ReturnType<typeof postgres> | null = null;
+let db: ReturnType<typeof drizzle> | null = null;
+
+export function getConnection(databaseUrl: string) {
+	if (!connection) {
+		connection = postgres(databaseUrl, {
+			max: 10,
+			idle_timeout: 20,
+			connect_timeout: 10,
+		});
+	}
+	return connection;
+}
+
+export function getDb(databaseUrl: string) {
+	if (!db) {
+		const conn = getConnection(databaseUrl);
+		db = drizzle(conn, { schema });
+	}
+	return db;
+}
+
+export async function closeConnection() {
+	if (connection) {
+		await connection.end();
+		connection = null;
+		db = null;
+	}
+}
+
+export type Database = ReturnType<typeof getDb>;
diff --git a/apps-archived/techbase/apps/backend/src/db/database.module.ts b/apps-archived/techbase/apps/backend/src/db/database.module.ts
new file mode 100644
index 000000000..b4d1f2af6
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/db/database.module.ts
@@ -0,0 +1,28 @@
+import { Module, Global, OnModuleDestroy } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
+import { getDb, closeConnection, type Database } from './connection';
+
+export const DATABASE_CONNECTION = 'DATABASE_CONNECTION';
+
+@Global()
+@Module({
+	providers: [
+		{
+			provide: DATABASE_CONNECTION,
+			useFactory: (configService: ConfigService): Database => {
+				const databaseUrl = configService.get<string>('DATABASE_URL');
+				if (!databaseUrl) {
+					throw new Error('DATABASE_URL environment variable is not set');
+				}
+				return getDb(databaseUrl);
+			},
+			inject: [ConfigService],
+		},
+	],
+	exports: [DATABASE_CONNECTION],
+})
+export class DatabaseModule implements OnModuleDestroy {
+	async onModuleDestroy() {
+		await closeConnection();
+	}
+}
diff --git a/apps-archived/techbase/apps/backend/src/db/schema/comments.schema.ts b/apps-archived/techbase/apps/backend/src/db/schema/comments.schema.ts
new file mode 100644
index 000000000..990d42abe
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/db/schema/comments.schema.ts
@@ -0,0 +1,17 @@
+import { pgTable, uuid, varchar, text, boolean, timestamp } from 'drizzle-orm/pg-core';
+
+export const comments = pgTable('comments', {
+	id: uuid('id').defaultRandom().primaryKey(),
+	softwareId: varchar('software_id', { length: 255 }).notNull(),
+	userName: varchar('user_name', { length: 100 }).notNull(),
+	comment: text('comment').notNull(),
+	ipHash: varchar('ip_hash', { length: 255 }).notNull(),
+	isApproved: boolean('is_approved').default(false),
+	isSpam: boolean('is_spam').default(false),
+	moderatedAt: timestamp('moderated_at'),
+	moderatedBy: varchar('moderated_by', { length: 255 }),
+	createdAt: timestamp('created_at').defaultNow().notNull(),
+});
+
+export type Comment = typeof comments.$inferSelect;
+export type NewComment = typeof comments.$inferInsert;
diff --git a/apps-archived/techbase/apps/backend/src/db/schema/index.ts b/apps-archived/techbase/apps/backend/src/db/schema/index.ts
new file mode 100644
index 000000000..b1f831752
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/db/schema/index.ts
@@ -0,0 +1,2 @@
+export * from './votes.schema';
+export * from './comments.schema';
diff --git a/apps-archived/techbase/apps/backend/src/db/schema/votes.schema.ts b/apps-archived/techbase/apps/backend/src/db/schema/votes.schema.ts
new file mode 100644
index 000000000..fa69ac2b6
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/db/schema/votes.schema.ts
@@ -0,0 +1,19 @@
+import { pgTable, uuid, varchar, integer, timestamp, unique } from 'drizzle-orm/pg-core';
+
+export const votes = pgTable(
+	'votes',
+	{
+		id: uuid('id').defaultRandom().primaryKey(),
+		softwareId: varchar('software_id', { length: 255 }).notNull(),
+		metric: varchar('metric', { length: 50 }).notNull(),
+		rating: integer('rating').notNull(),
+		ipHash: varchar('ip_hash', { length: 255 }).notNull(),
+		createdAt: timestamp('created_at').defaultNow().notNull(),
+	},
+	(table) => ({
+		uniqueVote: unique().on(table.softwareId, table.metric, table.ipHash),
+	})
+);
+
+export type Vote = typeof votes.$inferSelect;
+export type NewVote = typeof votes.$inferInsert;
diff --git a/apps-archived/techbase/apps/backend/src/health/health.controller.ts b/apps-archived/techbase/apps/backend/src/health/health.controller.ts
new file mode 100644
index 000000000..c72e7fba4
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/health/health.controller.ts
@@ -0,0 +1,13 @@
+import { Controller, Get } from '@nestjs/common';
+
+@Controller('health')
+export class HealthController {
+	@Get()
+	check() {
+		return {
+			status: 'ok',
+			timestamp: new Date().toISOString(),
+			service: 'techbase-backend',
+		};
+	}
+}
diff --git a/apps-archived/techbase/apps/backend/src/health/health.module.ts b/apps-archived/techbase/apps/backend/src/health/health.module.ts
new file mode 100644
index 000000000..a61d8b044
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/health/health.module.ts
@@ -0,0 +1,7 @@
+import { Module } from '@nestjs/common';
+import { HealthController } from './health.controller';
+
+@Module({
+	controllers: [HealthController],
+})
+export class HealthModule {}
diff --git a/apps-archived/techbase/apps/backend/src/main.ts b/apps-archived/techbase/apps/backend/src/main.ts
new file mode 100644
index 000000000..a3fdc25f3
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/main.ts
@@ -0,0 +1,37 @@
+import { NestFactory } from '@nestjs/core';
+import { ValidationPipe } from '@nestjs/common';
+import { AppModule } from './app.module';
+
+async function bootstrap() {
+	const app = await NestFactory.create(AppModule);
+
+	// Enable CORS for web app
+	const corsOrigins = process.env.CORS_ORIGINS?.split(',').map((origin) => origin.trim()) || [
+		'http://localhost:4321',
+		'http://localhost:5173',
+		'http://localhost:3000',
+	];
+
+	app.enableCors({
+		origin: corsOrigins,
+		methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
+		credentials: true,
+	});
+
+	// Enable validation
+	app.useGlobalPipes(
+		new ValidationPipe({
+			whitelist: true,
+			transform: true,
+			forbidNonWhitelisted: true,
+		})
+	);
+
+	// Set global prefix for API routes
+	app.setGlobalPrefix('api');
+
+	const port = process.env.PORT || 3020;
+	await app.listen(port);
+	console.log(`TechBase backend running on http://localhost:${port}`);
+}
+bootstrap();
diff --git a/apps-archived/techbase/apps/backend/src/votes/dto/create-vote.dto.ts b/apps-archived/techbase/apps/backend/src/votes/dto/create-vote.dto.ts
new file mode 100644
index 000000000..22ac9dba4
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/votes/dto/create-vote.dto.ts
@@ -0,0 +1,16 @@
+import { IsString, IsInt, Min, Max, IsNotEmpty } from 'class-validator';
+
+export class CreateVoteDto {
+	@IsString()
+	@IsNotEmpty()
+	softwareId: string;
+
+	@IsString()
+	@IsNotEmpty()
+	metric: string;
+
+	@IsInt()
+	@Min(1)
+	@Max(5)
+	rating: number;
+}
diff --git a/apps-archived/techbase/apps/backend/src/votes/votes.controller.ts b/apps-archived/techbase/apps/backend/src/votes/votes.controller.ts
new file mode 100644
index 000000000..6ff1e6c7a
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/votes/votes.controller.ts
@@ -0,0 +1,30 @@
+import { Controller, Post, Get, Body, Param, Req } from '@nestjs/common';
+import { Request } from 'express';
+import { VotesService } from './votes.service';
+import { CreateVoteDto } from './dto/create-vote.dto';
+
+@Controller('votes')
+export class VotesController {
+	constructor(private readonly votesService: VotesService) {}
+
+	@Post()
+	async createVote(@Body() createVoteDto: CreateVoteDto, @Req() req: Request) {
+		const ipAddress = req.ip || req.socket.remoteAddress || 'unknown';
+		return this.votesService.createVote(
+			createVoteDto.softwareId,
+			createVoteDto.metric,
+			createVoteDto.rating,
+			ipAddress
+		);
+	}
+
+	@Get(':softwareId/metrics')
+	async getMetrics(@Param('softwareId') softwareId: string) {
+		return this.votesService.getAllMetrics(softwareId);
+	}
+
+	@Get(':softwareId/metrics/:metric')
+	async getMetricByName(@Param('softwareId') softwareId: string, @Param('metric') metric: string) {
+		return this.votesService.getMetrics(softwareId, metric);
+	}
+}
diff --git a/apps-archived/techbase/apps/backend/src/votes/votes.module.ts b/apps-archived/techbase/apps/backend/src/votes/votes.module.ts
new file mode 100644
index 000000000..6e97936dc
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/votes/votes.module.ts
@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { VotesController } from './votes.controller';
+import { VotesService } from './votes.service';
+
+@Module({
+	controllers: [VotesController],
+	providers: [VotesService],
+	exports: [VotesService],
+})
+export class VotesModule {}
diff --git a/apps-archived/techbase/apps/backend/src/votes/votes.service.ts b/apps-archived/techbase/apps/backend/src/votes/votes.service.ts
new file mode 100644
index 000000000..5ea77e318
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/src/votes/votes.service.ts
@@ -0,0 +1,98 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { eq, and, sql, avg, count } from 'drizzle-orm';
+import { DATABASE_CONNECTION } from '../db/database.module';
+import { type Database } from '../db/connection';
+import { votes, type NewVote } from '../db/schema';
+import { createHash } from 'crypto';
+
+@Injectable()
+export class VotesService {
+	constructor(@Inject(DATABASE_CONNECTION) private db: Database) {}
+
+	private hashIp(ip: string): string {
+		return createHash('sha256').update(ip).digest('hex').substring(0, 32);
+	}
+
+	async createVote(
+		softwareId: string,
+		metric: string,
+		rating: number,
+		ipAddress: string
+	): Promise<{ success: boolean; newAverage: number; voteCount: number }> {
+		const ipHash = this.hashIp(ipAddress);
+
+		// Check if user already voted for this metric
+		const existingVote = await this.db
+			.select()
+			.from(votes)
+			.where(and(eq(votes.softwareId, softwareId), eq(votes.metric, metric), eq(votes.ipHash, ipHash)))
+			.limit(1);
+
+		if (existingVote.length > 0) {
+			// Update existing vote
+			await this.db
+				.update(votes)
+				.set({ rating, createdAt: new Date() })
+				.where(eq(votes.id, existingVote[0].id));
+		} else {
+			// Create new vote
+			const newVote: NewVote = {
+				softwareId,
+				metric,
+				rating,
+				ipHash,
+			};
+			await this.db.insert(votes).values(newVote);
+		}
+
+		// Get updated metrics
+		const metrics = await this.getMetrics(softwareId, metric);
+		return {
+			success: true,
+			newAverage: metrics.averageRating,
+			voteCount: metrics.voteCount,
+		};
+	}
+
+	async getMetrics(
+		softwareId: string,
+		metric?: string
+	): Promise<{ averageRating: number; voteCount: number }> {
+		const conditions = metric
+			? and(eq(votes.softwareId, softwareId), eq(votes.metric, metric))
+			: eq(votes.softwareId, softwareId);
+
+		const result = await this.db
+			.select({
+				averageRating: avg(votes.rating),
+				voteCount: count(votes.id),
+			})
+			.from(votes)
+			.where(conditions);
+
+		return {
+			averageRating: parseFloat(result[0]?.averageRating || '0') || 0,
+			voteCount: result[0]?.voteCount || 0,
+		};
+	}
+
+	async getAllMetrics(
+		softwareId: string
+	): Promise<{ metric: string; averageRating: number; voteCount: number }[]> {
+		const result = await this.db
+			.select({
+				metric: votes.metric,
+				averageRating: avg(votes.rating),
+				voteCount: count(votes.id),
+			})
+			.from(votes)
+			.where(eq(votes.softwareId, softwareId))
+			.groupBy(votes.metric);
+
+		return result.map((r) => ({
+			metric: r.metric,
+			averageRating: parseFloat(r.averageRating || '0') || 0,
+			voteCount: r.voteCount || 0,
+		}));
+	}
+}
diff --git a/apps-archived/techbase/apps/backend/tsconfig.json b/apps-archived/techbase/apps/backend/tsconfig.json
new file mode 100644
index 000000000..0c618fb2c
--- /dev/null
+++ b/apps-archived/techbase/apps/backend/tsconfig.json
@@ -0,0 +1,25 @@
+{
+	"compilerOptions": {
+		"module": "commonjs",
+		"moduleResolution": "node",
+		"declaration": true,
+		"removeComments": true,
+		"emitDecoratorMetadata": true,
+		"experimentalDecorators": true,
+		"allowSyntheticDefaultImports": true,
+		"target": "ES2021",
+		"sourceMap": true,
+		"outDir": "./dist",
+		"baseUrl": "./",
+		"rootDir": "./src",
+		"incremental": true,
+		"skipLibCheck": true,
+		"strictNullChecks": true,
+		"noImplicitAny": true,
+		"strictBindCallApply": true,
+		"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules", "dist"]
+}
diff --git a/apps-archived/techbase/apps/web/astro.config.mjs b/apps-archived/techbase/apps/web/astro.config.mjs
new file mode 100644
index 000000000..cc240aa7f
--- /dev/null
+++ b/apps-archived/techbase/apps/web/astro.config.mjs
@@ -0,0 +1,17 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+import alpinejs from '@astrojs/alpinejs';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    tailwind(),
+    alpinejs(),
+  ],
+  // Für mehrsprachige Unterstützung
+  i18n: {
+    defaultLocale: 'de',
+    locales: ['de', 'en'],
+  }
+});
diff --git a/apps-archived/techbase/apps/web/package.json b/apps-archived/techbase/apps/web/package.json
new file mode 100644
index 000000000..4e7b8d0db
--- /dev/null
+++ b/apps-archived/techbase/apps/web/package.json
@@ -0,0 +1,22 @@
+{
+	"name": "@techbase/web",
+	"version": "0.0.1",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "astro dev",
+		"build": "astro build",
+		"preview": "astro preview"
+	},
+	"dependencies": {
+		"@astrojs/alpinejs": "^0.4.4",
+		"@astrojs/tailwind": "^6.0.2",
+		"alpinejs": "^3.14.9",
+		"astro": "^5.5.5",
+		"fuse.js": "^7.1.0",
+		"tailwindcss": "^3.4.17"
+	},
+	"devDependencies": {
+		"typescript": "^5.0.0"
+	}
+}
diff --git a/apps-archived/techbase/apps/web/public/debug.js b/apps-archived/techbase/apps/web/public/debug.js
new file mode 100644
index 000000000..7db6d049a
--- /dev/null
+++ b/apps-archived/techbase/apps/web/public/debug.js
@@ -0,0 +1,33 @@
+// Debug-Hilfsfunktionen
+console.log('Debug-Tools geladen');
+
+// Listener für fetch-Anfragen
+const originalFetch = window.fetch;
+window.fetch = function(...args) {
+  console.log('Fetch Request:', args[0], args[1]);
+  return originalFetch.apply(this, args)
+    .then(response => {
+      if (!response.ok) {
+        console.error('Fetch error:', response.status, response.statusText, response.url);
+      }
+      return response.clone()
+        .text()
+        .then(text => {
+          try {
+            const data = JSON.parse(text);
+            console.log('Fetch Response:', data);
+          } catch (e) {
+            console.log('Fetch Response (nicht-JSON):', text.substring(0, 500));
+          }
+          return response;
+        })
+        .catch(err => {
+          console.error('Error parsing response:', err);
+          return response;
+        });
+    })
+    .catch(error => {
+      console.error('Fetch failed:', error);
+      throw error;
+    });
+};
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/public/favicon.svg b/apps-archived/techbase/apps/web/public/favicon.svg
new file mode 100644
index 000000000..f157bd1c5
--- /dev/null
+++ b/apps-archived/techbase/apps/web/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
diff --git a/apps-archived/techbase/apps/web/public/logos/sample-logo.svg b/apps-archived/techbase/apps/web/public/logos/sample-logo.svg
new file mode 100644
index 000000000..137b2090d
--- /dev/null
+++ b/apps-archived/techbase/apps/web/public/logos/sample-logo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <rect width="100" height="100" fill="#f0f0f0" rx="10" />
+  <text x="50" y="50" font-family="Arial" font-size="14" text-anchor="middle" dominant-baseline="middle" fill="#333">
+    Sample Logo
+  </text>
+  <circle cx="50" cy="50" r="30" fill="none" stroke="#3b82f6" stroke-width="2" />
+</svg>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/public/screenshots/chess1.PNG b/apps-archived/techbase/apps/web/public/screenshots/chess1.PNG
new file mode 100644
index 000000000..35612e6e0
Binary files /dev/null and b/apps-archived/techbase/apps/web/public/screenshots/chess1.PNG differ
diff --git a/apps-archived/techbase/apps/web/public/screenshots/chess2.PNG b/apps-archived/techbase/apps/web/public/screenshots/chess2.PNG
new file mode 100644
index 000000000..19c937956
Binary files /dev/null and b/apps-archived/techbase/apps/web/public/screenshots/chess2.PNG differ
diff --git a/apps-archived/techbase/apps/web/public/screenshots/chess3.PNG b/apps-archived/techbase/apps/web/public/screenshots/chess3.PNG
new file mode 100644
index 000000000..2912ac2f4
Binary files /dev/null and b/apps-archived/techbase/apps/web/public/screenshots/chess3.PNG differ
diff --git a/apps-archived/techbase/apps/web/public/screenshots/chess4.PNG b/apps-archived/techbase/apps/web/public/screenshots/chess4.PNG
new file mode 100644
index 000000000..4929ce828
Binary files /dev/null and b/apps-archived/techbase/apps/web/public/screenshots/chess4.PNG differ
diff --git a/apps-archived/techbase/apps/web/public/screenshots/chess5.PNG b/apps-archived/techbase/apps/web/public/screenshots/chess5.PNG
new file mode 100644
index 000000000..6223a2d7c
Binary files /dev/null and b/apps-archived/techbase/apps/web/public/screenshots/chess5.PNG differ
diff --git a/apps-archived/techbase/apps/web/public/software.js b/apps-archived/techbase/apps/web/public/software.js
new file mode 100644
index 000000000..1f97c2b2b
--- /dev/null
+++ b/apps-archived/techbase/apps/web/public/software.js
@@ -0,0 +1,76 @@
+// Zentraler Daten-Store für Software-Informationen
+document.addEventListener('alpine:init', () => {
+  Alpine.store('software', {
+    // Aktuelle Software, die im Detail angezeigt wird (aus MD-Datei geladen)
+    current: null,
+    
+    // Software zum Vergleich (über API geladen)
+    comparison: null,
+    
+    // Ähnliche Software-Optionen
+    similar: [],
+    
+    // Status-Flags
+    loading: false,
+    error: null,
+    
+    // Modus-Flags
+    compareMode: false,
+    
+    // Lädt Vergleichssoftware über API
+    async loadComparisonSoftware(id, locale) {
+      if (!id) return;
+      
+      this.loading = true;
+      this.error = null;
+      
+      try {
+        console.log(`Loading software data for ${id} in locale ${locale}`);
+        const response = await fetch(`/api/software/${id}.json?lang=${locale}`);
+        
+        if (!response.ok) {
+          throw new Error(`Error loading software: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        this.comparison = data;
+        console.log("Software data loaded:", data);
+        
+        return data;
+      } catch (error) {
+        console.error('Error loading comparison software:', error);
+        this.error = 'Failed to load software data. Please try again.';
+      } finally {
+        this.loading = false;
+      }
+    },
+    
+    // Setzt den aktuellen Vergleichsmodus
+    setCompareMode(mode) {
+      console.log(`Setting compare mode to: ${mode}`);
+      this.compareMode = mode;
+      
+      if (!mode) {
+        // Bei Beenden des Vergleichsmodus Daten zurücksetzen
+        this.comparison = null;
+      }
+    },
+    
+    // Initialisiert ähnliche Software-Optionen
+    initSimilarSoftware(similarOptions) {
+      this.similar = similarOptions || [];
+      console.log(`Initialized ${this.similar.length} similar software options`);
+    },
+    
+    // Initialisiert die aktuelle Software
+    initCurrentSoftware(software) {
+      this.current = software;
+      console.log("Current software initialized:", software.name);
+    }
+  });
+  
+  // Debugging-Hilfsfunktion - nach Alpine-Initialisierung verfügbar
+  window.debugAlpine = function() {
+    console.log("Alpine Software Store:", Alpine.store('software'));
+  };
+});
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/assets/astro.svg b/apps-archived/techbase/apps/web/src/assets/astro.svg
new file mode 100644
index 000000000..8cf8fb0c7
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/assets/astro.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>
diff --git a/apps-archived/techbase/apps/web/src/assets/background.svg b/apps-archived/techbase/apps/web/src/assets/background.svg
new file mode 100644
index 000000000..4b2be0ac0
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/assets/background.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>
diff --git a/apps-archived/techbase/apps/web/src/components/CommentSystem.astro b/apps-archived/techbase/apps/web/src/components/CommentSystem.astro
new file mode 100644
index 000000000..252a1f4a6
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/CommentSystem.astro
@@ -0,0 +1,162 @@
+---
+import { getLocaleFromUrl, loadTranslations } from '../utils/i18n';
+import { supabase } from '../utils/supabase';
+
+const { softwareId } = Astro.props;
+const locale = getLocaleFromUrl(Astro.url);
+const t = await loadTranslations(locale);
+
+// Versuche, Kommentare aus Supabase zu laden, mit Fallback für den Fall,
+// dass Supabase nicht verfügbar ist
+let comments = [];
+try {
+  if (supabase) {
+    const { data, error } = await supabase
+      .from('comments')
+      .select('*')
+      .eq('software_id', softwareId)
+      .eq('is_approved', true)
+      .order('created_at', { ascending: false });
+    
+    if (!error && data) {
+      comments = data;
+    }
+  }
+} catch (error) {
+  console.error('Error fetching comments:', error);
+  // Weitermachen mit leerem Array
+}
+---
+
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 transition-colors duration-200"
+  data-software-id={softwareId}
+  x-data="{
+  softwareId: '',
+  userName: '',
+  comment: '',
+  loading: false,
+  message: '',
+  showMessage: false,
+  init() {
+    // Software-ID aus Datenattribut lesen
+    this.softwareId = this.$el.getAttribute('data-software-id');
+    console.log('Initialized CommentSystem with software ID:', this.softwareId);
+  },
+  
+  async submitComment() {
+    if (!this.userName.trim() || !this.comment.trim()) {
+      this.message = 'Please fill in all fields';
+      this.showMessage = true;
+      return;
+    }
+    
+    this.loading = true;
+    
+    try {
+      console.log('Submitting comment for', this.softwareId);
+      const response = await fetch('/api/comment', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          softwareId: this.softwareId,
+          userName: this.userName,
+          comment: this.comment
+        })
+      });
+      
+      if (!response.ok) {
+        throw new Error('Comment submission failed');
+      }
+      
+      const result = await response.json();
+      
+      this.message = t.comments.moderation;
+      this.showMessage = true;
+      this.userName = '';
+      this.comment = '';
+    } catch (error) {
+      console.error('Error submitting comment:', error);
+      this.message = 'Error submitting comment';
+      this.showMessage = true;
+    }
+    
+    this.loading = false;
+    
+    // Hide message after 5 seconds
+    setTimeout(() => {
+      this.showMessage = false;
+    }, 5000);
+  }
+}">
+  <h3 class="text-xl font-bold mb-6 dark:text-white">{t.comments.title}</h3>
+  
+  {comments.length > 0 ? (
+    <div class="space-y-4 mb-8">
+      {comments.map(comment => (
+        <div class="border-b border-gray-200 dark:border-gray-700 pb-4">
+          <div class="flex justify-between items-center mb-2">
+            <div class="font-medium dark:text-white">{comment.user_name}</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">{new Date(comment.created_at).toLocaleDateString()}</div>
+          </div>
+          <p class="text-gray-700 dark:text-gray-300">{comment.comment}</p>
+        </div>
+      ))}
+    </div>
+  ) : (
+    <div class="text-center py-8 text-gray-500 dark:text-gray-400 mb-8">
+      {t.comments.noComments}
+    </div>
+  )}
+  
+  <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
+    <h4 class="font-medium mb-4 dark:text-white">{t.comments.writeComment}</h4>
+    
+    <div class="space-y-4">
+      <div>
+        <label for="userName" class="block mb-1 text-sm font-medium dark:text-gray-300">{t.comments.yourName}</label>
+        <input 
+          type="text" 
+          id="userName" 
+          x-model="userName"
+          class="w-full p-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded transition-colors duration-200"
+        />
+      </div>
+      
+      <div>
+        <label for="comment" class="block mb-1 text-sm font-medium dark:text-gray-300">{t.comments.yourComment}</label>
+        <textarea 
+          id="comment" 
+          x-model="comment"
+          class="w-full p-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white rounded h-32 transition-colors duration-200"
+        ></textarea>
+      </div>
+      
+      <button 
+        @click="submitComment"
+        class="btn btn-primary"
+        :disabled="loading"
+      >
+        <span x-show="!loading">{t.comments.submit}</span>
+        <span x-show="loading">
+          <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          Loading...
+        </span>
+      </button>
+      
+      <div 
+        x-show="showMessage" 
+        class="mt-4 p-3 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100 rounded transition-colors duration-200"
+        x-transition:enter="transition ease-out duration-300"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+      >
+        <p x-text="message"></p>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/ComparisonTable.astro b/apps-archived/techbase/apps/web/src/components/ComparisonTable.astro
new file mode 100644
index 000000000..92e2c6833
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/ComparisonTable.astro
@@ -0,0 +1,288 @@
+---
+import { getLocaleFromUrl, loadTranslations } from '../utils/i18n';
+
+const { softwareList } = Astro.props;
+const locale = getLocaleFromUrl(Astro.url);
+const t = await loadTranslations(locale);
+
+// Get all unique platforms from the software list
+const allPlatforms = new Set();
+softwareList.forEach(software => {
+  software.platforms?.forEach(platform => allPlatforms.add(platform));
+});
+const platforms = Array.from(allPlatforms).sort();
+
+// Get all unique features from the software list
+const allFeatures = new Set();
+softwareList.forEach(software => {
+  software.features?.forEach(feature => allFeatures.add(feature));
+});
+const features = Array.from(allFeatures).sort();
+
+// Get all metric types
+const metrics = [
+  { id: 'easeOfUse', name: t.voting.usability },
+  { id: 'featureRichness', name: t.voting.features },
+  { id: 'valueForMoney', name: t.voting.value },
+  { id: 'support', name: t.voting.support },
+  { id: 'reliability', name: t.voting.reliability },
+];
+---
+
+<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden transition-colors duration-200">
+  <div class="overflow-x-auto">
+    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+      <!-- Header row with software names -->
+      <thead class="bg-gray-50 dark:bg-gray-700">
+        <tr>
+          <th class="w-1/4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+            Features
+          </th>
+          {softwareList.map(software => (
+            <th class="px-6 py-3 text-center">
+              <div class="flex flex-col items-center">
+                {software.logo && (
+                  <div class="w-16 h-16 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-2 flex items-center justify-center mb-2 mx-auto">
+                    <img src={software.logo} alt={software.name} class="max-w-full max-h-full" />
+                  </div>
+                )}
+                <a href={`/${locale}/software/${software.id}`} class="font-bold text-primary dark:text-blue-400 hover:underline">
+                  {software.name}
+                </a>
+              </div>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      
+      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+        <!-- General info section -->
+        <tr class="bg-gray-50 dark:bg-gray-700">
+          <td colspan={softwareList.length + 1} class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+            General Information
+          </td>
+        </tr>
+        
+        <!-- Description -->
+        <tr>
+          <td class="px-6 py-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+            Description
+          </td>
+          {softwareList.map(software => (
+            <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 max-w-xs">
+              <p class="line-clamp-3">{software.description}</p>
+            </td>
+          ))}
+        </tr>
+        
+        <!-- Website -->
+        <tr>
+          <td class="px-6 py-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+            Website
+          </td>
+          {softwareList.map(software => (
+            <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+              <a href={software.website} target="_blank" rel="noopener noreferrer" class="text-primary dark:text-blue-400 hover:underline">
+                Visit site
+              </a>
+            </td>
+          ))}
+        </tr>
+        
+        <!-- Categories -->
+        <tr>
+          <td class="px-6 py-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+            Categories
+          </td>
+          {softwareList.map(software => (
+            <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+              <div class="flex flex-wrap gap-1 justify-center">
+                {software.categories?.map(category => (
+                  <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-xs inline-block mb-1 mr-1">
+                    {category}
+                  </span>
+                ))}
+              </div>
+            </td>
+          ))}
+        </tr>
+        
+        <!-- Pricing section -->
+        <tr class="bg-gray-50 dark:bg-gray-700">
+          <td colspan={softwareList.length + 1} class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+            Pricing
+          </td>
+        </tr>
+        
+        <!-- Pricing models -->
+        {['Free', 'Paid', 'Subscription'].map(pricingModel => (
+          <tr>
+            <td class="px-6 py-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+              {pricingModel} Plan
+            </td>
+            {softwareList.map(software => {
+              const plan = software.pricing?.find(p => p.model.toLowerCase().includes(pricingModel.toLowerCase()));
+              return (
+                <td class="px-6 py-4 text-sm text-center">
+                  {plan ? (
+                    <div>
+                      <div class="font-medium text-gray-900 dark:text-white">{plan.price}</div>
+                      <ul class="mt-2 text-xs text-gray-500 dark:text-gray-400 text-left list-disc pl-4 space-y-1">
+                        {plan.features?.slice(0, 3).map(feature => (
+                          <li>{feature}</li>
+                        ))}
+                        {plan.features?.length > 3 && (
+                          <li class="text-primary dark:text-blue-400">+{plan.features.length - 3} more</li>
+                        )}
+                      </ul>
+                    </div>
+                  ) : (
+                    <span class="text-gray-400 dark:text-gray-500">—</span>
+                  )}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+        
+        <!-- Ratings section -->
+        <tr class="bg-gray-50 dark:bg-gray-700">
+          <td colspan={softwareList.length + 1} class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+            Ratings
+          </td>
+        </tr>
+        
+        <!-- Average rating -->
+        <tr>
+          <td class="px-6 py-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+            Average Rating
+          </td>
+          {softwareList.map(software => {
+            const metrics = software.metrics || {};
+            const metricKeys = Object.keys(metrics);
+            let averageRating = 0;
+            let totalVotes = 0;
+            
+            if (metricKeys.length > 0) {
+              let totalRating = 0;
+              metricKeys.forEach(key => {
+                totalRating += metrics[key].average || 0;
+                totalVotes += metrics[key].count || 0;
+              });
+              averageRating = totalRating / metricKeys.length;
+            }
+            
+            return (
+              <td class="px-6 py-4 text-center">
+                <div class="flex items-center justify-center">
+                  <span class="text-yellow-400 mr-1 text-lg">★</span>
+                  <span class="font-bold text-lg dark:text-white">{averageRating.toFixed(1)}</span>
+                </div>
+                {totalVotes > 0 && (
+                  <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                    Based on {totalVotes} ratings
+                  </div>
+                )}
+              </td>
+            );
+          })}
+        </tr>
+        
+        <!-- Individual metrics -->
+        {metrics.map(metric => (
+          <tr>
+            <td class="px-6 py-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+              {metric.name}
+            </td>
+            {softwareList.map(software => {
+              const metricData = software.metrics?.[metric.id] || { average: 0, count: 0 };
+              const rating = metricData.average || 0;
+              const voteCount = metricData.count || 0;
+              
+              return (
+                <td class="px-6 py-4 text-center">
+                  <div class="w-full max-w-xs mx-auto">
+                    <div class="flex justify-between items-center mb-1 text-xs">
+                      <span class="dark:text-gray-300">{rating.toFixed(1)}/5</span>
+                      <span class="text-gray-500 dark:text-gray-400">{voteCount} votes</span>
+                    </div>
+                    <div class="h-2 bg-gray-200 dark:bg-gray-600 rounded-full overflow-hidden">
+                      <div 
+                        class="h-full bg-primary dark:bg-blue-500" 
+                        style={`width: ${(rating / 5) * 100}%`}
+                      ></div>
+                    </div>
+                  </div>
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+        
+        <!-- Features section -->
+        <tr class="bg-gray-50 dark:bg-gray-700">
+          <td colspan={softwareList.length + 1} class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+            Features
+          </td>
+        </tr>
+        
+        <!-- Feature comparison -->
+        {features.map(feature => (
+          <tr>
+            <td class="px-6 py-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+              {feature}
+            </td>
+            {softwareList.map(software => {
+              const hasFeature = software.features?.some(f => f === feature || f.includes(feature));
+              return (
+                <td class="px-6 py-4 text-center">
+                  {hasFeature ? (
+                    <svg class="h-5 w-5 text-green-500 mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                    </svg>
+                  ) : (
+                    <svg class="h-5 w-5 text-red-500 mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                  )}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+        
+        <!-- Platforms section -->
+        <tr class="bg-gray-50 dark:bg-gray-700">
+          <td colspan={softwareList.length + 1} class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+            Platforms
+          </td>
+        </tr>
+        
+        <!-- Platform availability -->
+        {platforms.map(platform => (
+          <tr>
+            <td class="px-6 py-4 text-sm font-medium text-gray-700 dark:text-gray-300">
+              {platform}
+            </td>
+            {softwareList.map(software => {
+              const supportsPlatform = software.platforms?.includes(platform);
+              return (
+                <td class="px-6 py-4 text-center">
+                  {supportsPlatform ? (
+                    <svg class="h-5 w-5 text-green-500 mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                    </svg>
+                  ) : (
+                    <svg class="h-5 w-5 text-red-500 mx-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                  )}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/DeveloperCard.astro b/apps-archived/techbase/apps/web/src/components/DeveloperCard.astro
new file mode 100644
index 000000000..417566788
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/DeveloperCard.astro
@@ -0,0 +1,58 @@
+---
+const { developer } = Astro.props;
+---
+
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden h-full flex flex-col">
+  <div class="p-6 bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900 dark:to-indigo-900">
+    <div class="flex items-center">
+      {developer.logo ? (
+        <img 
+          src={developer.logo} 
+          alt={developer.name} 
+          class="w-16 h-16 rounded-lg bg-white/80 dark:bg-white/10 p-2 object-contain mr-4"
+        />
+      ) : (
+        <div class="w-16 h-16 rounded-lg bg-white/80 dark:bg-white/10 flex items-center justify-center text-3xl mr-4">
+          {developer.name.charAt(0)}
+        </div>
+      )}
+      
+      <div>
+        <h2 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-primary dark:group-hover:text-blue-400 transition-colors">
+          {developer.name}
+        </h2>
+        
+        {developer.softwareCount > 0 && (
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            {developer.softwareCount} {developer.softwareCount === 1 ? 'Software' : 'Software'}
+          </p>
+        )}
+      </div>
+    </div>
+    
+    {developer.country && (
+      <div class="mt-3 flex items-center">
+        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
+          </svg>
+          {developer.country}
+        </span>
+      </div>
+    )}
+  </div>
+  
+  <div class="p-6 flex-grow">
+    <p class="text-gray-700 dark:text-gray-300 line-clamp-3">
+      {developer.description}
+    </p>
+  </div>
+  
+  <div class="bg-gray-50 dark:bg-gray-700 px-6 py-3 border-t border-gray-100 dark:border-gray-600">
+    <div class="flex justify-end">
+      <span class="text-primary dark:text-blue-400 group-hover:underline">
+        Explore →
+      </span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/FilterSidebar.astro b/apps-archived/techbase/apps/web/src/components/FilterSidebar.astro
new file mode 100644
index 000000000..74d9a1515
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/FilterSidebar.astro
@@ -0,0 +1,227 @@
+---
+import { getLocaleFromUrl } from '../utils/i18n';
+
+const { categories = [], platforms = [] } = Astro.props;
+const locale = getLocaleFromUrl(Astro.url);
+
+// Define price ranges
+const priceRanges = [
+  { id: 'free', label: 'Free' },
+  { id: 'paid', label: 'Paid' },
+  { id: 'subscription', label: 'Subscription' }
+];
+
+// Define rating filters
+const ratingFilters = [
+  { metric: 'easeOfUse', label: 'Ease of Use' },
+  { metric: 'featureRichness', label: 'Feature Richness' },
+  { metric: 'valueForMoney', label: 'Value for Money' },
+  { metric: 'support', label: 'Support' },
+  { metric: 'reliability', label: 'Reliability' }
+];
+---
+
+<div class="p-4 transition-colors duration-200" x-data="{
+  showMobileFilters: false,
+  activeCategories: [],
+  activePlatforms: [],
+  activePriceRanges: [],
+  ratingThresholds: {
+    easeOfUse: 0,
+    featureRichness: 0,
+    valueForMoney: 0, 
+    support: 0,
+    reliability: 0
+  },
+  
+  toggleCategory(category) {
+    if (this.activeCategories.includes(category)) {
+      this.activeCategories = this.activeCategories.filter(c => c !== category);
+    } else {
+      this.activeCategories.push(category);
+    }
+    this.updateFilters();
+  },
+  
+  togglePlatform(platform) {
+    if (this.activePlatforms.includes(platform)) {
+      this.activePlatforms = this.activePlatforms.filter(p => p !== platform);
+    } else {
+      this.activePlatforms.push(platform);
+    }
+    this.updateFilters();
+  },
+  
+  togglePriceRange(range) {
+    if (this.activePriceRanges.includes(range)) {
+      this.activePriceRanges = this.activePriceRanges.filter(r => r !== range);
+    } else {
+      this.activePriceRanges.push(range);
+    }
+    this.updateFilters();
+  },
+  
+  updateRatingThreshold(metric, value) {
+    this.ratingThresholds[metric] = value;
+    this.updateFilters();
+  },
+  
+  clearFilters() {
+    this.activeCategories = [];
+    this.activePlatforms = [];
+    this.activePriceRanges = [];
+    this.ratingThresholds = {
+      easeOfUse: 0,
+      featureRichness: 0,
+      valueForMoney: 0,
+      support: 0,
+      reliability: 0
+    };
+    this.updateFilters();
+  },
+  
+  updateFilters() {
+    // Emit custom event for parent components to listen to
+    const filters = {
+      categories: this.activeCategories,
+      platforms: this.activePlatforms,
+      priceRanges: this.activePriceRanges,
+      ratingThresholds: this.ratingThresholds
+    };
+    
+    this.$dispatch('filters-updated', {
+      detail: filters
+    });
+  }
+}">
+  <!-- Mobile filter toggle -->
+  <div class="lg:hidden mb-4">
+    <button 
+      @click="showMobileFilters = !showMobileFilters" 
+      class="w-full flex items-center justify-between bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-md transition-colors duration-200"
+    >
+      <span class="font-medium">Filters</span>
+      <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        class="h-5 w-5" 
+        :class="{'rotate-180': showMobileFilters}"
+        viewBox="0 0 20 20" 
+        fill="currentColor"
+      >
+        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+      </svg>
+    </button>
+  </div>
+  
+  <!-- Filter content -->
+  <div 
+    class="space-y-6 lg:block" 
+    :class="{'hidden': !showMobileFilters && window.innerWidth < 1024}"
+    x-transition
+  >
+    <!-- Categories -->
+    <div>
+      <h3 class="font-semibold text-lg mb-3 dark:text-white">Categories</h3>
+      <div class="space-y-2">
+        {categories.map(category => (
+          <label class="flex items-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 p-1 rounded">
+            <input 
+              type="checkbox" 
+              value={category.id}
+              @click="toggleCategory(`${category.id}`)"
+              :checked="activeCategories.includes(`${category.id}`)"
+              class="rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary" 
+            />
+            <span class="ml-2 dark:text-gray-300">{category.name}</span>
+          </label>
+        ))}
+        {categories.length === 0 && (
+          <p class="text-sm text-gray-500 dark:text-gray-400">No additional categories available</p>
+        )}
+      </div>
+    </div>
+    
+    <!-- Platforms -->
+    <div>
+      <h3 class="font-semibold text-lg mb-3 dark:text-white">Platforms</h3>
+      <div class="space-y-2">
+        {platforms.map(platform => (
+          <label class="flex items-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 p-1 rounded">
+            <input 
+              type="checkbox" 
+              value={platform}
+              @click="togglePlatform(`${platform}`)"
+              :checked="activePlatforms.includes(`${platform}`)"
+              class="rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary" 
+            />
+            <span class="ml-2 dark:text-gray-300">{platform}</span>
+          </label>
+        ))}
+        {platforms.length === 0 && (
+          <p class="text-sm text-gray-500 dark:text-gray-400">No platform filters available</p>
+        )}
+      </div>
+    </div>
+    
+    <!-- Price Range -->
+    <div>
+      <h3 class="font-semibold text-lg mb-3 dark:text-white">Price</h3>
+      <div class="space-y-2">
+        {priceRanges.map(range => (
+          <label class="flex items-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 p-1 rounded">
+            <input 
+              type="checkbox" 
+              value={range.id}
+              @click="togglePriceRange(`${range.id}`)"
+              :checked="activePriceRanges.includes(`${range.id}`)"
+              class="rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary" 
+            />
+            <span class="ml-2 dark:text-gray-300">{range.label}</span>
+          </label>
+        ))}
+      </div>
+    </div>
+    
+    <!-- Ratings -->
+    <div>
+      <h3 class="font-semibold text-lg mb-3 dark:text-white">Minimum Rating</h3>
+      <div class="space-y-4">
+        {ratingFilters.map(filter => (
+          <div>
+            <div class="flex justify-between mb-1">
+              <label for={`rating-${filter.metric}`} class="text-sm font-medium dark:text-gray-300">{filter.label}</label>
+              <span class="text-sm font-bold dark:text-white" x-text="ratingThresholds.${filter.metric}"></span>
+            </div>
+            <input 
+              type="range" 
+              id={`rating-${filter.metric}`}
+              min="0" 
+              max="5" 
+              step="0.5"
+              x-model="ratingThresholds.${filter.metric}"
+              @input="updateRatingThreshold('${filter.metric}', $event.target.value)"
+              class="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer" 
+            />
+            <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
+              <span>Any</span>
+              <span>5★</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+    
+    <!-- Clear Filters -->
+    <div class="pt-2">
+      <button 
+        @click="clearFilters()" 
+        class="text-sm text-primary dark:text-blue-400 font-medium hover:underline flex items-center"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+        Clear all filters
+      </button>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/Footer.astro b/apps-archived/techbase/apps/web/src/components/Footer.astro
new file mode 100644
index 000000000..acb6cd712
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/Footer.astro
@@ -0,0 +1,38 @@
+---
+import { getLocaleFromUrl } from '../utils/i18n';
+
+const locale = getLocaleFromUrl(Astro.url);
+const year = new Date().getFullYear();
+---
+
+<footer class="bg-gray-800 text-white py-8 mt-auto transition-colors duration-200">
+  <div class="container mx-auto px-4">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div>
+        <h3 class="text-xl font-bold mb-4">TechBase</h3>
+        <p class="text-gray-300">Die zentrale Plattform für Software-Vergleiche und Bewertungen</p>
+      </div>
+      
+      <div>
+        <h3 class="text-xl font-bold mb-4">Links</h3>
+        <ul class="space-y-2">
+          <li><a href={`/${locale}`} class="text-gray-300 hover:text-white">Home</a></li>
+          <li><a href={`/${locale}/about`} class="text-gray-300 hover:text-white">Über uns</a></li>
+          <li><a href={`/${locale}/contact`} class="text-gray-300 hover:text-white">Kontakt</a></li>
+        </ul>
+      </div>
+      
+      <div>
+        <h3 class="text-xl font-bold mb-4">Rechtliches</h3>
+        <ul class="space-y-2">
+          <li><a href={`/${locale}/privacy`} class="text-gray-300 hover:text-white">Datenschutz</a></li>
+          <li><a href={`/${locale}/imprint`} class="text-gray-300 hover:text-white">Impressum</a></li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="border-t border-gray-700 mt-8 pt-4 text-center text-gray-400">
+      &copy; {year} TechBase. Alle Rechte vorbehalten.
+    </div>
+  </div>
+</footer>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/Header.astro b/apps-archived/techbase/apps/web/src/components/Header.astro
new file mode 100644
index 000000000..8f0b63fdf
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/Header.astro
@@ -0,0 +1,91 @@
+---
+import LanguageSwitcher from './LanguageSwitcher.astro';
+import ThemeToggle from './ThemeToggle.astro';
+import { getLocaleFromUrl } from '../utils/i18n';
+import { loadTranslations } from '../utils/i18n';
+
+const locale = getLocaleFromUrl(Astro.url);
+const t = await loadTranslations(locale);
+
+// Get current path for active link highlighting
+const currentPath = Astro.url.pathname;
+---
+
+<header class="bg-white dark:bg-gray-800 shadow-md transition-colors duration-200 w-full sticky top-0 z-50">
+  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+    <a href={`/${locale}`} class="text-2xl font-bold text-primary dark:text-blue-400">TechBase</a>
+    
+    <nav class="hidden md:flex space-x-6">
+      <a 
+        href={`/${locale}/software`} 
+        class={`text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400 pb-1 border-b-2 transition-colors ${currentPath.includes(`/${locale}/software`) && !currentPath.includes(`/${locale}/software/`) ? 'border-primary dark:border-blue-400' : 'border-transparent'}`}
+      >
+        {t.common.software}
+      </a>
+      <a 
+        href={`/${locale}/categories`} 
+        class={`text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400 pb-1 border-b-2 transition-colors ${currentPath.includes(`/${locale}/categories`) ? 'border-primary dark:border-blue-400' : 'border-transparent'}`}
+      >
+        {t.common.categories}
+      </a>
+      <a 
+        href={`/${locale}/developers`} 
+        class={`text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400 pb-1 border-b-2 transition-colors ${currentPath.includes(`/${locale}/developers`) ? 'border-primary dark:border-blue-400' : 'border-transparent'}`}
+      >
+        {t.common.developers}
+      </a>
+      <a 
+        href={`/${locale}/compare`} 
+        class={`text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400 pb-1 border-b-2 transition-colors ${currentPath.includes(`/${locale}/compare`) ? 'border-primary dark:border-blue-400' : 'border-transparent'}`}
+      >
+        {t.common.compare}
+      </a>
+    </nav>
+    
+    <!-- Mobile hamburger menu button -->
+    <button class="md:hidden flex items-center p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary dark:focus:ring-blue-400" aria-expanded="false">
+      <svg class="h-6 w-6 dark:text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+    </button>
+    
+    <div class="flex items-center space-x-4">
+      <ThemeToggle />
+      <LanguageSwitcher />
+    </div>
+  </div>
+  
+  <!-- Mobile menu, hidden by default -->
+  <div class="md:hidden hidden bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+    <div class="container mx-auto px-4 py-2 space-y-2">
+      <a href={`/${locale}/software`} class="block py-2 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">
+        {t.common.software}
+      </a>
+      <a href={`/${locale}/categories`} class="block py-2 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">
+        {t.common.categories}
+      </a>
+      <a href={`/${locale}/developers`} class="block py-2 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">
+        {t.common.developers}
+      </a>
+      <a href={`/${locale}/compare`} class="block py-2 text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">
+        {t.common.compare}
+      </a>
+    </div>
+  </div>
+</header>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const mobileMenuButton = document.querySelector('header button');
+  const mobileMenu = document.querySelector('header > div:nth-child(2)');
+  
+  // Toggle mobile menu
+  if (mobileMenuButton && mobileMenu) {
+    mobileMenuButton.addEventListener('click', () => {
+      const expanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
+      mobileMenuButton.setAttribute('aria-expanded', !expanded);
+      mobileMenu.classList.toggle('hidden');
+    });
+  }
+});
+</script>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/LanguageSwitcher.astro b/apps-archived/techbase/apps/web/src/components/LanguageSwitcher.astro
new file mode 100644
index 000000000..21528cd36
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/LanguageSwitcher.astro
@@ -0,0 +1,52 @@
+---
+import { getLocaleFromUrl, getLocalizedUrl } from '../utils/i18n';
+
+const locale = getLocaleFromUrl(Astro.url);
+const pathname = Astro.url.pathname;
+const currentPath = pathname.replace(new RegExp(`^/${locale}`), '') || '/';
+
+const languages = [
+  { code: 'de', name: 'Deutsch' },
+  { code: 'en', name: 'English' }
+];
+---
+
+<div class="relative" x-data="{ open: false }">
+  <button 
+    @click="open = !open" 
+    class="flex items-center space-x-1 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200"
+  >
+    <span>{locale === 'de' ? 'DE' : 'EN'}</span>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+    </svg>
+  </button>
+  
+  <div 
+    x-show="open" 
+    @click.away="open = false" 
+    class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 shadow-lg rounded-md overflow-hidden z-10 border border-gray-200 dark:border-gray-700 transition-colors duration-200"
+    x-transition:enter="transition ease-out duration-100"
+    x-transition:enter-start="transform opacity-0 scale-95"
+    x-transition:enter-end="transform opacity-100 scale-100"
+    x-transition:leave="transition ease-in duration-75"
+    x-transition:leave-start="transform opacity-100 scale-100"
+    x-transition:leave-end="transform opacity-0 scale-95"
+    style="display: none;"
+  >
+    <div class="py-1">
+      {languages.map(lang => (
+        <a 
+          href={getLocalizedUrl(currentPath, lang.code)}
+          class={`block px-4 py-2 text-sm transition-colors duration-200 ${
+            locale === lang.code 
+              ? 'bg-gray-100 dark:bg-gray-700 text-primary dark:text-blue-400' 
+              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+          }`}
+        >
+          {lang.name}
+        </a>
+      ))}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/SearchBar.astro b/apps-archived/techbase/apps/web/src/components/SearchBar.astro
new file mode 100644
index 000000000..4dee59252
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/SearchBar.astro
@@ -0,0 +1,150 @@
+---
+import { getLocaleFromUrl } from '../utils/i18n';
+
+const { placeholder = 'Search...', showButton = true } = Astro.props;
+const locale = getLocaleFromUrl(Astro.url);
+---
+
+<div class="relative" 
+  data-locale={locale}
+  x-data="{ 
+    searchQuery: '', 
+    searchResults: [], 
+    isLoading: false, 
+    showResults: false, 
+    currentLocale: '',
+    init() {
+      // Get locale from the data attribute
+      this.currentLocale = this.$el.dataset.locale;
+      
+      this.$watch('searchQuery', value => {
+        if (value.length >= 2) {
+          this.performSearch();
+        } else {
+          this.searchResults = [];
+          this.showResults = false;
+        }
+      });
+    },
+    async performSearch() {
+      if (this.searchQuery.length < 2) return;
+      
+      this.isLoading = true;
+      try {
+        // Fetch all software data if we haven't already
+        if (!window.softwareData) {
+          const response = await fetch('/api/software.json');
+          window.softwareData = await response.json();
+        }
+        
+        // Filter software by the current locale
+        const localeSoftware = window.softwareData.filter(item => item.locale === this.currentLocale);
+        
+        // Perform search using Fuse.js
+      const fuse = new Fuse(localeSoftware, {
+        keys: ['name', 'description', 'features', 'categories'],
+        threshold: 0.4,
+        ignoreLocation: true
+      });
+      
+      this.searchResults = fuse.search(this.searchQuery).map(result => result.item);
+      this.showResults = this.searchResults.length > 0;
+    } catch (error) {
+      console.error('Search error:', error);
+    } finally {
+      this.isLoading = false;
+    }
+  },
+  navigateToResult(url) {
+    window.location.href = url;
+  }
+}">
+  <div class="relative flex w-full">
+    <input
+      type="text"
+      x-model="searchQuery"
+      placeholder={placeholder}
+      class="w-full py-2 px-4 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
+      @focus="showResults = searchResults.length > 0"
+      @blur="setTimeout(() => showResults = false, 200)"
+    />
+    
+    {showButton && (
+      <button
+        class="bg-primary dark:bg-blue-600 text-white px-4 py-2 rounded-r hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors duration-200"
+        @click="performSearch()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      </button>
+    )}
+    
+    <div
+      x-show="isLoading"
+      class="absolute right-4 top-1/2 transform -translate-y-1/2"
+    >
+      <svg class="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+    </div>
+  </div>
+  
+  <div
+    x-show="showResults"
+    @click.away="showResults = false"
+    class="absolute z-10 mt-2 w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg max-h-96 overflow-y-auto transition-colors duration-200"
+    x-transition:enter="transition ease-out duration-100"
+    x-transition:enter-start="transform opacity-0 scale-95"
+    x-transition:enter-end="transform opacity-100 scale-100"
+    x-transition:leave="transition ease-in duration-75"
+    x-transition:leave-start="transform opacity-100 scale-100"
+    x-transition:leave-end="transform opacity-0 scale-95"
+    style="display: none;"
+  >
+    <template x-if="searchResults.length === 0 && searchQuery.length >= 2">
+      <div class="p-4 text-center text-gray-500 dark:text-gray-400">
+        No results found
+      </div>
+    </template>
+    
+    <template x-for="result in searchResults" :key="result.id">
+      <a
+        :href="result.url"
+        class="block p-4 hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700 last:border-0 transition-colors duration-200"
+        @mousedown.prevent
+        @click.prevent="navigateToResult(result.url)"
+      >
+        <div class="flex items-start">
+          <template x-if="result.logo">
+            <div class="w-10 h-10 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded mr-3 flex items-center justify-center">
+              <img :src="result.logo" :alt="result.name" class="max-w-full max-h-full p-1">
+            </div>
+          </template>
+          
+          <div class="flex-1">
+            <div class="font-medium text-gray-900 dark:text-white" x-text="result.name"></div>
+            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2" x-text="result.description"></div>
+            
+            <div class="flex flex-wrap gap-1 mt-2">
+              <template x-for="category in result.categories.slice(0, 3)" :key="category">
+                <span class="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full" x-text="category"></span>
+              </template>
+            </div>
+          </div>
+        </div>
+      </a>
+    </template>
+  </div>
+</div>
+
+<!-- Add Fuse.js -->
+<script is:inline src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
+
+<script>
+  // Initialize global variable for software data
+  if (typeof window !== 'undefined' && !window.softwareData) {
+    window.softwareData = null;
+  }
+</script>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/SoftwareCard.astro b/apps-archived/techbase/apps/web/src/components/SoftwareCard.astro
new file mode 100644
index 000000000..07f728ef4
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/SoftwareCard.astro
@@ -0,0 +1,143 @@
+---
+import { getLocaleFromUrl } from '../utils/i18n';
+import { getCollection } from 'astro:content';
+
+const { software } = Astro.props;
+const locale = getLocaleFromUrl(Astro.url);
+
+// Get developer info if available
+let developer = null;
+if (software.developer) {
+  const developers = await getCollection('developers');
+  developer = developers.find(dev => dev.id === `${locale}/${software.developer}`);
+  
+  // Fallback to other locale if not found
+  if (!developer) {
+    const otherLocale = locale === 'en' ? 'de' : 'en';
+    developer = developers.find(dev => dev.id === `${otherLocale}/${software.developer}`);
+  }
+}
+
+// Calculate average rating across all metrics
+const metrics = software.metrics || {};
+const metricKeys = Object.keys(metrics);
+let averageRating = 0;
+let totalVotes = 0;
+
+if (metricKeys.length > 0) {
+  let totalRating = 0;
+  metricKeys.forEach(key => {
+    totalRating += metrics[key].average || 0;
+    totalVotes += metrics[key].count || 0;
+  });
+  averageRating = totalRating / metricKeys.length;
+}
+
+// Format average rating to one decimal place
+const formattedRating = averageRating.toFixed(1);
+---
+
+<div class="relative">
+  <a href={`/${locale}/software/${software.id}`} class="block group">
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 h-full flex flex-col overflow-hidden">
+    <div class="p-6 flex-grow">
+      <div class="flex items-center mb-4">
+        {software.logo && (
+          <div class="w-12 h-12 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-1 flex items-center justify-center mr-4 overflow-hidden">
+            <img src={software.logo} alt={software.name} class="max-w-full max-h-full object-contain" />
+          </div>
+        )}
+        
+        <div>
+          <h3 class="text-xl font-bold group-hover:text-primary dark:group-hover:text-blue-400 dark:text-white transition-colors duration-200">{software.name}</h3>
+          
+          {developer && (
+            <a 
+              href={`/${locale}/developers/${software.developer.replace('.md', '')}`} 
+              class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-blue-400 hover:underline inline-block"
+              onclick="event.stopPropagation(); return true;"
+            >
+              by {developer.data.name}
+            </a>
+          )}
+        </div>
+      </div>
+      
+      <p class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
+        {software.description}
+      </p>
+      
+      <div class="flex flex-wrap gap-2 mb-4">
+        {software.categories?.slice(0, 3).map(category => (
+          <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs text-gray-700 dark:text-gray-300">
+            {category}
+          </span>
+        ))}
+        {software.categories?.length > 3 && (
+          <span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs text-gray-700 dark:text-gray-300">
+            +{software.categories.length - 3}
+          </span>
+        )}
+      </div>
+      
+      <div class="flex flex-wrap gap-2">
+        {software.supportedPlatforms ? (
+          <>
+            {software.supportedPlatforms?.slice(0, 4).map(platform => (
+              <span class="px-2 py-1 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full text-xs">
+                {platform === 'Windows' && '🪟 '}
+                {platform === 'macOS' && '🍎 '}
+                {platform === 'Linux' && '🐧 '}
+                {platform === 'Android' && '🤖 '}
+                {platform === 'iOS' && '📱 '}
+                {platform === 'Web' && '🌐 '}
+                {platform}
+              </span>
+            ))}
+            {software.supportedPlatforms?.length > 4 && (
+              <span class="px-2 py-1 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full text-xs">
+                +{software.supportedPlatforms.length - 4}
+              </span>
+            )}
+          </>
+        ) : (
+          <>
+            {software.platforms?.slice(0, 4).map(platform => (
+              <span class="px-2 py-1 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full text-xs">
+                {platform === 'Windows' && '🪟 '}
+                {platform === 'macOS' && '🍎 '}
+                {platform === 'Linux' && '🐧 '}
+                {platform === 'Android' && '🤖 '}
+                {platform === 'iOS' && '📱 '}
+                {platform === 'Web' && '🌐 '}
+                {platform}
+              </span>
+            ))}
+            {software.platforms?.length > 4 && (
+              <span class="px-2 py-1 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full text-xs">
+                +{software.platforms.length - 4}
+              </span>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+    
+    <div class="bg-gray-50 dark:bg-gray-700 px-6 py-3 border-t border-gray-100 dark:border-gray-600">
+      <div class="flex justify-between items-center">
+        <div class="flex items-center">
+          <span class="text-yellow-400 mr-1">★</span>
+          <span class="font-bold dark:text-white">{formattedRating}</span>
+          {totalVotes > 0 && (
+            <span class="text-xs text-gray-500 dark:text-gray-400 ml-1">({totalVotes})</span>
+          )}
+        </div>
+        
+        <span class="text-primary dark:text-blue-400 group-hover:underline">
+          Details →
+        </span>
+      </div>
+    </div>
+  </div>
+</a>
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/ThemeToggle.astro b/apps-archived/techbase/apps/web/src/components/ThemeToggle.astro
new file mode 100644
index 000000000..afac47d89
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/ThemeToggle.astro
@@ -0,0 +1,55 @@
+---
+// ThemeToggle component for switching between light and dark modes
+---
+
+<button id="themeToggle" class="theme-toggle flex items-center justify-center w-8 h-8 rounded-full" aria-label="Toggle Dark Mode">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 dark:hidden">
+    <!-- Sun icon -->
+    <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 hidden dark:block">
+    <!-- Moon icon -->
+    <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" />
+  </svg>
+</button>
+
+<script>
+  // JavaScript to handle theme toggling
+  document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('themeToggle');
+    const html = document.documentElement;
+    
+    // Check for saved theme preference or use OS preference
+    const getInitialTheme = () => {
+      const savedTheme = localStorage.getItem('theme');
+      
+      if (savedTheme) {
+        return savedTheme;
+      }
+      
+      // Default to dark theme
+      return 'dark';
+    };
+    
+    // Apply the initial theme
+    const setTheme = (theme) => {
+      if (theme === 'dark') {
+        html.classList.add('dark');
+        document.body.classList.add('dark');
+      } else {
+        html.classList.remove('dark');
+        document.body.classList.remove('dark');
+      }
+      localStorage.setItem('theme', theme);
+    };
+    
+    // Set initial theme
+    setTheme(getInitialTheme());
+    
+    // Handle toggle click
+    themeToggle?.addEventListener('click', () => {
+      const isDark = html.classList.contains('dark');
+      setTheme(isDark ? 'light' : 'dark');
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/VotingSystem.astro b/apps-archived/techbase/apps/web/src/components/VotingSystem.astro
new file mode 100644
index 000000000..4a0fcbdcb
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/VotingSystem.astro
@@ -0,0 +1,140 @@
+---
+import { getLocaleFromUrl, loadTranslations } from '../utils/i18n';
+
+const { softwareId } = Astro.props;
+const locale = getLocaleFromUrl(Astro.url);
+const t = await loadTranslations(locale);
+
+const metrics = [
+  { id: 'usability', name: t.voting.usability },
+  { id: 'features', name: t.voting.features },
+  { id: 'performance', name: t.voting.performance },
+  { id: 'support', name: t.voting.support },
+  { id: 'value', name: t.voting.value }
+];
+---
+
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 transition-colors duration-200" 
+  data-software-id={softwareId}
+  data-metric-usability={t.voting.usability}
+  data-metric-features={t.voting.features}
+  data-metric-performance={t.voting.performance}
+  data-metric-support={t.voting.support}
+  data-metric-value={t.voting.value}
+  x-data="{
+  softwareId: '',
+  metrics: [],
+  ratings: {},
+  message: '',
+  showMessage: false,
+  loading: false,
+  init() {
+    // Software-ID aus Datenattribut lesen
+    this.softwareId = this.$el.getAttribute('data-software-id');
+    console.log('Initialized VotingSystem with software ID:', this.softwareId);
+    
+    // Metriken aus Datenattributen lesen
+    this.metrics = [
+      { id: 'usability', name: this.$el.getAttribute('data-metric-usability') },
+      { id: 'features', name: this.$el.getAttribute('data-metric-features') },
+      { id: 'performance', name: this.$el.getAttribute('data-metric-performance') },
+      { id: 'support', name: this.$el.getAttribute('data-metric-support') },
+      { id: 'value', name: this.$el.getAttribute('data-metric-value') }
+    ];
+    
+    // Ratings initialisieren
+    this.metrics.forEach(metric => {
+      this.ratings[metric.id] = 0;
+    });
+  },
+  setRating(metricId, rating) {
+    this.ratings[metricId] = rating;
+  },
+  async submitRatings() {
+    this.loading = true;
+    
+    for (const metricId in this.ratings) {
+      if (this.ratings[metricId] > 0) {
+        try {
+          const response = await fetch('/api/vote', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              softwareId: this.softwareId,
+              metric: metricId,
+              rating: this.ratings[metricId]
+            })
+          });
+          
+          if (!response.ok) {
+            throw new Error('Voting failed');
+          }
+        } catch (error) {
+          console.error('Error submitting vote:', error);
+        }
+      }
+    }
+    
+    this.loading = false;
+    this.message = t.voting.thankYou;
+    this.showMessage = true;
+    
+    // Reset ratings
+    Object.keys(this.ratings).forEach(key => {
+      this.ratings[key] = 0;
+    });
+    
+    // Hide message after 3 seconds
+    setTimeout(() => {
+      this.showMessage = false;
+    }, 3000);
+  }
+}">
+  <h3 class="text-xl font-bold mb-4 dark:text-white">{t.software.vote}</h3>
+  
+  <div class="space-y-4 mb-6">
+    <template x-for="metric in metrics" :key="metric.id">
+      <div>
+        <label class="block mb-2 font-medium dark:text-gray-200" x-text="metric.name"></label>
+        <div class="flex space-x-2">
+          <template x-for="star in [1, 2, 3, 4, 5]">
+            <button 
+              @click="setRating(metric.id, star)"
+              class="text-2xl"
+              :class="ratings[metric.id] >= star ? 'text-yellow-400' : 'text-gray-300 dark:text-gray-600'"
+            >
+              ★
+            </button>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+  
+  <button 
+    @click="submitRatings"
+    class="btn btn-primary w-full"
+    :disabled="loading || Object.values(ratings).every(v => v === 0)"
+  >
+    <span x-show="!loading">{t.voting.submit}</span>
+    <span x-show="loading">
+      <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      Loading...
+    </span>
+  </button>
+  
+  <div 
+    x-show="showMessage" 
+    class="mt-4 p-3 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 rounded transition-colors duration-200"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+  >
+    <p x-text="message"></p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/Welcome.astro b/apps-archived/techbase/apps/web/src/components/Welcome.astro
new file mode 100644
index 000000000..52e033341
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/Welcome.astro
@@ -0,0 +1,210 @@
+---
+import astroLogo from '../assets/astro.svg';
+import background from '../assets/background.svg';
+---
+
+<div id="container">
+	<img id="background" src={background.src} alt="" fetchpriority="high" />
+	<main>
+		<section id="hero">
+			<a href="https://astro.build"
+				><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
+			>
+			<h1>
+				To get started, open the <code><pre>src/pages</pre></code> directory in your project.
+			</h1>
+			<section id="links">
+				<a class="button" href="https://docs.astro.build">Read our docs</a>
+				<a href="https://astro.build/chat"
+					>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
+						><path
+							fill="currentColor"
+							d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
+						></path></svg
+					>
+				</a>
+			</section>
+		</section>
+	</main>
+
+	<a href="https://astro.build/blog/astro-5/" id="news" class="box">
+		<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
+			><path
+				d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
+				fill="#111827"></path></svg
+		>
+		<h2>What's New in Astro 5.0?</h2>
+		<p>
+			From content layers to server islands, click to learn more about the new features and
+			improvements in Astro 5.0
+		</p>
+	</a>
+</div>
+
+<style>
+	#background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		filter: blur(100px);
+	}
+
+	#container {
+		font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+		height: 100%;
+	}
+
+	main {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	#hero {
+		display: flex;
+		align-items: start;
+		flex-direction: column;
+		justify-content: center;
+		padding: 16px;
+	}
+
+	h1 {
+		font-size: 22px;
+		margin-top: 0.25em;
+	}
+
+	#links {
+		display: flex;
+		gap: 16px;
+	}
+
+	#links a {
+		display: flex;
+		align-items: center;
+		padding: 10px 12px;
+		color: #111827;
+		text-decoration: none;
+		transition: color 0.2s;
+	}
+
+	#links a:hover {
+		color: rgb(78, 80, 86);
+	}
+
+	#links a svg {
+		height: 1em;
+		margin-left: 8px;
+	}
+
+	#links a.button {
+		color: white;
+		background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
+		box-shadow:
+			inset 0 0 0 1px rgba(255, 255, 255, 0.12),
+			inset 0 -2px 0 rgba(0, 0, 0, 0.24);
+		border-radius: 10px;
+	}
+
+	#links a.button:hover {
+		color: rgb(230, 230, 230);
+		box-shadow: none;
+	}
+
+	pre {
+		font-family:
+			ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
+			monospace;
+		font-weight: normal;
+		background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+		margin: 0;
+	}
+
+	h2 {
+		margin: 0 0 1em;
+		font-weight: normal;
+		color: #111827;
+		font-size: 20px;
+	}
+
+	p {
+		color: #4b5563;
+		font-size: 16px;
+		line-height: 24px;
+		letter-spacing: -0.006em;
+		margin: 0;
+	}
+
+	code {
+		display: inline-block;
+		background:
+			linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
+			linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
+		border-radius: 8px;
+		border: 1px solid transparent;
+		padding: 6px 8px;
+	}
+
+	.box {
+		padding: 16px;
+		background: rgba(255, 255, 255, 1);
+		border-radius: 16px;
+		border: 1px solid white;
+	}
+
+	#news {
+		position: absolute;
+		bottom: 16px;
+		right: 16px;
+		max-width: 300px;
+		text-decoration: none;
+		transition: background 0.2s;
+		backdrop-filter: blur(50px);
+	}
+
+	#news:hover {
+		background: rgba(255, 255, 255, 0.55);
+	}
+
+	@media screen and (max-height: 368px) {
+		#news {
+			display: none;
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		#container {
+			display: flex;
+			flex-direction: column;
+		}
+
+		#hero {
+			display: block;
+			padding-top: 10%;
+		}
+
+		#links {
+			flex-wrap: wrap;
+		}
+
+		#links a.button {
+			padding: 14px 18px;
+		}
+
+		#news {
+			right: 16px;
+			left: 16px;
+			bottom: 2.5rem;
+			max-width: 100%;
+		}
+
+		h1 {
+			line-height: 1.5;
+		}
+	}
+</style>
diff --git a/apps-archived/techbase/apps/web/src/components/software/CommentSection.astro b/apps-archived/techbase/apps/web/src/components/software/CommentSection.astro
new file mode 100644
index 000000000..054a87a29
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/CommentSection.astro
@@ -0,0 +1,12 @@
+---
+import { loadTranslations } from '../../utils/i18n';
+import CommentSystem from '../CommentSystem.astro';
+
+const { softwareId, locale } = Astro.props;
+const t = await loadTranslations(locale);
+---
+
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[350px] overflow-y-auto">
+  <h2 class="text-2xl font-bold mb-4">{t.software.comments || 'Comments'}</h2>
+  <CommentSystem softwareId={softwareId} />
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/software/ComparePanel.astro b/apps-archived/techbase/apps/web/src/components/software/ComparePanel.astro
new file mode 100644
index 000000000..ebd8b6062
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/ComparePanel.astro
@@ -0,0 +1,775 @@
+---
+import { loadTranslations } from '../../utils/i18n';
+import SoftwareRatings from './SoftwareRatings.astro';
+import CommentSystem from '../CommentSystem.astro';
+
+const { locale } = Astro.props;
+const t = await loadTranslations(locale);
+---
+
+<div 
+  class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden"
+>
+  <!-- Header mit Software-Info und Steuerungselementen -->
+  <div class="flex flex-col md:flex-row md:items-center mb-8 p-4 border-b border-gray-200 dark:border-gray-700">
+    <!-- Minimieren-Button -->
+    <button 
+      id="minimizeCompareBtn"
+      class="mr-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      aria-label="Minimize View"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+      </svg>
+    </button>
+    
+    <!-- Software-Info -->
+    <div class="flex items-center flex-1">
+      <div class="w-24 h-24 bg-white p-2 rounded-lg shadow-sm flex items-center justify-center mr-6 mb-4 md:mb-0">
+        <img id="compare-software-logo" src="/logos/sample-logo.svg" alt="Software logo" class="max-w-full max-h-full" />
+      </div>
+      <div>
+        <h2 id="compare-software-name" class="text-3xl font-bold">Select Software</h2>
+        <div id="compare-software-categories" class="flex flex-wrap text-sm text-gray-500 mt-2"></div>
+      </div>
+    </div>
+    
+    <!-- Aktionsbuttons -->
+    <div class="md:ml-auto mt-4 md:mt-0 flex space-x-2">
+      <button 
+        id="viewDemoBtn"
+        class="btn btn-primary"
+      >
+        Visit Website
+      </button>
+      
+      <button 
+        id="backToSoftwareListBtn"
+        class="btn btn-secondary whitespace-nowrap"
+      >
+        Select Another
+      </button>
+    </div>
+  </div>
+  
+  <!-- Software-Liste (angezeigt, wenn noch keine Software ausgewählt ist) -->
+  <div 
+    id="software-list-view"
+    class="p-0 overflow-y-auto" 
+    style="max-height: calc(100vh - 200px);">
+    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+      <h3 class="text-lg font-bold">Select Another Software</h3>
+      <div class="mt-4">
+        <input 
+          type="text" 
+          id="software-search-input"
+          placeholder="Search" 
+          class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-primary focus:border-primary dark:bg-gray-700 dark:text-white"
+        />
+      </div>
+    </div>
+    
+    <div class="p-0 overflow-y-auto" id="software-list-container">
+      <div id="loading-indicator" class="py-8 text-center text-gray-500 dark:text-gray-400" style="display: none;">
+        <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        Loading...
+      </div>
+      
+      <div id="error-message" class="py-8 text-center text-red-500" style="display: none;">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+        <p id="error-text">An error occurred</p>
+      </div>
+      
+      <div id="empty-message" class="py-8 text-center text-gray-500" style="display: none;">
+        No similar software available
+      </div>
+      
+      <div id="software-items">
+        <!-- Software-Einträge werden hier per JavaScript eingefügt -->
+      </div>
+    </div>
+  </div>
+  
+  <!-- Detaillierte Software-Vergleichsansicht (wenn Software ausgewählt wurde) -->
+  <div class="hidden" id="software-detail-view">
+    <div id="detail-loading" class="text-center text-gray-500 dark:text-gray-400 p-6">
+      <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      Loading software details...
+    </div>
+    
+    <div id="detail-content" style="display: none;" class="software-content px-4">
+      <!-- Hauptinhaltsbereich mit einspaltigem Layout ohne Grid -->
+      <div class="grid grid-cols-1 gap-8">
+        <!-- Software-Übersichtskomponente -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[500px] overflow-y-auto">
+          <h2 class="text-2xl font-bold mb-4">Overview</h2>
+          <p id="software-description" class="text-gray-700 dark:text-gray-300 mb-6"></p>
+          
+          <!-- Screenshots-Container (wird dynamisch befüllt) -->
+          <div id="compare-screenshots" class="mb-6" style="display: none;">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+              <!-- Hier werden Screenshots per JS eingefügt -->
+            </div>
+          </div>
+          
+          <!-- Features -->
+          <h3 class="text-xl font-bold mb-4">Features</h3>
+          <ul id="software-features" class="list-disc list-inside mb-6 text-gray-700 dark:text-gray-300"></ul>
+          
+          <!-- Plattformen -->
+          <div id="platforms-section">
+            <h3 class="text-xl font-bold mb-4">Platforms</h3>
+            <div id="software-platforms" class="flex flex-wrap gap-2 mb-6"></div>
+          </div>
+          
+          <!-- Last Updated -->
+          <div id="last-updated" class="text-sm text-gray-500 dark:text-gray-400">
+            Last Updated: <span id="update-date"></span>
+          </div>
+        </div>
+        
+        <!-- Preisgestaltungsbereich (jetzt an zweiter Stelle wie auf der linken Seite) -->
+        <div id="pricing-section" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[400px] overflow-y-auto">
+          <div class="flex justify-between items-center mb-6">
+            <h2 class="text-2xl font-bold">Pricing</h2>
+            
+            <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-full p-1">
+              <button 
+                id="compare-monthly-btn"
+                class="px-3 py-1 rounded-full bg-primary text-white text-sm font-medium"
+              >
+                Monthly
+              </button>
+              <button 
+                id="compare-yearly-btn"
+                class="px-3 py-1 rounded-full text-sm font-medium"
+              >
+                Yearly
+              </button>
+            </div>
+          </div>
+          <div id="software-pricing" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Pricing Info wird hier per JavaScript eingefügt -->
+          </div>
+        </div>
+        
+        <!-- Kommentar-Bereich (jetzt an dritter Stelle wie auf der linken Seite) -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[350px] overflow-y-auto">
+          <h2 class="text-2xl font-bold mb-4">Comments</h2>
+          <div id="compare-comments">
+            <p class="text-gray-500">Comments will be loaded when comparing specific software.</p>
+          </div>
+        </div>
+        
+        <!-- Software-Bewertungskomponente (jetzt an vierter Stelle wie auf der linken Seite) -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[300px] overflow-y-auto">
+          <h3 class="text-xl font-bold mb-4">Ratings</h3>
+          <div id="compare-ratings" class="space-y-4">
+            <!-- Ease of Use -->
+            <div>
+              <div class="flex justify-between items-center mb-1">
+                <span class="font-medium">Ease of Use</span>
+                <span id="compare-ease-value" class="font-bold">0.0 / 5</span>
+              </div>
+              <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div id="compare-ease-bar" class="h-full bg-primary" style="width: 0%"></div>
+              </div>
+              <div id="compare-ease-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+            </div>
+            
+            <!-- Features -->
+            <div>
+              <div class="flex justify-between items-center mb-1">
+                <span class="font-medium">Features</span>
+                <span id="compare-features-value" class="font-bold">0.0 / 5</span>
+              </div>
+              <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div id="compare-features-bar" class="h-full bg-primary" style="width: 0%"></div>
+              </div>
+              <div id="compare-features-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+            </div>
+            
+            <!-- Value -->
+            <div>
+              <div class="flex justify-between items-center mb-1">
+                <span class="font-medium">Value for Money</span>
+                <span id="compare-value-value" class="font-bold">0.0 / 5</span>
+              </div>
+              <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div id="compare-value-bar" class="h-full bg-primary" style="width: 0%"></div>
+              </div>
+              <div id="compare-value-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+            </div>
+            
+            <!-- Support -->
+            <div>
+              <div class="flex justify-between items-center mb-1">
+                <span class="font-medium">Support</span>
+                <span id="compare-support-value" class="font-bold">0.0 / 5</span>
+              </div>
+              <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div id="compare-support-bar" class="h-full bg-primary" style="width: 0%"></div>
+              </div>
+              <div id="compare-support-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+            </div>
+            
+            <!-- Reliability -->
+            <div>
+              <div class="flex justify-between items-center mb-1">
+                <span class="font-medium">Reliability</span>
+                <span id="compare-reliability-value" class="font-bold">0.0 / 5</span>
+              </div>
+              <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div id="compare-reliability-bar" class="h-full bg-primary" style="width: 0%"></div>
+              </div>
+              <div id="compare-reliability-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Minimierte Ansicht -->
+  <div id="minimized-view" class="p-4 flex flex-col items-center justify-center border-l border-gray-200 dark:border-gray-700 h-full hidden">
+    <div class="w-16 h-16 bg-white p-2 rounded-lg shadow-sm flex items-center justify-center mb-2">
+      <img id="minimized-logo" src="/logos/sample-logo.svg" alt="Software logo" class="max-w-full max-h-full" />
+    </div>
+    <h2 id="minimized-name" class="text-center text-lg font-bold mb-2">Software Name</h2>
+    <p id="minimized-description" class="text-center text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-3">Description will appear here</p>
+  </div>
+</div>
+
+<script>
+  // Client-side Funktionalität für die Vergleichsansicht
+  document.addEventListener('DOMContentLoaded', () => {
+    // DOM-Elemente
+    const softwareListView = document.getElementById('software-list-view');
+    const softwareDetailView = document.getElementById('software-detail-view');
+    const softwareItems = document.getElementById('software-items');
+    const searchInput = document.getElementById('software-search-input');
+    const loadingIndicator = document.getElementById('loading-indicator');
+    const errorMessage = document.getElementById('error-message');
+    const errorText = document.getElementById('error-text');
+    const emptyMessage = document.getElementById('empty-message');
+    const backButton = document.getElementById('backToSoftwareListBtn');
+    const minimizeButton = document.getElementById('minimizeCompareBtn');
+    const minimizedView = document.getElementById('minimized-view');
+    
+    // Detail-Elemente
+    const softwareLogo = document.getElementById('compare-software-logo');
+    const softwareName = document.getElementById('compare-software-name');
+    const softwareCategories = document.getElementById('compare-software-categories');
+    const softwareDescription = document.getElementById('software-description');
+    const softwareFeatures = document.getElementById('software-features');
+    const softwarePlatforms = document.getElementById('software-platforms');
+    const softwarePricing = document.getElementById('software-pricing');
+    const platformsSection = document.getElementById('platforms-section');
+    const pricingSection = document.getElementById('pricing-section');
+    const detailLoading = document.getElementById('detail-loading');
+    const detailContent = document.getElementById('detail-content');
+    
+    // Bewertungselemente
+    const compareEaseValue = document.getElementById('compare-ease-value');
+    const compareFeaturesValue = document.getElementById('compare-features-value');
+    const compareValueValue = document.getElementById('compare-value-value');
+    const compareSupportValue = document.getElementById('compare-support-value');
+    const compareReliabilityValue = document.getElementById('compare-reliability-value');
+    
+    // Minimized-Elemente
+    const minimizedLogo = document.getElementById('minimized-logo');
+    const minimizedName = document.getElementById('minimized-name');
+    const minimizedDescription = document.getElementById('minimized-description');
+    
+    let isMinimized = false;
+    let similarSoftware = [];
+    let filteredSoftware = [];
+    let currentSoftware = null;
+    let currentLocale = 'en';
+    
+    // Initialisiere mit dem Data-Attribut des Containers
+    const initializeFromContainer = () => {
+      // Container-Element für die Daten
+      const softwareDetail = document.getElementById('softwareDetail');
+      
+      if (softwareDetail) {
+        try {
+          console.log('Container data:', softwareDetail.dataset);
+          
+          let similarData = [];
+          if (softwareDetail.dataset.similarSoftware) {
+            similarData = JSON.parse(softwareDetail.dataset.similarSoftware);
+            console.log('Parsed similar software data:', similarData);
+          } else {
+            console.warn('No similar software data found in container');
+          }
+          
+          // Ähnliche Software speichern
+          similarSoftware = similarData;
+          filteredSoftware = similarData;
+          
+          // Locale erhalten
+          currentLocale = document.documentElement.lang || 'en';
+          
+          // Initialisiere die Software-Liste
+          renderSoftwareList(similarSoftware);
+          
+          // Zeige die Anzahl der geladenen Einträge
+          console.log(`Loaded ${similarSoftware.length} similar software entries`);
+        } catch (e) {
+          console.error('Error initializing compare panel:', e);
+          console.error(e);
+        }
+      } else {
+        console.error('Software detail container not found');
+      }
+    };
+    
+    // Rendere die Software-Liste
+    const renderSoftwareList = (softwareList) => {
+      // Liste leeren
+      softwareItems.innerHTML = '';
+      
+      if (softwareList.length === 0) {
+        emptyMessage.style.display = 'block';
+        return;
+      }
+      
+      emptyMessage.style.display = 'none';
+      
+      // Für jede Software einen Eintrag erstellen
+      softwareList.forEach(software => {
+        const item = document.createElement('div');
+        item.className = 'p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer';
+        
+        item.innerHTML = `
+          <div class="flex items-center">
+            <div class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
+              ${software.logo
+                ? `<img src="${software.logo}" alt="${software.name}" class="max-w-full max-h-full p-1" />`
+                : `<span class="text-lg">${software.name.charAt(0)}</span>`
+              }
+            </div>
+            <div>
+              <div class="font-medium dark:text-white">${software.name}</div>
+              <div class="text-sm text-gray-500 dark:text-gray-400">${software.categories.join(', ')}</div>
+            </div>
+          </div>
+        `;
+        
+        // Click-Event zum Auswählen der Software
+        item.addEventListener('click', () => selectComparisonSoftware(software.id));
+        
+        softwareItems.appendChild(item);
+      });
+    };
+    
+    // Software zum Vergleich auswählen
+    const selectComparisonSoftware = async (id) => {
+      try {
+        // Lade-Zustand anzeigen
+        softwareListView.style.display = 'none';
+        softwareDetailView.style.display = 'block';
+        detailLoading.style.display = 'block';
+        detailContent.style.display = 'none';
+        
+        // URL-Parameter aktualisieren
+        const url = new URL(window.location.href);
+        url.searchParams.set('compare', id);
+        window.history.replaceState({}, '', url.toString());
+        
+        // Software-Daten laden
+        const softwareData = await loadSoftwareData(id, currentLocale);
+        
+        if (!softwareData) {
+          throw new Error('Failed to load software data');
+        }
+        
+        // Aktuelle Software speichern
+        currentSoftware = softwareData;
+        
+        // UI aktualisieren
+        updateSoftwareUI(softwareData);
+        
+        // Informiere die SoftwareDetail-Komponente über die ausgewählte Software
+        const detailPanel = document.querySelector('.left-panel');
+        if (detailPanel) {
+          // Für die Einzelansicht in mobilen Geräten
+          detailPanel.classList.add('lg:w-1/2');
+          detailPanel.classList.remove('w-full');
+        }
+      } catch (e) {
+        console.error('Error selecting software for comparison:', e);
+        detailLoading.style.display = 'none';
+        errorText.textContent = e.message || 'Failed to load software data';
+        errorMessage.style.display = 'block';
+      }
+    };
+    
+    // Software-Daten über API laden
+    const loadSoftwareData = async (id, locale) => {
+      try {
+        const response = await fetch(`/api/software/${id}.json?lang=${locale}`);
+        
+        if (!response.ok) {
+          throw new Error(`Error status: ${response.status}`);
+        }
+        
+        return await response.json();
+      } catch (e) {
+        console.error('Error loading software data:', e);
+        return null;
+      }
+    };
+    
+    // UI mit Software-Daten aktualisieren
+    const updateSoftwareUI = (software) => {
+      // Header-Informationen
+      softwareLogo.src = software.logo || '/logos/sample-logo.svg';
+      softwareLogo.alt = software.name;
+      softwareName.textContent = software.name;
+      
+      // Kategorie-Tags erstellen
+      softwareCategories.innerHTML = '';
+      if (software.categories && software.categories.length > 0) {
+        software.categories.forEach((category, index) => {
+          const a = document.createElement('a');
+          a.href = `/${currentLocale}/category/${category.toLowerCase().replace(' ', '-')}`;
+          a.className = 'text-primary hover:underline';
+          a.textContent = category;
+          softwareCategories.appendChild(a);
+          
+          if (index < software.categories.length - 1) {
+            const separator = document.createElement('span');
+            separator.className = 'mx-2 text-gray-400';
+            separator.textContent = '•';
+            softwareCategories.appendChild(separator);
+          }
+        });
+      }
+      
+      // Website-Button aktivieren, wenn URL vorhanden
+      const viewDemoBtn = document.getElementById('viewDemoBtn');
+      if (viewDemoBtn) {
+        if (software.website) {
+          viewDemoBtn.disabled = false;
+        } else {
+          viewDemoBtn.disabled = true;
+        }
+      }
+      
+      // Beschreibung
+      softwareDescription.textContent = software.description || 'No description available';
+      
+      // Screenshots, falls vorhanden
+      const screenshotsContainer = document.getElementById('compare-screenshots');
+      const screenshotsGrid = screenshotsContainer.querySelector('.grid');
+      
+      if (software.screenshots && software.screenshots.length > 0) {
+        screenshotsGrid.innerHTML = '';
+        screenshotsContainer.style.display = 'block';
+        
+        software.screenshots.forEach(screenshot => {
+          const screenshotDiv = document.createElement('div');
+          screenshotDiv.className = 'aspect-video bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden';
+          
+          const img = document.createElement('img');
+          img.src = screenshot;
+          img.alt = `${software.name} screenshot`;
+          img.className = 'w-full h-full object-cover';
+          
+          screenshotDiv.appendChild(img);
+          screenshotsGrid.appendChild(screenshotDiv);
+        });
+      } else {
+        screenshotsContainer.style.display = 'none';
+      }
+      
+      // Features
+      softwareFeatures.innerHTML = '';
+      if (software.features && software.features.length > 0) {
+        software.features.forEach(feature => {
+          const li = document.createElement('li');
+          li.className = 'mb-2 text-gray-700 dark:text-gray-300';
+          li.textContent = feature;
+          softwareFeatures.appendChild(li);
+        });
+      } else {
+        const li = document.createElement('li');
+        li.className = 'mb-2 text-gray-700 dark:text-gray-300';
+        li.textContent = 'No features listed';
+        softwareFeatures.appendChild(li);
+      }
+      
+      // Plattformen
+      softwarePlatforms.innerHTML = '';
+      if (software.platforms && software.platforms.length > 0) {
+        platformsSection.style.display = 'block';
+        software.platforms.forEach(platform => {
+          const span = document.createElement('span');
+          span.className = 'px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm';
+          span.textContent = platform;
+          softwarePlatforms.appendChild(span);
+        });
+      } else {
+        platformsSection.style.display = 'none';
+      }
+      
+      // Last Updated Datum
+      const updateDate = document.getElementById('update-date');
+      if (updateDate && software.lastUpdated) {
+        updateDate.textContent = new Date(software.lastUpdated).toLocaleDateString();
+      } else if (updateDate) {
+        updateDate.textContent = 'N/A';
+      }
+      
+      // Preisgestaltung
+      softwarePricing.innerHTML = '';
+      if (software.pricing && software.pricing.length > 0) {
+        pricingSection.style.display = 'block';
+        
+        // Preis-Schalter einrichten
+        const monthlyBtn = document.getElementById('compare-monthly-btn');
+        const yearlyBtn = document.getElementById('compare-yearly-btn');
+        
+        if (monthlyBtn && yearlyBtn) {
+          // Standard ist monatlich
+          let showMonthly = true;
+          
+          // Preise generieren
+          const generatePricing = () => {
+            softwarePricing.innerHTML = '';
+            
+            software.pricing.forEach(plan => {
+              const planDiv = document.createElement('div');
+              planDiv.className = 'border border-gray-200 dark:border-gray-700 rounded-lg p-6';
+              
+              const planTitle = document.createElement('h3');
+              planTitle.className = 'text-xl font-bold mb-2';
+              planTitle.textContent = plan.model;
+              
+              // Preisanzeige-Container für monatlich/jährlich
+              const priceContainer = document.createElement('div');
+              priceContainer.className = 'mb-4';
+              
+              const planPrice = document.createElement('p');
+              planPrice.className = 'text-2xl font-bold text-primary dark:text-blue-400';
+              planPrice.textContent = showMonthly ? plan.price : (plan.yearly_price || 'N/A');
+              
+              priceContainer.appendChild(planPrice);
+              
+              // Features
+              const featuresList = document.createElement('ul');
+              featuresList.className = 'space-y-2';
+              
+              plan.features.forEach(feature => {
+                const li = document.createElement('li');
+                li.className = 'flex items-start';
+                li.innerHTML = `
+                  <svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                  <span class="dark:text-gray-300">${feature}</span>
+                `;
+                featuresList.appendChild(li);
+              });
+              
+              planDiv.appendChild(planTitle);
+              planDiv.appendChild(priceContainer);
+              planDiv.appendChild(featuresList);
+              softwarePricing.appendChild(planDiv);
+            });
+          };
+          
+          // Initial erzeugen
+          generatePricing();
+          
+          // Event-Listener für Schalter
+          monthlyBtn.addEventListener('click', () => {
+            monthlyBtn.classList.add('bg-primary', 'text-white');
+            yearlyBtn.classList.remove('bg-primary', 'text-white');
+            showMonthly = true;
+            generatePricing();
+          });
+          
+          yearlyBtn.addEventListener('click', () => {
+            yearlyBtn.classList.add('bg-primary', 'text-white');
+            monthlyBtn.classList.remove('bg-primary', 'text-white');
+            showMonthly = false;
+            generatePricing();
+          });
+        }
+      } else {
+        pricingSection.style.display = 'none';
+      }
+      
+      // Bewertungen aktualisieren
+      if (software.metrics) {
+        updateRatings(software.metrics);
+      } else {
+        // Leere Bewertungen anzeigen, wenn keine vorhanden sind
+        updateRatings({
+          easeOfUse: { average: 0, count: 0 },
+          featureRichness: { average: 0, count: 0 },
+          valueForMoney: { average: 0, count: 0 },
+          support: { average: 0, count: 0 },
+          reliability: { average: 0, count: 0 }
+        });
+      }
+      
+      // Minimierte Ansicht aktualisieren
+      minimizedLogo.src = software.logo || '/logos/sample-logo.svg';
+      minimizedLogo.alt = software.name;
+      minimizedName.textContent = software.name;
+      minimizedDescription.textContent = software.description || 'No description available';
+      
+      // Lade-Zustand ausblenden, Inhalte einblenden
+      detailLoading.style.display = 'none';
+      detailContent.style.display = 'block';
+    };
+    
+    // Bewertungen aktualisieren
+    const updateRatings = (metrics) => {
+      // Bewertungen abrufen
+      const easeOfUse = metrics.easeOfUse || { average: 0, count: 0 };
+      const featureRichness = metrics.featureRichness || { average: 0, count: 0 };
+      const valueForMoney = metrics.valueForMoney || { average: 0, count: 0 };
+      const support = metrics.support || { average: 0, count: 0 };
+      const reliability = metrics.reliability || { average: 0, count: 0 };
+      
+      // Werte aktualisieren für Ease of Use
+      if (compareEaseValue) compareEaseValue.textContent = `${easeOfUse.average.toFixed(1)} / 5`;
+      const easeBar = document.getElementById('compare-ease-bar');
+      if (easeBar) easeBar.style.width = `${(easeOfUse.average / 5) * 100}%`;
+      const easeCount = document.getElementById('compare-ease-count');
+      if (easeCount) easeCount.textContent = `${easeOfUse.count} votes`;
+      
+      // Werte aktualisieren für Features
+      if (compareFeaturesValue) compareFeaturesValue.textContent = `${featureRichness.average.toFixed(1)} / 5`;
+      const featuresBar = document.getElementById('compare-features-bar');
+      if (featuresBar) featuresBar.style.width = `${(featureRichness.average / 5) * 100}%`;
+      const featuresCount = document.getElementById('compare-features-count');
+      if (featuresCount) featuresCount.textContent = `${featureRichness.count} votes`;
+      
+      // Werte aktualisieren für Value
+      if (compareValueValue) compareValueValue.textContent = `${valueForMoney.average.toFixed(1)} / 5`;
+      const valueBar = document.getElementById('compare-value-bar');
+      if (valueBar) valueBar.style.width = `${(valueForMoney.average / 5) * 100}%`;
+      const valueCount = document.getElementById('compare-value-count');
+      if (valueCount) valueCount.textContent = `${valueForMoney.count} votes`;
+      
+      // Werte aktualisieren für Support
+      if (compareSupportValue) compareSupportValue.textContent = `${support.average.toFixed(1)} / 5`;
+      const supportBar = document.getElementById('compare-support-bar');
+      if (supportBar) supportBar.style.width = `${(support.average / 5) * 100}%`;
+      const supportCount = document.getElementById('compare-support-count');
+      if (supportCount) supportCount.textContent = `${support.count} votes`;
+      
+      // Werte aktualisieren für Reliability
+      if (compareReliabilityValue) compareReliabilityValue.textContent = `${reliability.average.toFixed(1)} / 5`;
+      const reliabilityBar = document.getElementById('compare-reliability-bar');
+      if (reliabilityBar) reliabilityBar.style.width = `${(reliability.average / 5) * 100}%`;
+      const reliabilityCount = document.getElementById('compare-reliability-count');
+      if (reliabilityCount) reliabilityCount.textContent = `${reliability.count} votes`;
+    };
+    
+    // Filter-Funktion für die Suche
+    const filterSoftware = (searchTerm) => {
+      if (!searchTerm || searchTerm.length < 2) {
+        filteredSoftware = similarSoftware;
+        renderSoftwareList(filteredSoftware);
+        return;
+      }
+      
+      const term = searchTerm.toLowerCase();
+      filteredSoftware = similarSoftware.filter(software => {
+        return software.name.toLowerCase().includes(term) || 
+               software.description.toLowerCase().includes(term) ||
+               (software.categories && software.categories.some(cat => cat.toLowerCase().includes(term)));
+      });
+      
+      renderSoftwareList(filteredSoftware);
+    };
+    
+    // Minimierte Ansicht umschalten
+    const toggleMinimize = () => {
+      isMinimized = !isMinimized;
+      
+      if (isMinimized) {
+        softwareDetailView.style.display = 'none';
+        minimizedView.style.display = 'flex';
+      } else {
+        softwareDetailView.style.display = 'block';
+        minimizedView.style.display = 'none';
+      }
+    };
+    
+    // Zurück zur Software-Liste
+    const backToList = () => {
+      softwareDetailView.style.display = 'none';
+      minimizedView.style.display = 'none';
+      softwareListView.style.display = 'block';
+      isMinimized = false;
+    };
+    
+    // Event-Listener einrichten
+    if (searchInput) {
+      searchInput.addEventListener('input', () => filterSoftware(searchInput.value));
+    }
+    
+    if (backButton) {
+      backButton.addEventListener('click', backToList);
+    }
+    
+    if (minimizeButton) {
+      minimizeButton.addEventListener('click', toggleMinimize);
+    }
+    
+    // URL-Parameter überprüfen
+    const checkURLParams = () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const compareId = urlParams.get('compare');
+      
+      if (compareId) {
+        selectComparisonSoftware(compareId);
+      }
+    };
+    
+    // Website-Button-Handler
+    const viewDemoBtn = document.getElementById('viewDemoBtn');
+    if (viewDemoBtn) {
+      viewDemoBtn.addEventListener('click', () => {
+        if (currentSoftware && currentSoftware.website) {
+          window.open(currentSoftware.website, '_blank');
+        }
+      });
+      
+      // Initial deaktivieren, bis Software ausgewählt ist
+      viewDemoBtn.disabled = true;
+    }
+    
+    // Initialisierung starten
+    initializeFromContainer();
+    checkURLParams();
+    
+    // Prüfen, ob Daten vorhanden sind
+    if (similarSoftware.length === 0) {
+      // Verzögerung, um sicherzustellen, dass Daten verfügbar sind
+      setTimeout(() => {
+        initializeFromContainer();
+        
+        if (similarSoftware.length === 0) {
+          emptyMessage.style.display = 'block';
+        }
+      }, 500);
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/software/ComparisonView.astro b/apps-archived/techbase/apps/web/src/components/software/ComparisonView.astro
new file mode 100644
index 000000000..e5793d658
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/ComparisonView.astro
@@ -0,0 +1,535 @@
+---
+import { loadTranslations } from '../../utils/i18n';
+
+const { currentSoftware, similarSoftware, locale } = Astro.props;
+const t = await loadTranslations(locale);
+---
+
+<div>
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 h-[200px] overflow-y-auto">
+    <h3 class="text-xl font-bold mb-4">{t.common.compare || 'Compare'}</h3>
+    <p class="text-gray-700 dark:text-gray-300 mb-4">{t.software.compareDescription || 'Compare this software with others to find the best solution for your needs.'}</p>
+    
+    <a 
+      href={`/${locale}/compare?software=${currentSoftware.id}`} 
+      class="btn btn-secondary w-full"
+    >
+      {t.software.compare || 'Compare'}
+    </a>
+  </div>
+  
+  <!-- Similar Software List -->
+  <div 
+    x-show="isCompareMode && !selectedSoftwareId"
+    class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-sm h-full overflow-hidden"
+  >
+    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+      <h3 class="text-lg font-bold" id="software-selection-title">{t.software.selectAnother}</h3>
+      <div class="mt-4">
+        <input 
+          type="text" 
+          placeholder={t.common.search} 
+          class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-primary focus:border-primary dark:bg-gray-700 dark:text-white"
+          id="software-search-input"
+        />
+      </div>
+    </div>
+    
+    <div class="p-0 overflow-y-auto" style="max-height: calc(100vh - 200px);" id="software-list-container">
+      <!-- This will be populated via JavaScript -->
+      <div id="similar-software-list" style="display:none">{JSON.stringify(similarSoftware)}</div>
+    </div>
+  </div>
+  
+  <!-- Selected Software for Comparison -->
+  <div 
+    x-show="isCompareMode && selectedSoftwareId" 
+    x-transition
+    class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden"
+    id="comparison-container"
+  >
+    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
+      <button 
+        @click="toggleMinimize('right')" 
+        class="mr-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+        :aria-label="isRightMinimized ? '${t.software.expandView}' : '${t.software.minimizeView}'"
+      >
+        <svg x-show="!isRightMinimized" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+        </svg>
+        <svg x-show="isRightMinimized" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+        </svg>
+      </button>
+      
+      <div class="flex items-center flex-1">
+        <div class="w-12 h-12 bg-white p-1 rounded-lg shadow-sm flex items-center justify-center mr-4">
+          <img id="compare-logo" alt="Software logo" class="max-w-full max-h-full" />
+        </div>
+        <div>
+          <h2 id="compare-name" class="text-xl font-bold"></h2>
+          <div id="compare-categories" class="flex flex-wrap text-sm text-gray-500"></div>
+        </div>
+      </div>
+      
+      <button 
+        @click="selectedSoftwareId = null" 
+        class="ml-auto btn btn-sm btn-secondary whitespace-nowrap"
+      >
+        {t.software.selectAnother}
+      </button>
+    </div>
+    
+    <div x-show="!isRightMinimized" class="p-6" id="compare-content">
+      <div class="text-center text-gray-500 dark:text-gray-400">
+        <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        Loading software details...
+      </div>
+    </div>
+    
+    <template x-if="isRightMinimized">
+      <div class="p-4 flex flex-col items-center justify-center border-l border-gray-200 dark:border-gray-700 h-full">
+        <div class="w-16 h-16 bg-white p-2 rounded-lg shadow-sm flex items-center justify-center mb-2">
+          <img id="compare-mini-logo" alt="Software logo" class="max-w-full max-h-full" />
+        </div>
+        <h2 id="compare-mini-name" class="text-center text-lg font-bold mb-2"></h2>
+        <p id="compare-mini-description" class="text-center text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-3"></p>
+      </div>
+    </template>
+  </div>
+  
+  <!-- Mobile view switcher (only shown in compare mode on small screens) -->
+  <div 
+    x-show="isCompareMode" 
+    class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-3 flex justify-center space-x-4 lg:hidden z-10"
+  >
+    <button 
+      @click="switchViewSide('left')" 
+      class="px-4 py-2 rounded-md transition-colors"
+      :class="{'bg-primary text-white': currentViewSide === 'left', 'bg-gray-100 dark:bg-gray-700': currentViewSide !== 'left'}"
+    >
+      {currentSoftware.name}
+    </button>
+    <button 
+      x-show="selectedSoftwareId"
+      @click="switchViewSide('right')" 
+      class="px-4 py-2 rounded-md transition-colors"
+      :class="{'bg-primary text-white': currentViewSide === 'right', 'bg-gray-100 dark:bg-gray-700': currentViewSide !== 'right'}"
+      id="compare-tab-button"
+    >
+      Compare
+    </button>
+  </div>
+</div>
+
+<!-- Hidden data for JS -->
+<div id="current-software-categories" style="display:none">{JSON.stringify(currentSoftware.categories)}</div>
+<div id="current-software-name" style="display:none">{currentSoftware.name}</div>
+
+<script>
+  // Function to populate software items
+  window.populateSoftwareItems = function() {
+    const listContainer = document.getElementById('software-list-container');
+    const selectionTitle = document.getElementById('software-selection-title');
+    if (!listContainer) return;
+    
+    // Create a backup of the software list for the "back" button to use
+    if (!document.getElementById('software-list-backup')) {
+      const backupDiv = document.createElement('div');
+      backupDiv.id = 'software-list-backup';
+      backupDiv.style.display = 'none';
+      document.body.appendChild(backupDiv);
+    }
+    
+    listContainer.innerHTML = '<div class="p-4 text-center">Loading...</div>';
+    
+    // Get the current software's categories and similar software from hidden elements
+    const currentSoftwareCategories = JSON.parse(document.getElementById('current-software-categories').textContent);
+    const currentSoftwareName = document.getElementById('current-software-name').textContent;
+    const similarSoftwareList = JSON.parse(document.getElementById('similar-software-list').textContent);
+    
+    // Update the selection title with the primary category
+    if (selectionTitle && currentSoftwareCategories.length > 0) {
+      const primaryCategory = currentSoftwareCategories[0];
+      selectionTitle.textContent = `Other ${primaryCategory} software`;
+    }
+    
+    setTimeout(() => {
+      listContainer.innerHTML = '';
+      
+      // Use pre-filtered data from content collections on the server side
+      const filteredSoftware = similarSoftwareList;
+      
+      if (filteredSoftware.length === 0) {
+        const emptyEl = document.createElement('div');
+        emptyEl.classList.add('py-8', 'text-center', 'text-gray-500');
+        emptyEl.textContent = 'No similar software available for comparison';
+        listContainer.appendChild(emptyEl);
+        return;
+      }
+      
+      filteredSoftware.forEach(software => {
+        console.log("Rendering software item in ComparisonView:", software);
+        const item = document.createElement('div');
+        item.className = 'p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer';
+        
+        // Ensure categories is an array
+        const categories = Array.isArray(software.categories) 
+          ? software.categories.join(', ') 
+          : '';
+          
+        // Use logo if available, otherwise show first letter of name
+        const logoHtml = software.logo
+          ? `<img src="${software.logo}" alt="${software.name}" class="max-w-full max-h-full p-1" />`
+          : `<span class="text-lg">${software.name.charAt(0)}</span>`;
+        
+        item.innerHTML = `
+          <div class="flex items-center">
+            <div class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
+              ${logoHtml}
+            </div>
+            <div>
+              <div class="font-medium dark:text-white">${software.name}</div>
+              <div class="text-sm text-gray-500 dark:text-gray-400">${categories}</div>
+            </div>
+          </div>
+        `;
+        
+        item.addEventListener('click', async () => {
+          console.log(`Selected software for comparison in ComparisonView:`, software);
+          
+          // Get the alpine data context
+          const alpine = document.querySelector('[x-data]')?.__x;
+          if (alpine) {
+            alpine.$data.selectedSoftwareId = software.id;
+          }
+          
+          // Update URL params
+          const url = new URL(window.location.href);
+          url.searchParams.set('compare', software.id);
+          window.history.replaceState({}, '', url.toString());
+          
+          // Load software data
+          try {
+            const compareContainer = document.getElementById('comparison-container');
+            if (!compareContainer) {
+              console.error("Comparison container not found");
+              return;
+            }
+            
+            // Update basic info immediately for responsive UI
+            const nameEl = document.getElementById('compare-name');
+            const logoEl = document.getElementById('compare-logo');
+            if (nameEl) nameEl.textContent = software.name;
+            if (logoEl) logoEl.src = software.logo || '/logos/sample-logo.svg';
+            
+            // Fill in software features from local data before API call
+            const contentEl = document.getElementById('compare-content');
+            if (contentEl) {
+              contentEl.innerHTML = `
+                <div class="mb-8">
+                  <h2 class="text-xl font-bold mb-4">Overview</h2>
+                  <p class="text-gray-700 dark:text-gray-300">${software.description || "No description available"}</p>
+                </div>
+                
+                <div class="mb-8">
+                  <h2 class="text-xl font-bold mb-4">Features</h2>
+                  <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300">
+                    ${Array.isArray(software.features) && software.features.length > 0 
+                      ? software.features.map(f => `<li>${f}</li>`).join('') 
+                      : '<li>No features listed</li>'}
+                  </ul>
+                </div>
+                
+                ${Array.isArray(software.platforms) && software.platforms.length > 0 
+                  ? `<div class="mb-8">
+                      <h3 class="text-xl font-bold mb-4">Platforms</h3>
+                      <div class="flex flex-wrap gap-2 mb-6">
+                        ${software.platforms.map(p => `<span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm">${p}</span>`).join('')}
+                      </div>
+                    </div>`
+                  : ''}
+              `;
+            }
+            
+            // Get software data with API call if needed
+            await updateComparisonSoftware(software);
+          } catch (error) {
+            console.error('Error selecting software for comparison:', error);
+          }
+        });
+        
+        listContainer.appendChild(item);
+      });
+      
+      // Save a backup of the complete software list panel
+      const comparePanel = document.querySelector('#comparison-container');
+      const backupDiv = document.getElementById('software-list-backup');
+      if (comparePanel && backupDiv) {
+        backupDiv.innerHTML = comparePanel.innerHTML;
+      }
+    }, 100);
+  };
+  
+  // Function to update comparison software with full data
+  async function updateComparisonSoftware(software) {
+    // Get software data from API
+    const urlPathParts = window.location.pathname.split('/');
+    const locale = urlPathParts[1] || 'en'; // The first segment after the leading slash is the locale
+    
+    try {
+      // Show loading state in the comparison panel
+      const contentEl = document.getElementById('compare-content');
+      if (contentEl) {
+        contentEl.innerHTML = `
+          <div class="text-center text-gray-500 dark:text-gray-400">
+            <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            Loading software details...
+          </div>
+        `;
+      }
+      
+      // Use direct data if we already have it, otherwise load from API
+      let softwareData;
+      if (typeof software === 'object' && software.id && software.name) {
+        console.log("Using provided software data directly:", software.id);
+        // We already have software data, use it directly
+        softwareData = {
+          ...software,
+          // Add mock metrics for consistency if not present
+          metrics: software.metrics || {
+            easeOfUse: { average: 4.2, count: 15 },
+            featureRichness: { average: 3.8, count: 12 },
+            valueForMoney: { average: 4.5, count: 18 },
+            support: { average: 3.5, count: 10 },
+            reliability: { average: 4.0, count: 14 }
+          },
+          // Ensure we have features array
+          features: software.features || []
+        };
+      } else {
+        // Load the full software data from API
+        console.log("Loading software data from API for:", software.id);
+        softwareData = await loadSoftwareData(software.id, locale);
+      }
+      
+      if (!softwareData) {
+        throw new Error('Failed to load software data');
+      }
+      
+      // Update the UI elements
+      updateComparisonUI(softwareData);
+    } catch (error) {
+      console.error('Error updating comparison software:', error);
+      showComparisonError();
+    }
+  }
+  
+  // Function to update the UI with the loaded software data
+  function updateComparisonUI(software) {
+    if (!software) {
+      console.error("Cannot update UI: No software data provided");
+      showComparisonError();
+      return;
+    }
+    
+    // Ensure software has all required properties with fallbacks
+    const safeSoftware = {
+      name: software.name || "Unknown Software",
+      logo: software.logo || '/logos/sample-logo.svg',
+      description: software.description || "No description available",
+      categories: Array.isArray(software.categories) ? software.categories : [],
+      features: Array.isArray(software.features) ? software.features : ["No features listed"],
+      platforms: Array.isArray(software.platforms) ? software.platforms : []
+    };
+    
+    // Update header elements
+    const logoEl = document.getElementById('compare-logo');
+    const nameEl = document.getElementById('compare-name');
+    const categoriesEl = document.getElementById('compare-categories');
+    const miniLogoEl = document.getElementById('compare-mini-logo');
+    const miniNameEl = document.getElementById('compare-mini-name');
+    const miniDescEl = document.getElementById('compare-mini-description');
+    const tabButtonEl = document.getElementById('compare-tab-button');
+    
+    if (logoEl) logoEl.src = safeSoftware.logo;
+    if (miniLogoEl) miniLogoEl.src = safeSoftware.logo;
+    if (nameEl) nameEl.textContent = safeSoftware.name;
+    if (miniNameEl) miniNameEl.textContent = safeSoftware.name;
+    if (tabButtonEl) tabButtonEl.textContent = safeSoftware.name;
+    
+    if (categoriesEl) {
+      categoriesEl.innerHTML = '';
+      safeSoftware.categories.forEach((cat, i) => {
+        const span = document.createElement('span');
+        span.textContent = cat + (i < safeSoftware.categories.length - 1 ? ' • ' : '');
+        categoriesEl.appendChild(span);
+      });
+    }
+    
+    if (miniDescEl) miniDescEl.textContent = safeSoftware.description;
+    
+    // Update content area
+    const contentEl = document.getElementById('compare-content');
+    if (contentEl) {
+      contentEl.innerHTML = '';
+      
+      // Add description
+      const descDiv = document.createElement('div');
+      descDiv.className = 'mb-8';
+      
+      const descTitle = document.createElement('h2');
+      descTitle.className = 'text-xl font-bold mb-4';
+      descTitle.textContent = 'Overview';
+      
+      const descText = document.createElement('p');
+      descText.className = 'text-gray-700 dark:text-gray-300';
+      descText.textContent = safeSoftware.description;
+      
+      descDiv.appendChild(descTitle);
+      descDiv.appendChild(descText);
+      contentEl.appendChild(descDiv);
+      
+      // Add features
+      const featuresDiv = document.createElement('div');
+      featuresDiv.className = 'mb-8';
+      
+      const featuresTitle = document.createElement('h2');
+      featuresTitle.className = 'text-xl font-bold mb-4';
+      featuresTitle.textContent = 'Features';
+      
+      const featuresList = document.createElement('ul');
+      featuresList.className = 'list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300';
+      
+      safeSoftware.features.forEach(feature => {
+        const li = document.createElement('li');
+        li.textContent = feature;
+        featuresList.appendChild(li);
+      });
+      
+      featuresDiv.appendChild(featuresTitle);
+      featuresDiv.appendChild(featuresList);
+      contentEl.appendChild(featuresDiv);
+      
+      // Add platforms
+      if (safeSoftware.platforms.length > 0) {
+        const platformsDiv = document.createElement('div');
+        platformsDiv.className = 'mb-8';
+        
+        const platformsTitle = document.createElement('h3');
+        platformsTitle.className = 'text-xl font-bold mb-4';
+        platformsTitle.textContent = 'Platforms';
+        
+        const platformsContainer = document.createElement('div');
+        platformsContainer.className = 'flex flex-wrap gap-2 mb-6';
+        
+        safeSoftware.platforms.forEach(platform => {
+          const span = document.createElement('span');
+          span.className = 'px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm';
+          span.textContent = platform;
+          platformsContainer.appendChild(span);
+        });
+        
+        platformsDiv.appendChild(platformsTitle);
+        platformsDiv.appendChild(platformsContainer);
+        contentEl.appendChild(platformsDiv);
+      }
+    }
+  }
+  
+  // Function to show error in the comparison panel
+  function showComparisonError() {
+    const contentEl = document.getElementById('compare-content');
+    if (contentEl) {
+      contentEl.innerHTML = `
+        <div class="text-center py-8 text-red-600">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <p class="text-lg font-medium">Failed to load software data</p>
+          <p class="mt-2">Please try again later</p>
+        </div>
+      `;
+    }
+    
+    // Also update the software name so it's not "Select Software" anymore
+    const nameEl = document.getElementById('compare-name');
+    if (nameEl) {
+      nameEl.textContent = "Error loading software";
+    }
+  }
+  
+  // Function to load software data from API
+  async function loadSoftwareData(softwareId, locale) {
+    try {
+      // First try to fetch from the API
+      const response = await fetch(`/api/software/${softwareId}.json?lang=${locale}`);
+      
+      if (!response.ok) {
+        console.warn(`API request failed: ${response.status}. Trying fallback method.`);
+        throw new Error(`API request failed: ${response.status}`);
+      }
+      
+      return await response.json();
+    } catch (error) {
+      console.error("Error loading software data:", error);
+      
+      // Fallback: try to find the software in the similarity data
+      try {
+        const similarSoftwareList = JSON.parse(document.getElementById('similar-software-list').textContent);
+        const matchingSoftware = similarSoftwareList.find(s => s.id === softwareId);
+        
+        if (matchingSoftware) {
+          console.log("Using fallback data from similar-software-list");
+          // Add mock metrics for consistency
+          return {
+            ...matchingSoftware,
+            metrics: {
+              easeOfUse: { average: 4.2, count: 15 },
+              featureRichness: { average: 3.8, count: 12 },
+              valueForMoney: { average: 4.5, count: 18 },
+              support: { average: 3.5, count: 10 },
+              reliability: { average: 4.0, count: 14 }
+            }
+          };
+        }
+      } catch (fallbackError) {
+        console.error("Fallback method also failed:", fallbackError);
+      }
+      
+      return null;
+    }
+  }
+  
+  // Initialize - check if we're in compare mode
+  document.addEventListener('DOMContentLoaded', () => {
+    setTimeout(() => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const compareWith = urlParams.get('compare');
+      
+      // Check if we're in compare mode through Alpine.js
+      const alpine = document.querySelector('[x-data]')?.__x;
+      if (alpine && alpine.$data.isCompareMode) {
+        console.log("We're in compare mode, loading items immediately");
+        populateSoftwareItems();
+      } else if (compareWith) {
+        console.log("Compare parameter found in URL, loading items");
+        populateSoftwareItems();
+      }
+      
+      // Also add a direct event listener to the compare button to populate items
+      document.querySelectorAll('[x-text="isCompareMode ? \'${t.software.expandView}\' : \'${t.software.inlineCompare}\'"').forEach(btn => {
+        btn.addEventListener('click', () => {
+          // Short delay to ensure Alpine has updated its state
+          setTimeout(() => populateSoftwareItems(), 100);
+        });
+      });
+    }, 500);
+  });
+</script>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/software/PricingSection.astro b/apps-archived/techbase/apps/web/src/components/software/PricingSection.astro
new file mode 100644
index 000000000..0487823c5
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/PricingSection.astro
@@ -0,0 +1,86 @@
+---
+import { loadTranslations } from '../../utils/i18n';
+
+const { pricing, locale } = Astro.props;
+const t = await loadTranslations(locale);
+---
+
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[400px] overflow-y-auto">
+  <div class="flex justify-between items-center mb-6">
+    <h2 class="text-2xl font-bold">{t.software.pricing || 'Pricing'}</h2>
+    
+    <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-full p-1">
+      <button 
+        id="monthlyPricingBtn"
+        class="px-3 py-1 rounded-full bg-primary text-white text-sm font-medium"
+      >
+        {t.software.monthlyPrice || 'Monthly'}
+      </button>
+      <button 
+        id="yearlyPricingBtn"
+        class="px-3 py-1 rounded-full text-sm font-medium"
+      >
+        {t.software.yearlyPrice || 'Yearly'}
+      </button>
+    </div>
+  </div>
+  
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    {pricing.map(plan => (
+      <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6">
+        <h3 class="text-xl font-bold mb-2">{plan.model}</h3>
+        <div class="pricing-container">
+          <div class="monthly-price block">
+            <p class="text-2xl font-bold text-primary dark:text-blue-400">{plan.price}</p>
+          </div>
+          <div class="yearly-price hidden">
+            <p class="text-2xl font-bold text-primary dark:text-blue-400">{plan.yearly_price}</p>
+          </div>
+        </div>
+        
+        <ul class="space-y-2">
+          {plan.features.map(feature => (
+            <li class="flex items-start">
+              <svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+              <span class="dark:text-gray-300">{feature}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ))}
+  </div>
+</div>
+
+<script>
+  // Pricing toggle functionality
+  document.addEventListener('DOMContentLoaded', () => {
+    const monthlyBtn = document.getElementById('monthlyPricingBtn');
+    const yearlyBtn = document.getElementById('yearlyPricingBtn');
+    const monthlyPrices = document.querySelectorAll('.monthly-price');
+    const yearlyPrices = document.querySelectorAll('.yearly-price');
+
+    if (monthlyBtn && yearlyBtn) {
+      monthlyBtn.addEventListener('click', () => {
+        monthlyBtn.classList.add('bg-primary', 'text-white');
+        yearlyBtn.classList.remove('bg-primary', 'text-white');
+        
+        monthlyPrices.forEach(el => el.classList.remove('hidden'));
+        monthlyPrices.forEach(el => el.classList.add('block'));
+        yearlyPrices.forEach(el => el.classList.add('hidden'));
+        yearlyPrices.forEach(el => el.classList.remove('block'));
+      });
+
+      yearlyBtn.addEventListener('click', () => {
+        yearlyBtn.classList.add('bg-primary', 'text-white');
+        monthlyBtn.classList.remove('bg-primary', 'text-white');
+        
+        yearlyPrices.forEach(el => el.classList.remove('hidden'));
+        yearlyPrices.forEach(el => el.classList.add('block'));
+        monthlyPrices.forEach(el => el.classList.add('hidden'));
+        monthlyPrices.forEach(el => el.classList.remove('block'));
+      });
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/software/ScreenshotGallery.astro b/apps-archived/techbase/apps/web/src/components/software/ScreenshotGallery.astro
new file mode 100644
index 000000000..86d6827dc
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/ScreenshotGallery.astro
@@ -0,0 +1,96 @@
+---
+const { screenshots, softwareName } = Astro.props;
+---
+
+<div class="mb-8 relative">
+  <h3 class="text-xl font-bold mb-4">Screenshots</h3>
+  <div class="relative">
+    {/* Navigation buttons - outside the scrolling area */}
+    <button 
+      id="prev-btn" 
+      class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full z-10"
+      aria-label="Previous screenshot"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
+    <button 
+      id="next-btn" 
+      class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full z-10"
+      aria-label="Next screenshot"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+    
+    {/* Scrollable gallery area */}
+    <div id="screenshot-gallery" class="rounded-lg overflow-x-auto whitespace-nowrap scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800">
+      <div class="flex space-x-4 pb-4 pl-[calc(50%-150px)]" id="screenshot-container">
+        {screenshots.map((screenshot, index) => (
+          <div class={`screenshot-slide inline-block min-w-min flex-shrink-0 ${index === 0 ? 'active' : ''}`} data-index={index}>
+            <img 
+              src={screenshot} 
+              alt={`${softwareName} screenshot ${index + 1}`} 
+              class="h-auto max-h-[80vh] object-contain rounded-lg"
+              style="min-width: 300px;"
+            />
+          </div>
+        ))}
+        {/* Empty div at the end for equal spacing */}
+        <div class="pr-[calc(50%-150px)]"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Screenshot gallery functionality
+  document.addEventListener('DOMContentLoaded', () => {
+    const gallery = document.getElementById('screenshot-gallery');
+    if (gallery) {
+      const slides = document.querySelectorAll('.screenshot-slide');
+      const prevBtn = document.getElementById('prev-btn');
+      const nextBtn = document.getElementById('next-btn');
+      
+      let currentIndex = 0;
+      const totalSlides = slides.length;
+      
+      function scrollToActiveSlide(index, behavior = 'smooth') {
+        if (index < 0) index = totalSlides - 1;
+        if (index >= totalSlides) index = 0;
+        
+        currentIndex = index;
+        
+        slides.forEach(slide => slide.classList.remove('active'));
+        slides[currentIndex].classList.add('active');
+        
+        const activeSlide = slides[currentIndex];
+        const galleryRect = gallery.getBoundingClientRect();
+        const slideRect = activeSlide.getBoundingClientRect();
+        
+        const scrollOffset = (slideRect.left + slideRect.width / 2) - (galleryRect.left + galleryRect.width / 2);
+        gallery.scrollBy({
+          left: scrollOffset,
+          behavior: behavior
+        });
+      }
+      
+      prevBtn?.addEventListener('click', () => scrollToActiveSlide(currentIndex - 1));
+      nextBtn?.addEventListener('click', () => scrollToActiveSlide(currentIndex + 1));
+      
+      slides.forEach((slide, index) => {
+        slide.addEventListener('click', () => {
+          scrollToActiveSlide(index);
+        });
+      });
+      
+      window.addEventListener('load', () => {
+        setTimeout(() => {
+          scrollToActiveSlide(0, 'auto');
+        }, 100);
+      });
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/software/SoftwareDetail.astro b/apps-archived/techbase/apps/web/src/components/software/SoftwareDetail.astro
new file mode 100644
index 000000000..087d197be
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/SoftwareDetail.astro
@@ -0,0 +1,375 @@
+---
+import { loadTranslations } from '../../utils/i18n';
+import SoftwareOverview from './SoftwareOverview.astro';
+import SoftwareRatings from './SoftwareRatings.astro';
+import ComparisonView from './ComparisonView.astro';
+import ComparePanel from './ComparePanel.astro';
+import CommentSystem from '../CommentSystem.astro';
+
+const { software, similarSoftware, metrics, locale } = Astro.props;
+const t = await loadTranslations(locale);
+
+// Daten für den Client vorbereiten
+const softwareJson = JSON.stringify(software);
+const similarSoftwareJson = JSON.stringify(similarSoftware);
+---
+
+<div 
+  id="softwareDetail"
+  data-software-id={software.id}
+  data-software={softwareJson}
+  data-similar-software={similarSoftwareJson}
+  class="container mx-auto px-4 py-8"
+>
+  <!-- Flexibles Layout für die Software-Ansicht -->
+  <div 
+    class="flex flex-col lg:flex-row transition-all duration-300 software-container" 
+  >
+    <!-- Linke Spalte - Aktuelle Software -->
+    <div 
+      class="transition-all duration-300 overflow-hidden w-full left-panel" 
+    
+    >
+      <!-- Software-Header mit Name, Kategorien, Logo und Aktionsschaltflächen -->
+      <div class="flex flex-col md:flex-row md:items-center mb-8">
+        <!-- Minimieren-Button (wird via JS hinzugefügt) -->
+        
+        {software.logo && (
+          <div class="w-24 h-24 bg-white p-2 rounded-lg shadow-sm flex items-center justify-center mr-6 mb-4 md:mb-0">
+            <img src={software.logo} alt={software.name} class="max-w-full max-h-full" />
+          </div>
+        )}
+        
+        <div>
+          <h1 class="text-3xl font-bold">{software.name}</h1>
+          <div class="flex flex-wrap items-center mt-2">
+            {software.categories.map((category, index) => (
+              <>
+                <a 
+                  href={`/${locale}/category/${category.toLowerCase().replace(' ', '-')}`} 
+                  class="text-primary hover:underline"
+                >
+                  {category}
+                </a>
+                {index < software.categories.length - 1 && (
+                  <span class="mx-2 text-gray-400">•</span>
+                )}
+              </>
+            ))}
+          </div>
+        </div>
+        
+        <div class="md:ml-auto mt-4 md:mt-0 flex space-x-2">
+          <a 
+            href={software.website} 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            class="btn btn-primary"
+          >
+            {t.common.visit || 'Visit Website'}
+          </a>
+          
+          <!-- Vergleichsschalter -->
+          <button 
+            id="compareToggleBtn"
+            class="btn btn-secondary"
+          >Compare</button>
+        </div>
+      </div>
+      
+      <!-- Software-Inhalt -->
+      <div class="software-content">
+        <div class="block">
+          <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Hauptinhaltsbereich - Übersicht, Preisgestaltung, Kommentare -->
+            <div class="lg:col-span-2">
+              <!-- Software-Übersichtskomponente -->
+              <SoftwareOverview software={software} locale={locale} />
+              
+              <!-- Preisgestaltungsbereich -->
+              <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[400px] overflow-y-auto">
+                <div class="flex justify-between items-center mb-6">
+                  <h2 class="text-2xl font-bold">{t.software.pricing || 'Pricing'}</h2>
+                  
+                  <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-full p-1">
+                    <button 
+                      id="monthlyPricingBtn"
+                      class="px-3 py-1 rounded-full bg-primary text-white text-sm font-medium"
+                    >
+                      {t.software.monthlyPrice || 'Monthly'}
+                    </button>
+                    <button 
+                      id="yearlyPricingBtn"
+                      class="px-3 py-1 rounded-full text-sm font-medium"
+                    >
+                      {t.software.yearlyPrice || 'Yearly'}
+                    </button>
+                  </div>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {software.pricing.map(plan => (
+                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6">
+                      <h3 class="text-xl font-bold mb-2">{plan.model}</h3>
+                      <div class="pricing-container">
+                        <div class="monthly-price block">
+                          <p class="text-2xl font-bold text-primary dark:text-blue-400">{plan.price}</p>
+                        </div>
+                        <div class="yearly-price hidden">
+                          <p class="text-2xl font-bold text-primary dark:text-blue-400">{plan.yearly_price}</p>
+                        </div>
+                      </div>
+                      
+                      <ul class="space-y-2">
+                        {plan.features.map(feature => (
+                          <li class="flex items-start">
+                            <svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                            </svg>
+                            <span class="dark:text-gray-300">{feature}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              
+              <!-- Kommentar-Bereich -->
+              <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[350px] overflow-y-auto">
+                <h2 class="text-2xl font-bold mb-4">Kommentare</h2>
+                <CommentSystem softwareId={software.id} />
+              </div>
+            </div>
+            
+            <!-- Seitenleiste - Bewertungen und Vergleichsfunktionen -->
+            <div>
+              <!-- Software-Bewertungskomponente -->
+              <SoftwareRatings softwareId={software.id} metrics={metrics} locale={locale} />
+              
+              <!-- Vergleichs-Ansicht-Komponente -->
+              <ComparisonView 
+                currentSoftware={software}
+                similarSoftware={similarSoftware}
+                locale={locale} 
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Minimierte Ansicht wird per JS hinzugefügt -->
+    </div>
+    
+    <!-- Rechte Spalte - Vergleichs-Software (wird per JS angezeigt) -->
+    <div class="compare-panel-container hidden lg:w-1/2 mt-8 lg:mt-0 lg:ml-8 transition-all duration-300">
+      <!-- Vergleichs-Panel-Komponente -->
+      <ComparePanel locale={locale} />
+    </div>
+  </div>
+  
+  <!-- Mobile-Ansicht-Umschalter (via JS eingeblendet) -->
+  <div class="mobile-switcher hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-3 flex justify-center space-x-4 lg:hidden z-10">
+    <button class="left-view-btn px-4 py-2 rounded-md transition-colors bg-primary text-white">
+      {software.name}
+    </button>
+    <button class="right-view-btn px-4 py-2 rounded-md transition-colors bg-gray-100 dark:bg-gray-700">
+      Compare
+    </button>
+  </div>
+</div>
+
+<script>
+  // Seiteninitialisierung
+  document.addEventListener('DOMContentLoaded', () => {
+    // Vergleichsmodus-Steuerung
+    const softwareDetail = document.getElementById('softwareDetail');
+    const compareToggleBtn = document.getElementById('compareToggleBtn');
+    const comparePanelContainer = document.querySelector('.compare-panel-container');
+    const mobileSwitcher = document.querySelector('.mobile-switcher');
+    const softwareListView = document.getElementById('software-list-view');
+    
+    // Preisgestaltungs-Umschalter
+    const monthlyBtn = document.getElementById('monthlyPricingBtn');
+    const yearlyBtn = document.getElementById('yearlyPricingBtn');
+    const monthlyPrices = document.querySelectorAll('.monthly-price');
+    const yearlyPrices = document.querySelectorAll('.yearly-price');
+    
+    // Initialisiere Alpine.js Store mit Daten aus data-Attributen
+    let compareMode = false;
+    
+    try {
+      // Daten aus data-Attributen laden
+      const softwareId = softwareDetail.dataset.softwareId;
+      const softwareData = JSON.parse(softwareDetail.dataset.software);
+      const similarSoftware = JSON.parse(softwareDetail.dataset.similarSoftware);
+      
+      // URL-Parameter überprüfen
+      const urlParams = new URLSearchParams(window.location.search);
+      const compareWith = urlParams.get('compare');
+      
+      if (compareWith) {
+        compareMode = true;
+        toggleCompareMode(true);
+        
+        // Buttontext aktualisieren
+        if (compareToggleBtn) {
+          compareToggleBtn.textContent = 'Exit Compare';
+        }
+        
+        // TODO: Lade Software-Daten zum Vergleich
+      }
+      
+      // Compare-Button-Handler
+      if (compareToggleBtn) {
+        compareToggleBtn.addEventListener('click', () => {
+          compareMode = !compareMode;
+          toggleCompareMode(compareMode);
+          
+          // Buttontext ändern
+          if (compareMode) {
+            compareToggleBtn.textContent = 'Exit Compare';
+          } else {
+            compareToggleBtn.textContent = 'Compare';
+          }
+        });
+      }
+      
+      // Setze Mobile Switcher
+      const leftViewBtn = document.querySelector('.left-view-btn');
+      const rightViewBtn = document.querySelector('.right-view-btn');
+      
+      if (leftViewBtn && rightViewBtn) {
+        leftViewBtn.addEventListener('click', () => switchView('left'));
+        rightViewBtn.addEventListener('click', () => switchView('right'));
+      }
+      
+      // Toggle Vergleichsmodus-Funktion
+      function toggleCompareMode(isActive) {
+        console.log("Toggling compare mode:", isActive);
+        
+        if (isActive) {
+          // UI für Vergleichsmodus anpassen
+          comparePanelContainer.classList.remove('hidden');
+          mobileSwitcher.classList.remove('hidden');
+          
+          // Software-Liste anzeigen im ComparePanel
+          if (softwareListView) {
+            softwareListView.style.display = 'block';
+          }
+          
+          // Passe Layout an - Linke Panele auf Halbbreite
+          const leftPanel = document.querySelector('.left-panel');
+          if (leftPanel) {
+            leftPanel.classList.add('lg:w-1/2');
+            leftPanel.classList.remove('w-full');
+            
+            // Zusätzlich die Grid-Struktur anpassen - auf vollen Platz in der linken Spalte
+            const contentGrid = leftPanel.querySelector('.grid');
+            if (contentGrid) {
+              // Hier einfach das gesamte Grid auf eine Spalte umstellen
+              contentGrid.classList.add('lg:grid-cols-1');
+              contentGrid.classList.remove('lg:grid-cols-3');
+              
+              // Hauptinhaltsbereich auf volle Breite
+              const mainContent = contentGrid.querySelector('.lg\\:col-span-2');
+              if (mainContent) {
+                mainContent.classList.remove('lg:col-span-2');
+                mainContent.classList.add('lg:col-span-1');
+              }
+            }
+          }
+          
+          // URL-Parameter aktualisieren
+          // Wird später implementiert basierend auf ausgewählter Software
+        } else {
+          // UI für Standardmodus anpassen
+          comparePanelContainer.classList.add('hidden');
+          mobileSwitcher.classList.add('hidden');
+          
+          // Passe Layout an - Linke Panele auf volle Breite
+          const leftPanel = document.querySelector('.left-panel');
+          if (leftPanel) {
+            leftPanel.classList.remove('lg:w-1/2');
+            leftPanel.classList.add('w-full');
+            
+            // Grid-Struktur wiederherstellen
+            const contentGrid = leftPanel.querySelector('.grid');
+            if (contentGrid) {
+              contentGrid.classList.remove('lg:grid-cols-1');
+              contentGrid.classList.add('lg:grid-cols-3');
+              
+              // Hauptinhaltsbereich auf 2/3 Breite
+              const mainContent = contentGrid.querySelector('.lg\\:col-span-1');
+              if (mainContent) {
+                mainContent.classList.add('lg:col-span-2');
+                mainContent.classList.remove('lg:col-span-1');
+              }
+            }
+          }
+          
+          // URL-Parameter entfernen
+          const url = new URL(window.location.href);
+          url.searchParams.delete('compare');
+          window.history.pushState({}, '', url.toString());
+        }
+      }
+      
+      // Mobile-Anzeige umschalten
+      function switchView(side) {
+        if (side === 'left') {
+          leftViewBtn.classList.add('bg-primary', 'text-white');
+          leftViewBtn.classList.remove('bg-gray-100', 'dark:bg-gray-700');
+          rightViewBtn.classList.remove('bg-primary', 'text-white');
+          rightViewBtn.classList.add('bg-gray-100', 'dark:bg-gray-700');
+          
+          // Für mobile Geräte
+          const mediaQuery = window.matchMedia('(max-width: 1024px)');
+          if (mediaQuery.matches) {
+            // Panel anzeigen/verstecken
+            document.querySelector('.left-panel').style.display = 'block';
+            comparePanelContainer.style.display = 'none';
+          }
+        } else {
+          rightViewBtn.classList.add('bg-primary', 'text-white');
+          rightViewBtn.classList.remove('bg-gray-100', 'dark:bg-gray-700');
+          leftViewBtn.classList.remove('bg-primary', 'text-white');
+          leftViewBtn.classList.add('bg-gray-100', 'dark:bg-gray-700');
+          
+          // Für mobile Geräte
+          const mediaQuery = window.matchMedia('(max-width: 1024px)');
+          if (mediaQuery.matches) {
+            // Panel anzeigen/verstecken
+            document.querySelector('.left-panel').style.display = 'none';
+            comparePanelContainer.style.display = 'block';
+          }
+        }
+      }
+    } catch (e) {
+      console.error("Error initializing software detail:", e);
+    }
+    
+    // Preisgestaltungs-Umschalter
+    if (monthlyBtn && yearlyBtn) {
+      monthlyBtn.addEventListener('click', () => {
+        monthlyBtn.classList.add('bg-primary', 'text-white');
+        yearlyBtn.classList.remove('bg-primary', 'text-white');
+        
+        monthlyPrices.forEach(el => el.classList.remove('hidden'));
+        monthlyPrices.forEach(el => el.classList.add('block'));
+        yearlyPrices.forEach(el => el.classList.add('hidden'));
+        yearlyPrices.forEach(el => el.classList.remove('block'));
+      });
+
+      yearlyBtn.addEventListener('click', () => {
+        yearlyBtn.classList.add('bg-primary', 'text-white');
+        monthlyBtn.classList.remove('bg-primary', 'text-white');
+        
+        yearlyPrices.forEach(el => el.classList.remove('hidden'));
+        yearlyPrices.forEach(el => el.classList.add('block'));
+        monthlyPrices.forEach(el => el.classList.add('hidden'));
+        monthlyPrices.forEach(el => el.classList.remove('block'));
+      });
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/software/SoftwareHeader.astro b/apps-archived/techbase/apps/web/src/components/software/SoftwareHeader.astro
new file mode 100644
index 000000000..566e1385b
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/SoftwareHeader.astro
@@ -0,0 +1,80 @@
+---
+import { loadTranslations } from '../../utils/i18n';
+
+const { software, locale, isCompareMode = false } = Astro.props;
+const t = await loadTranslations(locale);
+---
+
+<div class="flex flex-col md:flex-row md:items-center mb-8">
+  <!-- Toggle minimize button for comparison mode -->
+  {isCompareMode && (
+    <button 
+      @click="toggleMinimize('left')" 
+      class="mr-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      :aria-label="isLeftMinimized ? '${t.software.expandView}' : '${t.software.minimizeView}'"
+    >
+      <svg x-show="!isLeftMinimized" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+      </svg>
+      <svg x-show="isLeftMinimized" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+      </svg>
+    </button>
+  )}
+  
+  {software.logo && (
+    <div class="w-24 h-24 bg-white p-2 rounded-lg shadow-sm flex items-center justify-center mr-6 mb-4 md:mb-0">
+      <img src={software.logo} alt={software.name} class="max-w-full max-h-full" />
+    </div>
+  )}
+  
+  <div>
+    <h1 class="text-3xl font-bold">{software.name}</h1>
+    <div class="flex flex-wrap items-center mt-2">
+      {software.categories.map((category, index) => (
+        <>
+          <a 
+            href={`/${locale}/category/${category.toLowerCase().replace(' ', '-')}`} 
+            class="text-primary hover:underline"
+          >
+            {category}
+          </a>
+          {index < software.categories.length - 1 && (
+            <span class="mx-2 text-gray-400">•</span>
+          )}
+        </>
+      ))}
+    </div>
+  </div>
+  
+  <div class="md:ml-auto mt-4 md:mt-0 flex space-x-2">
+    <a 
+      href={software.website} 
+      target="_blank" 
+      rel="noopener noreferrer" 
+      class="btn btn-primary"
+    >
+      {t.common.visit || 'Visit Website'}
+    </a>
+    
+    <!-- Compare button -->
+    <button 
+      @click="toggleCompareMode" 
+      class="btn btn-secondary"
+      x-text="isCompareMode ? '${t.software.expandView}' : '${t.software.inlineCompare}'"
+    ></button>
+  </div>
+</div>
+
+<!-- Minimized view for left panel when in comparison mode -->
+<template x-if="isLeftMinimized && isCompareMode">
+  <div class="p-4 flex flex-col items-center justify-center border-r border-gray-200 dark:border-gray-700 h-full">
+    {software.logo && (
+      <div class="w-16 h-16 bg-white p-2 rounded-lg shadow-sm flex items-center justify-center mb-2">
+        <img src={software.logo} alt={software.name} class="max-w-full max-h-full" />
+      </div>
+    )}
+    <h2 class="text-center text-lg font-bold mb-2">{software.name}</h2>
+    <p class="text-center text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-3">{software.description}</p>
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/software/SoftwareOverview.astro b/apps-archived/techbase/apps/web/src/components/software/SoftwareOverview.astro
new file mode 100644
index 000000000..8cd2dba21
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/SoftwareOverview.astro
@@ -0,0 +1,36 @@
+---
+import { loadTranslations } from '../../utils/i18n';
+import ScreenshotGallery from './ScreenshotGallery.astro';
+
+const { software, locale } = Astro.props;
+const t = await loadTranslations(locale);
+---
+
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[500px] overflow-y-auto">
+  <h2 class="text-2xl font-bold mb-4">{t.common.overview || 'Overview'}</h2>
+  <p class="text-gray-700 dark:text-gray-300 mb-6">{software.description}</p>
+  
+  {software.screenshots && software.screenshots.length > 0 && (
+    <ScreenshotGallery screenshots={software.screenshots} softwareName={software.name} />
+  )}
+  
+  <h3 class="text-xl font-bold mb-4">{t.software.features || 'Features'}</h3>
+  <ul class="list-disc list-inside mb-6">
+    {software.features.map(feature => (
+      <li class="mb-2 text-gray-700 dark:text-gray-300">{feature}</li>
+    ))}
+  </ul>
+  
+  <h3 class="text-xl font-bold mb-4">{t.software.platforms || 'Platforms'}</h3>
+  <div class="flex flex-wrap gap-2 mb-6">
+    {software.platforms.map(platform => (
+      <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm">
+        {platform}
+      </span>
+    ))}
+  </div>
+  
+  <div class="text-sm text-gray-500 dark:text-gray-400">
+    {t.software.lastUpdated || 'Last Updated'}: {new Date(software.lastUpdated).toLocaleDateString()}
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/software/SoftwarePanel.astro b/apps-archived/techbase/apps/web/src/components/software/SoftwarePanel.astro
new file mode 100644
index 000000000..061a4f13f
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/SoftwarePanel.astro
@@ -0,0 +1,1496 @@
+---
+import { loadTranslations } from '../../utils/i18n';
+import SoftwareOverview from './SoftwareOverview.astro';
+import SoftwareRatings from './SoftwareRatings.astro';
+import CommentSystem from '../CommentSystem.astro';
+
+interface Props {
+  software: any;
+  similarSoftware?: any[];
+  metrics?: any;
+  locale: string;
+  mode: 'detail' | 'comparison';
+  isCompareActive?: boolean;
+}
+
+const { software, similarSoftware = [], metrics = {}, locale, mode, isCompareActive = false } = Astro.props;
+const t = await loadTranslations(locale);
+
+// Daten für den Client vorbereiten
+const softwareJson = JSON.stringify(software);
+const similarSoftwareJson = JSON.stringify(similarSoftware);
+---
+
+<div 
+  class={`software-panel ${mode === 'comparison' ? 'comparison-panel' : 'detail-panel'} ${isCompareActive ? 'compare-active' : ''}`}
+  data-software-id={software.id}
+  data-software={mode === 'detail' ? softwareJson : undefined}
+  data-similar-software={mode === 'detail' ? similarSoftwareJson : undefined}
+>
+  <!-- Header mit Software-Info und Steuerungselementen -->
+  <div class="flex flex-col md:flex-row md:items-center mb-8 p-4 border-b border-gray-200 dark:border-gray-700">
+    
+    <!-- Software-Info -->
+    <div class="flex items-center flex-1">
+      <div class="w-24 h-24 bg-white p-2 rounded-lg shadow-sm flex items-center justify-center mr-6 mb-4 md:mb-0">
+        <img 
+          id={mode === 'comparison' ? 'compare-software-logo' : undefined} 
+          src={software.logo || '/logos/sample-logo.svg'} 
+          alt={software.name} 
+          class="max-w-full max-h-full" 
+        />
+      </div>
+      <div>
+        <h2 
+          id={mode === 'comparison' ? 'compare-software-name' : undefined} 
+          class="text-3xl font-bold"
+        >
+          {mode === 'comparison' ? 'Select Software' : software.name}
+        </h2>
+        <div 
+          id={mode === 'comparison' ? 'compare-software-categories' : undefined} 
+          class="flex flex-wrap items-center mt-2"
+        >
+          {mode === 'detail' && software.categories && software.categories.map((category, index) => (
+            <>
+              <a 
+                href={`/${locale}/category/${category.toLowerCase().replace(' ', '-')}`} 
+                class="text-primary hover:underline"
+              >
+                {category}
+              </a>
+              {index < software.categories.length - 1 && (
+                <span class="mx-2 text-gray-400">•</span>
+              )}
+            </>
+          ))}
+        </div>
+      </div>
+    </div>
+    
+    <!-- Aktionsbuttons -->
+    <div class="md:ml-auto mt-4 md:mt-0 flex space-x-2">
+      {mode === 'detail' ? (
+        <div class="flex space-x-2">
+          <button 
+            id="compareToggleBtn"
+            class="btn btn-primary"
+          >
+            Compare
+          </button>
+          <button 
+            id="addCompareBtn"
+            class="btn btn-secondary hidden"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+            </svg>
+          </button>
+        </div>
+      ) : (
+        <>
+          <button 
+            id="selectOtherSoftwareBtn"
+            class="btn btn-primary"
+          >
+            Change Software
+          </button>
+          <button 
+            id="closeCompareBtn"
+            class="btn btn-secondary"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </>
+      )}
+    </div>
+  </div>
+  
+  {mode === 'comparison' && (
+    <!-- Software-Liste (angezeigt, wenn noch keine Software ausgewählt ist) -->
+    <div 
+      id="software-list-view"
+      class="p-0 overflow-y-auto" 
+      style="max-height: calc(100vh - 200px);">
+      <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+        <h3 class="text-lg font-bold">Select Another Software</h3>
+        <div class="mt-4">
+          <input 
+            type="text" 
+            id="software-search-input"
+            placeholder="Search" 
+            class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-primary focus:border-primary dark:bg-gray-700 dark:text-white"
+          />
+        </div>
+      </div>
+      
+      <div class="p-0 overflow-y-auto" id="software-list-container">
+        <div id="loading-indicator" class="py-8 text-center text-gray-500 dark:text-gray-400" style="display: none;">
+          <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          Loading...
+        </div>
+        
+        <div id="error-message" class="py-8 text-center text-red-500" style="display: none;">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <p id="error-text">An error occurred</p>
+        </div>
+        
+        <div id="empty-message" class="py-8 text-center text-gray-500" style="display: none;">
+          No similar software available
+        </div>
+        
+        <div id="software-items">
+          <!-- Software-Einträge werden hier per JavaScript eingefügt -->
+        </div>
+      </div>
+    </div>
+  )}
+  
+  <!-- Software-Detailansicht -->
+  <div 
+    id={mode === 'comparison' ? 'software-detail-view' : undefined}
+    class={mode === 'comparison' ? 'hidden' : 'block'}
+  >
+    {mode === 'comparison' && (
+      <div id="detail-loading" class="text-center text-gray-500 dark:text-gray-400 p-6">
+        <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        Loading software details...
+      </div>
+    )}
+    
+    <div 
+      id={mode === 'comparison' ? 'detail-content' : undefined}
+      style={mode === 'comparison' ? 'display: none;' : undefined} 
+      class="software-content px-4"
+    >
+      <div class="block">
+        <div class={`grid grid-cols-1 ${mode === 'detail' && !isCompareActive ? 'lg:grid-cols-3' : 'lg:grid-cols-1'} gap-8`}>
+          <!-- Hauptinhaltsbereich - Übersicht, Preisgestaltung, Kommentare -->
+          <div class={mode === 'detail' && !isCompareActive ? 'lg:col-span-2' : 'lg:col-span-1'}>
+            <!-- Software-Übersichtskomponente -->
+            {mode === 'detail' ? (
+              <SoftwareOverview software={software} locale={locale} />
+            ) : (
+              <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[500px] overflow-y-auto">
+                <h2 class="text-2xl font-bold mb-4">Overview</h2>
+                <p id="software-description" class="text-gray-700 dark:text-gray-300 mb-6"></p>
+                
+                <!-- Screenshots-Container (wird dynamisch befüllt) -->
+                <div id="compare-screenshots" class="mb-6" style="display: none;">
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <!-- Hier werden Screenshots per JS eingefügt -->
+                  </div>
+                </div>
+                
+                <!-- Features -->
+                <h3 class="text-xl font-bold mb-4">Features</h3>
+                <ul id="software-features" class="list-disc list-inside mb-6 text-gray-700 dark:text-gray-300"></ul>
+                
+                <!-- Plattformen -->
+                <div id="platforms-section">
+                  <h3 class="text-xl font-bold mb-4">Platforms</h3>
+                  <div id="software-platforms" class="flex flex-wrap gap-2 mb-6"></div>
+                </div>
+                
+                <!-- Last Updated -->
+                <div id="last-updated" class="text-sm text-gray-500 dark:text-gray-400">
+                  Last Updated: <span id="update-date"></span>
+                </div>
+              </div>
+            )}
+            
+            <!-- Preisgestaltungsbereich -->
+            {mode === 'detail' ? (
+              <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[400px] overflow-y-auto">
+                <div class="flex justify-between items-center mb-6">
+                  <h2 class="text-2xl font-bold">{t.software.pricing || 'Pricing'}</h2>
+                  
+                  <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-full p-1">
+                    <button 
+                      id="monthlyPricingBtn"
+                      class="px-3 py-1 rounded-full bg-primary text-white text-sm font-medium"
+                    >
+                      {t.software.monthlyPrice || 'Monthly'}
+                    </button>
+                    <button 
+                      id="yearlyPricingBtn"
+                      class="px-3 py-1 rounded-full text-sm font-medium"
+                    >
+                      {t.software.yearlyPrice || 'Yearly'}
+                    </button>
+                  </div>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {software.pricing && software.pricing.map(plan => (
+                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6">
+                      <h3 class="text-xl font-bold mb-2">{plan.model}</h3>
+                      <div class="pricing-container">
+                        <div class="monthly-price block">
+                          <p class="text-2xl font-bold text-primary dark:text-blue-400">{plan.price}</p>
+                        </div>
+                        <div class="yearly-price hidden">
+                          <p class="text-2xl font-bold text-primary dark:text-blue-400">{plan.yearly_price}</p>
+                        </div>
+                      </div>
+                      
+                      <ul class="space-y-2">
+                        {plan.features && plan.features.map(feature => (
+                          <li class="flex items-start">
+                            <svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                            </svg>
+                            <span class="dark:text-gray-300">{feature}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div id="pricing-section" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[400px] overflow-y-auto">
+                <div class="flex justify-between items-center mb-6">
+                  <h2 class="text-2xl font-bold">Pricing</h2>
+                  
+                  <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-full p-1">
+                    <button 
+                      id="compare-monthly-btn"
+                      class="px-3 py-1 rounded-full bg-primary text-white text-sm font-medium"
+                    >
+                      Monthly
+                    </button>
+                    <button 
+                      id="compare-yearly-btn"
+                      class="px-3 py-1 rounded-full text-sm font-medium"
+                    >
+                      Yearly
+                    </button>
+                  </div>
+                </div>
+                <div id="software-pricing" class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <!-- Pricing Info wird hier per JavaScript eingefügt -->
+                </div>
+              </div>
+            )}
+            
+            <!-- Kommentar-Bereich -->
+            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[350px] overflow-y-auto">
+              <h2 class="text-2xl font-bold mb-4">Kommentare</h2>
+              {mode === 'detail' ? (
+                <CommentSystem softwareId={software.id} />
+              ) : (
+                <div id="compare-comments">
+                  <p class="text-gray-500">Comments will be loaded when comparing specific software.</p>
+                </div>
+              )}
+            </div>
+            
+            <!-- Visit Website Button in eigener Zeile (nur für Detail und Comparison Modus) -->
+            <div class="mb-8">
+              {mode === 'detail' ? (
+                <a 
+                  href={software.website} 
+                  target="_blank" 
+                  rel="noopener noreferrer" 
+                  class="btn btn-secondary w-full"
+                >
+                  {t.common.visit || 'Visit Website'}
+                </a>
+              ) : (
+                <button 
+                  id="viewDemoBtn"
+                  class="btn btn-secondary w-full"
+                >
+                  Visit Website
+                </button>
+              )}
+            </div>
+          </div>
+          
+          <!-- Seitenleiste - Bewertungen und Vergleichsfunktionen -->
+          <div>
+            <!-- Software-Bewertungskomponente -->
+            {mode === 'detail' ? (
+              <SoftwareRatings softwareId={software.id} metrics={metrics} locale={locale} />
+            ) : (
+              <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[300px] overflow-y-auto">
+                <h3 class="text-xl font-bold mb-4">Ratings</h3>
+                <div id="compare-ratings" class="space-y-4">
+                  <!-- Ease of Use -->
+                  <div>
+                    <div class="flex justify-between items-center mb-1">
+                      <span class="font-medium">Ease of Use</span>
+                      <span id="compare-ease-value" class="font-bold">0.0 / 5</span>
+                    </div>
+                    <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                      <div id="compare-ease-bar" class="h-full bg-primary" style="width: 0%"></div>
+                    </div>
+                    <div id="compare-ease-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+                  </div>
+                  
+                  <!-- Features -->
+                  <div>
+                    <div class="flex justify-between items-center mb-1">
+                      <span class="font-medium">Features</span>
+                      <span id="compare-features-value" class="font-bold">0.0 / 5</span>
+                    </div>
+                    <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                      <div id="compare-features-bar" class="h-full bg-primary" style="width: 0%"></div>
+                    </div>
+                    <div id="compare-features-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+                  </div>
+                  
+                  <!-- Value -->
+                  <div>
+                    <div class="flex justify-between items-center mb-1">
+                      <span class="font-medium">Value for Money</span>
+                      <span id="compare-value-value" class="font-bold">0.0 / 5</span>
+                    </div>
+                    <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                      <div id="compare-value-bar" class="h-full bg-primary" style="width: 0%"></div>
+                    </div>
+                    <div id="compare-value-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+                  </div>
+                  
+                  <!-- Support -->
+                  <div>
+                    <div class="flex justify-between items-center mb-1">
+                      <span class="font-medium">Support</span>
+                      <span id="compare-support-value" class="font-bold">0.0 / 5</span>
+                    </div>
+                    <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                      <div id="compare-support-bar" class="h-full bg-primary" style="width: 0%"></div>
+                    </div>
+                    <div id="compare-support-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+                  </div>
+                  
+                  <!-- Reliability -->
+                  <div>
+                    <div class="flex justify-between items-center mb-1">
+                      <span class="font-medium">Reliability</span>
+                      <span id="compare-reliability-value" class="font-bold">0.0 / 5</span>
+                    </div>
+                    <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                      <div id="compare-reliability-bar" class="h-full bg-primary" style="width: 0%"></div>
+                    </div>
+                    <div id="compare-reliability-count" class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">0 votes</div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  {mode === 'comparison' && (
+    <!-- Minimierte Ansicht -->
+    <div id="minimized-view" class="p-4 flex flex-col items-center justify-center border-l border-gray-200 dark:border-gray-700 h-full hidden">
+      <div class="w-16 h-16 bg-white p-2 rounded-lg shadow-sm flex items-center justify-center mb-2">
+        <img id="minimized-logo" src="/logos/sample-logo.svg" alt="Software logo" class="max-w-full max-h-full" />
+      </div>
+      <h2 id="minimized-name" class="text-center text-lg font-bold mb-2">Software Name</h2>
+      <p id="minimized-description" class="text-center text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-3">Description will appear here</p>
+    </div>
+  )}
+</div>
+
+{mode === 'detail' && (
+<script>
+  // Seiteninitialisierung für Detail-Modus
+  document.addEventListener('DOMContentLoaded', () => {
+    // DOM-Referenzen
+    const softwareDetail = document.querySelector('.detail-panel');
+    const compareToggleBtn = document.getElementById('compareToggleBtn');
+    const comparePanelContainer = document.querySelector('.compare-panel-container');
+    const comparePanelContainer2 = document.querySelector('.compare-panel-container-2');
+    const comparePanelContainer3 = document.querySelector('.compare-panel-container-3');
+    const mobileSwitcher = document.querySelector('.mobile-switcher');
+    
+    // Preisgestaltungs-Umschalter
+    const monthlyBtn = document.getElementById('monthlyPricingBtn');
+    const yearlyBtn = document.getElementById('yearlyPricingBtn');
+    const monthlyPrices = document.querySelectorAll('.monthly-price');
+    const yearlyPrices = document.querySelectorAll('.yearly-price');
+    
+    // Zustandsvariable
+    let compareMode = false;
+    
+    try {
+      // Daten aus data-Attributen laden
+      const softwareId = softwareDetail.dataset.softwareId;
+      const softwareData = JSON.parse(softwareDetail.dataset.software);
+      const similarSoftware = JSON.parse(softwareDetail.dataset.similarSoftware);
+      
+      // URL-Parameter überprüfen
+      const urlParams = new URLSearchParams(window.location.search);
+      const compareWith = urlParams.get('compare');
+      
+      if (compareWith) {
+        compareMode = true;
+        toggleCompareMode(true);
+      }
+      
+      // Compare-Button-Handler
+      if (compareToggleBtn) {
+        compareToggleBtn.addEventListener('click', () => {
+          compareMode = !compareMode;
+          toggleCompareMode(compareMode);
+          
+          if (compareMode) {
+            // Nur das erste Panel sichtbar machen
+            if (comparePanelContainer) {
+              comparePanelContainer.classList.remove('hidden');
+              
+              // Andere Panels verstecken
+              if (comparePanelContainer2) comparePanelContainer2.classList.add('hidden');
+              if (comparePanelContainer3) comparePanelContainer3.classList.add('hidden');
+              
+              // Breite der Panels anpassen
+              adjustPanelWidths();
+            }
+          }
+        });
+      }
+      
+      // Add Compare-Button-Handler
+      const addCompareBtn = document.getElementById('addCompareBtn');
+      if (addCompareBtn) {
+        addCompareBtn.addEventListener('click', () => {
+          // Freies Panel suchen
+          let availablePanel;
+          if (comparePanelContainer2.classList.contains('hidden')) {
+            availablePanel = comparePanelContainer2;
+          } else if (comparePanelContainer3.classList.contains('hidden')) {
+            availablePanel = comparePanelContainer3;
+          } else {
+            console.log('Alle Panels sind bereits belegt');
+            return;
+          }
+          
+          console.log('Opening panel:', availablePanel.className);
+          
+          // Neues Panel anzeigen
+          availablePanel.classList.remove('hidden');
+          
+          // Vergleichscontainer einblenden
+          const compareContainer = document.querySelector('.compare-panels-container');
+          if (compareContainer) {
+            compareContainer.classList.remove('hidden');
+          }
+          
+          // Software mit Index 1 laden falls verfügbar (unterschiedlich zu Panel 1)
+          if (similarSoftware && similarSoftware.length > 1) {
+            const softwareIdToLoad = availablePanel === comparePanelContainer2 ? 
+              similarSoftware[1]?.id : similarSoftware[2]?.id;
+            
+            if (softwareIdToLoad) {
+              // URL-Parameter für zweites Panel nicht setzen, nur für erstes Panel
+            }
+          }
+          
+          // Breite der Panels anpassen
+          adjustPanelWidths();
+        });
+      }
+      
+      // Software für Vergleich auswählen
+      function selectSoftwareForComparison(softwareId) {
+        console.log('Selecting software for comparison:', softwareId);
+        
+        if (!softwareId) return;
+        
+        // Verfügbares Panel suchen
+        let targetPanel;
+        if (comparePanelContainer.classList.contains('hidden')) {
+          targetPanel = comparePanelContainer;
+        } else if (comparePanelContainer2.classList.contains('hidden')) {
+          targetPanel = comparePanelContainer2;
+        } else if (comparePanelContainer3.classList.contains('hidden')) {
+          targetPanel = comparePanelContainer3;
+        } else {
+          console.log('Alle Panels sind bereits belegt');
+          return;
+        }
+        
+        // Panel anzeigen
+        targetPanel.classList.remove('hidden');
+        
+        // Aktiviere Compare-Modus, falls noch nicht aktiv
+        if (!compareMode) {
+          compareMode = true;
+          toggleCompareMode(true);
+        }
+        
+        // Breite der Panel anpassen
+        adjustPanelWidths();
+        
+        // URL-Parameter aktualisieren
+        if (targetPanel === comparePanelContainer) {
+          const url = new URL(window.location.href);
+          url.searchParams.set('compare', softwareId);
+          window.history.replaceState({}, '', url.toString());
+        }
+      }
+      
+      // Funktion zum Anpassen der Panel-Breiten
+      function adjustPanelWidths() {
+        console.log("Adjusting panel widths");
+        
+        // Basis-Container
+        const mainContainer = document.querySelector('.software-container');
+        const leftPanel = document.querySelector('.left-panel');
+        const compareContainer = document.querySelector('.compare-panels-container');
+        
+        // Prüfen ob Vergleichsmodus aktiv ist
+        const visibleCompareContainers = document.querySelectorAll(
+          '.compare-panel-container:not(.hidden), .compare-panel-container-2:not(.hidden), .compare-panel-container-3:not(.hidden)'
+        );
+        const isCompareActive = visibleCompareContainers.length > 0;
+        
+        if (!isCompareActive) {
+          // Wenn kein Vergleich aktiv ist
+          console.log("No comparison active");
+          
+          // Hauptpanel auf volle Breite setzen
+          if (leftPanel) {
+            leftPanel.style.width = '100%';
+          }
+          
+          // Vergleichscontainer ausblenden
+          if (compareContainer) {
+            compareContainer.style.display = 'none';
+            compareContainer.classList.add('hidden');
+          }
+          
+          return;
+        }
+        
+        // Vergleichscontainer einblenden
+        if (compareContainer) {
+          compareContainer.style.display = 'flex';
+          compareContainer.classList.remove('hidden');
+        }
+        
+        // Anzahl der sichtbaren Panels
+        const totalCompareVisible = visibleCompareContainers.length;
+        console.log(`Total panels: 1 + ${totalCompareVisible}`);
+        
+        // Anzahl aller sichtbaren Panels (Haupt + Vergleich)
+        const totalPanels = 1 + totalCompareVisible; // Hauptpanel + Vergleichspanels
+        
+        // Prozentuale Breite für jedes Panel berechnen
+        const panelWidth = 100 / totalPanels;
+        console.log(`Setting width ${panelWidth}% for each panel`);
+        
+        // Hauptpanel setzen
+        if (leftPanel) {
+          leftPanel.style.width = `${panelWidth}%`;
+        }
+        
+        // Vergleichspanels setzen
+        visibleCompareContainers.forEach(panel => {
+          panel.style.display = 'block';
+          panel.style.width = `${panelWidth}%`;
+        });
+      }
+      
+      // Toggle Vergleichsmodus-Funktion
+      function toggleCompareMode(isActive) {
+        console.log("Toggling compare mode:", isActive);
+        
+        // Plus-Button für zusätzliche Vergleiche
+        const addCompareBtn = document.getElementById('addCompareBtn');
+        const mainContainer = document.querySelector('.software-container');
+        const compareContainer = document.querySelector('.compare-panels-container');
+        
+        if (isActive) {
+          // UI für Vergleichsmodus anpassen
+          mobileSwitcher.classList.remove('hidden');
+          
+          // Plus-Button anzeigen
+          if (addCompareBtn) {
+            addCompareBtn.classList.remove('hidden');
+          }
+          
+          // Vergleichscontainer einblenden
+          if (compareContainer) {
+            compareContainer.style.display = 'flex';
+            compareContainer.style.flex = '1';
+            compareContainer.classList.remove('hidden');
+          }
+          
+          // Software-Liste anzeigen im ComparePanel
+          const softwareListView = document.getElementById('software-list-view');
+          if (softwareListView) {
+            softwareListView.style.display = 'block';
+          }
+          
+          // Passe Layout an für Vergleichsmodus
+          const leftPanel = document.querySelector('.left-panel');
+          if (leftPanel) {
+            leftPanel.style.flex = '1';
+            leftPanel.style.width = '';
+            
+            // Zusätzlich die Grid-Struktur anpassen - auf vollen Platz in der linken Spalte
+            const contentGrid = leftPanel.querySelector('.grid');
+            if (contentGrid) {
+              // Hier einfach das gesamte Grid auf eine Spalte umstellen
+              contentGrid.classList.add('lg:grid-cols-1');
+              contentGrid.classList.remove('lg:grid-cols-3');
+              
+              // Hauptinhaltsbereich auf volle Breite
+              const mainContent = contentGrid.querySelector('.lg\\:col-span-2');
+              if (mainContent) {
+                mainContent.classList.remove('lg:col-span-2');
+                mainContent.classList.add('lg:col-span-1');
+              }
+            }
+          }
+          
+          // Container aktivieren
+          if (mainContainer) {
+            mainContainer.style.display = 'flex';
+            mainContainer.style.flexDirection = 'row';
+          }
+          
+          // Anfängliche Breite anpassen
+          setTimeout(() => {
+            adjustPanelWidths();
+          }, 0);
+        } else {
+          // UI für Standardmodus anpassen
+          // Alle Compare-Panels verstecken
+          const allPanels = [
+            comparePanelContainer,
+            comparePanelContainer2, 
+            comparePanelContainer3
+          ];
+          
+          allPanels.forEach(panel => {
+            if (panel) {
+              panel.classList.add('hidden');
+              panel.style.flex = '';
+              panel.style.display = 'none';
+            }
+          });
+          
+          mobileSwitcher.classList.add('hidden');
+          
+          // Vergleichscontainer ausblenden
+          if (compareContainer) {
+            compareContainer.style.display = 'none';
+            compareContainer.classList.add('hidden');
+          }
+          
+          // Plus-Button ausblenden
+          if (addCompareBtn) {
+            addCompareBtn.classList.add('hidden');
+          }
+          
+          // Passe Layout an - Linke Panele auf volle Breite
+          const leftPanel = document.querySelector('.left-panel');
+          if (leftPanel) {
+            // Setze auf volle Breite
+            leftPanel.style.flex = '1';
+            leftPanel.style.width = '100%';
+            
+            // Grid-Struktur wiederherstellen
+            const contentGrid = leftPanel.querySelector('.grid');
+            if (contentGrid) {
+              contentGrid.classList.remove('lg:grid-cols-1');
+              contentGrid.classList.add('lg:grid-cols-3');
+              
+              // Hauptinhaltsbereich auf 2/3 Breite
+              const mainContent = contentGrid.querySelector('.lg\\:col-span-1');
+              if (mainContent) {
+                mainContent.classList.add('lg:col-span-2');
+                mainContent.classList.remove('lg:col-span-1');
+              }
+            }
+          }
+          
+          // URL-Parameter entfernen
+          const url = new URL(window.location.href);
+          url.searchParams.delete('compare');
+          window.history.pushState({}, '', url.toString());
+        }
+      }
+      
+      // Mobile-Anzeige umschalten
+      const leftViewBtn = document.querySelector('.left-view-btn');
+      const rightViewBtn = document.querySelector('.right-view-btn');
+      
+      if (leftViewBtn && rightViewBtn) {
+        leftViewBtn.addEventListener('click', () => {
+          leftViewBtn.classList.add('bg-primary', 'text-white');
+          leftViewBtn.classList.remove('bg-gray-100', 'dark:bg-gray-700');
+          rightViewBtn.classList.remove('bg-primary', 'text-white');
+          rightViewBtn.classList.add('bg-gray-100', 'dark:bg-gray-700');
+          
+          // Für mobile Geräte
+          const mediaQuery = window.matchMedia('(max-width: 1024px)');
+          if (mediaQuery.matches) {
+            // Panel anzeigen/verstecken
+            document.querySelector('.left-panel').style.display = 'block';
+            comparePanelContainer.style.display = 'none';
+            comparePanelContainer2.style.display = 'none';
+            comparePanelContainer3.style.display = 'none';
+          }
+        });
+        
+        rightViewBtn.addEventListener('click', () => {
+          rightViewBtn.classList.add('bg-primary', 'text-white');
+          rightViewBtn.classList.remove('bg-gray-100', 'dark:bg-gray-700');
+          leftViewBtn.classList.remove('bg-primary', 'text-white');
+          leftViewBtn.classList.add('bg-gray-100', 'dark:bg-gray-700');
+          
+          // Für mobile Geräte
+          const mediaQuery = window.matchMedia('(max-width: 1024px)');
+          if (mediaQuery.matches) {
+            // Panel anzeigen/verstecken
+            document.querySelector('.left-panel').style.display = 'none';
+            
+            // Sichtbares Vergleichspanel anzeigen
+            if (!comparePanelContainer.classList.contains('hidden')) {
+              comparePanelContainer.style.display = 'block';
+            } else if (!comparePanelContainer2.classList.contains('hidden')) {
+              comparePanelContainer2.style.display = 'block';
+            } else if (!comparePanelContainer3.classList.contains('hidden')) {
+              comparePanelContainer3.style.display = 'block';
+            }
+          }
+        });
+      }
+    } catch (e) {
+      console.error("Error initializing software detail:", e);
+    }
+    
+    // Preisgestaltungs-Umschalter
+    if (monthlyBtn && yearlyBtn) {
+      // Clone and replace to avoid duplicate event handlers
+      const newMonthlyBtn = monthlyBtn.cloneNode(true);
+      const newYearlyBtn = yearlyBtn.cloneNode(true);
+      
+      if (monthlyBtn.parentNode) {
+        monthlyBtn.parentNode.replaceChild(newMonthlyBtn, monthlyBtn);
+        yearlyBtn.parentNode.replaceChild(newYearlyBtn, yearlyBtn);
+      }
+      
+      newMonthlyBtn.addEventListener('click', () => {
+        newMonthlyBtn.classList.add('bg-primary', 'text-white');
+        newYearlyBtn.classList.remove('bg-primary', 'text-white');
+        
+        monthlyPrices.forEach(el => el.classList.remove('hidden'));
+        monthlyPrices.forEach(el => el.classList.add('block'));
+        yearlyPrices.forEach(el => el.classList.add('hidden'));
+        yearlyPrices.forEach(el => el.classList.remove('block'));
+      });
+
+      newYearlyBtn.addEventListener('click', () => {
+        newYearlyBtn.classList.add('bg-primary', 'text-white');
+        newMonthlyBtn.classList.remove('bg-primary', 'text-white');
+        
+        yearlyPrices.forEach(el => el.classList.remove('hidden'));
+        yearlyPrices.forEach(el => el.classList.add('block'));
+        monthlyPrices.forEach(el => el.classList.add('hidden'));
+        monthlyPrices.forEach(el => el.classList.remove('block'));
+      });
+    }
+  });
+</script>
+)}
+
+{mode === 'comparison' && (
+<script>
+  // Client-side Funktionalität für die Vergleichsansicht
+  document.addEventListener('DOMContentLoaded', () => {
+    // DOM-Elemente
+    const softwareListView = document.getElementById('software-list-view');
+    const softwareDetailView = document.getElementById('software-detail-view');
+    const softwareItems = document.getElementById('software-items');
+    const searchInput = document.getElementById('software-search-input');
+    const loadingIndicator = document.getElementById('loading-indicator');
+    const errorMessage = document.getElementById('error-message');
+    const errorText = document.getElementById('error-text');
+    const emptyMessage = document.getElementById('empty-message');
+    const minimizedView = document.getElementById('minimized-view');
+    
+    // Detail-Elemente
+    const softwareLogo = document.getElementById('compare-software-logo');
+    const softwareName = document.getElementById('compare-software-name');
+    const softwareCategories = document.getElementById('compare-software-categories');
+    const softwareDescription = document.getElementById('software-description');
+    const softwareFeatures = document.getElementById('software-features');
+    const softwarePlatforms = document.getElementById('software-platforms');
+    const softwarePricing = document.getElementById('software-pricing');
+    const platformsSection = document.getElementById('platforms-section');
+    const pricingSection = document.getElementById('pricing-section');
+    const detailLoading = document.getElementById('detail-loading');
+    const detailContent = document.getElementById('detail-content');
+    
+    // Bewertungselemente
+    const compareEaseValue = document.getElementById('compare-ease-value');
+    const compareFeaturesValue = document.getElementById('compare-features-value');
+    const compareValueValue = document.getElementById('compare-value-value');
+    const compareSupportValue = document.getElementById('compare-support-value');
+    const compareReliabilityValue = document.getElementById('compare-reliability-value');
+    
+    // Minimized-Elemente
+    const minimizedLogo = document.getElementById('minimized-logo');
+    const minimizedName = document.getElementById('minimized-name');
+    const minimizedDescription = document.getElementById('minimized-description');
+    
+    // Control-Elemente
+    const selectOtherSoftwareBtn = document.getElementById('selectOtherSoftwareBtn');
+    const closeCompareBtn = document.getElementById('closeCompareBtn');
+    const viewDemoBtn = document.getElementById('viewDemoBtn');
+    
+    let isMinimized = false;
+    let similarSoftware = [];
+    let filteredSoftware = [];
+    let currentSoftware = null;
+    let currentLocale = 'en';
+    
+    // Initialisiere mit dem Data-Attribut des Containers
+    const initializeFromContainer = () => {
+      // Container-Element für die Daten
+      const softwareDetail = document.getElementById('softwareDetail');
+      
+      if (softwareDetail) {
+        try {
+          console.log('Container data:', softwareDetail.dataset);
+          
+          let similarData = [];
+          if (softwareDetail.dataset.similarSoftware) {
+            similarData = JSON.parse(softwareDetail.dataset.similarSoftware);
+            console.log('Parsed similar software data:', similarData);
+          } else {
+            console.warn('No similar software data found in container');
+          }
+          
+          // Ähnliche Software speichern
+          similarSoftware = similarData;
+          filteredSoftware = similarData;
+          
+          // Locale erhalten
+          currentLocale = document.documentElement.lang || 'en';
+          
+          // Initialisiere die Software-Liste
+          renderSoftwareList(similarSoftware);
+          
+          // Zeige die Anzahl der geladenen Einträge
+          console.log(`Loaded ${similarSoftware.length} similar software entries`);
+        } catch (e) {
+          console.error('Error initializing compare panel:', e);
+          console.error(e);
+        }
+      } else {
+        console.error('Software detail container not found');
+      }
+    };
+    
+    // Rendere die Software-Liste
+    const renderSoftwareList = (softwareList) => {
+      // Liste leeren
+      softwareItems.innerHTML = '';
+      
+      if (softwareList.length === 0) {
+        emptyMessage.style.display = 'block';
+        return;
+      }
+      
+      emptyMessage.style.display = 'none';
+      
+      // Für jede Software einen Eintrag erstellen
+      softwareList.forEach(software => {
+        const item = document.createElement('div');
+        item.className = 'p-4 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer';
+        
+        item.innerHTML = `
+          <div class="flex items-center">
+            <div class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
+              ${software.logo
+                ? `<img src="${software.logo}" alt="${software.name}" class="max-w-full max-h-full p-1" />`
+                : `<span class="text-lg">${software.name.charAt(0)}</span>`
+              }
+            </div>
+            <div>
+              <div class="font-medium dark:text-white">${software.name}</div>
+              <div class="text-sm text-gray-500 dark:text-gray-400">${software.categories.join(', ')}</div>
+            </div>
+          </div>
+        `;
+        
+        // Click-Event zum Auswählen der Software
+        item.addEventListener('click', () => selectComparisonSoftware(software.id));
+        
+        softwareItems.appendChild(item);
+      });
+    };
+    
+    // Software zum Vergleich auswählen
+    const selectComparisonSoftware = async (id) => {
+      try {
+        console.log("Selecting software for comparison:", id);
+        
+        // Lade-Zustand anzeigen
+        softwareListView.style.display = 'none';
+        softwareDetailView.style.display = 'block';
+        detailLoading.style.display = 'block';
+        detailContent.style.display = 'none';
+        
+        // URL-Parameter aktualisieren
+        const url = new URL(window.location.href);
+        url.searchParams.set('compare', id);
+        window.history.replaceState({}, '', url.toString());
+        
+        // Try to find software in local data first
+        const matchingSoftware = similarSoftware.find(s => s.id === id);
+        let softwareData;
+        
+        if (matchingSoftware) {
+          console.log("Found software in local data:", matchingSoftware.name);
+          softwareData = {
+            ...matchingSoftware,
+            description: matchingSoftware.description || "No description available",
+            metrics: {
+              easeOfUse: { average: 4.2, count: 15 },
+              featureRichness: { average: 3.8, count: 12 },
+              valueForMoney: { average: 4.5, count: 18 },
+              support: { average: 3.5, count: 10 },
+              reliability: { average: 4.0, count: 14 }
+            },
+            features: matchingSoftware.features || ['No features listed'],
+            platforms: matchingSoftware.platforms || [],
+            pricing: matchingSoftware.pricing || [],
+            screenshots: matchingSoftware.screenshots || []
+          };
+        } else {
+          // Software-Daten laden from API if not found locally
+          softwareData = await loadSoftwareData(id, currentLocale);
+        }
+        
+        if (!softwareData) {
+          throw new Error('Failed to load software data');
+        }
+        
+        // Aktuelle Software speichern
+        currentSoftware = softwareData;
+        
+        // Show UI content and hide loading indicator
+        detailLoading.style.display = 'none';
+        detailContent.style.display = 'block';
+        
+        // UI aktualisieren
+        updateSoftwareUI(softwareData);
+      } catch (e) {
+        console.error('Error selecting software for comparison:', e);
+        detailLoading.style.display = 'none';
+        errorText.textContent = e.message || 'Failed to load software data';
+        errorMessage.style.display = 'block';
+      }
+    };
+    
+    // Software-Daten über API laden
+    const loadSoftwareData = async (id, locale) => {
+      try {
+        // First try to fetch from the API
+        const response = await fetch(`/api/software/${id}.json?lang=${locale}`);
+        
+        if (!response.ok) {
+          console.warn(`API request failed: ${response.status}. Trying fallback method.`);
+          throw new Error(`Error status: ${response.status}`);
+        }
+        
+        return await response.json();
+      } catch (e) {
+        console.error('Error loading software data:', e);
+        
+        // Fallback: try to find the software in the global context
+        try {
+          // Look for software data in the main container
+          const softwareDetail = document.getElementById('softwareDetail');
+          if (softwareDetail && softwareDetail.dataset.similarSoftware) {
+            const similarSoftware = JSON.parse(softwareDetail.dataset.similarSoftware);
+            const matchingSoftware = similarSoftware.find(s => s.id === id);
+            
+            if (matchingSoftware) {
+              console.log("Using fallback data from similarSoftware dataset");
+              // Add mock metrics for consistency
+              return {
+                ...matchingSoftware,
+                metrics: {
+                  easeOfUse: { average: 4.2, count: 15 },
+                  featureRichness: { average: 3.8, count: 12 },
+                  valueForMoney: { average: 4.5, count: 18 },
+                  support: { average: 3.5, count: 10 },
+                  reliability: { average: 4.0, count: 14 }
+                },
+                features: matchingSoftware.features || ['No features listed'],
+                platforms: matchingSoftware.platforms || []
+              };
+            }
+          }
+        } catch (fallbackError) {
+          console.error("Fallback method also failed:", fallbackError);
+        }
+        
+        return null;
+      }
+    };
+    
+    // UI mit Software-Daten aktualisieren
+    const updateSoftwareUI = (software) => {
+      console.log("Updating UI with software data:", software);
+      if (!software) {
+        console.error("Cannot update UI: No software data provided");
+        errorText.textContent = "Failed to load software data";
+        errorMessage.style.display = "block";
+        detailLoading.style.display = "none";
+        return;
+      }
+      
+      // Ensure software has all required properties with fallbacks
+      const safeSoftware = {
+        name: software.name || "Unknown Software",
+        logo: software.logo || '/logos/sample-logo.svg',
+        description: software.description || "No description available",
+        categories: Array.isArray(software.categories) ? software.categories : [],
+        features: Array.isArray(software.features) ? software.features : ["No features listed"],
+        platforms: Array.isArray(software.platforms) ? software.platforms : [],
+        pricing: Array.isArray(software.pricing) ? software.pricing : [],
+        website: software.website || null,
+        lastUpdated: software.lastUpdated || null,
+        screenshots: Array.isArray(software.screenshots) ? software.screenshots : []
+      };
+
+      // Header-Informationen
+      softwareLogo.src = safeSoftware.logo;
+      softwareLogo.alt = safeSoftware.name;
+      softwareName.textContent = safeSoftware.name;
+      
+      // Kategorie-Tags erstellen
+      softwareCategories.innerHTML = '';
+      if (safeSoftware.categories.length > 0) {
+        safeSoftware.categories.forEach((category, index) => {
+          const a = document.createElement('a');
+          a.href = `/${currentLocale}/category/${category.toLowerCase().replace(' ', '-')}`;
+          a.className = 'text-primary hover:underline';
+          a.textContent = category;
+          softwareCategories.appendChild(a);
+          
+          if (index < safeSoftware.categories.length - 1) {
+            const separator = document.createElement('span');
+            separator.className = 'mx-2 text-gray-400';
+            separator.textContent = '•';
+            softwareCategories.appendChild(separator);
+          }
+        });
+      }
+      
+      // Website-Button aktivieren, wenn URL vorhanden
+      if (viewDemoBtn) {
+        viewDemoBtn.disabled = !safeSoftware.website;
+        
+        // Remove any previous event listeners to avoid duplicates
+        const newViewDemoBtn = viewDemoBtn.cloneNode(true);
+        viewDemoBtn.parentNode.replaceChild(newViewDemoBtn, viewDemoBtn);
+        
+        if (safeSoftware.website) {
+          newViewDemoBtn.addEventListener('click', () => {
+            window.open(safeSoftware.website, '_blank');
+          });
+        }
+      }
+      
+      // Beschreibung
+      softwareDescription.textContent = safeSoftware.description;
+      
+      // Screenshots, falls vorhanden
+      const screenshotsContainer = document.getElementById('compare-screenshots');
+      if (screenshotsContainer) {
+        const screenshotsGrid = screenshotsContainer.querySelector('.grid');
+        
+        if (safeSoftware.screenshots.length > 0 && screenshotsGrid) {
+          screenshotsGrid.innerHTML = '';
+          screenshotsContainer.style.display = 'block';
+          
+          safeSoftware.screenshots.forEach(screenshot => {
+            const screenshotDiv = document.createElement('div');
+            screenshotDiv.className = 'aspect-video bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden';
+            
+            const img = document.createElement('img');
+            img.src = screenshot;
+            img.alt = `${safeSoftware.name} screenshot`;
+            img.className = 'w-full h-full object-cover';
+            
+            screenshotDiv.appendChild(img);
+            screenshotsGrid.appendChild(screenshotDiv);
+          });
+        } else if (screenshotsContainer) {
+          screenshotsContainer.style.display = 'none';
+        }
+      }
+      
+      // Features
+      if (softwareFeatures) {
+        softwareFeatures.innerHTML = '';
+        if (Array.isArray(safeSoftware.features)) {
+          safeSoftware.features.forEach(feature => {
+            const li = document.createElement('li');
+            li.className = 'mb-2 text-gray-700 dark:text-gray-300';
+            li.textContent = feature;
+            softwareFeatures.appendChild(li);
+          });
+        } else {
+          const li = document.createElement('li');
+          li.className = 'mb-2 text-gray-700 dark:text-gray-300';
+          li.textContent = 'No features listed';
+          softwareFeatures.appendChild(li);
+        }
+      }
+      
+      // Plattformen
+      softwarePlatforms.innerHTML = '';
+      if (safeSoftware.platforms.length > 0 && platformsSection) {
+        platformsSection.style.display = 'block';
+        safeSoftware.platforms.forEach(platform => {
+          const span = document.createElement('span');
+          span.className = 'px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm';
+          span.textContent = platform;
+          softwarePlatforms.appendChild(span);
+        });
+      } else if (platformsSection) {
+        platformsSection.style.display = 'none';
+      }
+      
+      // Last Updated Datum
+      const updateDate = document.getElementById('update-date');
+      if (updateDate) {
+        updateDate.textContent = safeSoftware.lastUpdated
+          ? new Date(safeSoftware.lastUpdated).toLocaleDateString()
+          : 'N/A';
+      }
+      
+      // Preisgestaltung
+      if (softwarePricing && pricingSection) {
+        softwarePricing.innerHTML = '';
+        if (safeSoftware.pricing.length > 0) {
+          pricingSection.style.display = 'block';
+          
+          // Preis-Schalter einrichten
+          const monthlyBtn = document.getElementById('compare-monthly-btn');
+          const yearlyBtn = document.getElementById('compare-yearly-btn');
+          
+          if (monthlyBtn && yearlyBtn) {
+            // Standard ist monatlich
+            let showMonthly = true;
+            
+            // Preise generieren
+            const generatePricing = () => {
+              softwarePricing.innerHTML = '';
+              
+              safeSoftware.pricing.forEach(plan => {
+                const planDiv = document.createElement('div');
+                planDiv.className = 'border border-gray-200 dark:border-gray-700 rounded-lg p-6';
+                
+                const planTitle = document.createElement('h3');
+                planTitle.className = 'text-xl font-bold mb-2';
+                planTitle.textContent = plan.model || 'Plan';
+                
+                // Preisanzeige-Container für monatlich/jährlich
+                const priceContainer = document.createElement('div');
+                priceContainer.className = 'mb-4';
+                
+                const planPrice = document.createElement('p');
+                planPrice.className = 'text-2xl font-bold text-primary dark:text-blue-400';
+                planPrice.textContent = showMonthly 
+                  ? (plan.price || 'N/A') 
+                  : (plan.yearly_price || 'N/A');
+                
+                priceContainer.appendChild(planPrice);
+                
+                // Features
+                const featuresList = document.createElement('ul');
+                featuresList.className = 'space-y-2';
+                
+                if (plan.features && Array.isArray(plan.features)) {
+                  plan.features.forEach(feature => {
+                    const li = document.createElement('li');
+                    li.className = 'flex items-start';
+                    li.innerHTML = `
+                      <svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                      <span class="dark:text-gray-300">${feature}</span>
+                    `;
+                    featuresList.appendChild(li);
+                  });
+                }
+                
+                planDiv.appendChild(planTitle);
+                planDiv.appendChild(priceContainer);
+                planDiv.appendChild(featuresList);
+                softwarePricing.appendChild(planDiv);
+              });
+            };
+            
+            // Initial erzeugen
+            generatePricing();
+            
+            // Remove any previous event listeners to avoid duplicates
+            const newMonthlyBtn = monthlyBtn.cloneNode(true);
+            const newYearlyBtn = yearlyBtn.cloneNode(true);
+            monthlyBtn.parentNode.replaceChild(newMonthlyBtn, monthlyBtn);
+            yearlyBtn.parentNode.replaceChild(newYearlyBtn, yearlyBtn);
+            
+            // Event-Listener für Schalter
+            newMonthlyBtn.addEventListener('click', () => {
+              newMonthlyBtn.classList.add('bg-primary', 'text-white');
+              newYearlyBtn.classList.remove('bg-primary', 'text-white');
+              showMonthly = true;
+              generatePricing();
+            });
+            
+            newYearlyBtn.addEventListener('click', () => {
+              newYearlyBtn.classList.add('bg-primary', 'text-white');
+              newMonthlyBtn.classList.remove('bg-primary', 'text-white');
+              showMonthly = false;
+              generatePricing();
+            });
+          }
+        } else {
+          pricingSection.style.display = 'none';
+        }
+      }
+      
+      // Bewertungen aktualisieren
+      if (software.metrics) {
+        updateRatings(software.metrics);
+      } else {
+        // Leere Bewertungen anzeigen, wenn keine vorhanden sind
+        updateRatings({
+          easeOfUse: { average: 0, count: 0 },
+          featureRichness: { average: 0, count: 0 },
+          valueForMoney: { average: 0, count: 0 },
+          support: { average: 0, count: 0 },
+          reliability: { average: 0, count: 0 }
+        });
+      }
+      
+      // Minimierte Ansicht aktualisieren
+      minimizedLogo.src = software.logo || '/logos/sample-logo.svg';
+      minimizedLogo.alt = software.name;
+      minimizedName.textContent = software.name;
+      minimizedDescription.textContent = software.description || 'No description available';
+      
+      // Lade-Zustand ausblenden, Inhalte einblenden
+      detailLoading.style.display = 'none';
+      detailContent.style.display = 'block';
+    };
+    
+    // Bewertungen aktualisieren
+    const updateRatings = (metrics) => {
+      // Bewertungen abrufen
+      const easeOfUse = metrics.easeOfUse || { average: 0, count: 0 };
+      const featureRichness = metrics.featureRichness || { average: 0, count: 0 };
+      const valueForMoney = metrics.valueForMoney || { average: 0, count: 0 };
+      const support = metrics.support || { average: 0, count: 0 };
+      const reliability = metrics.reliability || { average: 0, count: 0 };
+      
+      // Werte aktualisieren für Ease of Use
+      if (compareEaseValue) compareEaseValue.textContent = `${easeOfUse.average.toFixed(1)} / 5`;
+      const easeBar = document.getElementById('compare-ease-bar');
+      if (easeBar) easeBar.style.width = `${(easeOfUse.average / 5) * 100}%`;
+      const easeCount = document.getElementById('compare-ease-count');
+      if (easeCount) easeCount.textContent = `${easeOfUse.count} votes`;
+      
+      // Werte aktualisieren für Features
+      if (compareFeaturesValue) compareFeaturesValue.textContent = `${featureRichness.average.toFixed(1)} / 5`;
+      const featuresBar = document.getElementById('compare-features-bar');
+      if (featuresBar) featuresBar.style.width = `${(featureRichness.average / 5) * 100}%`;
+      const featuresCount = document.getElementById('compare-features-count');
+      if (featuresCount) featuresCount.textContent = `${featureRichness.count} votes`;
+      
+      // Werte aktualisieren für Value
+      if (compareValueValue) compareValueValue.textContent = `${valueForMoney.average.toFixed(1)} / 5`;
+      const valueBar = document.getElementById('compare-value-bar');
+      if (valueBar) valueBar.style.width = `${(valueForMoney.average / 5) * 100}%`;
+      const valueCount = document.getElementById('compare-value-count');
+      if (valueCount) valueCount.textContent = `${valueForMoney.count} votes`;
+      
+      // Werte aktualisieren für Support
+      if (compareSupportValue) compareSupportValue.textContent = `${support.average.toFixed(1)} / 5`;
+      const supportBar = document.getElementById('compare-support-bar');
+      if (supportBar) supportBar.style.width = `${(support.average / 5) * 100}%`;
+      const supportCount = document.getElementById('compare-support-count');
+      if (supportCount) supportCount.textContent = `${support.count} votes`;
+      
+      // Werte aktualisieren für Reliability
+      if (compareReliabilityValue) compareReliabilityValue.textContent = `${reliability.average.toFixed(1)} / 5`;
+      const reliabilityBar = document.getElementById('compare-reliability-bar');
+      if (reliabilityBar) reliabilityBar.style.width = `${(reliability.average / 5) * 100}%`;
+      const reliabilityCount = document.getElementById('compare-reliability-count');
+      if (reliabilityCount) reliabilityCount.textContent = `${reliability.count} votes`;
+    };
+    
+    // Filter-Funktion für die Suche
+    const filterSoftware = (searchTerm) => {
+      if (!searchTerm || searchTerm.length < 2) {
+        filteredSoftware = similarSoftware;
+        renderSoftwareList(filteredSoftware);
+        return;
+      }
+      
+      const term = searchTerm.toLowerCase();
+      filteredSoftware = similarSoftware.filter(software => {
+        return software.name.toLowerCase().includes(term) || 
+               software.description.toLowerCase().includes(term) ||
+               (software.categories && software.categories.some(cat => cat.toLowerCase().includes(term)));
+      });
+      
+      renderSoftwareList(filteredSoftware);
+    };
+    
+    // Panel schließen
+    const closePanel = () => {
+      if (closeCompareBtn) {
+        // Panel identifizieren
+        const panel = closeCompareBtn.closest('.comparison-panel');
+        if (!panel) return;
+        
+        // Den übergeordneten Container finden
+        const compareContainer = panel.closest('.compare-panel-container, .compare-panel-container-2, .compare-panel-container-3');
+        if (!compareContainer) return;
+        
+        console.log('Closing panel:', compareContainer.className);
+        
+        // Panel ausblenden
+        compareContainer.classList.add('hidden');
+        compareContainer.style.width = '0';
+        
+        // Breite der restlichen Panels anpassen
+        adjustPanelWidths();
+        
+        // Überprüfen, ob alle Vergleichspanels geschlossen sind
+        const allCompareContainers = document.querySelectorAll('.compare-panel-container, .compare-panel-container-2, .compare-panel-container-3');
+        const allHidden = Array.from(allCompareContainers).every(container => container.classList.contains('hidden'));
+        
+        if (allHidden) {
+          // Vergleichsmodus deaktivieren - URL-Parameter entfernen
+          const url = new URL(window.location.href);
+          url.searchParams.delete('compare');
+          window.history.pushState({}, '', url.toString());
+          
+          // Plus-Button ausblenden
+          const addCompareBtn = document.getElementById('addCompareBtn');
+          if (addCompareBtn) {
+            addCompareBtn.classList.add('hidden');
+          }
+          
+          // Detail-Panel auf volle Breite zurücksetzen
+          const leftPanel = document.querySelector('.left-panel');
+          if (leftPanel) {
+            leftPanel.style.width = '100%';
+          }
+          
+          // Vergleichscontainer ausblenden
+          const compareContainer = document.querySelector('.compare-panels-container');
+          if (compareContainer) {
+            compareContainer.classList.add('hidden');
+            compareContainer.style.display = 'none';
+          }
+          
+          // Mobile-Switcher ausblenden
+          const mobileSwitcher = document.querySelector('.mobile-switcher');
+          if (mobileSwitcher) {
+            mobileSwitcher.classList.add('hidden');
+          }
+        }
+      }
+    };
+    
+    // Panel-Breiten anpassen
+    function adjustPanelWidths() {
+      // Zählen, wie viele Panel angezeigt werden
+      const allPanels = document.querySelectorAll('.compare-panel-container, .compare-panel-container-2, .compare-panel-container-3, .left-panel');
+      const visiblePanels = Array.from(allPanels).filter(panel => !panel.classList.contains('hidden')).length;
+      
+      if (visiblePanels === 0) return;
+      
+      // Breite basierend auf sichtbaren Panels anpassen
+      const panelWidth = `lg:w-1/${visiblePanels}`;
+      
+      // Alle sichtbaren Panels anpassen
+      Array.from(allPanels).forEach(panel => {
+        if (!panel.classList.contains('hidden')) {
+          // Alle Breitenklassen entfernen
+          panel.classList.remove('w-full', 'lg:w-1/2', 'lg:w-1/3', 'lg:w-1/4');
+          panel.classList.add(panelWidth);
+        }
+      });
+    }
+    
+    // Zeige die Software-Liste an
+    const showSoftwareList = () => {
+      if (selectOtherSoftwareBtn) {
+        softwareDetailView.style.display = 'none';
+        minimizedView.style.display = 'none';
+        softwareListView.style.display = 'block';
+      }
+    };
+    
+    // Event-Listener einrichten
+    if (searchInput) {
+      searchInput.addEventListener('input', () => filterSoftware(searchInput.value));
+    }
+    
+    if (selectOtherSoftwareBtn) {
+      selectOtherSoftwareBtn.addEventListener('click', showSoftwareList);
+    }
+    
+    if (closeCompareBtn) {
+      closeCompareBtn.addEventListener('click', closePanel);
+    }
+    
+    // URL-Parameter überprüfen
+    const checkURLParams = () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const compareId = urlParams.get('compare');
+      
+      if (compareId) {
+        selectComparisonSoftware(compareId);
+      }
+    };
+    
+    // Initialisierung starten
+    initializeFromContainer();
+    checkURLParams();
+    
+    // Prüfen, ob Daten vorhanden sind
+    if (similarSoftware.length === 0) {
+      // Verzögerung, um sicherzustellen, dass Daten verfügbar sind
+      setTimeout(() => {
+        initializeFromContainer();
+        
+        if (similarSoftware.length === 0) {
+          emptyMessage.style.display = 'block';
+        }
+      }, 500);
+    }
+  });
+</script>
+)}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/components/software/SoftwareRatings.astro b/apps-archived/techbase/apps/web/src/components/software/SoftwareRatings.astro
new file mode 100644
index 000000000..4f9a31292
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/components/software/SoftwareRatings.astro
@@ -0,0 +1,41 @@
+---
+import { loadTranslations } from '../../utils/i18n';
+import VotingSystem from '../VotingSystem.astro';
+
+const { softwareId, metrics, locale } = Astro.props;
+const t = await loadTranslations(locale);
+---
+
+<div class="space-y-8">
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[300px] overflow-y-auto">
+    <h3 class="text-xl font-bold mb-4">{t.common.ratings || 'Ratings'}</h3>
+    
+    <div class="space-y-4">
+      {Object.entries(metrics).map(([key, value]) => {
+        const metricName = t.voting[key] || key;
+        return (
+          <div>
+            <div class="flex justify-between items-center mb-1">
+              <span class="font-medium">{metricName}</span>
+              <span class="font-bold">{value.average.toFixed(1)} / 5</span>
+            </div>
+            <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+              <div 
+                class="h-full bg-primary" 
+                style={`width: ${(value.average / 5) * 100}%`}
+              ></div>
+            </div>
+            <div class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">
+              {value.count} {t.common.votes || 'votes'}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  </div>
+  
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-8 h-[300px] overflow-y-auto">
+    <h3 class="text-xl font-bold mb-4">Bewerten</h3>
+    <VotingSystem softwareId={softwareId} />
+  </div>
+</div>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/browser.md b/apps-archived/techbase/apps/web/src/content/categories/de/browser.md
new file mode 100644
index 000000000..0015d2836
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/browser.md
@@ -0,0 +1,5 @@
+---
+name: Webbrowser
+description: Software-Anwendungen für den Zugriff auf Websites und Webanwendungen.
+icon: 🌐
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/cloud-storage.md b/apps-archived/techbase/apps/web/src/content/categories/de/cloud-storage.md
new file mode 100644
index 000000000..c41c5f381
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/cloud-storage.md
@@ -0,0 +1,5 @@
+---
+name: Cloud-Speicher
+description: Online-Speicherlösungen, die Dateifreigabe, Backup und Synchronisierung zwischen Geräten ermöglichen.
+icon: ☁️
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/design.md b/apps-archived/techbase/apps/web/src/content/categories/de/design.md
new file mode 100644
index 000000000..9f158a61c
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/design.md
@@ -0,0 +1,5 @@
+---
+name: Design & Grafik
+description: Software-Tools zum Erstellen, Bearbeiten und Manipulieren von visuellen Inhalten, einschließlich Fotos, Illustrationen und digitaler Kunst.
+icon: 🎨
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/document.md b/apps-archived/techbase/apps/web/src/content/categories/de/document.md
new file mode 100644
index 000000000..5db738b5b
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/document.md
@@ -0,0 +1,5 @@
+---
+name: Dokumentenverwaltung
+description: Anwendungen zum Erstellen, Anzeigen, Bearbeiten und Verwalten von PDF und anderen Dokumentformaten.
+icon: 📄
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/email.md b/apps-archived/techbase/apps/web/src/content/categories/de/email.md
new file mode 100644
index 000000000..a48393520
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/email.md
@@ -0,0 +1,5 @@
+---
+name: E-Mail
+description: E-Mail-Clients und -Dienste für persönliche und professionelle Kommunikation.
+icon: 📧
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/games.md b/apps-archived/techbase/apps/web/src/content/categories/de/games.md
new file mode 100644
index 000000000..2dcd73634
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/games.md
@@ -0,0 +1,5 @@
+---
+name: Spiele
+description: Software für Unterhaltung, Brettspiele, Lernspiele und Spiel-Plattformen
+icon: gamepad
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/kategorie1.md b/apps-archived/techbase/apps/web/src/content/categories/de/kategorie1.md
new file mode 100644
index 000000000..00df55917
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/kategorie1.md
@@ -0,0 +1,5 @@
+---
+name: Kategorie 1
+description: Dies ist eine Beispiel-Kategorie für Software-Produkte.
+icon: 📊
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/navigation.md b/apps-archived/techbase/apps/web/src/content/categories/de/navigation.md
new file mode 100644
index 000000000..5d65c2ad3
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/navigation.md
@@ -0,0 +1,5 @@
+---
+name: Navigation
+description: Tools für Routenplanung, Schritt-für-Schritt-Anweisungen und Reiseführung.
+icon: 🧭
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/office-suite.md b/apps-archived/techbase/apps/web/src/content/categories/de/office-suite.md
new file mode 100644
index 000000000..839a4a741
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/office-suite.md
@@ -0,0 +1,5 @@
+---
+name: Office-Suiten
+description: Softwaresammlungen von Produktivitätsanwendungen für die Büroarbeit.
+icon: 📝
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/operating-system.md b/apps-archived/techbase/apps/web/src/content/categories/de/operating-system.md
new file mode 100644
index 000000000..f7fdeb73b
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/operating-system.md
@@ -0,0 +1,5 @@
+---
+name: Betriebssysteme
+description: Software, die die Computerhardware verwaltet und gemeinsame Dienste für Computerprogramme bereitstellt.
+icon: 💻
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/productivity.md b/apps-archived/techbase/apps/web/src/content/categories/de/productivity.md
new file mode 100644
index 000000000..cab58b94f
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/productivity.md
@@ -0,0 +1,5 @@
+---
+name: Produktivität
+description: Anwendungen und Tools zur Steigerung von Effizienz, Organisation und Arbeitsabläufen.
+icon: ⚡
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/de/travel.md b/apps-archived/techbase/apps/web/src/content/categories/de/travel.md
new file mode 100644
index 000000000..96275bc6a
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/de/travel.md
@@ -0,0 +1,5 @@
+---
+name: Reisen
+description: Anwendungen für Reiseplanung, Buchung und Erkundung von Reisezielen.
+icon: ✈️
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/browser.md b/apps-archived/techbase/apps/web/src/content/categories/en/browser.md
new file mode 100644
index 000000000..f5a8d962c
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/browser.md
@@ -0,0 +1,5 @@
+---
+name: Web Browsers
+description: Software applications for accessing websites and web applications.
+icon: 🌐
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/category1.md b/apps-archived/techbase/apps/web/src/content/categories/en/category1.md
new file mode 100644
index 000000000..48751da75
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/category1.md
@@ -0,0 +1,5 @@
+---
+name: Category 1
+description: This is a sample category for software products.
+icon: 📊
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/cloud-storage.md b/apps-archived/techbase/apps/web/src/content/categories/en/cloud-storage.md
new file mode 100644
index 000000000..3b319a556
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/cloud-storage.md
@@ -0,0 +1,5 @@
+---
+name: Cloud Storage
+description: Online storage solutions that enable file sharing, backup, and synchronization across devices.
+icon: ☁️
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/design.md b/apps-archived/techbase/apps/web/src/content/categories/en/design.md
new file mode 100644
index 000000000..1ec21969e
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/design.md
@@ -0,0 +1,5 @@
+---
+name: Design & Graphics
+description: Software tools for creating, editing, and manipulating visual content, including photos, illustrations, and digital art.
+icon: 🎨
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/document.md b/apps-archived/techbase/apps/web/src/content/categories/en/document.md
new file mode 100644
index 000000000..9cce059b7
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/document.md
@@ -0,0 +1,5 @@
+---
+name: Document Management
+description: Applications for creating, viewing, editing, and managing PDF and other document formats.
+icon: 📄
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/email.md b/apps-archived/techbase/apps/web/src/content/categories/en/email.md
new file mode 100644
index 000000000..1f39779b0
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/email.md
@@ -0,0 +1,5 @@
+---
+name: Email
+description: Email clients and services for personal and professional communication.
+icon: 📧
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/games.md b/apps-archived/techbase/apps/web/src/content/categories/en/games.md
new file mode 100644
index 000000000..6adebef8a
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/games.md
@@ -0,0 +1,5 @@
+---
+name: Games
+description: Software for entertainment, board games, educational games and gaming platforms
+icon: gamepad
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/navigation.md b/apps-archived/techbase/apps/web/src/content/categories/en/navigation.md
new file mode 100644
index 000000000..76154a2e0
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/navigation.md
@@ -0,0 +1,5 @@
+---
+name: Navigation
+description: Tools for route planning, turn-by-turn directions, and travel guidance.
+icon: 🧭
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/office-suite.md b/apps-archived/techbase/apps/web/src/content/categories/en/office-suite.md
new file mode 100644
index 000000000..1ddcd60b4
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/office-suite.md
@@ -0,0 +1,5 @@
+---
+name: Office Suites
+description: Software collections of productivity applications designed for office work.
+icon: 📝
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/operating-system.md b/apps-archived/techbase/apps/web/src/content/categories/en/operating-system.md
new file mode 100644
index 000000000..b4b7cb5ee
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/operating-system.md
@@ -0,0 +1,5 @@
+---
+name: Operating Systems
+description: Software that manages computer hardware and provides common services for computer programs.
+icon: 💻
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/productivity.md b/apps-archived/techbase/apps/web/src/content/categories/en/productivity.md
new file mode 100644
index 000000000..8840afde7
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/productivity.md
@@ -0,0 +1,5 @@
+---
+name: Productivity
+description: Applications and tools designed to enhance efficiency, organization, and workflow.
+icon: ⚡
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/categories/en/travel.md b/apps-archived/techbase/apps/web/src/content/categories/en/travel.md
new file mode 100644
index 000000000..e08503c1e
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/categories/en/travel.md
@@ -0,0 +1,5 @@
+---
+name: Travel
+description: Applications for travel planning, booking, and exploration of destinations.
+icon: ✈️
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/config.ts b/apps-archived/techbase/apps/web/src/content/config.ts
new file mode 100644
index 000000000..a239b2499
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/config.ts
@@ -0,0 +1,78 @@
+import { defineCollection, z } from 'astro:content';
+
+// Schema für Developer-Einträge
+export const developersCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    name: z.string(),
+    description: z.string(),
+    logo: z.string().optional(),
+    website: z.string().url(),
+    foundedYear: z.number().optional(),
+    headquarters: z.string().optional(),
+    country: z.string().optional(),
+    employees: z.string().optional(),
+    revenue: z.string().optional(),
+    industry: z.string().optional(),
+    keyProducts: z.array(z.string()).optional(),
+    socialMedia: z.object({
+      twitter: z.string().optional(),
+      linkedin: z.string().optional(),
+      github: z.string().optional(),
+      facebook: z.string().optional()
+    }).optional()
+  })
+});
+
+// Schema für Software-Einträge
+export const softwareCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    name: z.string(),
+    description: z.string(),
+    logo: z.string().optional(),
+    website: z.string().url(),
+    screenshots: z.array(z.string()).optional(),
+    pricing: z.array(z.object({
+      model: z.string(),
+      price: z.string(),
+      yearly_price: z.string().optional(),
+      features: z.array(z.string())
+    })),
+    features: z.array(z.string()),
+    categories: z.array(z.string()),
+    platforms: z.array(z.string()),
+    supportedPlatforms: z.array(z.string()).optional(),
+    developer: z.string().optional(),
+    lastUpdated: z.coerce.date()
+  })
+});
+
+// Schema für Kategorien
+export const categoriesCollection = defineCollection({
+  type: 'content',
+  schema: z.object({
+    name: z.string(),
+    description: z.string(),
+    icon: z.string().optional()
+  })
+});
+
+// Schema für Übersetzungen
+export const translationsCollection = defineCollection({
+  type: 'data',
+});
+
+// i18n-Konfiguration
+export const i18nConfig = {
+  defaultLocale: 'de',
+  locales: ['de', 'en']
+};
+
+// Collections registrieren
+export const collections = {
+  'software': softwareCollection,
+  'categories': categoriesCollection,
+  'translations': translationsCollection,
+  'developers': developersCollection
+};
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/de/adobe.md b/apps-archived/techbase/apps/web/src/content/developers/de/adobe.md
new file mode 100644
index 000000000..00f979224
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/de/adobe.md
@@ -0,0 +1,36 @@
+---
+name: Adobe Inc.
+description: Amerikanisches multinationales Softwareunternehmen mit Fokus auf Kreativsoftwareprodukten.
+logo: /logos/sample-logo.svg
+website: https://www.adobe.com
+foundedYear: 1982
+headquarters: San Jose, Kalifornien
+country: USA
+employees: "26.000+"
+revenue: "17,6 Milliarden $ (2022)"
+industry: "Software, Creative Cloud, Dokumentenmanagement"
+keyProducts:
+  - "Photoshop"
+  - "Illustrator"
+  - "Acrobat"
+  - "Premiere Pro"
+  - "After Effects"
+  - "InDesign"
+  - "Creative Cloud"
+  - "Experience Cloud"
+socialMedia:
+  twitter: https://twitter.com/Adobe
+  linkedin: https://www.linkedin.com/company/adobe/
+  github: https://github.com/adobe
+  facebook: https://www.facebook.com/Adobe
+---
+
+Adobe Inc. (früher Adobe Systems Incorporated) wurde im Dezember 1982 von John Warnock und Charles Geschke gegründet, die zuvor bei Xerox PARC gearbeitet hatten. Das Unternehmen war Pionier bei der Entwicklung von PostScript, einer Seitenbeschreibungssprache, die das Desktop-Publishing revolutionierte.
+
+Adobes Transformation begann mit der Einführung von Photoshop im Jahr 1990, das schnell zum Industriestandard für die Bildbearbeitung wurde. Im Laufe der Jahre erweiterte Adobe sein Produktportfolio um eine umfassende Suite von kreativen Werkzeugen, darunter Illustrator für Vektorgrafiken, InDesign für Seitenlayout und Premiere Pro für Videobearbeitung.
+
+Im Jahr 2013 vollzog Adobe einen bedeutenden strategischen Wandel, indem es vom traditionellen Modell der Dauerlizenzierung zu einem abonnementbasierten Dienst mit der Einführung von Creative Cloud überging. Diese Transformation ermöglichte es dem Unternehmen, häufigere Updates, Cloud-Speicher und einen berechenbareren Einnahmestrom bereitzustellen.
+
+Adobe hat sein Angebot über kreative Werkzeuge hinaus auf digitales Marketing, Analytik und Dokumentenmanagement-Lösungen durch seine Experience Cloud- und Document Cloud-Dienste erweitert. Das von Adobe mit Adobe Acrobat eingeführte PDF-Format ist zum globalen Standard für den sicheren Dokumentenaustausch geworden.
+
+Heute wird Adobe als führend in den Bereichen Kreativsoftware, digitales Marketing und Dokumentenmanagement-Lösungen anerkannt und innoviert kontinuierlich, um den sich entwickelnden Bedürfnissen von Kreativprofis, Vermarktern und Unternehmen weltweit gerecht zu werden.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/de/apple.md b/apps-archived/techbase/apps/web/src/content/developers/de/apple.md
new file mode 100644
index 000000000..9bb34be4c
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/de/apple.md
@@ -0,0 +1,32 @@
+---
+name: Apple Inc.
+description: Multinationales Technologieunternehmen, das Unterhaltungselektronik, Computersoftware und Online-Dienste entwickelt und verkauft, bekannt für Produkte wie iPhone, iPad, Mac-Computer und Dienste wie App Store und Apple Music.
+logo: /logos/sample-logo.svg
+website: https://www.apple.com
+foundedYear: 1976
+headquarters: Cupertino, Kalifornien
+country: USA
+employees: "164.000+"
+revenue: "394,3 Milliarden $ (2022)"
+industry: "Technologie, Unterhaltungselektronik, Software, Online-Dienste"
+keyProducts:
+  - "iPhone"
+  - "iPad"
+  - "Mac"
+  - "Apple Watch"
+  - "AirPods"
+  - "macOS"
+  - "iOS"
+  - "Safari"
+socialMedia:
+  twitter: https://twitter.com/Apple
+  linkedin: https://www.linkedin.com/company/apple/
+  github: https://github.com/apple
+  facebook: https://www.facebook.com/apple
+---
+
+Apple Inc. ist eines der größten Technologieunternehmen der Welt, gegründet von Steve Jobs, Steve Wozniak und Ronald Wayne im Jahr 1976. Das Unternehmen begann als Hersteller von Personal Computern, hat sich aber seitdem auf verschiedene Technologiemärkte ausgeweitet und ist bekannt für seine Innovation, Qualität und starke Markentreue.
+
+Apple revolutionierte die Smartphone-Branche mit der Einführung des iPhones im Jahr 2007, den Tablet-Markt mit dem iPad im Jahr 2010 und führt weiterhin im Bereich der Premium-Unterhaltungselektronik. Das Ökosystem aus Hardware, Software und Diensten ist eng integriert und schafft ein zusammenhängendes Benutzererlebnis über alle Apple-Produkte hinweg.
+
+Das Unternehmen legt großen Wert auf Design, Benutzerdatenschutz und ökologische Nachhaltigkeit. Apples Einzelhandelsgeschäfte sind bekannt für ihre markante Architektur und ihren Kundenservice, und das Unternehmen betreibt weltweit über 500 Geschäfte. Apples Dienstleistungsbereich, einschließlich App Store, Apple Music, Apple TV+, iCloud und Apple Pay, ist zu einem zunehmend wichtigen Teil seines Geschäftsmodells geworden.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/de/google.md b/apps-archived/techbase/apps/web/src/content/developers/de/google.md
new file mode 100644
index 000000000..746c4dffd
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/de/google.md
@@ -0,0 +1,29 @@
+---
+name: Google
+description: Globales Technologieunternehmen, das sich auf Internet-bezogene Dienste und Produkte spezialisiert hat, darunter Online-Werbetechnologien, Suchmaschinen, Cloud Computing, Software und Hardware.
+logo: /logos/sample-logo.svg
+website: https://www.google.com
+foundedYear: 1998
+headquarters: Mountain View, Kalifornien
+country: USA
+employees: "156.500+"
+revenue: "283 Milliarden $ (2022)"
+industry: "Technologie, Internet, Cloud Computing, Werbung"
+keyProducts:
+  - "Google Suche"
+  - "Android"
+  - "YouTube"
+  - "Google Cloud"
+  - "Google Workspace"
+socialMedia:
+  twitter: https://twitter.com/Google
+  linkedin: https://www.linkedin.com/company/google/
+  github: https://github.com/google
+  facebook: https://www.facebook.com/Google/
+---
+
+Google LLC ist ein multinationales Technologieunternehmen, das sich auf Suchmaschinen-Technologie, Online-Werbung, Cloud Computing, Computersoftware, Quantencomputing, E-Commerce, künstliche Intelligenz und Unterhaltungselektronik konzentriert.
+
+Das Unternehmen hat seinen ursprünglichen Fokus auf Suchmaschinen-Technologie weit überschritten und bietet heute mehr als 100 Produkte und Dienste an, darunter das Android-Betriebssystem, den Chrome-Webbrowser, den E-Mail-Dienst Gmail, Google Maps, Google Cloud Platform und YouTube. Googles Muttergesellschaft, Alphabet Inc., wurde 2015 durch eine Umstrukturierung gegründet und gehört heute zu den wertvollsten Unternehmen der Welt.
+
+Googles Mission ist es, "die Informationen der Welt zu organisieren und allgemein zugänglich und nützlich zu machen." Das Unternehmen ist bekannt für seine innovative Kultur, Mitarbeitervorteile und erhebliche Investitionen in Forschung und Entwicklung.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/de/microsoft.md b/apps-archived/techbase/apps/web/src/content/developers/de/microsoft.md
new file mode 100644
index 000000000..e9af21b01
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/de/microsoft.md
@@ -0,0 +1,34 @@
+---
+name: Microsoft Corporation
+description: Multinationales Technologieunternehmen, das Computersoftware, Unterhaltungselektronik, Personal Computer und zugehörige Dienstleistungen produziert.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com
+foundedYear: 1975
+headquarters: Redmond, Washington
+country: USA
+employees: "221.000+"
+revenue: "198,3 Milliarden $ (2022)"
+industry: "Technologie, Software, Cloud Computing, Gaming, Hardware"
+keyProducts:
+  - "Windows"
+  - "Office 365"
+  - "Azure"
+  - "Xbox"
+  - "Surface"
+  - "GitHub"
+  - "LinkedIn"
+  - "Teams"
+socialMedia:
+  twitter: https://twitter.com/Microsoft
+  linkedin: https://www.linkedin.com/company/microsoft/
+  github: https://github.com/microsoft
+  facebook: https://www.facebook.com/Microsoft
+---
+
+Die Microsoft Corporation ist ein multinationales Technologieunternehmen, das am 4. April 1975 von Bill Gates und Paul Allen gegründet wurde. Ursprünglich konzentrierte sich das Unternehmen auf die Entwicklung von Software für den Altair 8800 Mikrocomputer und stieg in den 1980er Jahren mit MS-DOS und später mit Microsoft Windows zum dominierenden Anbieter von Betriebssystemen für Personal Computer auf.
+
+Unter der Führung von Satya Nadella seit 2014 hat Microsoft seinen Fokus auf Cloud-Computing-Dienste verlagert, wobei Azure zu einem wichtigen Akteur auf dem Markt für Cloud-Infrastruktur geworden ist. Das Unternehmen hat auch Open-Source-Entwicklungspraktiken übernommen und sein Hardware-Angebot mit der Surface-Produktlinie erweitert.
+
+Das Geschäftsmodell von Microsoft umfasst ein breites Spektrum an Technologieprodukten und -dienstleistungen, darunter Betriebssysteme, Produktivitätssoftware, Serveranwendungen, Cloud-Dienste, Spielekonsolen und Unternehmenslösungen. Dem Unternehmen ist es gelungen, sich von einem primären Softwareanbieter zu einem diversifizierten Technologieführer mit bedeutender Präsenz in Cloud-Diensten, künstlicher Intelligenz und Mixed Reality zu wandeln.
+
+Im Laufe seiner Geschichte hat Microsoft eine bemerkenswerte Widerstandsfähigkeit und Anpassungsfähigkeit bewiesen, indem es wichtige Branchenveränderungen navigierte und sein Geschäftsmodell weiterentwickelte, um an der Spitze der technologischen Innovation zu bleiben. Das Unternehmen investiert weiterhin stark in neue Technologien wie künstliche Intelligenz, Quantencomputing und Mixed Reality und positioniert sich damit für weiteres Wachstum in der sich schnell verändernden Technologielandschaft.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/de/mozilla.md b/apps-archived/techbase/apps/web/src/content/developers/de/mozilla.md
new file mode 100644
index 000000000..82ad91aed
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/de/mozilla.md
@@ -0,0 +1,32 @@
+---
+name: Mozilla Foundation
+description: Gemeinnützige Organisation, die das Open-Source-Mozilla-Projekt unterstützt und leitet, mit dem Fokus darauf, das Internet als globale öffentliche Ressource offen und für alle zugänglich zu halten.
+logo: /logos/sample-logo.svg
+website: https://www.mozilla.org
+foundedYear: 2003
+headquarters: Mountain View, Kalifornien
+country: USA
+employees: "750+"
+revenue: "ungefähr 500 Millionen $ (2021)"
+industry: "Gemeinnützigkeit, Open Source, Internet-Datenschutz, Web-Technologien"
+keyProducts:
+  - "Firefox"
+  - "Firefox Mobile"
+  - "Mozilla VPN"
+  - "Pocket"
+  - "MDN Web Docs"
+  - "Thunderbird"
+socialMedia:
+  twitter: https://twitter.com/mozilla
+  linkedin: https://www.linkedin.com/company/mozilla-corporation/
+  github: https://github.com/mozilla
+  facebook: https://www.facebook.com/mozilla
+---
+
+Die Mozilla Foundation ist eine gemeinnützige Organisation, die als Heimat des Mozilla-Projekts dient, einer Open-Source-Software-Gemeinschaft, die sich auf die Schaffung eines besseren Internets konzentriert. Die Stiftung wurde im Juli 2003 gegründet, wobei der Firefox-Webbrowser ihr Flaggschiffprodukt ist.
+
+Die Struktur von Mozilla umfasst die Mozilla Foundation und ihre Tochtergesellschaft, die Mozilla Corporation, die für die Entwicklung und Verteilung von Firefox und anderen Produkten zuständig ist. Die Organisation orientiert sich am Mozilla-Manifest, das Prinzipien zur Förderung eines Internets als globale öffentliche Ressource, offen und für alle zugänglich, darlegt.
+
+Über Firefox hinaus hat Mozilla an verschiedenen offenen Internet-Initiativen mitgewirkt, darunter die Entwicklung von Webstandards, Datenschutzfürsprache und Programme zur digitalen Bildung. Die Organisation setzt sich für die Prinzipien des Online-Datenschutzes, Open Source und Dezentralisierung ein und positioniert sich oft als Alternative zu den kommerziellen Interessen größerer Technologieunternehmen.
+
+Mozillas Einnahmen stammen hauptsächlich aus Partnerschaften mit Suchmaschinen, wobei Google ein wichtiger Beitragender ist. Die Stiftung sucht kontinuierlich nach Möglichkeiten, ihre Finanzierung zu diversifizieren und gleichzeitig ihr Engagement für den Datenschutz der Nutzer und die Werte des offenen Internets aufrechtzuerhalten.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/en/adobe.md b/apps-archived/techbase/apps/web/src/content/developers/en/adobe.md
new file mode 100644
index 000000000..ed78693b8
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/en/adobe.md
@@ -0,0 +1,36 @@
+---
+name: Adobe Inc.
+description: American multinational computer software company focused on creativity software products.
+logo: /logos/sample-logo.svg
+website: https://www.adobe.com
+foundedYear: 1982
+headquarters: San Jose, California
+country: USA
+employees: "26,000+"
+revenue: "$17.6 billion (2022)"
+industry: "Software, Creative Cloud, Document Management"
+keyProducts:
+  - "Photoshop"
+  - "Illustrator"
+  - "Acrobat"
+  - "Premiere Pro"
+  - "After Effects"
+  - "InDesign"
+  - "Creative Cloud"
+  - "Experience Cloud"
+socialMedia:
+  twitter: https://twitter.com/Adobe
+  linkedin: https://www.linkedin.com/company/adobe/
+  github: https://github.com/adobe
+  facebook: https://www.facebook.com/Adobe
+---
+
+Adobe Inc. (formerly Adobe Systems Incorporated) was founded in December 1982 by John Warnock and Charles Geschke, who had previously worked at Xerox PARC. The company pioneered the development of PostScript, a page description language that revolutionized desktop publishing.
+
+Adobe's transformation began with the introduction of Photoshop in 1990, which quickly became the industry standard for image editing. Over the years, Adobe expanded its product portfolio to include a comprehensive suite of creative tools, including Illustrator for vector graphics, InDesign for page layout, and Premiere Pro for video editing.
+
+In 2013, Adobe made a significant strategic shift by moving from a traditional perpetual licensing model to a subscription-based service with the introduction of Creative Cloud. This transformation enabled the company to provide more frequent updates, cloud storage, and a more predictable revenue stream. 
+
+Adobe has further expanded its offerings beyond creative tools to include digital marketing, analytics, and document management solutions through its Experience Cloud and Document Cloud services. The company's PDF format, introduced with Adobe Acrobat, has become the global standard for secure document exchange.
+
+Today, Adobe is recognized as a leader in creative software, digital marketing, and document management solutions, continuously innovating to meet the evolving needs of creative professionals, marketers, and businesses worldwide.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/en/apple.md b/apps-archived/techbase/apps/web/src/content/developers/en/apple.md
new file mode 100644
index 000000000..0318b1261
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/en/apple.md
@@ -0,0 +1,32 @@
+---
+name: Apple Inc.
+description: Multinational technology company that designs, develops, and sells consumer electronics, computer software, and online services, known for products like the iPhone, iPad, Mac computers, and services like the App Store and Apple Music.
+logo: /logos/sample-logo.svg
+website: https://www.apple.com
+foundedYear: 1976
+headquarters: Cupertino, California
+country: USA
+employees: "164,000+"
+revenue: "$394.3 billion (2022)"
+industry: "Technology, Consumer Electronics, Software, Online Services"
+keyProducts:
+  - "iPhone"
+  - "iPad"
+  - "Mac"
+  - "Apple Watch"
+  - "AirPods"
+  - "macOS"
+  - "iOS"
+  - "Safari"
+socialMedia:
+  twitter: https://twitter.com/Apple
+  linkedin: https://www.linkedin.com/company/apple/
+  github: https://github.com/apple
+  facebook: https://www.facebook.com/apple
+---
+
+Apple Inc. is one of the world's largest technology companies, founded by Steve Jobs, Steve Wozniak, and Ronald Wayne in 1976. The company began as a personal computer manufacturer but has since expanded into various technology markets, becoming known for its innovation, quality, and strong brand loyalty.
+
+Apple revolutionized the smartphone industry with the introduction of the iPhone in 2007, the tablet market with the iPad in 2010, and continues to lead in premium consumer electronics. Its ecosystem of hardware, software, and services is tightly integrated, creating a cohesive user experience across all Apple products.
+
+The company places a strong emphasis on design, user privacy, and environmental sustainability. Apple's retail stores are known for their distinctive architecture and customer service, with the company operating over 500 stores worldwide. Apple's services division, including the App Store, Apple Music, Apple TV+, iCloud, and Apple Pay, has become an increasingly important part of its business model.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/en/google.md b/apps-archived/techbase/apps/web/src/content/developers/en/google.md
new file mode 100644
index 000000000..0fff40437
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/en/google.md
@@ -0,0 +1,29 @@
+---
+name: Google
+description: Global technology company that specializes in Internet-related services and products including online advertising technologies, search engines, cloud computing, software, and hardware.
+logo: /logos/sample-logo.svg
+website: https://www.google.com
+foundedYear: 1998
+headquarters: Mountain View, California
+country: USA
+employees: "156,500+"
+revenue: "$283 billion (2022)"
+industry: "Technology, Internet, Cloud Computing, Advertising"
+keyProducts:
+  - "Google Search"
+  - "Android"
+  - "YouTube"
+  - "Google Cloud"
+  - "Google Workspace"
+socialMedia:
+  twitter: https://twitter.com/Google
+  linkedin: https://www.linkedin.com/company/google/
+  github: https://github.com/google
+  facebook: https://www.facebook.com/Google/
+---
+
+Google LLC is a multinational technology company that focuses on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics.
+
+The company has expanded far beyond its original focus on search engine technology and now offers over 100 products and services, including the Android operating system, Chrome web browser, Gmail email service, Google Maps, Google Cloud Platform, and YouTube. Google's parent company, Alphabet Inc., was created through a corporate restructuring in 2015 and is now one of the world's most valuable companies.
+
+Google's mission is to "organize the world's information and make it universally accessible and useful." The company is known for its innovative culture, employee perks, and significant investments in research and development.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/en/microsoft.md b/apps-archived/techbase/apps/web/src/content/developers/en/microsoft.md
new file mode 100644
index 000000000..0133a5f31
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/en/microsoft.md
@@ -0,0 +1,34 @@
+---
+name: Microsoft Corporation
+description: Multinational technology company that produces computer software, consumer electronics, personal computers, and related services.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com
+foundedYear: 1975
+headquarters: Redmond, Washington
+country: USA
+employees: "221,000+"
+revenue: "$198.3 billion (2022)"
+industry: "Technology, Software, Cloud Computing, Gaming, Hardware"
+keyProducts:
+  - "Windows"
+  - "Office 365"
+  - "Azure"
+  - "Xbox"
+  - "Surface"
+  - "GitHub"
+  - "LinkedIn"
+  - "Teams"
+socialMedia:
+  twitter: https://twitter.com/Microsoft
+  linkedin: https://www.linkedin.com/company/microsoft/
+  github: https://github.com/microsoft
+  facebook: https://www.facebook.com/Microsoft
+---
+
+Microsoft Corporation is a multinational technology company founded by Bill Gates and Paul Allen on April 4, 1975. Originally focused on developing software for the Altair 8800 microcomputer, the company rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows.
+
+Under the leadership of Satya Nadella since 2014, Microsoft has shifted its focus toward cloud computing services, with Azure becoming a major player in the cloud infrastructure market. The company has also embraced open source development practices and expanded its hardware offerings with the Surface line of devices.
+
+Microsoft's business model encompasses a wide range of technology products and services, including operating systems, productivity software, server applications, cloud services, gaming consoles, and enterprise solutions. The company has successfully transformed itself from primarily a software vendor to a diversified technology leader with significant presence in cloud services, artificial intelligence, and mixed reality.
+
+Throughout its history, Microsoft has displayed remarkable resilience and adaptability, navigating major industry shifts and evolving its business model to remain at the forefront of technological innovation. The company continues to invest heavily in emerging technologies such as artificial intelligence, quantum computing, and mixed reality, positioning itself for continued growth in the rapidly changing technology landscape.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/developers/en/mozilla.md b/apps-archived/techbase/apps/web/src/content/developers/en/mozilla.md
new file mode 100644
index 000000000..f70fcca65
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/developers/en/mozilla.md
@@ -0,0 +1,32 @@
+---
+name: Mozilla Foundation
+description: Non-profit organization that exists to support and collectively lead the open source Mozilla project, focusing on keeping the internet a global public resource, open and accessible to all.
+logo: /logos/sample-logo.svg
+website: https://www.mozilla.org
+foundedYear: 2003
+headquarters: Mountain View, California
+country: USA
+employees: "750+"
+revenue: "approximately $500 million (2021)"
+industry: "Non-profit, Open Source, Internet Privacy, Web Technologies"
+keyProducts:
+  - "Firefox"
+  - "Firefox Mobile"
+  - "Mozilla VPN"
+  - "Pocket"
+  - "MDN Web Docs"
+  - "Thunderbird"
+socialMedia:
+  twitter: https://twitter.com/mozilla
+  linkedin: https://www.linkedin.com/company/mozilla-corporation/
+  github: https://github.com/mozilla
+  facebook: https://www.facebook.com/mozilla
+---
+
+The Mozilla Foundation is a non-profit organization that serves as the home for the Mozilla project, an open-source software community focused on creating a better internet. The foundation was established in July 2003, with the Firefox web browser as its flagship product.
+
+Mozilla's structure includes the Mozilla Foundation and its subsidiary, Mozilla Corporation, which handles the development and distribution of Firefox and other products. The organization is guided by the Mozilla Manifesto, which outlines principles promoting an internet that is a global public resource, open and accessible to all.
+
+Beyond Firefox, Mozilla has been involved in various open internet initiatives, including web standards development, privacy advocacy, and digital literacy programs. The organization champions the principles of online privacy, open source, and decentralization, often positioning itself as an alternative to the commercial interests of larger tech companies.
+
+Mozilla's revenue primarily comes from search engine partnerships, with Google being a significant contributor, and the foundation continually seeks ways to diversify its funding while maintaining its commitment to user privacy and open internet values.
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/acrobat-reader.md b/apps-archived/techbase/apps/web/src/content/software/de/acrobat-reader.md
new file mode 100644
index 000000000..6da135ae2
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/acrobat-reader.md
@@ -0,0 +1,54 @@
+---
+name: Adobe Acrobat Reader
+description: Der globale Standard für das zuverlässige Anzeigen, Drucken und Kommentieren von PDF-Dokumenten.
+logo: /logos/sample-logo.svg
+website: https://www.adobe.com/de/acrobat/pdf-reader.html
+developer: adobe
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - PDFs anzeigen und drucken
+      - PDFs kommentieren
+      - Formulare ausfüllen und unterschreiben
+      - Dateien online speichern und teilen
+  - model: Acrobat Standard DC
+    price: €14,99
+    yearly_price: €179,88
+    features:
+      - PDFs erstellen
+      - Text und Bilder bearbeiten
+      - PDFs in Office-Formate konvertieren
+      - Mehrere Dateien zu einer PDF zusammenführen
+  - model: Acrobat Pro DC
+    price: €24,99
+    yearly_price: €299,88
+    features:
+      - Alle Standard-Funktionen
+      - Zwei Versionen einer PDF vergleichen
+      - Auf iPad und mobilen Geräten bearbeiten
+      - Erweiterte PDF-Bearbeitung und -Schutz
+features:
+  - "PDF-Anzeige: PDF-Inhalte mit hoher Genauigkeit auf allen Geräten anzeigen"
+  - "Kommentare & Anmerkungen: PDFs mit Hervorhebungen und Kommentaren versehen"
+  - "Formularausfüllung: Ausfüllbare Formulare vervollständigen und Unterschriften hinzufügen"
+  - "Teilen & Überprüfen: Kommentare von mehreren Prüfern sammeln"
+  - "Mobiler Zugriff: PDFs auf mobilen Geräten anzeigen und kommentieren"
+  - "Cloud-Speicher: Auf Ihre PDFs von überall aus über Adobe Document Cloud zugreifen"
+categories:
+  - document
+  - productivity
+platforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/android.md b/apps-archived/techbase/apps/web/src/content/software/de/android.md
new file mode 100644
index 000000000..4ddf82639
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/android.md
@@ -0,0 +1,40 @@
+---
+name: Android OS
+description: Das Open-Source-Mobilbetriebssystem von Google, das Smartphones, Tablets und andere Geräte antreibt.
+logo: /logos/sample-logo.svg
+website: https://www.android.com/intl/de_de/
+developer: google
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - Kostenloses Open-Source-Betriebssystem
+      - Zugang zum Google Play Store
+      - Regelmäßige Sicherheitsupdates
+      - Integration mit Google-Diensten
+features:
+  - "Offenes Ökosystem: Open-Source-Basis mit Anpassungsoptionen"
+  - "Google-Dienste: Tiefe Integration mit Google-Apps und -Diensten"
+  - "App Store: Zugang zu Millionen von Apps über den Google Play Store"
+  - "Anpassung: Umfangreiche Personalisierungsoptionen für Benutzer und Hersteller"
+  - "Assistent: Google Assistant für Sprachbefehle und KI-Unterstützung"
+  - "Sicherheit: Regelmäßige Sicherheitsupdates und integrierter Malware-Schutz"
+  - "Multi-Gerät: Unterstützt Telefone, Tablets, Fernseher, Uhren und Autos"
+  - "Entwickler-Tools: Umfassende SDK und Entwickler-Ressourcen"
+categories:
+  - operating-system
+platforms:
+  - Smartphones
+  - Tablets
+  - Smart TVs
+  - Wearables
+  - Automotive
+supportedPlatforms:
+  - Smartphones
+  - Tablets
+  - Smart TVs
+  - Wearables
+  - Automotive
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/chess-com.md b/apps-archived/techbase/apps/web/src/content/software/de/chess-com.md
new file mode 100644
index 000000000..51a680b33
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/chess-com.md
@@ -0,0 +1,55 @@
+---
+name: Chess.com
+description: Die weltweit führende Online-Schachplattform mit Millionen von Spielern, Tutorials, Turnieren und Analysetools.
+logo: /logos/sample-logo.svg
+website: https://www.chess.com
+screenshots:
+  - /screenshots/chess1.PNG
+  - /screenshots/chess2.PNG
+  - /screenshots/chess3.PNG
+  - /screenshots/chess4.PNG
+  - /screenshots/chess5.PNG
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Unbegrenzte Schachspiele
+      - Tägliche Schachaufgaben
+      - Videoanleitungen
+      - Community-Forum
+  - model: Gold
+    price: €4.99/Monat
+    yearly_price: €49.99/Jahr
+    features:
+      - Alle Free-Funktionen
+      - Unbegrenzte Taktik-Aufgaben
+      - 25 Analysen pro Tag
+      - Keine Werbung
+      - Erweiterte Lernfunktionen
+  - model: Platinum
+    price: €9.99/Monat
+    yearly_price: €99.99/Jahr
+    features:
+      - Alle Gold-Funktionen
+      - Unbegrenzte Analysen
+      - Premium-Videos und Kurse
+      - Fortgeschrittene KI-Gegner
+      - Personalisiertes Training
+features:
+  - "Spielen: Schach gegen KI oder Spieler weltweit in verschiedenen Zeitkontrollen"
+  - "Lernen: Interaktive Lektionen, Eröffnungs- und Taktik-Training"
+  - "Analysen: Tiefgehende Spielanalysen mit Engine-Unterstützung"
+  - "Turniere: Tägliche und wöchentliche Online-Schachturniere"
+  - "Community: Foren, Clubs und Freundschaftssystem"
+categories:
+  - games
+  - kategorie2
+platforms:
+  - Windows
+  - macOS
+  - iOS
+  - Android
+  - Web
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/chrome.md b/apps-archived/techbase/apps/web/src/content/software/de/chrome.md
new file mode 100644
index 000000000..6237c6a21
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/chrome.md
@@ -0,0 +1,37 @@
+---
+name: Google Chrome
+description: Schneller, sicherer Browser von Google mit integrierter Google-Dienst-Anbindung.
+logo: /logos/sample-logo.svg
+website: https://www.google.com/chrome/
+developer: google
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - Schnelles Surferlebnis
+      - Integrierter Phishing- und Malware-Schutz
+      - Synchronisation über Geräte hinweg
+      - Entwicklertools
+features:
+  - "Geschwindigkeit: Chrome ist für Leistung mit einer schnellen JavaScript-Engine optimiert"
+  - "Sicherheit: Automatische Updates und isolierte Tabs für erhöhte Sicherheit"
+  - "Synchronisation: Synchronisiere Lesezeichen, Verlauf, Passwörter und Einstellungen über Geräte hinweg"
+  - "Erweiterungen: Zugriff auf tausende Erweiterungen über den Chrome Web Store"
+  - "Entwicklertools: Umfassende integrierte Werkzeuge für Webentwickler"
+categories:
+  - browser
+platforms:
+  - Windows
+  - macOS
+  - Linux
+  - Android
+  - iOS
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Linux
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/excel.md b/apps-archived/techbase/apps/web/src/content/software/de/excel.md
new file mode 100644
index 000000000..49162cd33
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/excel.md
@@ -0,0 +1,57 @@
+---
+name: Microsoft Excel
+description: Leistungsstarke Tabellenkalkulationssoftware mit Berechnungs- und Grafiktools sowie Pivot-Tabellen für Datenanalysen.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com/de-de/microsoft-365/excel
+developer: microsoft
+pricing:
+  - model: Microsoft 365 Personal
+    price: €7,00
+    yearly_price: €69,00
+    features:
+      - Premium Office-Apps einschließlich Excel
+      - 1 TB Cloud-Speicher
+      - Werbefreie E-Mail und Premium-Sicherheit
+      - Zugriff auf mehreren Geräten
+  - model: Microsoft 365 Family
+    price: €10,00
+    yearly_price: €99,00
+    features:
+      - Für bis zu 6 Personen
+      - Premium Office-Apps einschließlich Excel
+      - 1 TB Cloud-Speicher pro Person
+      - Werbefreie E-Mail und Premium-Sicherheit
+  - model: Office Home & Student 2021
+    price: €149,00
+    yearly_price: €149,00
+    features:
+      - Einmaliger Kauf für 1 PC oder Mac
+      - Enthält Excel, Word und PowerPoint
+      - Microsoft Support für 60 Tage
+      - Keine Feature-Updates
+features:
+  - "Tabellenkalkulations-Funktionen: Über 400 integrierte Funktionen für komplexe Berechnungen"
+  - "Datenanalyse: Leistungsstarke Tools wie Power Pivot und Power Query"
+  - "Datenvisualisierung: Erstellen von Diagrammen, Grafiken und bedingter Formatierung"
+  - "PivotTables: Schnelles Zusammenfassen und Analysieren großer Datensätze"
+  - "Was-wäre-wenn-Analyse: Tools für Sensitivitätsanalyse und Prognosen"
+  - "Echtzeit-Zusammenarbeit: Mehrere Benutzer können Tabellenkalkulationen gleichzeitig bearbeiten"
+  - "Excel im Web: Auf Tabellenkalkulationen von jedem Browser aus zugreifen und bearbeiten"
+  - "Integration: Verbindung zu mehreren Datenquellen und Microsoft 365-Apps"
+categories:
+  - office-suite
+  - productivity
+platforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/firefox.md b/apps-archived/techbase/apps/web/src/content/software/de/firefox.md
new file mode 100644
index 000000000..b9a1a6970
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/firefox.md
@@ -0,0 +1,37 @@
+---
+name: Mozilla Firefox
+description: Open-Source-Browser mit Fokus auf Datenschutz, Anpassbarkeit und Web-Standards-Konformität.
+logo: /logos/sample-logo.svg
+website: https://www.mozilla.org/de/firefox/
+developer: mozilla
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - Erweiterter Datenschutz
+      - Open-Source-Entwicklung
+      - Plattformübergreifende Synchronisation
+      - Umfangreiche Anpassungsmöglichkeiten
+features:
+  - "Datenschutz: Verbesserter Tracking-Schutz blockiert standardmäßig Tracking-Cookies von Drittanbietern"
+  - "Open Source: Transparenter Entwicklungsprozess mit öffentlich einsehbarem Code"
+  - "Anpassbarkeit: Hochgradig anpassbare Benutzeroberfläche mit Themes und Add-ons"
+  - "Container-Tabs: Separate Browsing-Kontexte zur Verhinderung von websiteübergreifendem Tracking"
+  - "Lesemodus: Ablenkungsfreies Leseerlebnis für Artikel"
+categories:
+  - browser
+platforms:
+  - Windows
+  - macOS
+  - Linux
+  - Android
+  - iOS
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Linux
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/gmail.md b/apps-archived/techbase/apps/web/src/content/software/de/gmail.md
new file mode 100644
index 000000000..8cb332fc7
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/gmail.md
@@ -0,0 +1,50 @@
+---
+name: Gmail
+description: Googles E-Mail-Dienst mit intelligenten Funktionen, Spamschutz und nahtloser Integration mit anderen Google-Diensten.
+logo: /logos/sample-logo.svg
+website: https://gmail.com
+developer: google
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - 15 GB Speicher (gemeinsam mit Google Drive)
+      - Intelligente E-Mail-Kategorisierung
+      - Spamschutz
+      - Mobile Apps
+  - model: Google Workspace Business Starter
+    price: €5,20
+    yearly_price: €62,40
+    features:
+      - 30 GB Speicher pro Benutzer
+      - Benutzerdefinierte E-Mail-Adresse (@ihredomain)
+      - Videobesprechungen mit bis zu 100 Teilnehmern
+      - Sicherheits- und Verwaltungskontrollen
+  - model: Google Workspace Business Standard
+    price: €10,40
+    yearly_price: €124,80
+    features:
+      - 2 TB Speicher pro Benutzer
+      - Benutzerdefinierte E-Mail-Adresse (@ihredomain)
+      - Videobesprechungen mit bis zu 150 Teilnehmern
+      - Aufzeichnung und Anwesenheitsverfolgung
+features:
+  - "Intelligente Organisation: Sortiert E-Mails automatisch in Tabs wie Primär, Soziale Netzwerke und Werbung"
+  - "Suche: Leistungsstarke Suchfunktion zum Finden aller E-Mails, auch mit Anhängen"
+  - "Integration: Nahtlose Integration mit Google Kalender, Drive und anderen Google-Diensten"
+  - "Sicherheit: Erweiterter Phishing-Schutz und Erkennung verdächtiger Aktivitäten"
+  - "Offline-Zugriff: E-Mails ohne Internetverbindung lesen, beantworten und durchsuchen"
+categories:
+  - email
+  - productivity
+platforms:
+  - Web
+  - Android
+  - iOS
+supportedPlatforms:
+  - Web
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/google-drive.md b/apps-archived/techbase/apps/web/src/content/software/de/google-drive.md
new file mode 100644
index 000000000..dda8dc0b5
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/google-drive.md
@@ -0,0 +1,64 @@
+---
+name: Google Drive
+description: Cloud-Speicherdienst, mit dem Sie Dateien und Ordner von jedem Mobilgerät, Tablet oder Computer speichern, teilen und gemeinsam bearbeiten können.
+logo: /logos/sample-logo.svg
+website: https://drive.google.com
+developer: google
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - 15 GB Speicherplatz (gemeinsam mit Gmail und Google Fotos)
+      - Dateien teilen und zusammenarbeiten
+      - Integration mit Google Docs, Sheets und Slides
+      - Mobiler Zugriff
+  - model: Google One Basic
+    price: €1,99
+    yearly_price: €19,99
+    features:
+      - 100 GB Speicherplatz
+      - Zugang zu Google-Experten
+      - Zusätzliche Mitgliedervorteile
+      - Familienfreigabe
+  - model: Google One Standard
+    price: €2,99
+    yearly_price: €29,99
+    features:
+      - 200 GB Speicherplatz
+      - Zugang zu Google-Experten
+      - Zusätzliche Mitgliedervorteile
+      - Familienfreigabe
+  - model: Google One Premium
+    price: €9,99
+    yearly_price: €99,99
+    features:
+      - 2 TB Speicherplatz
+      - Zugang zu Google-Experten
+      - Zusätzliche Mitgliedervorteile
+      - Familienfreigabe
+      - 10% Guthaben bei Einkäufen im Google Store
+features:
+  - "Speicherplatz: Sicherer Cloud-Speicher für alle Dateitypen"
+  - "Zugänglichkeit: Greifen Sie von jedem Gerät und überall auf Ihre Dateien zu"
+  - "Zusammenarbeit: Echtzeit-Bearbeitung und Kommentierung mit mehreren Benutzern"
+  - "Suche: Leistungsstarke Suchfunktionen, um jede Datei schnell zu finden"
+  - "Offline-Zugriff: Arbeiten Sie ohne Internetverbindung an Dateien"
+  - "Backup und Synchronisierung: Automatisches Backup wichtiger Ordner von Ihrem Computer"
+categories:
+  - cloud-storage
+  - productivity
+platforms:
+  - Web
+  - Windows
+  - macOS
+  - Android
+  - iOS
+supportedPlatforms:
+  - Web
+  - Windows
+  - macOS
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/google-maps.md b/apps-archived/techbase/apps/web/src/content/software/de/google-maps.md
new file mode 100644
index 000000000..714ad445a
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/google-maps.md
@@ -0,0 +1,44 @@
+---
+name: Google Maps
+description: Umfassender Kartendienst mit Navigation, Echtzeit-Verkehrsinformationen, Street View und lokalen Unternehmenseinträgen.
+logo: /logos/sample-logo.svg
+website: https://maps.google.com
+developer: google
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - Navigation und Routenplanung
+      - Echtzeit-Verkehrsinformationen
+      - Informationen zu öffentlichen Verkehrsmitteln
+      - Street View
+      - Lokale Unternehmenseinträge
+  - model: Maps Platform (API)
+    price: "Nutzungsbasiert"
+    yearly_price: "Je nach Nutzung"
+    features:
+      - Maps, Routes und Places APIs
+      - Benutzerdefinierte Kartenstile
+      - Fortschrittliche Routing-Algorithmen
+      - Standortdaten für Unternehmen
+      - 24/7-Support und SLA
+features:
+  - "Navigation: Schritt-für-Schritt-Anweisungen für Auto, zu Fuß, Fahrrad und öffentliche Verkehrsmittel"
+  - "Live-Verkehr: Echtzeit-Verkehrsdaten und Vorfallberichte"
+  - "Street View: 360°-Ansichten von Straßen auf der ganzen Welt"
+  - "Lokale Informationen: Restaurantbewertungen, Öffnungszeiten und Kontaktinformationen"
+  - "Offline-Karten: Herunterladen von Karten zur Nutzung ohne Internetverbindung"
+categories:
+  - navigation
+  - travel
+platforms:
+  - Web
+  - Android
+  - iOS
+supportedPlatforms:
+  - Web
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/ios.md b/apps-archived/techbase/apps/web/src/content/software/de/ios.md
new file mode 100644
index 000000000..95fe69268
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/ios.md
@@ -0,0 +1,32 @@
+---
+name: iOS
+description: Apples mobiles Betriebssystem, das exklusiv für iPhone entwickelt wurde, mit Fokus auf Sicherheit und nahtloser Ökosystem-Integration.
+logo: /logos/sample-logo.svg
+website: https://www.apple.com/de/ios/
+developer: apple
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - Kostenloses Betriebssystem für iPhone
+      - Regelmäßige Feature- und Sicherheitsupdates
+      - Zugang zum App Store
+      - Integration mit Apple-Diensten
+features:
+  - "Sicherheit: Starker Datenschutz und regelmäßige Sicherheitsupdates"
+  - "App Store: Kuratierter Marktplatz mit Millionen von Apps"
+  - "Ökosystem-Integration: Nahtlose Konnektivität mit anderen Apple-Geräten"
+  - "Leistung: Optimierte Hardware-Software-Integration"
+  - "Siri: Sprachassistent mit Gerätesteuerung und KI-Fähigkeiten"
+  - "iMessage: Ende-zu-Ende-verschlüsselte Nachrichten"
+  - "Updates: Konsistente langfristige Software-Unterstützung"
+  - "Barrierefreiheit: Umfassende Zugänglichkeitsfunktionen"
+categories:
+  - operating-system
+platforms:
+  - iPhone
+supportedPlatforms:
+  - iPhone
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/macos.md b/apps-archived/techbase/apps/web/src/content/software/de/macos.md
new file mode 100644
index 000000000..baa21e570
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/macos.md
@@ -0,0 +1,32 @@
+---
+name: macOS
+description: Apples Desktop-Betriebssystem, bekannt für seine benutzerfreundliche Oberfläche, Sicherheitsfunktionen und enge Integration mit anderen Apple-Produkten.
+logo: /logos/sample-logo.svg
+website: https://www.apple.com/de/macos/
+developer: apple
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - Kostenloses Betriebssystem für Mac-Computer
+      - Regelmäßige Feature- und Sicherheitsupdates
+      - Zugang zum Mac App Store
+      - Integration mit Apple-Diensten
+features:
+  - "Benutzeroberfläche: Intuitives Design mit Fokus auf Einfachheit und Benutzerfreundlichkeit"
+  - "Sicherheit: Integrierter Malware-Schutz und regelmäßige Sicherheitsupdates"
+  - "Ökosystem-Integration: Nahtlose Konnektivität mit iPhone, iPad und anderen Apple-Geräten"
+  - "Continuity: Handoff-Funktionen zwischen Mac und iOS-Geräten"
+  - "UNIX-Fundament: Basierend auf UNIX, bietet Stabilität und Entwicklerwerkzeuge"
+  - "App Store: Kuratierter Marktplatz mit Tausenden von Apps"
+  - "iCloud: Integrierter Cloud-Speicher und Synchronisierung"
+  - "Professionelle Tools: Native Unterstützung für kreative und professionelle Software"
+categories:
+  - operating-system
+platforms:
+  - Mac
+supportedPlatforms:
+  - Mac
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/office.md b/apps-archived/techbase/apps/web/src/content/software/de/office.md
new file mode 100644
index 000000000..4e6e1e294
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/office.md
@@ -0,0 +1,58 @@
+---
+name: Microsoft 365
+description: Produktivitätssuite, die Anwendungen wie Word, Excel, PowerPoint und Outlook sowie Cloud-Dienste wie OneDrive und Teams umfasst.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com/microsoft-365
+developer: microsoft
+pricing:
+  - model: Personal
+    price: €6,99
+    yearly_price: €69,99
+    features:
+      - Premium Office-Apps
+      - 1 TB OneDrive-Cloudspeicher
+      - Erweiterte Sicherheit
+      - Nutzung auf mehreren Geräten
+      - Für 1 Person
+  - model: Family
+    price: €9,99
+    yearly_price: €99,99
+    features:
+      - Premium Office-Apps
+      - 6 TB OneDrive-Cloudspeicher insgesamt
+      - Erweiterte Sicherheit
+      - Nutzung auf mehreren Geräten
+      - Für bis zu 6 Personen
+  - model: Business Standard
+    price: €12,50
+    yearly_price: €150,00
+    features:
+      - Premium Office-Apps
+      - 1 TB OneDrive-Cloudspeicher
+      - Exchange-E-Mail-Hosting
+      - Microsoft Teams
+      - Für geschäftliche Nutzung
+features:
+  - "Desktop- und Web-Apps: Zugriff auf Word, Excel, PowerPoint und Outlook"
+  - "Cloud-Speicher: OneDrive-Integration für Dateispeicherung und -freigabe"
+  - "Zusammenarbeit: Echtzeit-Zusammenarbeit und Freigabemöglichkeiten"
+  - "KI-Funktionen: Intelligente Unterstützung in Dokumenten, Präsentationen und Tabellen"
+  - "Vorlagen: Professionell gestaltete Vorlagen und Designs"
+  - "Sicherheit: Erweiterte Sicherheits- und Compliance-Tools"
+categories:
+  - productivity
+  - office-suite
+platforms:
+  - Windows
+  - macOS
+  - iOS
+  - Android
+  - Web
+supportedPlatforms:
+  - Windows
+  - macOS
+  - iOS
+  - Android
+  - Web
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/photoshop.md b/apps-archived/techbase/apps/web/src/content/software/de/photoshop.md
new file mode 100644
index 000000000..b70a46217
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/photoshop.md
@@ -0,0 +1,55 @@
+---
+name: Adobe Photoshop
+description: Branchenstandard-Software für Fotobearbeitung und -manipulation, entwickelt von Adobe.
+logo: /logos/sample-logo.svg
+website: https://www.adobe.com/de/products/photoshop.html
+developer: adobe
+pricing:
+  - model: Fotografie-Paket
+    price: €9,99
+    yearly_price: €119,88
+    features:
+      - Photoshop auf Desktop und iPad
+      - Lightroom
+      - 20 GB Cloud-Speicher
+      - Adobe Portfolio
+      - Adobe Fonts
+  - model: Einzelprodukt
+    price: €20,99
+    yearly_price: €251,88
+    features:
+      - Photoshop auf Desktop und iPad
+      - 100 GB Cloud-Speicher
+      - Adobe Portfolio
+      - Adobe Fonts
+      - Adobe Fresco
+  - model: Alle Apps (Creative Cloud)
+    price: €54,99
+    yearly_price: €659,88
+    features:
+      - Über 20 kreative Desktop- und Mobile-Apps
+      - 100 GB Cloud-Speicher
+      - Adobe Portfolio
+      - Adobe Fonts
+      - Premium-Funktionen
+features:
+  - "Ebenenbasierte Bearbeitung: Fortschrittliches Compositing mit Ebenen"
+  - "Auswahlwerkzeuge: Präzise Objektauswahl und Maskierung"
+  - "Retuschewerkzeuge: Professionelle Fotokorrekturen und -verbesserungen"
+  - "Neural Filter: KI-gestützte kreative Werkzeuge"
+  - "Camera Raw: Fortschrittliche RAW-Bildverarbeitung"
+  - "3D-Design: Erstellen und Verbessern von 3D-Inhalten"
+  - "Videobearbeitung: Grundlegende zeitachsenbasierte Videobearbeitung"
+  - "Typografie-Werkzeuge: Erweiterte Textgestaltung und -effekte"
+categories:
+  - design
+platforms:
+  - Windows
+  - macOS
+  - iPad
+supportedPlatforms:
+  - Windows
+  - macOS
+  - iPad
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/safari.md b/apps-archived/techbase/apps/web/src/content/software/de/safari.md
new file mode 100644
index 000000000..29f5745a9
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/safari.md
@@ -0,0 +1,31 @@
+---
+name: Apple Safari
+description: Der native Webbrowser von Apple, optimiert für macOS und iOS mit Fokus auf Leistung und Energieeffizienz.
+logo: /logos/sample-logo.svg
+website: https://www.apple.com/de/safari/
+developer: apple
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - Tiefe Integration ins Apple-Ökosystem
+      - Datenschutz und Tracking-Prävention
+      - Energieeffizientes Browsen
+      - Unterstützung für Web-Erweiterungen
+features:
+  - "Leistung: Optimierte JavaScript-Engine und Hardwarebeschleunigung"
+  - "Energieeffizienz: Entwickelt, um die Akkulaufzeit auf Apple-Geräten zu maximieren"
+  - "Datenschutz: Intelligente Tracking-Prävention und Datenschutzbericht"
+  - "Integration: Nahtloser Betrieb mit anderen Apple-Geräten und -Diensten"
+  - "Erweiterungen: Unterstützung für Safari-Erweiterungen von Drittanbietern über den App Store"
+categories:
+  - browser
+platforms:
+  - macOS
+  - iOS
+supportedPlatforms:
+  - macOS
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/sample-software.md b/apps-archived/techbase/apps/web/src/content/software/de/sample-software.md
new file mode 100644
index 000000000..11ef7fc53
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/sample-software.md
@@ -0,0 +1,44 @@
+---
+name: Beispiel Software
+description: Dies ist eine Beispiel-Software, um die Funktionalität der Plattform zu demonstrieren.
+logo: /logos/sample-logo.svg
+website: https://example.com
+pricing:
+  - model: Kostenlos
+    price: €0
+    yearly_price: €0
+    features:
+      - Grundlegende Funktionen
+      - Begrenzte Nutzung
+      - 1 Benutzer
+  - model: Pro
+    price: €9.99/Monat
+    yearly_price: €99.99/Jahr
+    features:
+      - Alle Funktionen
+      - Unbegrenzte Nutzung
+      - Premium Support
+      - 5 Benutzer
+  - model: Enterprise
+    price: €29.99/Monat
+    yearly_price: €299.99/Jahr
+    features:
+      - Alle Pro-Funktionen
+      - Dedizierter Support
+      - Unbegrenzte Benutzer
+      - Anpassbare Funktionen
+features:
+  - "Feature 1: Beschreibung des ersten Features"
+  - "Feature 2: Beschreibung des zweiten Features"
+  - "Feature 3: Beschreibung des dritten Features"
+  - "Feature 4: Beschreibung des vierten Features"
+categories:
+  - kategorie1
+  - kategorie2
+platforms:
+  - Windows
+  - macOS
+  - Linux
+  - Web
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/windows.md b/apps-archived/techbase/apps/web/src/content/software/de/windows.md
new file mode 100644
index 000000000..e14e157fb
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/windows.md
@@ -0,0 +1,53 @@
+---
+name: Microsoft Windows
+description: Betriebssystem für Personal Computer und andere Geräte, entwickelt und vermarktet von Microsoft.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com/windows
+developer: microsoft
+pricing:
+  - model: Home
+    price: €145
+    yearly_price: ""
+    features:
+      - Grundfunktionen für den Heimgebrauch
+      - Zugang zum Microsoft Store
+      - Windows Hello biometrische Sicherheit
+      - Windows Sicherheitsupdates
+  - model: Pro
+    price: €259
+    yearly_price: ""
+    features:
+      - Alle Home-Funktionen
+      - Remote Desktop
+      - BitLocker Geräteverschlüsselung
+      - Windows Information Protection
+      - Unternehmensverwaltungsfunktionen
+  - model: Pro for Workstations
+    price: €439
+    yearly_price: ""
+    features:
+      - Alle Pro-Funktionen
+      - Verbesserte Leistung
+      - Persistent Memory
+      - Unterstützung für Server-Hardware
+      - ReFS-Dateisystem
+features:
+  - "Startmenü: Anpassbare Oberfläche für den Zugriff auf Anwendungen und Dateien"
+  - "Microsoft Store: Integrierter Marktplatz für Anwendungen und Spiele"
+  - "Windows-Sicherheit: Integrierter Virenschutz und Sicherheitsschutz"
+  - "DirectX: Grafiktechnologie für Spiele und Multimedia"
+  - "OneDrive-Integration: Integrierter Cloud-Speicher und Synchronisierung"
+  - "Windows Hello: Biometrische Authentifizierung für sicheres Anmelden"
+categories:
+  - operating-system
+platforms:
+  - PC
+  - Laptop
+  - Tablet
+  - IoT-Geräte
+supportedPlatforms:
+  - x86
+  - x64
+  - ARM
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/de/word.md b/apps-archived/techbase/apps/web/src/content/software/de/word.md
new file mode 100644
index 000000000..bd8575bf1
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/de/word.md
@@ -0,0 +1,57 @@
+---
+name: Microsoft Word
+description: Führende Textverarbeitungssoftware zum Erstellen, Bearbeiten und Formatieren von Textdokumenten.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com/de-de/microsoft-365/word
+developer: microsoft
+pricing:
+  - model: Microsoft 365 Personal
+    price: €7,00
+    yearly_price: €69,00
+    features:
+      - Premium Office-Apps einschließlich Word
+      - 1 TB Cloud-Speicher
+      - Werbefreie E-Mail und Premium-Sicherheit
+      - Zugriff auf mehreren Geräten
+  - model: Microsoft 365 Family
+    price: €10,00
+    yearly_price: €99,00
+    features:
+      - Für bis zu 6 Personen
+      - Premium Office-Apps einschließlich Word
+      - 1 TB Cloud-Speicher pro Person
+      - Werbefreie E-Mail und Premium-Sicherheit
+  - model: Office Home & Student 2021
+    price: €149,00
+    yearly_price: €149,00
+    features:
+      - Einmaliger Kauf für 1 PC oder Mac
+      - Enthält Word, Excel und PowerPoint
+      - Microsoft Support für 60 Tage
+      - Keine Feature-Updates
+features:
+  - "Textverarbeitung: Erstellen und Bearbeiten professioneller Dokumente mit erweiterter Formatierung"
+  - "Vorlagen: Hunderte vorgefertigter Vorlagen für verschiedene Dokumenttypen"
+  - "Echtzeit-Zusammenarbeit: Mehrere Benutzer können Dokumente gleichzeitig bearbeiten"
+  - "Änderungen nachverfolgen: Überprüfen und Annehmen/Ablehnen von Bearbeitungen mehrerer Mitwirkender"
+  - "Intelligente Suche: Themen recherchieren, ohne das Dokument zu verlassen"
+  - "Übersetzung: Text oder ganze Dokumente zwischen Sprachen übersetzen"
+  - "Barrierefreiheitsprüfung: Sicherstellen, dass Dokumente für Menschen mit Behinderungen zugänglich sind"
+  - "Integration: Nahtlose Integration mit anderen Microsoft 365-Apps"
+categories:
+  - office-suite
+  - productivity
+platforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/acrobat-reader.md b/apps-archived/techbase/apps/web/src/content/software/en/acrobat-reader.md
new file mode 100644
index 000000000..b7ed86bab
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/acrobat-reader.md
@@ -0,0 +1,54 @@
+---
+name: Adobe Acrobat Reader
+description: The global standard for reliably viewing, printing, and commenting on PDF documents.
+logo: /logos/sample-logo.svg
+website: https://www.adobe.com/acrobat/pdf-reader.html
+developer: adobe
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - View and print PDFs
+      - Comment on PDFs
+      - Fill and sign forms
+      - Store and share files online
+  - model: Acrobat Standard DC
+    price: €14.99
+    yearly_price: €179.88
+    features:
+      - Create PDFs
+      - Edit text and images
+      - Convert PDFs to Office formats
+      - Combine multiple files into one PDF
+  - model: Acrobat Pro DC
+    price: €24.99
+    yearly_price: €299.88
+    features:
+      - All Standard features
+      - Compare two versions of a PDF
+      - Edit on iPad and mobile devices
+      - Advanced PDF editing and protection
+features:
+  - "PDF Viewing: View PDF content with high fidelity across devices"
+  - "Comments & Annotations: Mark up PDFs with highlighting and comments"
+  - "Form Filling: Complete fillable forms and add signatures"
+  - "Share & Review: Collect comments from multiple reviewers"
+  - "Mobile Access: View and annotate PDFs on mobile devices"
+  - "Cloud Storage: Access your PDFs from anywhere via Adobe Document Cloud"
+categories:
+  - document
+  - productivity
+platforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/android.md b/apps-archived/techbase/apps/web/src/content/software/en/android.md
new file mode 100644
index 000000000..0bc06291a
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/android.md
@@ -0,0 +1,40 @@
+---
+name: Android OS
+description: Google's open-source mobile operating system that powers smartphones, tablets, and other devices.
+logo: /logos/sample-logo.svg
+website: https://www.android.com/
+developer: google
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Free open-source operating system
+      - Access to Google Play Store
+      - Regular security updates
+      - Integration with Google services
+features:
+  - "Open Ecosystem: Open-source foundation with customization options"
+  - "Google Services: Deep integration with Google apps and services"
+  - "App Store: Access to millions of apps via Google Play Store"
+  - "Customization: Extensive personalization options for users and manufacturers"
+  - "Assistant: Google Assistant for voice commands and AI assistance"
+  - "Security: Regular security updates and built-in malware protection"
+  - "Multi-device: Supports phones, tablets, TVs, watches, and cars"
+  - "Developer Tools: Comprehensive SDK and developer resources"
+categories:
+  - operating-system
+platforms:
+  - Smartphones
+  - Tablets
+  - Smart TVs
+  - Wearables
+  - Automotive
+supportedPlatforms:
+  - Smartphones
+  - Tablets
+  - Smart TVs
+  - Wearables
+  - Automotive
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/chess-com.md b/apps-archived/techbase/apps/web/src/content/software/en/chess-com.md
new file mode 100644
index 000000000..8b85af215
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/chess-com.md
@@ -0,0 +1,55 @@
+---
+name: Chess.com
+description: The world's leading online chess platform with millions of players, tutorials, tournaments, and analysis tools.
+logo: /logos/sample-logo.svg
+website: https://www.chess.com
+screenshots:
+  - /screenshots/chess1.PNG
+  - /screenshots/chess2.PNG
+  - /screenshots/chess3.PNG
+  - /screenshots/chess4.PNG
+  - /screenshots/chess5.PNG
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Unlimited chess games
+      - Daily chess puzzles
+      - Video lessons
+      - Community forum
+  - model: Gold
+    price: €4.99/month
+    yearly_price: €49.99/year
+    features:
+      - All Free features
+      - Unlimited tactics puzzles
+      - 25 analysis per day
+      - No advertisements
+      - Advanced learning tools
+  - model: Platinum
+    price: €9.99/month
+    yearly_price: €99.99/year
+    features:
+      - All Gold features
+      - Unlimited analysis
+      - Premium videos and courses
+      - Advanced AI opponents
+      - Personalized training
+features:
+  - "Play: Chess against AI or players worldwide with various time controls"
+  - "Learn: Interactive lessons, opening and tactics training"
+  - "Analysis: Deep game analysis with engine support"
+  - "Tournaments: Daily and weekly online chess tournaments"
+  - "Community: Forums, clubs, and friendship system"
+categories:
+  - games
+  - category2
+platforms:
+  - Windows
+  - macOS
+  - iOS
+  - Android
+  - Web
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/chrome.md b/apps-archived/techbase/apps/web/src/content/software/en/chrome.md
new file mode 100644
index 000000000..53bde8750
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/chrome.md
@@ -0,0 +1,37 @@
+---
+name: Google Chrome
+description: Fast, secure browser developed by Google with built-in Google services integration.
+logo: /logos/sample-logo.svg
+website: https://www.google.com/chrome/
+developer: google
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Fast browsing experience
+      - Built-in phishing and malware protection
+      - Synchronization across devices
+      - Developer tools
+features:
+  - "Speed: Chrome is optimized for performance with a fast JavaScript engine"
+  - "Security: Automatic updates and sandboxed tabs for enhanced security"
+  - "Sync: Synchronize bookmarks, history, passwords, and settings across devices"
+  - "Extensions: Access to thousands of extensions via the Chrome Web Store"
+  - "Developer Tools: Comprehensive built-in tools for web developers"
+categories:
+  - browser
+platforms:
+  - Windows
+  - macOS
+  - Linux
+  - Android
+  - iOS
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Linux
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/excel.md b/apps-archived/techbase/apps/web/src/content/software/en/excel.md
new file mode 100644
index 000000000..7d5f2591d
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/excel.md
@@ -0,0 +1,57 @@
+---
+name: Microsoft Excel
+description: Powerful spreadsheet software with calculation, graphing tools, and pivot tables for data analysis.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com/microsoft-365/excel
+developer: microsoft
+pricing:
+  - model: Microsoft 365 Personal
+    price: €7.00
+    yearly_price: €69.00
+    features:
+      - Premium Office apps including Excel
+      - 1TB cloud storage
+      - Ad-free email and premium security
+      - Access on multiple devices
+  - model: Microsoft 365 Family
+    price: €10.00
+    yearly_price: €99.00
+    features:
+      - For up to 6 people
+      - Premium Office apps including Excel
+      - 1TB cloud storage per person
+      - Ad-free email and premium security
+  - model: Office Home & Student 2021
+    price: €149.00
+    yearly_price: €149.00
+    features:
+      - One-time purchase for 1 PC or Mac
+      - Includes Excel, Word, and PowerPoint
+      - Microsoft support for 60 days
+      - No feature updates
+features:
+  - "Spreadsheet Functions: Over 400 built-in functions for complex calculations"
+  - "Data Analysis: Powerful tools like Power Pivot and Power Query"
+  - "Data Visualization: Create charts, graphs, and conditional formatting"
+  - "PivotTables: Summarize and analyze large datasets quickly"
+  - "What-If Analysis: Tools for sensitivity analysis and forecasting"
+  - "Real-time Collaboration: Multiple users can edit spreadsheets simultaneously"
+  - "Excel on the Web: Access and edit spreadsheets from any browser"
+  - "Integration: Connect to multiple data sources and Microsoft 365 apps"
+categories:
+  - office-suite
+  - productivity
+platforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/firefox.md b/apps-archived/techbase/apps/web/src/content/software/en/firefox.md
new file mode 100644
index 000000000..60c851f47
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/firefox.md
@@ -0,0 +1,37 @@
+---
+name: Mozilla Firefox
+description: Open-source browser focused on privacy, customization, and web standards compliance.
+logo: /logos/sample-logo.svg
+website: https://www.mozilla.org/firefox/
+developer: mozilla
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Enhanced privacy protection
+      - Open source development
+      - Cross-platform synchronization
+      - Extensive customization options
+features:
+  - "Privacy: Enhanced Tracking Protection blocks third-party tracking cookies by default"
+  - "Open Source: Transparent development process with code available for public review"
+  - "Customization: Highly customizable interface with themes and add-ons"
+  - "Container Tabs: Separate browsing contexts to prevent cross-site tracking"
+  - "Reader View: Distraction-free reading experience for articles"
+categories:
+  - browser
+platforms:
+  - Windows
+  - macOS
+  - Linux
+  - Android
+  - iOS
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Linux
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/gmail.md b/apps-archived/techbase/apps/web/src/content/software/en/gmail.md
new file mode 100644
index 000000000..729bd4524
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/gmail.md
@@ -0,0 +1,50 @@
+---
+name: Gmail
+description: Google's email service offering smart features, spam protection, and seamless integration with other Google services.
+logo: /logos/sample-logo.svg
+website: https://gmail.com
+developer: google
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - 15 GB storage (shared with Google Drive)
+      - Smart email categorization
+      - Spam protection
+      - Mobile apps
+  - model: Google Workspace Business Starter
+    price: €5.20
+    yearly_price: €62.40
+    features:
+      - 30 GB storage per user
+      - Custom email address (@yourdomain)
+      - Video meetings up to 100 participants
+      - Security and management controls
+  - model: Google Workspace Business Standard
+    price: €10.40
+    yearly_price: €124.80
+    features:
+      - 2 TB storage per user
+      - Custom email address (@yourdomain)
+      - Video meetings up to 150 participants
+      - Recording and attendance tracking
+features:
+  - "Smart Organization: Automatically sorts emails into Primary, Social, and Promotions tabs"
+  - "Search: Powerful search functionality to find any email, even with attachments"
+  - "Integration: Seamless integration with Google Calendar, Drive, and other Google services"
+  - "Security: Advanced phishing protection and suspicious activity detection"
+  - "Offline Access: Read, respond to, and search emails without an internet connection"
+categories:
+  - email
+  - productivity
+platforms:
+  - Web
+  - Android
+  - iOS
+supportedPlatforms:
+  - Web
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/google-drive.md b/apps-archived/techbase/apps/web/src/content/software/en/google-drive.md
new file mode 100644
index 000000000..c85aceb61
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/google-drive.md
@@ -0,0 +1,64 @@
+---
+name: Google Drive
+description: Cloud storage service that allows you to save, share, and collaborate on files and folders from any mobile device, tablet, or computer.
+logo: /logos/sample-logo.svg
+website: https://drive.google.com
+developer: google
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - 15 GB storage (shared with Gmail and Google Photos)
+      - File sharing and collaboration
+      - Integration with Google Docs, Sheets, and Slides
+      - Mobile access
+  - model: Google One Basic
+    price: €1.99
+    yearly_price: €19.99
+    features:
+      - 100 GB storage
+      - Access to Google experts
+      - Extra member benefits
+      - Family sharing
+  - model: Google One Standard
+    price: €2.99
+    yearly_price: €29.99
+    features:
+      - 200 GB storage
+      - Access to Google experts
+      - Extra member benefits
+      - Family sharing
+  - model: Google One Premium
+    price: €9.99
+    yearly_price: €99.99
+    features:
+      - 2 TB storage
+      - Access to Google experts
+      - Extra member benefits
+      - Family sharing
+      - 10% back in store credit on Google Store purchases
+features:
+  - "Storage: Secure cloud storage for all file types"
+  - "Accessibility: Access your files from any device, anywhere"
+  - "Collaboration: Real-time editing and commenting with multiple users"
+  - "Search: Powerful search capabilities to find any file quickly"
+  - "Offline Access: Work on files without an internet connection"
+  - "Backup and Sync: Automatically back up important folders from your computer"
+categories:
+  - cloud-storage
+  - productivity
+platforms:
+  - Web
+  - Windows
+  - macOS
+  - Android
+  - iOS
+supportedPlatforms:
+  - Web
+  - Windows
+  - macOS
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/google-maps.md b/apps-archived/techbase/apps/web/src/content/software/en/google-maps.md
new file mode 100644
index 000000000..d1e81a9c7
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/google-maps.md
@@ -0,0 +1,44 @@
+---
+name: Google Maps
+description: Comprehensive mapping service offering navigation, real-time traffic information, street view, and local business listings.
+logo: /logos/sample-logo.svg
+website: https://maps.google.com
+developer: google
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Navigation and directions
+      - Real-time traffic information
+      - Public transit information
+      - Street View
+      - Local business listings
+  - model: Maps Platform (API)
+    price: "Pay as you go"
+    yearly_price: "Based on usage"
+    features:
+      - Maps, Routes, and Places APIs
+      - Custom map styling
+      - Advanced routing algorithms
+      - Business location data
+      - 24/7 support and SLA
+features:
+  - "Navigation: Turn-by-turn directions for driving, walking, cycling, and public transit"
+  - "Live Traffic: Real-time traffic data and incident reports"
+  - "Street View: 360° views of streets around the world"
+  - "Local Information: Restaurant reviews, business hours, and contact information"
+  - "Offline Maps: Download maps for use without an internet connection"
+categories:
+  - navigation
+  - travel
+platforms:
+  - Web
+  - Android
+  - iOS
+supportedPlatforms:
+  - Web
+  - Android
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/ios.md b/apps-archived/techbase/apps/web/src/content/software/en/ios.md
new file mode 100644
index 000000000..d8e568db9
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/ios.md
@@ -0,0 +1,32 @@
+---
+name: iOS
+description: Apple's mobile operating system designed exclusively for iPhone with a focus on security and seamless ecosystem integration.
+logo: /logos/sample-logo.svg
+website: https://www.apple.com/ios/
+developer: apple
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Free operating system for iPhone
+      - Regular feature and security updates
+      - Access to App Store
+      - Integration with Apple services
+features:
+  - "Security: Strong privacy protections and regular security updates"
+  - "App Store: Curated marketplace with millions of apps"
+  - "Ecosystem Integration: Seamless connectivity with other Apple devices"
+  - "Performance: Optimized hardware-software integration"
+  - "Siri: Voice assistant with device control and AI capabilities"
+  - "iMessage: End-to-end encrypted messaging"
+  - "Updates: Consistent long-term software support"
+  - "Accessibility: Comprehensive accessibility features"
+categories:
+  - operating-system
+platforms:
+  - iPhone
+supportedPlatforms:
+  - iPhone
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/macos.md b/apps-archived/techbase/apps/web/src/content/software/en/macos.md
new file mode 100644
index 000000000..1353e43c2
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/macos.md
@@ -0,0 +1,32 @@
+---
+name: macOS
+description: Apple's desktop operating system known for its user-friendly interface, security features, and tight integration with other Apple products.
+logo: /logos/sample-logo.svg
+website: https://www.apple.com/macos/
+developer: apple
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Free operating system for Mac computers
+      - Regular feature and security updates
+      - Access to Mac App Store
+      - Integration with Apple services
+features:
+  - "User Interface: Intuitive design focused on simplicity and usability"
+  - "Security: Built-in malware protection and regular security updates"
+  - "Ecosystem Integration: Seamless connectivity with iPhone, iPad and other Apple devices"
+  - "Continuity: Handoff features between Mac and iOS devices"
+  - "UNIX Foundation: Based on UNIX, providing stability and developer tools"
+  - "App Store: Curated marketplace with thousands of apps"
+  - "iCloud: Built-in cloud storage and synchronization"
+  - "Professional Tools: Native support for creative and professional software"
+categories:
+  - operating-system
+platforms:
+  - Mac
+supportedPlatforms:
+  - Mac
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/office.md b/apps-archived/techbase/apps/web/src/content/software/en/office.md
new file mode 100644
index 000000000..4e377c6ff
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/office.md
@@ -0,0 +1,58 @@
+---
+name: Microsoft 365
+description: Productivity suite that includes applications like Word, Excel, PowerPoint, and Outlook, along with cloud services such as OneDrive and Teams.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com/microsoft-365
+developer: microsoft
+pricing:
+  - model: Personal
+    price: €6.99
+    yearly_price: €69.99
+    features:
+      - Premium Office apps
+      - 1TB OneDrive cloud storage
+      - Advanced security
+      - Use on multiple devices
+      - For 1 person
+  - model: Family
+    price: €9.99
+    yearly_price: €99.99
+    features:
+      - Premium Office apps
+      - 6TB total OneDrive cloud storage
+      - Advanced security
+      - Use on multiple devices
+      - For up to 6 people
+  - model: Business Standard
+    price: €12.50
+    yearly_price: €150.00
+    features:
+      - Premium Office apps
+      - 1TB OneDrive cloud storage
+      - Exchange email hosting
+      - Microsoft Teams
+      - For business use
+features:
+  - "Desktop and Web Apps: Access to Word, Excel, PowerPoint, and Outlook"
+  - "Cloud Storage: OneDrive integration for file storage and sharing"
+  - "Collaboration: Real-time co-authoring and sharing capabilities"
+  - "AI Features: Smart assistance in documents, presentations, and spreadsheets"
+  - "Templates: Professionally designed templates and designs"
+  - "Security: Advanced security and compliance tools"
+categories:
+  - productivity
+  - office-suite
+platforms:
+  - Windows
+  - macOS
+  - iOS
+  - Android
+  - Web
+supportedPlatforms:
+  - Windows
+  - macOS
+  - iOS
+  - Android
+  - Web
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/photoshop.md b/apps-archived/techbase/apps/web/src/content/software/en/photoshop.md
new file mode 100644
index 000000000..6fd967bd2
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/photoshop.md
@@ -0,0 +1,55 @@
+---
+name: Adobe Photoshop
+description: Industry-standard photo editing and manipulation software developed by Adobe.
+logo: /logos/sample-logo.svg
+website: https://www.adobe.com/products/photoshop.html
+developer: adobe
+pricing:
+  - model: Photography Plan
+    price: €9.99
+    yearly_price: €119.88
+    features:
+      - Photoshop on desktop and iPad
+      - Lightroom
+      - 20GB cloud storage
+      - Adobe Portfolio
+      - Adobe Fonts
+  - model: Single App
+    price: €20.99
+    yearly_price: €251.88
+    features:
+      - Photoshop on desktop and iPad
+      - 100GB cloud storage
+      - Adobe Portfolio
+      - Adobe Fonts
+      - Adobe Fresco
+  - model: All Apps (Creative Cloud)
+    price: €54.99
+    yearly_price: €659.88
+    features:
+      - 20+ creative desktop and mobile apps
+      - 100GB cloud storage
+      - Adobe Portfolio
+      - Adobe Fonts
+      - Premium features
+features:
+  - "Layer-based editing: Advanced compositing with layers"
+  - "Selection tools: Precise object selection and masking"
+  - "Retouching tools: Professional photo correction and enhancement"
+  - "Neural Filters: AI-powered creative tools"
+  - "Camera Raw: Advanced raw image processing"
+  - "3D design: Create and enhance 3D content"
+  - "Video editing: Basic timeline-based video editing"
+  - "Typography tools: Advanced text layout and effects"
+categories:
+  - design
+platforms:
+  - Windows
+  - macOS
+  - iPad
+supportedPlatforms:
+  - Windows
+  - macOS
+  - iPad
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/safari.md b/apps-archived/techbase/apps/web/src/content/software/en/safari.md
new file mode 100644
index 000000000..67f057d03
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/safari.md
@@ -0,0 +1,31 @@
+---
+name: Apple Safari
+description: Apple's native web browser optimized for macOS and iOS with focus on performance and energy efficiency.
+logo: /logos/sample-logo.svg
+website: https://www.apple.com/safari/
+developer: apple
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Deep integration with Apple ecosystem
+      - Privacy and tracking prevention
+      - Energy-efficient browsing
+      - Web extensions support
+features:
+  - "Performance: Optimized JavaScript engine and hardware acceleration"
+  - "Energy Efficiency: Designed to maximize battery life on Apple devices"
+  - "Privacy: Intelligent Tracking Prevention and Privacy Report"
+  - "Integration: Seamless operation with other Apple devices and services"
+  - "Extensions: Support for third-party Safari extensions through the App Store"
+categories:
+  - browser
+platforms:
+  - macOS
+  - iOS
+supportedPlatforms:
+  - macOS
+  - iOS
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/sample-software.md b/apps-archived/techbase/apps/web/src/content/software/en/sample-software.md
new file mode 100644
index 000000000..5be10992e
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/sample-software.md
@@ -0,0 +1,44 @@
+---
+name: Sample Software
+description: This is a sample software to demonstrate the functionality of the platform.
+logo: /logos/sample-logo.svg
+website: https://example.com
+pricing:
+  - model: Free
+    price: €0
+    yearly_price: €0
+    features:
+      - Basic features
+      - Limited usage
+      - 1 user
+  - model: Pro
+    price: €9.99/month
+    yearly_price: €99.99/year
+    features:
+      - All features
+      - Unlimited usage
+      - Premium support
+      - 5 users
+  - model: Enterprise
+    price: €29.99/month
+    yearly_price: €299.99/year
+    features:
+      - All Pro features
+      - Dedicated support
+      - Unlimited users
+      - Customizable features
+features:
+  - "Feature 1: Description of the first feature"
+  - "Feature 2: Description of the second feature"
+  - "Feature 3: Description of the third feature"
+  - "Feature 4: Description of the fourth feature"
+categories:
+  - category1
+  - category2
+platforms:
+  - Windows
+  - macOS
+  - Linux
+  - Web
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/windows.md b/apps-archived/techbase/apps/web/src/content/software/en/windows.md
new file mode 100644
index 000000000..5a27610a5
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/windows.md
@@ -0,0 +1,53 @@
+---
+name: Microsoft Windows
+description: Operating system for personal computers and other devices, developed and marketed by Microsoft.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com/windows
+developer: microsoft
+pricing:
+  - model: Home
+    price: €145
+    yearly_price: ""
+    features:
+      - Basic functions for home use
+      - Microsoft Store access
+      - Windows Hello biometric security
+      - Windows security updates
+  - model: Pro
+    price: €259
+    yearly_price: ""
+    features:
+      - All Home features
+      - Remote Desktop
+      - BitLocker device encryption
+      - Windows Information Protection
+      - Business management features
+  - model: Pro for Workstations
+    price: €439
+    yearly_price: ""
+    features:
+      - All Pro features
+      - Enhanced performance
+      - Persistent memory
+      - Server-grade hardware support
+      - ReFS file system
+features:
+  - "Start Menu: Customizable interface for accessing applications and files"
+  - "Microsoft Store: Built-in marketplace for applications and games"
+  - "Windows Security: Integrated antivirus and security protection"
+  - "DirectX: Graphics technology for gaming and multimedia"
+  - "OneDrive Integration: Built-in cloud storage and synchronization"
+  - "Windows Hello: Biometric authentication for secure login"
+categories:
+  - operating-system
+platforms:
+  - PC
+  - Laptop
+  - Tablet
+  - IoT devices
+supportedPlatforms:
+  - x86
+  - x64
+  - ARM
+lastUpdated: 2025-03-28
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/software/en/word.md b/apps-archived/techbase/apps/web/src/content/software/en/word.md
new file mode 100644
index 000000000..f526a88e3
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/software/en/word.md
@@ -0,0 +1,57 @@
+---
+name: Microsoft Word
+description: Leading word processor software for creating, editing and formatting text documents.
+logo: /logos/sample-logo.svg
+website: https://www.microsoft.com/microsoft-365/word
+developer: microsoft
+pricing:
+  - model: Microsoft 365 Personal
+    price: €7.00
+    yearly_price: €69.00
+    features:
+      - Premium Office apps including Word
+      - 1TB cloud storage
+      - Ad-free email and premium security
+      - Access on multiple devices
+  - model: Microsoft 365 Family
+    price: €10.00
+    yearly_price: €99.00
+    features:
+      - For up to 6 people
+      - Premium Office apps including Word
+      - 1TB cloud storage per person
+      - Ad-free email and premium security
+  - model: Office Home & Student 2021
+    price: €149.00
+    yearly_price: €149.00
+    features:
+      - One-time purchase for 1 PC or Mac
+      - Includes Word, Excel, and PowerPoint
+      - Microsoft support for 60 days
+      - No feature updates
+features:
+  - "Word Processing: Create and edit professional documents with advanced formatting"
+  - "Templates: Hundreds of pre-designed templates for various document types"
+  - "Real-time Collaboration: Multiple users can edit documents simultaneously"
+  - "Track Changes: Review and accept/reject edits from multiple contributors"
+  - "Smart Lookup: Research topics without leaving the document"
+  - "Translation: Translate text or entire documents between languages"
+  - "Accessibility Checker: Ensure documents are accessible to people with disabilities"
+  - "Integration: Seamless integration with other Microsoft 365 apps"
+categories:
+  - office-suite
+  - productivity
+platforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+supportedPlatforms:
+  - Windows
+  - macOS
+  - Android
+  - iOS
+  - Web
+lastUpdated: 2025-03-29
+---
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/translations/de.json b/apps-archived/techbase/apps/web/src/content/translations/de.json
new file mode 100644
index 000000000..b9224725d
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/translations/de.json
@@ -0,0 +1,76 @@
+{
+  "common": {
+    "home": "Startseite",
+    "compare": "Vergleichen",
+    "categories": "Kategorien",
+    "developers": "Entwickler",
+    "software": "Software",
+    "about": "Über uns",
+    "contact": "Kontakt",
+    "search": "Suchen",
+    "results": "Ergebnisse",
+    "explore": "Entdecken",
+    "all": "Alle"
+  },
+  "homepage": {
+    "title": "TechBase - Die zentrale Plattform für Software-Vergleiche",
+    "subtitle": "Finden, vergleichen und bewerten Sie Software-Lösungen",
+    "featured": "Empfohlene Software",
+    "categories": "Software-Kategorien",
+    "recent": "Kürzlich hinzugefügt",
+    "software": "Software"
+  },
+  "developer": {
+    "founded": "Gegründet",
+    "headquarters": "Hauptsitz",
+    "software": "Software von",
+    "allSoftware": "Alle Software",
+    "employees": "Mitarbeiter",
+    "revenue": "Jahresumsatz",
+    "keyProducts": "Hauptprodukte",
+    "socialMedia": "Soziale Medien",
+    "industry": "Branche",
+    "softwareByCategory": "Software nach Kategorie",
+    "country": "Land",
+    "compare": "Vergleichen",
+    "compareDescription": "Vergleichen Sie diesen Entwickler mit anderen",
+    "inlineCompare": "Direkt vergleichen",
+    "selectAnother": "Anderen Entwickler auswählen"
+  },
+  "software": {
+    "pricing": "Preismodelle",
+    "features": "Funktionen",
+    "platforms": "Plattformen",
+    "lastUpdated": "Zuletzt aktualisiert",
+    "vote": "Bewerten",
+    "comment": "Kommentieren",
+    "compare": "Vergleichen",
+    "monthlyPrice": "Monatlich",
+    "yearlyPrice": "Jährlich",
+    "compareDescription": "Vergleichen Sie diese Software mit anderen, um die beste Lösung für Ihre Bedürfnisse zu finden.",
+    "screenshots": "Screenshots",
+    "inlineCompare": "Direkt vergleichen",
+    "inlineCompareDescription": "Wählen Sie eine andere Software zum direkten Vergleich",
+    "selectAnother": "Andere Software auswählen",
+    "expandView": "Ansicht maximieren",
+    "minimizeView": "Ansicht minimieren"
+  },
+  "voting": {
+    "usability": "Benutzerfreundlichkeit",
+    "features": "Funktionsumfang",
+    "performance": "Leistung",
+    "support": "Support",
+    "value": "Preis-Leistung",
+    "submit": "Bewertung abschicken",
+    "thankYou": "Vielen Dank für Ihre Bewertung!"
+  },
+  "comments": {
+    "title": "Kommentare",
+    "writeComment": "Kommentar schreiben",
+    "yourName": "Ihr Name",
+    "yourComment": "Ihr Kommentar",
+    "submit": "Kommentar abschicken",
+    "moderation": "Ihr Kommentar wird nach der Moderation veröffentlicht.",
+    "noComments": "Noch keine Kommentare vorhanden."
+  }
+}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/content/translations/en.json b/apps-archived/techbase/apps/web/src/content/translations/en.json
new file mode 100644
index 000000000..fee5f1af5
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/content/translations/en.json
@@ -0,0 +1,76 @@
+{
+  "common": {
+    "home": "Home",
+    "compare": "Compare",
+    "categories": "Categories",
+    "developers": "Developers",
+    "software": "Software",
+    "about": "About",
+    "contact": "Contact",
+    "search": "Search",
+    "results": "Results",
+    "explore": "Explore",
+    "all": "All"
+  },
+  "homepage": {
+    "title": "TechBase - The central platform for software comparisons",
+    "subtitle": "Find, compare, and rate software solutions",
+    "featured": "Featured Software",
+    "categories": "Software Categories",
+    "recent": "Recently Added",
+    "software": "Software"
+  },
+  "developer": {
+    "founded": "Founded",
+    "headquarters": "Headquarters",
+    "software": "Software by",
+    "allSoftware": "All Software",
+    "employees": "Employees",
+    "revenue": "Annual Revenue",
+    "keyProducts": "Key Products",
+    "socialMedia": "Social Media",
+    "industry": "Industry",
+    "softwareByCategory": "Software by Category",
+    "country": "Country",
+    "compare": "Compare",
+    "compareDescription": "Compare this developer with others",
+    "inlineCompare": "Compare Inline",
+    "selectAnother": "Select Another Developer"
+  },
+  "software": {
+    "pricing": "Pricing Models",
+    "features": "Features",
+    "platforms": "Platforms",
+    "lastUpdated": "Last Updated",
+    "vote": "Rate",
+    "comment": "Comment",
+    "compare": "Compare",
+    "monthlyPrice": "Monthly",
+    "yearlyPrice": "Yearly",
+    "compareDescription": "Compare this software with others to find the best solution for your needs.",
+    "screenshots": "Screenshots",
+    "inlineCompare": "Compare Inline",
+    "inlineCompareDescription": "Select another software for side-by-side comparison",
+    "selectAnother": "Select Another Software",
+    "expandView": "Expand View",
+    "minimizeView": "Minimize View"
+  },
+  "voting": {
+    "usability": "Usability",
+    "features": "Features",
+    "performance": "Performance",
+    "support": "Support",
+    "value": "Value for Money",
+    "submit": "Submit Rating",
+    "thankYou": "Thank you for your rating!"
+  },
+  "comments": {
+    "title": "Comments",
+    "writeComment": "Write a Comment",
+    "yourName": "Your Name",
+    "yourComment": "Your Comment",
+    "submit": "Submit Comment",
+    "moderation": "Your comment will be published after moderation.",
+    "noComments": "No comments yet."
+  }
+}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/layouts/AdminLayout.astro b/apps-archived/techbase/apps/web/src/layouts/AdminLayout.astro
new file mode 100644
index 000000000..d46ad4455
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/layouts/AdminLayout.astro
@@ -0,0 +1,102 @@
+---
+import '../styles/global.css';
+
+export interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title} | TechBase Admin</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <!-- Initial dark mode script to avoid flash of incorrect theme -->
+    <script is:inline>
+      // On page load, check for theme preference in localStorage
+      const theme = (() => {
+        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+          return localStorage.getItem('theme');
+        }
+        // Default to dark theme
+        return 'dark';
+      })();
+            
+      // Apply theme class immediately to avoid flash
+      if (theme === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    </script>
+  </head>
+  <body class="bg-gray-100 dark:bg-gray-900 min-h-screen transition-colors duration-200">
+    <div class="flex min-h-screen">
+      <!-- Sidebar -->
+      <aside class="w-64 bg-gray-800 dark:bg-gray-950 text-white fixed h-full hidden md:block transition-colors duration-200">
+        <div class="p-6">
+          <h1 class="text-2xl font-bold mb-6">TechBase Admin</h1>
+          
+          <nav class="space-y-2">
+            <a href="/admin" class="block py-2.5 px-4 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-200">
+              Dashboard
+            </a>
+            <a href="/admin/comments" class="block py-2.5 px-4 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-200">
+              Comments
+            </a>
+            <a href="/" class="block py-2.5 px-4 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-200">
+              Back to Site
+            </a>
+          </nav>
+        </div>
+      </aside>
+      
+      <!-- Mobile navbar -->
+      <div class="md:hidden bg-gray-800 dark:bg-gray-950 text-white w-full fixed z-10 transition-colors duration-200">
+        <div class="flex items-center justify-between p-4">
+          <h1 class="text-xl font-bold">TechBase Admin</h1>
+          
+          <button class="p-2" id="mobile-menu-button">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+        
+        <div class="hidden p-4 bg-gray-700 dark:bg-gray-800" id="mobile-menu">
+          <nav class="space-y-2">
+            <a href="/admin" class="block py-2 px-4 rounded hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-200">
+              Dashboard
+            </a>
+            <a href="/admin/comments" class="block py-2 px-4 rounded hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-200">
+              Comments
+            </a>
+            <a href="/" class="block py-2 px-4 rounded hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-200">
+              Back to Site
+            </a>
+          </nav>
+        </div>
+      </div>
+      
+      <!-- Main content -->
+      <main class="flex-1 p-6 md:p-10 md:ml-64 pt-20 md:pt-10">
+        <div class="max-w-7xl mx-auto">
+          <h1 class="text-3xl font-bold mb-6 dark:text-white">{title}</h1>
+          
+          <slot />
+        </div>
+      </main>
+    </div>
+    
+    <script>
+      document.getElementById('mobile-menu-button')?.addEventListener('click', () => {
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenu?.classList.toggle('hidden');
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/layouts/BaseLayout.astro b/apps-archived/techbase/apps/web/src/layouts/BaseLayout.astro
new file mode 100644
index 000000000..3bb566902
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/layouts/BaseLayout.astro
@@ -0,0 +1,106 @@
+---
+import '../styles/global.css';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+
+export interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description = 'TechBase - Software-Vergleiche, Bewertungen und mehr' } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="de" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title} | TechBase</title>
+    <meta name="description" content={description} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <style is:inline>
+      /* Sofortige Anwendung des Dark-Modes, um Flackern zu vermeiden */
+      html.dark {
+        background-color: #111827; /* bg-gray-900 */
+        color: #f3f4f6; /* text-gray-100 */
+      }
+      
+      html.dark body {
+        background-color: #111827; /* bg-gray-900 */
+        color: #f3f4f6; /* text-gray-100 */
+      }
+      
+      /* Header-spezifische Stile */
+      html.dark header {
+        background-color: #1f2937 !important; /* dark:bg-gray-800 */
+      }
+      
+      /* Footer-spezifische Stile */
+      html.dark footer {
+        background-color: #1f2937 !important; /* bg-gray-800 */
+      }
+      
+      /* Main-Bereich */
+      html.dark main {
+        background-color: #111827; /* bg-gray-900 */
+      }
+      
+      /* Card-Hintergründe */
+      html.dark .bg-white {
+        background-color: #1f2937 !important; /* dark:bg-gray-800 */
+      }
+      
+      /* Text-Farben */
+      html.dark .text-gray-700 {
+        color: #d1d5db !important; /* dark:text-gray-300 */
+      }
+      
+      /* Extra spezifische Stile */
+      html.dark .shadow-sm,
+      html.dark .shadow-md {
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important;
+      }
+    </style>
+    <!-- Initial dark mode script to avoid flash of incorrect theme -->
+    <script is:inline>
+      // Sofort den Dark Mode setzen
+      document.documentElement.classList.add('dark');
+      
+      // Anschließend, wenn Dokument geladen ist, die Einstellung aus localStorage überprüfen
+      document.addEventListener('DOMContentLoaded', () => {
+        // Check for theme preference in localStorage
+        const theme = (() => {
+          if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+            return localStorage.getItem('theme');
+          }
+          // Default to dark theme
+          return 'dark';
+        })();
+              
+        // Apply theme class based on local storage
+        if (theme === 'dark') {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+      });
+    </script>
+    
+    <!-- Debug-Skript für Entwicklung -->
+    <script is:inline src="/debug.js"></script>
+    
+    <!-- Alpine.js -->
+    <script is:inline defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    
+    <!-- Eigene JS-Utilities -->
+    <script is:inline src="/software.js"></script>
+  </head>
+  <body class="min-h-screen flex flex-col transition-colors duration-200 ease-in-out relative overflow-x-hidden">
+    <Header />
+    <main class="flex-grow w-full">
+      <slot />
+    </main>
+    <Footer />
+  </body>
+</html>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/layouts/Layout.astro b/apps-archived/techbase/apps/web/src/layouts/Layout.astro
new file mode 100644
index 000000000..e455c6106
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/layouts/Layout.astro
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro Basics</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+
+<style>
+	html,
+	body {
+		margin: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>
diff --git a/apps-archived/techbase/apps/web/src/pages/[lang]/categories.astro b/apps-archived/techbase/apps/web/src/pages/[lang]/categories.astro
new file mode 100644
index 000000000..c717da7ec
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/[lang]/categories.astro
@@ -0,0 +1,85 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { loadTranslations } from '../../utils/i18n';
+import { i18nConfig } from '../../content/config';
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  return i18nConfig.locales.map(locale => {
+    return {
+      params: { lang: locale },
+      props: { locale }
+    };
+  });
+}
+
+const { locale } = Astro.props;
+const t = await loadTranslations(locale);
+
+// Fetch categories from content collections
+const allCategories = await getCollection('categories');
+
+// Filter categories by locale
+const categories = allCategories
+  .filter(entry => entry.id.startsWith(locale + '/'))
+  .map(entry => {
+    const id = entry.id.split('/')[1].replace('.md', ''); // Get the id part after locale/ and remove .md extension
+    return {
+      id,
+      ...entry.data,
+      // This would typically come from a database count
+      count: 5 
+    };
+  });
+---
+
+<BaseLayout title={t.common.categories}>
+  <div class="container mx-auto px-4 py-8">
+    <h1 class="text-3xl font-bold mb-8 text-center">{t.common.categories}</h1>
+    
+    {categories.length > 0 ? (
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {categories.map(category => (
+          <a href={`/${locale}/category/${category.id}`} class="block group">
+            <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-100 transition-all group-hover:shadow-md h-full">
+              <div class="p-6">
+                <div class="flex items-center mb-4">
+                  {category.icon && (
+                    <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
+                      <span class="text-primary text-2xl">{category.icon}</span>
+                    </div>
+                  )}
+                  
+                  <h3 class="text-xl font-bold group-hover:text-primary">
+                    {category.name}
+                  </h3>
+                </div>
+                
+                <p class="text-gray-600">
+                  {category.description}
+                </p>
+              </div>
+              
+              <div class="bg-gray-50 px-6 py-3 border-t border-gray-100">
+                <div class="flex justify-between items-center">
+                  <span class="text-sm text-gray-500">
+                    {category.count || 0} Software
+                  </span>
+                  
+                  <span class="text-primary group-hover:underline">
+                    {t.common.explore} →
+                  </span>
+                </div>
+              </div>
+            </div>
+          </a>
+        ))}
+      </div>
+    ) : (
+      <div class="text-center py-16 bg-gray-50 rounded-lg">
+        <p class="text-lg text-gray-600 mb-4">Noch keine Kategorien verfügbar.</p>
+        <p class="text-gray-500">Schauen Sie später wieder vorbei.</p>
+      </div>
+    )}
+  </div>
+</BaseLayout>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/[lang]/category/[id].astro b/apps-archived/techbase/apps/web/src/pages/[lang]/category/[id].astro
new file mode 100644
index 000000000..d33b18b89
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/[lang]/category/[id].astro
@@ -0,0 +1,263 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import SoftwareCard from '../../../components/SoftwareCard.astro';
+import FilterSidebar from '../../../components/FilterSidebar.astro';
+import { loadTranslations } from '../../../utils/i18n';
+import { i18nConfig } from '../../../content/config';
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  const allCategories = await getCollection('categories');
+  
+  const paths = [];
+  for (const entry of allCategories) {
+    const [locale, id] = entry.id.split('/');
+    
+    // Remove .md extension if present
+    const cleanId = id.replace('.md', '');
+    
+    paths.push({
+      params: { lang: locale, id: cleanId },
+      props: { entry, locale, id: cleanId }
+    });
+  }
+  
+  return paths;
+}
+
+const { entry, locale, id } = Astro.props;
+const t = await loadTranslations(locale);
+
+// Get category data from the entry
+let category;
+const allCategories = await getCollection('categories');
+const categoryEntry = allCategories.find(cat => 
+  cat.id === `${locale}/${id}` || cat.id === `${locale}/${id}.md`
+);
+
+if (categoryEntry) {
+  category = {
+    id,
+    ...categoryEntry.data
+  };
+} else {
+  return new Response('Category not found', { status: 404 });
+}
+
+// Get software in this category
+const allSoftware = await getCollection('software');
+const softwareList = allSoftware
+  .filter(software => {
+    // Only include software matching this locale
+    if (!software.id.startsWith(locale + '/')) return false;
+    
+    // Only include software that has this category
+    return software.data.categories.includes(id) || 
+           software.data.categories.includes(category.name);
+  })
+  .map(software => {
+    const softwareId = software.id.split('/')[1];
+    return {
+      id: softwareId,
+      ...software.data,
+      // In a real implementation, these metrics would come from Supabase
+      metrics: {
+        easeOfUse: { average: 4.2, count: 15 },
+        featureRichness: { average: 3.8, count: 12 },
+        valueForMoney: { average: 4.5, count: 18 },
+        support: { average: 3.5, count: 10 },
+        reliability: { average: 4.0, count: 14 }
+      }
+    };
+  });
+
+// Get all unique platforms from the software list for filtering
+const platforms = [...new Set(softwareList.flatMap(software => software.platforms || []))];
+
+// Get the categories again for filtering
+const categoriesCollection = await getCollection('categories');
+// Get additional related categories for filtering
+const relatedCategories = categoriesCollection
+  .filter(cat => {
+    const catId = cat.id.split('/')[1].replace('.md', '');
+    return cat.id.startsWith(locale + '/') && catId !== id;
+  })
+  .map(cat => ({
+    id: cat.id.split('/')[1].replace('.md', ''),
+    name: cat.data.name
+  }));
+---
+
+<BaseLayout title={category.name}>
+  <!-- Hero section with category info -->
+  <section class="relative py-16 bg-gradient-to-br from-primary to-blue-700 text-white w-full overflow-hidden">
+    <div class="absolute inset-0 opacity-10">
+      <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id="grid-pattern" width="10" height="10" patternUnits="userSpaceOnUse">
+            <rect width="10" height="10" fill="none" stroke="white" stroke-width="0.5" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#grid-pattern)" />
+      </svg>
+    </div>
+
+    <div class="container mx-auto px-4 relative z-10">
+      <div class="flex items-center justify-center mb-6">
+        <div class="w-20 h-20 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-4xl mr-6">
+          {category.icon || '📊'}
+        </div>
+        <h1 class="text-4xl md:text-5xl font-bold">{category.name}</h1>
+      </div>
+      <p class="text-xl text-center max-w-3xl mx-auto text-blue-100">{category.description}</p>
+      <div class="mt-8 text-center">
+        <span class="inline-block bg-white bg-opacity-20 backdrop-blur-sm px-4 py-2 rounded-full text-sm">
+          {softwareList.length} {softwareList.length === 1 ? 
+            (locale === 'de' ? 'Software' : 'Software') : 
+            (locale === 'de' ? 'Software-Produkte' : 'Software Products')}
+        </span>
+      </div>
+    </div>
+  </section>
+  
+  <div class="container mx-auto px-4 py-12">
+    <div class="flex flex-col lg:flex-row gap-8">
+      <!-- Sidebar filters with improved design -->
+      <div class="lg:w-1/4">
+        <div class="sticky top-24">
+          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
+            <FilterSidebar 
+              categories={relatedCategories} 
+              platforms={platforms} 
+            />
+          </div>
+        </div>
+      </div>
+      
+      <!-- Software grid with enhanced cards -->
+      <div class="lg:w-3/4">
+        {softwareList.length > 0 ? (
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {softwareList.map(software => (
+              <div class="transition-all duration-300 hover:translate-y-[-4px]">
+                <a href={`/${locale}/software/${software.id}`} class="block h-full group">
+                  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 h-full flex flex-col overflow-hidden border border-gray-100 dark:border-gray-700">
+                    <div class="p-6 flex-grow">
+                      <div class="flex items-center mb-4">
+                        {software.logo ? (
+                          <div class="w-14 h-14 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl p-2 flex items-center justify-center mr-4 overflow-hidden">
+                            <img src={software.logo} alt={software.name} class="max-w-full max-h-full object-contain" />
+                          </div>
+                        ) : (
+                          <div class="w-14 h-14 bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center mr-4 text-2xl text-gray-400">
+                            💻
+                          </div>
+                        )}
+                        
+                        <div>
+                          <h3 class="text-xl font-bold group-hover:text-primary dark:group-hover:text-blue-400 dark:text-white transition-colors duration-200">{software.name}</h3>
+                          {software.developer && (
+                            <p class="text-sm text-gray-500 dark:text-gray-400">by {software.developer}</p>
+                          )}
+                        </div>
+                      </div>
+                      
+                      <p class="text-gray-600 dark:text-gray-300 mb-5 line-clamp-3">{software.description}</p>
+                      
+                      <div class="flex flex-wrap gap-2 mb-4">
+                        {software.categories?.slice(0, 3).map(category => (
+                          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs text-gray-700 dark:text-gray-300 font-medium">
+                            {category}
+                          </span>
+                        ))}
+                        {software.categories?.length > 3 && (
+                          <span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs text-gray-700 dark:text-gray-300 font-medium">
+                            +{software.categories.length - 3}
+                          </span>
+                        )}
+                      </div>
+                      
+                      <div class="flex flex-wrap gap-2">
+                        {software.platforms?.slice(0, 4).map(platform => (
+                          <span class="px-3 py-1 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium flex items-center">
+                            {platform === 'Windows' && <span class="mr-1">🪟</span>}
+                            {platform === 'macOS' && <span class="mr-1">🍎</span>}
+                            {platform === 'Linux' && <span class="mr-1">🐧</span>}
+                            {platform === 'Android' && <span class="mr-1">🤖</span>}
+                            {platform === 'iOS' && <span class="mr-1">📱</span>}
+                            {platform === 'Web' && <span class="mr-1">🌐</span>}
+                            {platform}
+                          </span>
+                        ))}
+                        {software.platforms?.length > 4 && (
+                          <span class="px-3 py-1 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full text-xs font-medium">
+                            +{software.platforms.length - 4}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    
+                    <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-t border-gray-100 dark:border-gray-600">
+                      <div class="flex justify-between items-center">
+                        <div class="flex items-center">
+                          <div class="flex">
+                            {Array.from({ length: 5 }).map((_, i) => {
+                              const metrics = software.metrics || {};
+                              const metricKeys = Object.keys(metrics);
+                              if (metricKeys.length === 0) return <span class="text-gray-300 dark:text-gray-600">★</span>;
+                              
+                              let totalRating = 0;
+                              metricKeys.forEach(key => {
+                                totalRating += metrics[key].average || 0;
+                              });
+                              
+                              const rating = totalRating / metricKeys.length;
+                              const fullStars = Math.floor(rating);
+                              const partialStar = rating - fullStars;
+                              
+                              if (i < fullStars) return <span class="text-yellow-400">★</span>;
+                              if (i === fullStars && partialStar > 0.3) return <span class="text-yellow-400">★</span>;
+                              return <span class="text-gray-300 dark:text-gray-600">★</span>;
+                            })}
+                          </div>
+                          <span class="ml-2 font-bold dark:text-white">
+                            {(() => {
+                              const metrics = software.metrics || {};
+                              const metricKeys = Object.keys(metrics);
+                              if (metricKeys.length === 0) return "0.0";
+                              
+                              let totalRating = 0;
+                              metricKeys.forEach(key => {
+                                totalRating += metrics[key].average || 0;
+                              });
+                              
+                              return (totalRating / metricKeys.length).toFixed(1);
+                            })()}
+                          </span>
+                        </div>
+                        
+                        <span class="text-primary dark:text-blue-400 font-medium group-hover:underline flex items-center">
+                          {t.common.explore} <span class="transform transition-transform group-hover:translate-x-1">→</span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </a>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div class="text-center py-16 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-100 dark:border-gray-600">
+            <div class="text-6xl mb-6">🔍</div>
+            <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">
+              {locale === 'de' ? 'Noch keine Software in dieser Kategorie.' : 'No software in this category yet.'}
+            </p>
+            <p class="text-gray-500 dark:text-gray-400">
+              {locale === 'de' ? 'Schauen Sie später wieder vorbei.' : 'Check back later.'}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  </div>
+</BaseLayout>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/[lang]/compare.astro b/apps-archived/techbase/apps/web/src/pages/[lang]/compare.astro
new file mode 100644
index 000000000..ab3b7b1a1
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/[lang]/compare.astro
@@ -0,0 +1,265 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import ComparisonTable from '../../components/ComparisonTable.astro';
+import ComparisonView from '../../components/software/ComparisonView.astro';
+import { loadTranslations } from '../../utils/i18n';
+import { i18nConfig } from '../../content/config';
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  return i18nConfig.locales.map(locale => {
+    return {
+      params: { lang: locale },
+      props: { locale }
+    };
+  });
+}
+
+const { locale } = Astro.props;
+const t = await loadTranslations(locale);
+
+// Get all software data for searching
+const allSoftware = await getCollection('software');
+
+// Filter software by locale for the search functionality
+const localeSoftware = allSoftware
+  .filter(entry => entry.id.startsWith(locale + '/'))
+  .map(entry => {
+    const id = entry.id.split('/')[1]; // Get the id part after locale/
+    return {
+      id,
+      ...entry.data,
+      // Add empty metrics for now - in real implementation, these would come from Supabase
+      metrics: {
+        easeOfUse: { average: 4.2, count: 15 },
+        featureRichness: { average: 3.8, count: 12 },
+        valueForMoney: { average: 4.5, count: 18 },
+        support: { average: 3.5, count: 10 },
+        reliability: { average: 4.0, count: 14 }
+      }
+    };
+  });
+
+// Get software to compare from URL params
+const urlParams = new URL(Astro.url).searchParams;
+const softwareIds = urlParams.getAll('software');
+
+// Get the actual software items to compare
+const compareSoftware = localeSoftware.filter(s => softwareIds.includes(s.id));
+---
+
+<BaseLayout title={`${t.common.compare} | TechBase`}>
+  <div class="container mx-auto px-4 py-8" x-data="{
+    searchTerm: '',
+    searchResults: [],
+    selectedSoftware: JSON.parse('${JSON.stringify(compareSoftware.map(s => s.id))}'),
+    showResults: false,
+    isSearching: false,
+    allSoftware: JSON.parse('${JSON.stringify(localeSoftware)}'),
+    
+    // On initialization, select software from URL
+    init() {
+      this.$watch('searchTerm', value => {
+        if (value.length >= 2) {
+          this.performSearch();
+        } else {
+          this.searchResults = [];
+          this.showResults = false;
+        }
+      });
+    },
+    
+    // Search for software
+    performSearch() {
+      if (this.searchTerm.length < 2) return;
+      
+      this.isSearching = true;
+      
+      // Simple client-side search
+      this.searchResults = this.allSoftware.filter(software => {
+        // Don't show already selected software
+        if (this.selectedSoftware.includes(software.id)) return false;
+        
+        // Search in name and description
+        return software.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
+               software.description.toLowerCase().includes(this.searchTerm.toLowerCase());
+      }).slice(0, 5); // Limit to 5 results
+      
+      this.showResults = this.searchResults.length > 0;
+      this.isSearching = false;
+    },
+    
+    // Select software for comparison
+    selectSoftware(id) {
+      // Limit to 3 software items
+      if (this.selectedSoftware.length >= 3 && !this.selectedSoftware.includes(id)) {
+        alert('You can compare up to 3 software items at once.');
+        return;
+      }
+      
+      if (!this.selectedSoftware.includes(id)) {
+        this.selectedSoftware.push(id);
+      }
+      
+      this.searchTerm = '';
+      this.searchResults = [];
+      this.showResults = false;
+      
+      // Update URL params
+      this.updateUrlParams();
+    },
+    
+    // Remove software from comparison
+    removeSoftware(id) {
+      this.selectedSoftware = this.selectedSoftware.filter(s => s !== id);
+      this.updateUrlParams();
+    },
+    
+    // Update URL parameters
+    updateUrlParams() {
+      const url = new URL(window.location.href);
+      url.searchParams.delete('software');
+      
+      this.selectedSoftware.forEach(id => {
+        url.searchParams.append('software', id);
+      });
+      
+      window.history.replaceState({}, '', url.toString());
+    },
+    
+    // Get a software item by ID
+    getSoftware(id) {
+      return this.allSoftware.find(s => s.id === id);
+    }
+  }">
+    <h1 class="text-3xl font-bold mb-8">{t.common.compare}</h1>
+    
+    <div class="mb-8">
+      <div class="flex flex-col md:flex-row md:items-end gap-4 mb-4">
+        <!-- Search box -->
+        <div class="flex-grow">
+          <label for="software-search" class="block mb-2 font-semibold">{t.common.search}:</label>
+          <div class="relative">
+            <input 
+              type="text" 
+              id="software-search" 
+              x-model="searchTerm"
+              class="w-full p-3 border border-gray-300 rounded"
+              :placeholder="`${t.common.search}...`"
+              @focus="showResults = searchResults.length > 0"
+            />
+            
+            <!-- Loading indicator -->
+            <div x-show="isSearching" class="absolute right-3 top-1/2 transform -translate-y-1/2">
+              <svg class="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </div>
+            
+            <!-- Search results dropdown -->
+            <div 
+              x-show="showResults" 
+              @click.away="showResults = false"
+              class="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto"
+              x-transition:enter="transition ease-out duration-100"
+              x-transition:enter-start="transform opacity-0 scale-95"
+              x-transition:enter-end="transform opacity-100 scale-100"
+              x-transition:leave="transition ease-in duration-75"
+              x-transition:leave-start="transform opacity-100 scale-100"
+              x-transition:leave-end="transform opacity-0 scale-95"
+              style="display: none;"
+            >
+              <template x-if="searchResults.length === 0 && searchTerm.length >= 2">
+                <div class="p-4 text-center text-gray-500">
+                  No results found
+                </div>
+              </template>
+              
+              <template x-for="result in searchResults" :key="result.id">
+                <button
+                  @click="selectSoftware(result.id)"
+                  class="block w-full text-left px-4 py-3 hover:bg-gray-50 border-b border-gray-100 last:border-0"
+                >
+                  <div class="flex items-start">
+                    <template x-if="result.logo">
+                      <div class="w-10 h-10 bg-white border border-gray-200 rounded mr-3 flex items-center justify-center">
+                        <img :src="result.logo" :alt="result.name" class="max-w-full max-h-full p-1">
+                      </div>
+                    </template>
+                    
+                    <div>
+                      <div class="font-medium" x-text="result.name"></div>
+                      <div class="text-sm text-gray-500 mt-0.5 line-clamp-1" x-text="result.description"></div>
+                    </div>
+                  </div>
+                </button>
+              </template>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Add button -->
+        <button 
+          @click="performSearch()"
+          class="bg-primary text-white px-6 py-3 rounded hover:bg-blue-600 transition-colors"
+          :disabled="searchTerm.length < 2"
+        >
+          {t.common.search}
+        </button>
+      </div>
+      
+      <!-- Selected software chips -->
+      <div class="flex flex-wrap gap-2 mt-4" x-show="selectedSoftware.length > 0">
+        <template x-for="id in selectedSoftware" :key="id">
+          <div class="flex items-center bg-gray-100 rounded-full pl-3 pr-2 py-1.5">
+            <template x-if="getSoftware(id)?.logo">
+              <img :src="getSoftware(id)?.logo" :alt="getSoftware(id)?.name" class="w-5 h-5 mr-2">
+            </template>
+            <span x-text="getSoftware(id)?.name" class="mr-1"></span>
+            <button 
+              @click="removeSoftware(id)"
+              class="ml-1 text-gray-500 hover:text-gray-700"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </template>
+      </div>
+    </div>
+    
+    <!-- Comparison Table -->
+    <template x-if="selectedSoftware.length >= 2">
+      <div>
+        <!-- The actual comparison table will be rendered server-side -->
+        {compareSoftware.length >= 2 && <ComparisonTable softwareList={compareSoftware} />}
+        
+        <!-- Using the enhanced comparison view component -->
+        {compareSoftware.length >= 1 && compareSoftware.map(software => (
+          <div class="mt-8">
+            <ComparisonView 
+              currentSoftware={software}
+              similarSoftware={localeSoftware.filter(s => s.id !== software.id).slice(0, 5)}
+              locale={locale}
+            />
+          </div>
+        ))}
+      </div>
+    </template>
+    
+    <!-- Empty State -->
+    <template x-if="selectedSoftware.length < 2">
+      <div class="text-center py-12 bg-gray-50 rounded-lg">
+        <div class="mb-6">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+        </div>
+        <p class="text-lg text-gray-600 mb-4">Select at least 2 software products to compare</p>
+        <p class="text-gray-500">Use the search box above to find and select software for comparison.</p>
+      </div>
+    </template>
+  </div>
+</BaseLayout>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/[lang]/developers/[id].astro b/apps-archived/techbase/apps/web/src/pages/[lang]/developers/[id].astro
new file mode 100644
index 000000000..35f0272db
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/[lang]/developers/[id].astro
@@ -0,0 +1,1268 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import SoftwareCard from '../../../components/SoftwareCard.astro';
+import { getCollection } from 'astro:content';
+import { loadTranslations } from '../../../utils/i18n';
+import { i18nConfig } from '../../../content/config';
+
+export async function getStaticPaths() {
+  const developers = await getCollection('developers');
+  const paths = [];
+  
+  for (const locale of i18nConfig.locales) {
+    const localeDevelopers = developers.filter(developer => developer.id.startsWith(locale + '/'));
+    
+    for (const developer of localeDevelopers) {
+      // Fix: ID should NOT include file extension .md
+      let id = developer.id.split('/')[1]; // Get ID after locale
+      if (id.endsWith('.md')) {
+        id = id.replace('.md', '');
+      }
+      
+      paths.push({
+        params: { 
+          lang: locale, 
+          id
+        },
+        props: { developer, locale, allDevelopers: developers }
+      });
+    }
+  }
+  
+  return paths;
+}
+
+const { developer, locale, allDevelopers } = Astro.props;
+
+// Prepare similar developers for the comparison feature
+const similarDevelopers = allDevelopers
+  .filter(item => {
+    // Skip the current developer
+    if (item.id === developer.id) return false;
+    
+    // Extract the developer's locale and industry
+    const [itemLocale] = item.id.split('/');
+    
+    // Only include developers with the same locale 
+    // and same industry if available
+    return itemLocale === locale && 
+      (!developer.data.industry || !item.data.industry || 
+       item.data.industry === developer.data.industry);
+  })
+  .map(item => {
+    // Format the developer data for the frontend
+    return {
+      id: item.id.split('/')[1].replace(/\.md$/, ''),
+      name: item.data.name,
+      description: item.data.description,
+      industry: item.data.industry || '',
+      country: item.data.country || '',
+      foundedYear: item.data.foundedYear,
+      employees: item.data.employees,
+      logo: item.data.logo || '/logos/sample-logo.svg',
+      keyProducts: item.data.keyProducts || []
+    };
+  });
+const t = await loadTranslations(locale);
+
+// Get all software from this developer
+const allSoftware = await getCollection('software');
+
+// The URL parameter 'id' is already cleaned in getStaticPaths
+const developerId = Astro.params.id;
+
+// Find all software by this developer
+const softwareItems = allSoftware.filter(item => {
+  const hasDeveloper = !!item.data.developer;
+  const developerValue = hasDeveloper ? item.data.developer.toLowerCase() : '';
+  return developerValue === developerId.toLowerCase();
+});
+
+// Convert to the format needed for display  
+const allDeveloperSoftware = softwareItems.map(software => {
+  const softwareLocale = software.id.split('/')[0];
+  return {
+    id: software.id.split('/')[1],
+    locale: softwareLocale,
+    ...software.data
+  };
+});
+
+// Group software by ID to avoid duplicates from different languages
+const softwareByID = {};
+allDeveloperSoftware.forEach(software => {
+  const keyName = software.id;
+  
+  // If we don't have this software yet, add it
+  if (!softwareByID[keyName]) {
+    softwareByID[keyName] = software;
+    return;
+  }
+  
+  // If we already have this software, prefer the current locale
+  if (software.locale === locale) {
+    softwareByID[keyName] = software;
+  }
+});
+
+// Convert back to array for display
+const developerSoftware = Object.values(softwareByID);
+
+// Sort first by locale matching the current locale, then by name
+developerSoftware.sort((a, b) => {
+  // First sort by locale (current locale first)
+  if (a.locale === locale && b.locale !== locale) return -1;
+  if (a.locale !== locale && b.locale === locale) return 1;
+  
+  // Then sort alphabetically by name
+  return a.name.localeCompare(b.name);
+});
+
+// Get all categories used by this developer's software
+const categories = [...new Set(developerSoftware.flatMap(software => software.categories || []))];
+
+// Get all categories collection for category names
+const allCategories = await getCollection('categories');
+const categoryMap = {};
+allCategories.forEach(category => {
+  let id = category.id.split('/')[1];
+  // Remove .md extension if present
+  if (id.endsWith('.md')) {
+    id = id.replace('.md', '');
+  }
+  categoryMap[id] = category.data.name;
+});
+---
+
+<BaseLayout title={developer.data.name}>
+  {/* Hidden elements to pass data to client-side JavaScript */}
+  <div id="current-developer-name" style="display:none">{developer.data.name}</div>
+  <div id="current-developer-industry" style="display:none">{developer.data.industry || ''}</div>
+  <div id="similar-developers-list" style="display:none">{JSON.stringify(similarDevelopers)}</div>
+  
+  <div 
+    x-data="{
+      isCompareMode: false,
+      selectedDeveloperId: null,
+      currentViewSide: 'left',
+      isLeftMinimized: false,
+      isRightMinimized: false,
+      allDevelopers: [],
+      
+      toggleCompareMode() {
+        this.isCompareMode = !this.isCompareMode;
+        if (!this.isCompareMode) {
+          // Remove the compare parameter from URL when exiting compare mode
+          const url = new URL(window.location.href);
+          url.searchParams.delete('compare');
+          window.history.pushState({}, '', url.toString());
+          this.selectedDeveloperId = null;
+        }
+      },
+      
+      switchViewSide(side) {
+        this.currentViewSide = side;
+      },
+      
+      toggleMinimize(side) {
+        if (side === 'left') {
+          this.isLeftMinimized = !this.isLeftMinimized;
+          if (this.isLeftMinimized && this.isRightMinimized) {
+            this.isRightMinimized = false;
+          }
+        } else {
+          this.isRightMinimized = !this.isRightMinimized;
+          if (this.isRightMinimized && this.isLeftMinimized) {
+            this.isLeftMinimized = false;
+          }
+        }
+      }
+    }"
+    x-init="() => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const compareWith = urlParams.get('compare');
+      
+      if (compareWith) {
+        isCompareMode = true;
+        selectedDeveloperId = compareWith;
+      }
+    }"
+    class="container mx-auto px-4 py-8"
+  >
+    <!-- Main container with conditional layout based on comparison mode -->
+    <div 
+      class="flex flex-col lg:flex-row transition-all duration-300" 
+      :class="{'lg:space-x-6': isCompareMode}"
+    >
+      <!-- Left panel (current developer) -->
+      <div 
+        class="transition-all duration-300 overflow-hidden" 
+        :class="{
+          'w-full': !isCompareMode,
+          'lg:w-1/2': isCompareMode && !isLeftMinimized && !isRightMinimized,
+          'lg:w-1/4': isCompareMode && isLeftMinimized && !isRightMinimized,
+          'lg:w-3/4': isCompareMode && !isLeftMinimized && isRightMinimized
+        }"
+      >
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden h-full">
+          <!-- Developer Header -->
+          <div class="p-8 pb-4 bg-gradient-to-r from-blue-700 to-indigo-800 text-white">
+            <div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
+              <!-- Toggle minimize button for comparison mode -->
+              <template x-if="isCompareMode">
+                <button 
+                  @click="toggleMinimize('left')" 
+                  class="absolute top-4 left-4 text-white/80 hover:text-white"
+                  :aria-label="isLeftMinimized ? '${t.software.expandView}' : '${t.software.minimizeView}'"
+                >
+                  <svg x-show="!isLeftMinimized" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                  </svg>
+                  <svg x-show="isLeftMinimized" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                  </svg>
+                </button>
+              </template>
+            
+              {developer.data.logo ? (
+                <img 
+                  src={developer.data.logo} 
+                  alt={developer.data.name} 
+                  class="w-32 h-32 rounded-xl bg-white p-2 object-contain"
+                />
+              ) : (
+                <div class="w-32 h-32 rounded-xl bg-white/20 flex items-center justify-center text-4xl">
+                  {developer.data.name.charAt(0)}
+                </div>
+              )}
+              
+              <div class="flex-1 text-center md:text-left">
+                <h1 class="text-3xl font-bold mb-2">{developer.data.name}</h1>
+                
+                {developer.data.foundedYear && (
+                  <p class="text-blue-100 mb-1">
+                    {t.developer?.founded || "Founded"}: {developer.data.foundedYear}
+                  </p>
+                )}
+                
+                {developer.data.headquarters && (
+                  <p class="text-blue-100 mb-1">
+                    {t.developer?.headquarters || "Headquarters"}: {developer.data.headquarters}
+                  </p>
+                )}
+                
+                {developer.data.country && (
+                  <p class="text-blue-100 mb-4">
+                    {t.developer?.country || "Country"}: {developer.data.country}
+                  </p>
+                )}
+                
+                <div class="flex flex-wrap gap-4 justify-center md:justify-start mt-4">
+                  <a 
+                    href={developer.data.website} 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    class="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors text-white"
+                  >
+                    {t.common?.website || "Website"} ↗
+                  </a>
+                  
+                  {developer.data.socialMedia?.github && (
+                    <a 
+                      href={developer.data.socialMedia.github} 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      class="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors text-white"
+                    >
+                      GitHub ↗
+                    </a>
+                  )}
+                  
+                  <!-- Compare button -->
+                  <button 
+                    @click="toggleCompareMode" 
+                    class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg transition-colors text-white"
+                    x-text="isCompareMode ? '${t.software.expandView}' : '${t.developer.inlineCompare}'"
+                  ></button>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Developer content - conditionally show based on minimized state -->
+          <div x-show="!isLeftMinimized || !isCompareMode" x-transition>
+            <div :class="{'hidden lg:block': isCompareMode && currentViewSide !== 'left', 'block': !isCompareMode || currentViewSide === 'left'}">
+              <!-- Company Info -->
+              <div class="p-8 border-b border-gray-200 dark:border-gray-700">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                  <!-- Left column: About -->
+                  <div class="md:col-span-2">
+                    <h2 class="text-2xl font-bold mb-4 dark:text-white">{t.common?.about || "About"}</h2>
+                    
+                    <div class="prose prose-lg dark:prose-invert max-w-none">
+                      {developer.body ? (
+                        <Fragment set:html={developer.body} />
+                      ) : (
+                        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
+                          {developer.data.description}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  
+                  <!-- Right column: Company details -->
+                  <div>
+                    <h2 class="text-xl font-bold mb-4 dark:text-white">{t.common?.details || "Details"}</h2>
+                    
+                    <div class="space-y-4">
+                      {developer.data.industry && (
+                        <div>
+                          <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">{t.developer?.industry || "Industry"}</h3>
+                          <p class="text-gray-700 dark:text-gray-300">{developer.data.industry}</p>
+                        </div>
+                      )}
+                      
+                      {developer.data.employees && (
+                        <div>
+                          <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">{t.developer?.employees || "Employees"}</h3>
+                          <p class="text-gray-700 dark:text-gray-300">{developer.data.employees}</p>
+                        </div>
+                      )}
+                      
+                      {developer.data.revenue && (
+                        <div>
+                          <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">{t.developer?.revenue || "Annual Revenue"}</h3>
+                          <p class="text-gray-700 dark:text-gray-300">{developer.data.revenue}</p>
+                        </div>
+                      )}
+                      
+                      {developer.data.keyProducts && developer.data.keyProducts.length > 0 && (
+                        <div>
+                          <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">{t.developer?.keyProducts || "Key Products"}</h3>
+                          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
+                            {developer.data.keyProducts.map(product => (
+                              <li>{product}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                      
+                      {developer.data.socialMedia && Object.keys(developer.data.socialMedia).length > 0 && (
+                        <div>
+                          <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">{t.developer?.socialMedia || "Social Media"}</h3>
+                          <div class="flex flex-wrap gap-3 mt-2">
+                            {developer.data.socialMedia.twitter && (
+                              <a href={developer.data.socialMedia.twitter} target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">
+                                <span class="sr-only">Twitter</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                                  <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                                </svg>
+                              </a>
+                            )}
+                            {developer.data.socialMedia.github && (
+                              <a href={developer.data.socialMedia.github} target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
+                                <span class="sr-only">GitHub</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                                </svg>
+                              </a>
+                            )}
+                            {developer.data.socialMedia.linkedin && (
+                              <a href={developer.data.socialMedia.linkedin} target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-blue-700 dark:text-gray-400 dark:hover:text-blue-600">
+                                <span class="sr-only">LinkedIn</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                                </svg>
+                              </a>
+                            )}
+                            {developer.data.socialMedia.facebook && (
+                              <a href={developer.data.socialMedia.facebook} target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500">
+                                <span class="sr-only">Facebook</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                                  <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
+                                </svg>
+                              </a>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- Software by this developer -->
+              {developerSoftware.length > 0 && (
+                <div class="p-8">
+                  <h2 class="text-2xl font-bold mb-6 dark:text-white">
+                    {t.developer?.software || "Software by"} {developer.data.name}
+                    <span class="text-sm text-gray-500 ml-2">({developerSoftware.length} software products)</span>
+                  </h2>
+                  
+                  {/* Category Filter Pills - only show if there are categories */}
+                  {categories.length > 0 && (
+                    <div class="relative mb-8">
+                      <div class="overflow-x-auto pb-4 hide-scrollbar">
+                        <div class="flex space-x-2 min-w-max px-2">
+                          <button 
+                            class="category-pill active bg-primary text-white px-4 py-2 rounded-full text-sm font-medium shadow-md transform transition-all hover:shadow-lg" 
+                            data-category="all"
+                          >
+                            {t.common?.all || "All"}
+                          </button>
+                          {categories.map(category => (
+                            <button 
+                              class="category-pill bg-white dark:bg-gray-700 text-gray-800 dark:text-white px-4 py-2 rounded-full text-sm font-medium shadow-md transform transition-all hover:shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600" 
+                              data-category={category}
+                            >
+                              {categoryMap[category] || category}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                      <div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-white dark:from-gray-800 to-transparent pointer-events-none"></div>
+                      <div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white dark:from-gray-800 to-transparent pointer-events-none"></div>
+                    </div>
+                  )}
+
+                  {/* Software Cards Grid */}
+                  <div class="software-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" :class="{'lg:grid-cols-2': isCompareMode}">
+                    {developerSoftware.map((software, index) => (
+                      <div id={`software-${index}`} class="software-card" data-categories={JSON.stringify(software.categories || [])}>
+                        <SoftwareCard software={software} />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+          
+          <!-- Minimized view for the left panel -->
+          <template x-if="isLeftMinimized && isCompareMode">
+            <div class="p-6 flex flex-col items-center justify-center border-r border-gray-200 dark:border-gray-700 h-full">
+              {developer.data.logo ? (
+                <div class="w-24 h-24 rounded-lg bg-white dark:bg-gray-700 p-2 flex items-center justify-center mb-3">
+                  <img src={developer.data.logo} alt={developer.data.name} class="max-w-full max-h-full" />
+                </div>
+              ) : (
+                <div class="w-24 h-24 rounded-xl bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-3xl mb-3">
+                  {developer.data.name.charAt(0)}
+                </div>
+              )}
+              <h2 class="text-center text-xl font-bold mb-2 dark:text-white">{developer.data.name}</h2>
+              <p class="text-center text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-3">{developer.data.description}</p>
+            </div>
+          </template>
+        </div>
+      </div>
+      
+      <!-- Right panel (comparison developer) - only shown in compare mode -->
+      <div 
+        x-show="isCompareMode" 
+        x-transition
+        class="lg:w-1/2 mt-8 lg:mt-0 transition-all duration-300"
+        :class="{
+          'lg:w-1/2': !isLeftMinimized && !isRightMinimized,
+          'lg:w-3/4': isLeftMinimized && !isRightMinimized,
+          'lg:w-1/4': !isLeftMinimized && isRightMinimized
+        }"
+      >
+        <!-- Developer list for selecting comparison - directly integrated into the right panel -->
+        <template x-if="!selectedDeveloperId && isCompareMode">
+          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm h-full overflow-hidden">
+            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+              <h3 class="text-lg font-bold" id="developer-selection-title">{t.developer.selectAnother}</h3>
+              <div class="mt-4">
+                <input 
+                  type="text" 
+                  placeholder={t.common.search} 
+                  class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-primary focus:border-primary dark:bg-gray-700 dark:text-white"
+                  id="developer-search-input"
+                />
+              </div>
+            </div>
+            
+            <div class="p-0 overflow-y-auto" style="max-height: calc(100vh - 200px);" id="developer-list-container">
+              <div class="py-8 text-center text-gray-500 dark:text-gray-400">
+                <svg class="animate-spin h-8 w-8 mx-auto mb-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <div id="loading-message">Loading developers...</div>
+                <button 
+                  onclick="populateDeveloperItems(); document.getElementById('loading-message').textContent = 'Loading...';"
+                  class="mt-4 px-3 py-1 bg-primary text-white rounded-md text-sm hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
+                >
+                  Load available developers
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+        
+        <!-- Selected developer for comparison - this will be populated dynamically -->
+        <template x-if="selectedDeveloperId">
+          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm h-full overflow-hidden">
+            <!-- Header for the selected developer -->
+            <div class="p-6 bg-gradient-to-r from-indigo-700 to-purple-800 text-white flex items-center">
+              <!-- Toggle minimize button -->
+              <button 
+                @click="toggleMinimize('right')" 
+                class="mr-4 text-white/80 hover:text-white"
+                :aria-label="isRightMinimized ? '${t.software.expandView}' : '${t.software.minimizeView}'"
+              >
+                <svg x-show="!isRightMinimized" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                </svg>
+                <svg x-show="isRightMinimized" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                </svg>
+              </button>
+              
+              <!-- Developer info - loaded dynamically with client-side JS -->
+              <div class="flex items-center flex-1">
+                <div class="w-16 h-16 rounded-lg bg-white/20 flex items-center justify-center mr-4">
+                  <img id="compare-logo" alt="Developer logo" class="max-w-full max-h-full p-1 bg-white rounded" />
+                </div>
+                <div>
+                  <h2 id="compare-name" class="text-xl font-bold"></h2>
+                  <div id="compare-details" class="text-sm text-white/80"></div>
+                </div>
+              </div>
+              
+              <!-- Developer selection dropdown button -->
+              <button 
+                @click="selectedDeveloperId = null" 
+                class="ml-auto text-white/90 hover:text-white bg-white/10 hover:bg-white/20 px-4 py-2 rounded-lg"
+              >
+                {t.developer.selectAnother}
+              </button>
+            </div>
+            
+            <!-- The main content for the comparison developer -->
+            <div x-show="!isRightMinimized" class="p-6 overflow-y-auto" id="compare-content" style="max-height: calc(100vh - 250px);">
+              <!-- This will be populated with JavaScript -->
+              <div class="animate-pulse">
+                <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-4"></div>
+                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-full mb-4"></div>
+                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6 mb-4"></div>
+                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-8"></div>
+                
+                <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-4"></div>
+                <div class="grid grid-cols-2 gap-4 mb-8">
+                  <div>
+                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2"></div>
+                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4"></div>
+                  </div>
+                  <div>
+                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2"></div>
+                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4"></div>
+                  </div>
+                </div>
+                
+                <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/3 mb-4"></div>
+                <div class="grid grid-cols-2 gap-4">
+                  <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
+                  <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded"></div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Minimized view -->
+            <template x-if="isRightMinimized">
+              <div class="p-6 flex flex-col items-center justify-center border-l border-gray-200 dark:border-gray-700 h-full">
+                <div class="w-24 h-24 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center mb-3">
+                  <img id="compare-mini-logo" alt="Developer logo" class="max-w-full max-h-full p-2" />
+                </div>
+                <h2 id="compare-mini-name" class="text-center text-xl font-bold mb-2 dark:text-white"></h2>
+                <p id="compare-mini-description" class="text-center text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-3"></p>
+              </div>
+            </template>
+          </div>
+        </template>
+        
+        <!-- The developer list is now integrated directly in the panel -->
+      </div>
+    </div>
+    
+    <!-- Mobile view switcher (only shown in compare mode on small screens) -->
+    <div 
+      x-show="isCompareMode" 
+      class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-3 flex justify-center space-x-4 lg:hidden z-10"
+    >
+      <button 
+        @click="switchViewSide('left')" 
+        class="px-4 py-2 rounded-md transition-colors"
+        :class="{'bg-primary text-white': currentViewSide === 'left', 'bg-gray-100 dark:bg-gray-700': currentViewSide !== 'left'}"
+      >
+        {developer.data.name}
+      </button>
+      <button 
+        x-show="selectedDeveloperId"
+        @click="switchViewSide('right')" 
+        class="px-4 py-2 rounded-md transition-colors"
+        :class="{'bg-primary text-white': currentViewSide === 'right', 'bg-gray-100 dark:bg-gray-700': currentViewSide !== 'right'}"
+        id="compare-tab-button"
+      >
+        Compare
+      </button>
+    </div>
+  </div>
+  
+  <script>
+    // Developer comparison functionality
+    document.addEventListener('DOMContentLoaded', () => {
+      // Get Alpine component
+      const comparisonComponent = document.querySelector('[x-data]')?.__x;
+      if (!comparisonComponent) return;
+      
+      // Sample developer data - in a real app this would come from an API
+      const sampleDevelopers = [
+        {
+          id: 'microsoft',
+          name: 'Microsoft',
+          logo: '/logos/sample-logo.svg',
+          description: 'American multinational technology corporation that produces computer software, consumer electronics, personal computers, and related services.',
+          foundedYear: 1975,
+          headquarters: 'Redmond, Washington',
+          country: 'United States',
+          employees: '181,000+',
+          industry: 'Technology',
+          keyProducts: ['Windows', 'Office', 'Azure', 'Xbox']
+        },
+        {
+          id: 'adobe',
+          name: 'Adobe Inc.',
+          logo: '/logos/sample-logo.svg',
+          description: 'American multinational computer software company focused on the creation of multimedia and creativity software products.',
+          foundedYear: 1982,
+          headquarters: 'San Jose, California',
+          country: 'United States',
+          employees: '26,000+',
+          industry: 'Software',
+          keyProducts: ['Photoshop', 'Illustrator', 'Acrobat', 'Creative Cloud']
+        },
+        {
+          id: 'apple',
+          name: 'Apple Inc.',
+          logo: '/logos/sample-logo.svg',
+          description: 'American multinational technology company that specializes in consumer electronics, computer software, and online services.',
+          foundedYear: 1976,
+          headquarters: 'Cupertino, California',
+          country: 'United States',
+          employees: '154,000+',
+          industry: 'Technology',
+          keyProducts: ['iPhone', 'Mac', 'iPad', 'iOS']
+        }
+      ];
+      
+      // Function to populate developer items
+      window.populateDeveloperItems = function() {
+        console.log("Populating developer list...");
+        const listContainer = document.getElementById('developer-list-container');
+        const selectionTitle = document.getElementById('developer-selection-title');
+        if (!listContainer) {
+          console.error("Developer list container not found");
+          return;
+        }
+        
+        // Create a backup of the developer list for the "back" button to use
+        if (!document.getElementById('developer-list-backup')) {
+          const backupDiv = document.createElement('div');
+          backupDiv.id = 'developer-list-backup';
+          backupDiv.style.display = 'none';
+          document.body.appendChild(backupDiv);
+        }
+        
+        listContainer.innerHTML = '<div class="p-4 text-center">Loading...</div>';
+        
+        // Get the current developer's data from the hidden elements
+        const currentDeveloperName = document.getElementById('current-developer-name').textContent;
+        const currentDeveloperIndustry = document.getElementById('current-developer-industry').textContent;
+        const similarDevelopersList = JSON.parse(document.getElementById('similar-developers-list').textContent);
+        
+        // Update the selection title with the industry
+        if (selectionTitle && currentDeveloperIndustry) {
+          selectionTitle.textContent = `Andere ${currentDeveloperIndustry}-Entwickler auswählen`;
+        } else if (selectionTitle) {
+          selectionTitle.textContent = `Andere Entwickler auswählen`;
+        }
+        
+        setTimeout(() => {
+          // Clear current content
+          listContainer.innerHTML = '';
+          
+          // Get current developer ID to exclude from the list
+          const currentDeveloperId = window.location.pathname.split('/').pop();
+          console.log("Current developer ID:", currentDeveloperId);
+          
+          // Use the pre-filtered list from the server
+          const similarDevelopers = similarDevelopersList;
+          
+          console.log(`Found ${similarDevelopers.length} similar developer items for comparison`);
+          
+          if (similarDevelopers.length === 0) {
+            const emptyEl = document.createElement('div');
+            emptyEl.classList.add('py-8', 'text-center', 'text-gray-500');
+            emptyEl.textContent = 'Keine ähnlichen Entwickler zum Vergleichen verfügbar';
+            listContainer.appendChild(emptyEl);
+            return;
+          }
+          
+          // Create a list item for each developer
+          similarDevelopers.forEach(developer => {
+            const item = document.createElement('div');
+            item.classList.add('p-4', 'border-b', 'border-gray-200', 'dark:border-gray-700', 'hover:bg-gray-50', 'dark:hover:bg-gray-600', 'cursor-pointer');
+            
+            item.innerHTML = `
+              <div class="flex items-center">
+                <div class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
+                  <span class="text-lg">${developer.name.charAt(0)}</span>
+                </div>
+                <div>
+                  <div class="font-medium dark:text-white">${developer.name}</div>
+                  <div class="text-sm text-gray-500 dark:text-gray-400">${developer.foundedYear} · ${developer.country}</div>
+                </div>
+              </div>
+            `;
+            
+            item.addEventListener('click', () => {
+              console.log(`Selected developer: ${developer.id}`);
+              
+              // Skip Alpine.js completely and use direct DOM manipulation
+              // This is the most reliable approach when Alpine.js is acting unpredictably
+              try {
+                // Find the main container for the comparison panel
+                const comparePanel = document.querySelector('.lg\\:w-1\\/2.mt-8.lg\\:mt-0');
+                if (comparePanel) {
+                  // Clear the panel completely - most reliable approach
+                  comparePanel.innerHTML = '';
+                  
+                  // Create a complete developer detail clone for comparison
+                  const detailContent = document.createElement('div');
+                  detailContent.className = 'bg-white dark:bg-gray-800 rounded-lg shadow-sm h-full overflow-hidden';
+                  
+                  // Add scroll container
+                  const scrollContainer = document.createElement('div');
+                  scrollContainer.className = 'overflow-y-auto';
+                  scrollContainer.style.maxHeight = 'calc(100vh - 120px)';
+                  
+                  detailContent.appendChild(scrollContainer);
+                  
+                  scrollContainer.innerHTML = `
+                    <div class="p-6 bg-gradient-to-r from-indigo-700 to-purple-800 text-white flex items-center">
+                      <button 
+                        onclick="document.querySelector('.lg\\\\:w-1\\\\/2.mt-8.lg\\\\:mt-0').innerHTML = document.getElementById('developer-list-backup').innerHTML;"
+                        class="mr-4 text-white/80 hover:text-white"
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                        </svg>
+                      </button>
+                      
+                      <div class="flex items-center flex-1">
+                        <div class="w-16 h-16 rounded-lg bg-white/20 flex items-center justify-center mr-4">
+                          <img src="${developer.logo || '/logos/sample-logo.svg'}" alt="${developer.name}" class="max-w-full max-h-full p-1 bg-white rounded" />
+                        </div>
+                        <div>
+                          <h2 class="text-xl font-bold">${developer.name}</h2>
+                          <div class="text-sm text-white/80">${developer.foundedYear} · ${developer.country}</div>
+                        </div>
+                      </div>
+                      
+                      <button 
+                        onclick="document.querySelector('.lg\\\\:w-1\\\\/2.mt-8.lg\\\\:mt-0').innerHTML = document.getElementById('developer-list-backup').innerHTML;"
+                        class="ml-auto text-white/90 hover:text-white bg-white/10 hover:bg-white/20 px-4 py-2 rounded-lg"
+                      >
+                        Anderen auswählen
+                      </button>
+                    </div>
+                    
+                    <div class="p-6 overflow-y-auto" style="max-height: calc(100vh - 250px);">
+                      <!-- About Section -->
+                      <div class="mb-8">
+                        <h2 class="text-xl font-bold mb-4 dark:text-white">Über</h2>
+                        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
+                          ${developer.description || 'Keine Beschreibung verfügbar.'}
+                        </p>
+                      </div>
+                      
+                      <!-- Company Details Section -->
+                      <div class="mb-8">
+                        <h2 class="text-xl font-bold mb-4 dark:text-white">Unternehmensdetails</h2>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          ${developer.foundedYear ? `
+                            <div>
+                              <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">Gegründet</h3>
+                              <p class="text-gray-700 dark:text-gray-300">${developer.foundedYear}</p>
+                            </div>
+                          ` : ''}
+                          
+                          ${developer.country ? `
+                            <div>
+                              <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">Land</h3>
+                              <p class="text-gray-700 dark:text-gray-300">${developer.country}</p>
+                            </div>
+                          ` : ''}
+                          
+                          ${developer.industry ? `
+                            <div>
+                              <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">Branche</h3>
+                              <p class="text-gray-700 dark:text-gray-300">${developer.industry}</p>
+                            </div>
+                          ` : ''}
+                          
+                          ${developer.employees ? `
+                            <div>
+                              <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">Mitarbeiter</h3>
+                              <p class="text-gray-700 dark:text-gray-300">${developer.employees}</p>
+                            </div>
+                          ` : ''}
+                          
+                          ${developer.revenue ? `
+                            <div>
+                              <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">Umsatz</h3>
+                              <p class="text-gray-700 dark:text-gray-300">${developer.revenue}</p>
+                            </div>
+                          ` : ''}
+                        </div>
+                      </div>
+                      
+                      <!-- Key Products Section -->
+                      ${developer.keyProducts && developer.keyProducts.length > 0 ? `
+                        <div class="mb-8">
+                          <h2 class="text-xl font-bold mb-4 dark:text-white">Hauptprodukte</h2>
+                          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-1">
+                            ${developer.keyProducts.map(product => `<li>${product}</li>`).join('')}
+                          </ul>
+                        </div>
+                      ` : ''}
+                      
+                      <!-- Software Portfolio Section -->
+                      <div class="mb-8">
+                        <h2 class="text-xl font-bold mb-4 dark:text-white">Software-Portfolio</h2>
+                        ${developer.software && developer.software.length > 0 ? `
+                          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            ${developer.software.map(sw => `
+                              <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center">
+                                <div class="w-12 h-12 bg-white dark:bg-gray-600 rounded mr-3 flex-shrink-0 flex items-center justify-center">
+                                  ${sw.logo ? `<img src="${sw.logo}" alt="${sw.name}" class="max-w-full max-h-full">` : `
+                                    <svg class="w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                    </svg>
+                                  `}
+                                </div>
+                                <div>
+                                  <div class="font-medium dark:text-white">${sw.name}</div>
+                                  <div class="text-sm text-gray-500 dark:text-gray-400">${sw.categories ? sw.categories.join(', ') : 'Software'}</div>
+                                </div>
+                              </div>
+                            `).join('')}
+                          </div>
+                        ` : `
+                          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <!-- Show sample software entries when real data is not available -->
+                            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center">
+                              <div class="w-12 h-12 bg-white dark:bg-gray-600 rounded mr-3 flex-shrink-0 flex items-center justify-center">
+                                <svg class="w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                </svg>
+                              </div>
+                              <div>
+                                <div class="font-medium dark:text-white">${developer.name} Software 1</div>
+                                <div class="text-sm text-gray-500 dark:text-gray-400">${developer.industry || 'Software'}</div>
+                              </div>
+                            </div>
+                            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center">
+                              <div class="w-12 h-12 bg-white dark:bg-gray-600 rounded mr-3 flex-shrink-0 flex items-center justify-center">
+                                <svg class="w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                </svg>
+                              </div>
+                              <div>
+                                <div class="font-medium dark:text-white">${developer.name} Software 2</div>
+                                <div class="text-sm text-gray-500 dark:text-gray-400">${developer.industry || 'Software'}</div>
+                              </div>
+                            </div>
+                          </div>
+                        `}
+                      </div>
+                      
+                      <!-- Website and Social Media Section -->
+                      ${developer.website || (developer.socialMedia && Object.keys(developer.socialMedia).length > 0) ? `
+                        <div class="mb-8">
+                          <h2 class="text-xl font-bold mb-4 dark:text-white">Online-Präsenz</h2>
+                          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            ${developer.website ? `
+                              <div>
+                                <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">Website</h3>
+                                <a href="${developer.website}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">${developer.website.replace(/^https?:\/\/(www\.)?/, '')}</a>
+                              </div>
+                            ` : ''}
+                            
+                            ${developer.socialMedia && developer.socialMedia.twitter ? `
+                              <div>
+                                <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">Twitter</h3>
+                                <a href="${developer.socialMedia.twitter}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">${developer.socialMedia.twitter.replace(/^https?:\/\/(www\.)?twitter\.com\//, '@')}</a>
+                              </div>
+                            ` : ''}
+                            
+                            ${developer.socialMedia && developer.socialMedia.github ? `
+                              <div>
+                                <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">GitHub</h3>
+                                <a href="${developer.socialMedia.github}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">${developer.socialMedia.github.replace(/^https?:\/\/(www\.)?github\.com\//, '')}</a>
+                              </div>
+                            ` : ''}
+                            
+                            ${developer.socialMedia && developer.socialMedia.linkedin ? `
+                              <div>
+                                <h3 class="text-sm uppercase text-gray-500 dark:text-gray-400">LinkedIn</h3>
+                                <a href="${developer.socialMedia.linkedin}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">${developer.socialMedia.linkedin.replace(/^https?:\/\/(www\.)?linkedin\.com\/company\//, '')}</a>
+                              </div>
+                            ` : ''}
+                          </div>
+                        </div>
+                      ` : ''}
+                    </div>
+                  `;
+                  
+                  comparePanel.appendChild(detailContent);
+                }
+              } catch (e) {
+                console.error("Error manually updating the comparison panel:", e);
+              }
+            });
+            
+            listContainer.appendChild(item);
+          });
+          
+          console.log("Developer list population complete");
+          
+          // Save a backup of the complete developer list panel
+          const comparePanel = document.querySelector('.lg\\:w-1\\/2.mt-8.lg\\:mt-0');
+          const backupDiv = document.getElementById('developer-list-backup');
+          if (comparePanel && backupDiv) {
+            backupDiv.innerHTML = comparePanel.innerHTML;
+            console.log("Developer list backup created");
+          }
+        }, 100);
+      };
+
+      // Function to update comparison developer
+      function updateComparisonDeveloper(developer) {
+        console.log("Updating comparison developer:", developer.name);
+        
+        // Manual DOM manipulation if Alpine.js is not reacting
+        try {
+          // Find the compare panel container
+          const comparePanel = document.querySelector('.lg\\:w-1\\/2.mt-8.lg\\:mt-0');
+          if (comparePanel) {
+            // First, find and hide the list template content
+            const listContent = comparePanel.querySelector('.bg-white.dark\\:bg-gray-800.rounded-lg.shadow-sm.h-full');
+            if (listContent) {
+              console.log("Found and hiding list content");
+              listContent.style.display = 'none';
+            }
+            
+            // Then find or create the detail view
+            let detailContent = comparePanel.querySelector('.bg-white.dark\\:bg-gray-800.rounded-lg.shadow-sm.h-full.overflow-hidden');
+            if (!detailContent) {
+              console.log("Detail content not found, creating it manually");
+              // Create a simplified version of the detail panel
+              detailContent = document.createElement('div');
+              detailContent.className = 'bg-white dark:bg-gray-800 rounded-lg shadow-sm h-full overflow-hidden';
+              detailContent.innerHTML = `
+                <div class="p-6 bg-gradient-to-r from-indigo-700 to-purple-800 text-white flex items-center">
+                  <button class="mr-4 text-white/80 hover:text-white">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                    </svg>
+                  </button>
+                  <div class="flex items-center flex-1">
+                    <div class="w-16 h-16 rounded-lg bg-white/20 flex items-center justify-center mr-4">
+                      <img id="compare-logo" alt="Developer logo" class="max-w-full max-h-full p-1 bg-white rounded" />
+                    </div>
+                    <div>
+                      <h2 id="compare-name" class="text-xl font-bold"></h2>
+                      <div id="compare-details" class="text-sm text-white/80"></div>
+                    </div>
+                  </div>
+                  <button class="ml-auto text-white/90 hover:text-white bg-white/10 hover:bg-white/20 px-4 py-2 rounded-lg">
+                    Anderen auswählen
+                  </button>
+                </div>
+                <div class="p-6 overflow-y-auto" id="compare-content" style="max-height: calc(100vh - 250px);"></div>
+              `;
+              comparePanel.appendChild(detailContent);
+            } else {
+              console.log("Found existing detail content");
+              detailContent.style.display = 'block';
+            }
+          }
+        } catch (e) {
+          console.error("Error manually showing comparison panel:", e);
+        }
+        
+        // Update elements with the comparison developer information
+        // Logo
+        const logoElement = document.getElementById('compare-logo');
+        const miniLogoElement = document.getElementById('compare-mini-logo');
+        if (logoElement) logoElement.src = developer.logo || '/logos/sample-logo.svg';
+        if (miniLogoElement) miniLogoElement.src = developer.logo || '/logos/sample-logo.svg';
+        
+        // Name
+        const nameElement = document.getElementById('compare-name');
+        const miniNameElement = document.getElementById('compare-mini-name');
+        const tabButtonElement = document.getElementById('compare-tab-button');
+        if (nameElement) nameElement.textContent = developer.name;
+        if (miniNameElement) miniNameElement.textContent = developer.name;
+        if (tabButtonElement) tabButtonElement.textContent = developer.name;
+        
+        // Details
+        const detailsElement = document.getElementById('compare-details');
+        if (detailsElement) {
+          detailsElement.textContent = `${developer.foundedYear} · ${developer.country}`;
+        }
+        
+        // Description
+        const miniDescriptionElement = document.getElementById('compare-mini-description');
+        if (miniDescriptionElement) {
+          miniDescriptionElement.textContent = developer.description;
+        }
+        
+        // Content - would include more detailed information in a real implementation
+        const contentElement = document.getElementById('compare-content');
+        if (contentElement) {
+          // Remove loading state
+          contentElement.innerHTML = '';
+          
+          // About section
+          const aboutSection = document.createElement('div');
+          aboutSection.classList.add('mb-8');
+          
+          const aboutTitle = document.createElement('h2');
+          aboutTitle.classList.add('text-xl', 'font-bold', 'mb-4', 'dark:text-white');
+          aboutTitle.textContent = 'About';
+          
+          const aboutText = document.createElement('p');
+          aboutText.classList.add('text-gray-700', 'dark:text-gray-300', 'leading-relaxed');
+          aboutText.textContent = developer.description;
+          
+          aboutSection.appendChild(aboutTitle);
+          aboutSection.appendChild(aboutText);
+          contentElement.appendChild(aboutSection);
+          
+          // Company Details
+          const detailsSection = document.createElement('div');
+          detailsSection.classList.add('mb-8');
+          
+          const detailsTitle = document.createElement('h2');
+          detailsTitle.classList.add('text-xl', 'font-bold', 'mb-4', 'dark:text-white');
+          detailsTitle.textContent = 'Company Details';
+          
+          detailsSection.appendChild(detailsTitle);
+          
+          const detailsGrid = document.createElement('div');
+          detailsGrid.classList.add('grid', 'grid-cols-1', 'md:grid-cols-2', 'gap-4');
+          
+          // Add company details
+          const details = [
+            { label: 'Founded', value: developer.foundedYear },
+            { label: 'Headquarters', value: developer.headquarters },
+            { label: 'Country', value: developer.country },
+            { label: 'Employees', value: developer.employees },
+            { label: 'Industry', value: developer.industry }
+          ];
+          
+          details.forEach(detail => {
+            if (detail.value) {
+              const detailItem = document.createElement('div');
+              
+              const label = document.createElement('h3');
+              label.classList.add('text-sm', 'uppercase', 'text-gray-500', 'dark:text-gray-400');
+              label.textContent = detail.label;
+              
+              const value = document.createElement('p');
+              value.classList.add('text-gray-700', 'dark:text-gray-300');
+              value.textContent = detail.value;
+              
+              detailItem.appendChild(label);
+              detailItem.appendChild(value);
+              detailsGrid.appendChild(detailItem);
+            }
+          });
+          
+          detailsSection.appendChild(detailsGrid);
+          contentElement.appendChild(detailsSection);
+          
+          // Key Products section
+          if (developer.keyProducts && developer.keyProducts.length > 0) {
+            const productsSection = document.createElement('div');
+            
+            const productsTitle = document.createElement('h2');
+            productsTitle.classList.add('text-xl', 'font-bold', 'mb-4', 'dark:text-white');
+            productsTitle.textContent = 'Key Products';
+            
+            productsSection.appendChild(productsTitle);
+            
+            const productsList = document.createElement('ul');
+            productsList.classList.add('list-disc', 'list-inside', 'text-gray-700', 'dark:text-gray-300', 'space-y-1');
+            
+            developer.keyProducts.forEach(product => {
+              const li = document.createElement('li');
+              li.textContent = product;
+              productsList.appendChild(li);
+            });
+            
+            productsSection.appendChild(productsList);
+            contentElement.appendChild(productsSection);
+          }
+          
+          // Software showcase section
+          const softwareSection = document.createElement('div');
+          softwareSection.classList.add('mt-8');
+          
+          const softwareTitle = document.createElement('h2');
+          softwareTitle.classList.add('text-xl', 'font-bold', 'mb-4', 'dark:text-white');
+          softwareTitle.textContent = 'Featured Software';
+          
+          softwareSection.appendChild(softwareTitle);
+          
+          const softwareGrid = document.createElement('div');
+          softwareGrid.classList.add('grid', 'grid-cols-1', 'md:grid-cols-2', 'gap-4');
+          
+          // Add placeholder for software cards
+          for (let i = 0; i < 2; i++) {
+            const card = document.createElement('div');
+            card.classList.add('bg-gray-100', 'dark:bg-gray-700', 'p-4', 'rounded-lg', 'flex', 'items-center');
+            
+            const logo = document.createElement('div');
+            logo.classList.add('w-12', 'h-12', 'bg-white', 'dark:bg-gray-600', 'rounded', 'mr-3', 'flex-shrink-0', 'flex', 'items-center', 'justify-center');
+            logo.innerHTML = '<svg class="w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>';
+            
+            const content = document.createElement('div');
+            const title = document.createElement('div');
+            title.classList.add('font-medium', 'dark:text-white');
+            title.textContent = `Sample Software ${i+1}`;
+            
+            const category = document.createElement('div');
+            category.classList.add('text-sm', 'text-gray-500', 'dark:text-gray-400');
+            category.textContent = 'Category';
+            
+            content.appendChild(title);
+            content.appendChild(category);
+            
+            card.appendChild(logo);
+            card.appendChild(content);
+            softwareGrid.appendChild(card);
+          }
+          
+          softwareSection.appendChild(softwareGrid);
+          contentElement.appendChild(softwareSection);
+        }
+      }
+      
+      // Handle search input
+      const searchInput = document.getElementById('developer-search-input');
+      if (searchInput) {
+        searchInput.addEventListener('input', (e) => {
+          const searchTerm = e.target.value.toLowerCase();
+          const listItems = document.querySelectorAll('#developer-list-container > div');
+          
+          listItems.forEach(item => {
+            const itemText = item.textContent.toLowerCase();
+            if (itemText.includes(searchTerm)) {
+              item.style.display = 'block';
+            } else {
+              item.style.display = 'none';
+            }
+          });
+        });
+      }
+      
+      // Initialize comparison if URL has compare parameter
+      const urlParams = new URLSearchParams(window.location.search);
+      const compareWith = urlParams.get('compare');
+      
+      if (compareWith) {
+        const selectedDeveloper = sampleDevelopers.find(d => d.id === compareWith);
+        if (selectedDeveloper) {
+          updateComparisonDeveloper(selectedDeveloper);
+        }
+      }
+      
+      // Add a direct event listener to the compare button to populate items
+      document.querySelectorAll('[x-text="isCompareMode ? \'${t.software.expandView}\' : \'${t.developer.inlineCompare}\'"]').forEach(btn => {
+        btn.addEventListener('click', () => {
+          console.log("Compare button clicked, will load items");
+          // Short delay to ensure Alpine has updated its state
+          setTimeout(() => populateDeveloperItems(), 100);
+        });
+      });
+      
+      // Initialize - always load items in compare mode
+      setTimeout(() => {
+        // Check URL parameters
+        const urlParams = new URLSearchParams(window.location.search);
+        const compareWith = urlParams.get('compare');
+        
+        // Check if we're in compare mode through Alpine.js
+        if (comparisonComponent && comparisonComponent.$data.isCompareMode) {
+          console.log("We're in compare mode, loading items immediately");
+          populateDeveloperItems();
+        } else if (compareWith) {
+          console.log("Compare parameter found in URL, loading items");
+          populateDeveloperItems();
+        }
+      }, 500);
+    });
+  </script>
+</BaseLayout>
+
+<style>
+  /* Hide scrollbar but allow scrolling */
+  .hide-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;  /* Chrome, Safari and Opera */
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Category pill filtering
+    const categoryPills = document.querySelectorAll('.category-pill');
+    const softwareCards = document.querySelectorAll('.software-card');
+    
+    // Set up click event for category pills
+    categoryPills.forEach(pill => {
+      pill.addEventListener('click', () => {
+        // Update active state
+        categoryPills.forEach(p => p.classList.remove('active', 'bg-primary', 'text-white'));
+        categoryPills.forEach(p => p.classList.add('bg-white', 'dark:bg-gray-700', 'text-gray-800', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-gray-600'));
+        
+        pill.classList.add('active', 'bg-primary', 'text-white');
+        pill.classList.remove('bg-white', 'dark:bg-gray-700', 'text-gray-800', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-gray-600');
+        
+        const selectedCategory = pill.getAttribute('data-category');
+        
+        // Filter software cards
+        softwareCards.forEach(card => {
+          if (selectedCategory === 'all') {
+            card.classList.remove('hidden');
+          } else {
+            const categories = JSON.parse(card.getAttribute('data-categories') || '[]');
+            if (categories.includes(selectedCategory)) {
+              card.classList.remove('hidden');
+            } else {
+              card.classList.add('hidden');
+            }
+          }
+        });
+      });
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/[lang]/developers/index.astro b/apps-archived/techbase/apps/web/src/pages/[lang]/developers/index.astro
new file mode 100644
index 000000000..112e1f2a6
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/[lang]/developers/index.astro
@@ -0,0 +1,75 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import DeveloperCard from '../../../components/DeveloperCard.astro';
+import { getCollection } from 'astro:content';
+import { loadTranslations } from '../../../utils/i18n';
+import { i18nConfig } from '../../../content/config';
+
+export async function getStaticPaths() {
+  return i18nConfig.locales.map(locale => {
+    return {
+      params: { lang: locale },
+      props: { locale }
+    };
+  });
+}
+
+const { locale } = Astro.props;
+const t = await loadTranslations(locale);
+
+// Get all developers
+const allDevelopers = await getCollection('developers');
+const developers = allDevelopers
+  .filter(entry => entry.id.startsWith(locale + '/'))
+  .map(entry => {
+    let id = entry.id.split('/')[1]; // Get the id part after locale/
+    // Remove .md extension if present
+    if (id.endsWith('.md')) {
+      id = id.replace('.md', '');
+    }
+    return {
+      id,
+      ...entry.data
+    };
+  });
+
+// Get software counts for each developer
+const allSoftware = await getCollection('software');
+const developerSoftwareCounts = {};
+
+developers.forEach(developer => {
+  // When comparing developer IDs, remove .md extension
+  developerSoftwareCounts[developer.id] = allSoftware.filter(
+    software => {
+      const devId = software.data.developer;
+      const cleanDevId = devId ? devId.replace('.md', '') : '';
+      return software.id.startsWith(locale + '/') && cleanDevId === developer.id;
+    }
+  ).length;
+});
+---
+
+<BaseLayout title={t.common.developers}>
+  <div class="container mx-auto px-4 py-8">
+    <h1 class="text-3xl font-bold mb-8 dark:text-white">{t.common.developers}</h1>
+    
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {developers.map(developer => {
+        // Add the software count to the developer object for DeveloperCard
+        developer.softwareCount = developerSoftwareCounts[developer.id];
+        
+        return (
+          <a href={`/${locale}/developers/${developer.id}`} class="block group">
+            <DeveloperCard developer={developer} />
+          </a>
+        );
+      })}
+    </div>
+    
+    {developers.length === 0 && (
+      <div class="text-center py-12">
+        <p class="text-gray-600 dark:text-gray-400">No developers found.</p>
+      </div>
+    )}
+  </div>
+</BaseLayout>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/[lang]/index.astro b/apps-archived/techbase/apps/web/src/pages/[lang]/index.astro
new file mode 100644
index 000000000..77b26ba76
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/[lang]/index.astro
@@ -0,0 +1,347 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import SoftwareCard from '../../components/SoftwareCard.astro';
+import SearchBar from '../../components/SearchBar.astro';
+import { loadTranslations } from '../../utils/i18n';
+import { i18nConfig } from '../../content/config';
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  return i18nConfig.locales.map(locale => {
+    return {
+      params: { lang: locale },
+      props: { locale }
+    };
+  });
+}
+
+const { locale } = Astro.props;
+const t = await loadTranslations(locale);
+
+// Fetch software data from content collections
+const allSoftware = await getCollection('software');
+
+// Filter software by locale
+const localeSoftware = allSoftware
+  .filter(entry => entry.id.startsWith(locale + '/'))
+  .map(entry => {
+    const id = entry.id.split('/')[1]; // Get the id part after locale/
+    return {
+      id,
+      ...entry.data,
+      // Add empty metrics for now - in real implementation, these would come from Supabase
+      metrics: {
+        easeOfUse: { average: 4.2, count: 15 },
+        featureRichness: { average: 3.8, count: 12 },
+        valueForMoney: { average: 4.5, count: 18 },
+        support: { average: 3.5, count: 10 },
+        reliability: { average: 4.0, count: 14 }
+      }
+    };
+  });
+
+// Featured software would be a curated list or most popular
+const featuredSoftware = localeSoftware;
+
+// Fetch categories from content collections
+const allCategories = await getCollection('categories');
+
+// Filter categories by locale and add debug info
+const categories = allCategories
+  .filter(entry => entry.id.startsWith(locale + '/'))
+  .map(entry => {
+    const id = entry.id.split('/')[1]; // Get the id part after locale/
+    console.log(`Category "${entry.data.name}" has ID: ${id}`);
+    return {
+      id,
+      ...entry.data
+    };
+  });
+---
+
+<BaseLayout title={t.homepage.title}>
+  <!-- Hero Section -->
+  <section class="relative py-20 overflow-hidden bg-gradient-to-br from-blue-700 via-blue-800 to-blue-900 w-screen mt-[-16px]">
+    <!-- Small Grid (Mobile) -->
+    <div class="absolute inset-0 opacity-5 block sm:hidden">
+      <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id="grid-sm" width="5" height="5" patternUnits="userSpaceOnUse">
+            <rect width="5" height="5" fill="none" stroke="white" stroke-width="0.2" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#grid-sm)" />
+      </svg>
+    </div>
+    
+    <!-- Medium Grid (Tablet) -->
+    <div class="absolute inset-0 opacity-5 hidden sm:block md:hidden">
+      <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id="grid-md" width="8" height="8" patternUnits="userSpaceOnUse">
+            <rect width="8" height="8" fill="none" stroke="white" stroke-width="0.2" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#grid-md)" />
+      </svg>
+    </div>
+    
+    <!-- Large Grid (Desktop) -->
+    <div class="absolute inset-0 opacity-5 hidden md:block lg:hidden">
+      <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id="grid-lg" width="12" height="12" patternUnits="userSpaceOnUse">
+            <rect width="12" height="12" fill="none" stroke="white" stroke-width="0.3" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#grid-lg)" />
+      </svg>
+    </div>
+    
+    <!-- Extra Large Grid (Large Desktop) -->
+    <div class="absolute inset-0 opacity-5 hidden lg:block">
+      <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id="grid-xl" width="16" height="16" patternUnits="userSpaceOnUse">
+            <rect width="16" height="16" fill="none" stroke="white" stroke-width="0.3" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#grid-xl)" />
+      </svg>
+    </div>
+    <div class="absolute -top-24 -right-24 w-96 h-96 bg-blue-400 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob"></div>
+    <div class="absolute -bottom-24 -left-24 w-96 h-96 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob animation-delay-2000"></div>
+
+    <div class="container relative mx-auto px-4 flex flex-col md:flex-row items-center gap-12">
+      <div class="md:w-1/2 text-center md:text-left text-white">
+        <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">{t.homepage.title}</h1>
+        <p class="text-xl md:text-2xl mb-8 text-blue-100">{t.homepage.subtitle}</p>
+        <div class="max-w-lg mx-auto md:mx-0 mb-8">
+          <SearchBar placeholder={`${t.common.search}...`} />
+        </div>
+        <div class="flex flex-wrap justify-center md:justify-start gap-4">
+          <a href={`/${locale}/categories`} class="btn bg-white text-primary hover:bg-gray-100 shadow-lg transform transition-transform hover:-translate-y-1">
+            {t.common.categories}
+          </a>
+          <a href={`/${locale}/compare`} class="btn bg-transparent border-2 border-white text-white hover:bg-white hover:text-primary shadow-lg transform transition-transform hover:-translate-y-1">
+            {t.common.compare}
+          </a>
+        </div>
+      </div>
+      <div class="md:w-1/2 flex justify-center">
+        <div class="relative w-full max-w-lg">
+          <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div>
+          <div class="absolute top-0 -right-4 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div>
+          <div class="absolute -bottom-8 left-20 w-72 h-72 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div>
+          <div class="relative">
+            <div class="w-full h-full bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20 shadow-2xl p-8">
+              <div class="grid grid-cols-2 gap-4">
+                {featuredSoftware.slice(0, 4).map((software, index) => (
+                  <div class="bg-white/20 rounded-lg p-4 flex flex-col items-center justify-center hover:bg-white/30 transition-colors">
+                    <div class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center mb-2">
+                      {software.icon || '💻'}
+                    </div>
+                    <p class="text-white font-medium text-center">{software.name}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  
+  <!-- Software Listings Section with Category Filter -->
+  <section class="py-16">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl font-bold mb-8 text-center">{t.homepage.software || "Software"}</h2>
+      
+      <!-- Category Pills as Horizontal Scrollable Filter -->
+      <div class="relative mb-8">
+        <div class="overflow-x-auto pb-4 hide-scrollbar">
+          <div class="flex space-x-2 min-w-max px-2">
+            <button 
+              class="category-pill active bg-primary text-white px-4 py-2 rounded-full text-sm font-medium shadow-md transform transition-all hover:shadow-lg" 
+              data-category="all"
+            >
+              {t.common.all || "All"}
+            </button>
+            {categories.map(category => {
+              // Ensure the category ID does not have .md extension
+              const cleanId = category.id.replace('.md', '');
+              return (
+                <button 
+                  class="category-pill bg-white dark:bg-gray-700 text-gray-800 dark:text-white px-4 py-2 rounded-full text-sm font-medium shadow-md transform transition-all hover:shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600" 
+                  data-category={cleanId}
+                  data-category-name={category.name}
+                >
+                  {category.name}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        <div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-white dark:from-gray-900 to-transparent pointer-events-none"></div>
+        <div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white dark:from-gray-900 to-transparent pointer-events-none"></div>
+      </div>
+      
+      <!-- Software Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {localeSoftware.map(software => {
+          // Ensure categories is an array and log for debugging
+          const categories = software.categories || [];
+          console.log(`Software ${software.name} categories:`, categories);
+          return (
+            <div class="software-card" data-categories={JSON.stringify(categories)}>
+              <SoftwareCard software={software} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  </section>
+  
+  <!-- Client-side filtering script -->
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const categoryPills = document.querySelectorAll('.category-pill');
+      const softwareCards = document.querySelectorAll('.software-card');
+      
+      // Debug function
+      function debugLog(message, data) {
+        console.log(message, data);
+      }
+      
+      // Set up click event for category pills
+      categoryPills.forEach(pill => {
+        pill.addEventListener('click', () => {
+          // Update active state
+          categoryPills.forEach(p => p.classList.remove('active', 'bg-primary', 'text-white'));
+          categoryPills.forEach(p => p.classList.add('bg-white', 'dark:bg-gray-700', 'text-gray-800', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-gray-600'));
+          
+          pill.classList.add('active', 'bg-primary', 'text-white');
+          pill.classList.remove('bg-white', 'dark:bg-gray-700', 'text-gray-800', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-gray-600');
+          
+          // Remove .md from the category ID if present
+          let selectedCategory = pill.getAttribute('data-category');
+          selectedCategory = selectedCategory.replace('.md', '');
+          debugLog('Selected category (cleaned):', selectedCategory);
+          
+          // Filter software cards
+          softwareCards.forEach(card => {
+            try {
+              if (selectedCategory === 'all') {
+                card.classList.remove('hidden');
+                return;
+              }
+              
+              const categoriesAttr = card.getAttribute('data-categories');
+              debugLog('Card categories attribute:', categoriesAttr);
+              
+              // Handle potential JSON parsing errors gracefully
+              let categories = [];
+              try {
+                categories = JSON.parse(categoriesAttr || '[]');
+              } catch (e) {
+                debugLog('Error parsing categories:', e);
+                categories = [];
+              }
+              
+              debugLog('Parsed categories:', categories);
+              
+              // Get category name as well as ID for matching
+              const categoryPill = document.querySelector(`.category-pill[data-category="${selectedCategory}"]`);
+              const categoryName = categoryPill ? categoryPill.getAttribute('data-category-name') : '';
+              
+              debugLog('Category name from pill:', categoryName);
+              
+              // Convert everything to lowercase for case-insensitive comparison
+              const lowerSelectedCategory = selectedCategory.toLowerCase();
+              const lowerCategoryName = categoryName ? categoryName.toLowerCase() : '';
+              const lowerCategories = categories.map(c => typeof c === 'string' ? c.toLowerCase() : '');
+              
+              debugLog('Lower categories:', lowerCategories);
+              debugLog('Looking for category ID:', lowerSelectedCategory);
+              debugLog('Looking for category name:', lowerCategoryName);
+              
+              // Show the card if it contains either the selected category ID or name (case insensitive)
+              if (lowerCategories.includes(lowerSelectedCategory) || 
+                  (lowerCategoryName && lowerCategories.includes(lowerCategoryName))) {
+                debugLog('Match found!', card);
+                card.classList.remove('hidden');
+              } else {
+                debugLog('No match, hiding card', card);
+                card.classList.add('hidden');
+              }
+            } catch (error) {
+              console.error('Error in filtering:', error);
+              // If there's an error, we'll show the card to be safe
+              card.classList.remove('hidden');
+            }
+          });
+        });
+      });
+      
+      // Log initial state for debugging
+      debugLog('All category pills:', categoryPills);
+      debugLog('All software cards:', softwareCards);
+      softwareCards.forEach(card => {
+        debugLog('Card data-categories:', card.getAttribute('data-categories'));
+      });
+    });
+  </script>
+  
+  <!-- Categories Section -->
+  {categories.length > 0 && (
+    <section class="py-12 bg-gray-50 dark:bg-gray-800 transition-colors duration-200">
+      <div class="container mx-auto px-4">
+        <h2 class="text-3xl font-bold mb-8 text-center dark:text-white">{t.homepage.categories}</h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {categories.map(category => (
+            <a href={`/${locale}/category/${category.id}`} class="block group">
+              <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm overflow-hidden border border-gray-100 dark:border-gray-600 transition-all group-hover:shadow-md h-full">
+                <div class="p-6">
+                  <div class="flex items-center mb-4">
+                    {category.icon && (
+                      <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 dark:bg-opacity-20 flex items-center justify-center mr-4 text-2xl">
+                        {category.icon}
+                      </div>
+                    )}
+                    
+                    <h3 class="text-xl font-bold group-hover:text-primary dark:group-hover:text-blue-400 dark:text-white transition-colors">
+                      {category.name}
+                    </h3>
+                  </div>
+                  
+                  <p class="text-gray-600 dark:text-gray-300">
+                    {category.description}
+                  </p>
+                </div>
+                
+                <div class="bg-gray-50 dark:bg-gray-600 px-6 py-3 border-t border-gray-100 dark:border-gray-700">
+                  <div class="flex justify-end items-center">
+                    <span class="text-primary dark:text-blue-400 group-hover:underline">
+                      {t.common.explore} →
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  )}
+  
+  <!-- Call to Action Section -->
+  <section class="py-16 bg-gray-800 dark:bg-gray-900 text-white transition-colors duration-200">
+    <div class="container mx-auto px-4 text-center">
+      <h2 class="text-3xl font-bold mb-4">Compare Software Solutions</h2>
+      <p class="text-xl mb-8 max-w-3xl mx-auto">Find the perfect software for your needs with our comprehensive comparison tools.</p>
+      <a href={`/${locale}/compare`} class="btn bg-primary dark:bg-blue-600 text-white hover:bg-blue-600 dark:hover:bg-blue-700 text-lg px-8 py-3 transition-colors duration-200">
+        {t.common.compare}
+      </a>
+    </div>
+  </section>
+</BaseLayout>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/[lang]/software.astro b/apps-archived/techbase/apps/web/src/pages/[lang]/software.astro
new file mode 100644
index 000000000..f690f47ab
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/[lang]/software.astro
@@ -0,0 +1,242 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import SoftwareCard from '../../components/SoftwareCard.astro';
+import SearchBar from '../../components/SearchBar.astro';
+import { loadTranslations } from '../../utils/i18n';
+import { i18nConfig } from '../../content/config';
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  return i18nConfig.locales.map(locale => {
+    return {
+      params: { lang: locale },
+      props: { locale }
+    };
+  });
+}
+
+const { locale } = Astro.props;
+const t = await loadTranslations(locale);
+
+// Fetch software data from content collections
+const allSoftware = await getCollection('software');
+
+// Filter software by locale
+const localeSoftware = allSoftware
+  .filter(entry => entry.id.startsWith(locale + '/'))
+  .map(entry => {
+    const id = entry.id.split('/')[1]; // Get the id part after locale/
+    return {
+      id,
+      ...entry.data,
+      // Add empty metrics for now - in real implementation, these would come from Supabase
+      metrics: {
+        easeOfUse: { average: 4.2, count: 15 },
+        featureRichness: { average: 3.8, count: 12 },
+        valueForMoney: { average: 4.5, count: 18 },
+        support: { average: 3.5, count: 10 },
+        reliability: { average: 4.0, count: 14 }
+      }
+    };
+  });
+
+// Fetch categories from content collections
+const allCategories = await getCollection('categories');
+
+// Filter categories by locale and add debug info
+const categories = allCategories
+  .filter(entry => entry.id.startsWith(locale + '/'))
+  .map(entry => {
+    const id = entry.id.split('/')[1]; // Get the id part after locale/
+    return {
+      id,
+      ...entry.data
+    };
+  });
+---
+
+<BaseLayout title={t.common.software}>
+  <!-- Hero section -->
+  <section class="relative py-16 bg-gradient-to-br from-primary to-blue-700 text-white w-full overflow-hidden">
+    <div class="absolute inset-0 opacity-10">
+      <svg class="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id="grid-pattern" width="10" height="10" patternUnits="userSpaceOnUse">
+            <rect width="10" height="10" fill="none" stroke="white" stroke-width="0.5" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#grid-pattern)" />
+      </svg>
+    </div>
+    <div class="absolute bottom-0 right-0 w-64 h-64 bg-blue-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
+    <div class="absolute top-0 left-0 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
+    
+    <div class="container mx-auto px-4 relative z-10 text-center">
+      <h1 class="text-4xl md:text-5xl font-bold mb-6">{t.common.software}</h1>
+      <p class="text-xl max-w-2xl mx-auto mb-8 text-blue-100">
+        {locale === 'de' 
+          ? 'Entdecken Sie Software-Lösungen für jede Anforderung und finden Sie die perfekte Wahl für Ihre Bedürfnisse.'
+          : 'Discover software solutions for every requirement and find the perfect choice for your needs.'}
+      </p>
+      
+      <!-- Compact Search Bar -->
+      <div class="max-w-xl mx-auto mb-4">
+        <SearchBar placeholder={`${t.common.search}...`} />
+      </div>
+      
+      <div class="mt-4">
+        <span class="inline-block bg-white bg-opacity-20 backdrop-blur-sm px-4 py-2 rounded-full text-sm">
+          {localeSoftware.length} {localeSoftware.length === 1 
+            ? (locale === 'de' ? 'Software' : 'Software')
+            : (locale === 'de' ? 'Software-Produkte' : 'Software Products')}
+        </span>
+      </div>
+    </div>
+  </section>
+  
+  <div class="container mx-auto px-4 py-12">
+    
+    <!-- Category Pills as Horizontal Scrollable Filter -->
+    <div class="relative mb-8">
+      <div class="overflow-x-auto pb-4 hide-scrollbar">
+        <div class="flex space-x-2 min-w-max px-2">
+          <button 
+            class="category-pill active bg-primary text-white px-4 py-2 rounded-full text-sm font-medium shadow-md transform transition-all hover:shadow-lg" 
+            data-category="all"
+          >
+            {t.common.all}
+          </button>
+          {categories.map(category => {
+            // Ensure the category ID does not have .md extension
+            const cleanId = category.id.replace('.md', '');
+            return (
+              <button 
+                class="category-pill bg-white dark:bg-gray-700 text-gray-800 dark:text-white px-4 py-2 rounded-full text-sm font-medium shadow-md transform transition-all hover:shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600" 
+                data-category={cleanId}
+                data-category-name={category.name}
+              >
+                {category.name}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+      <div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-white dark:from-gray-900 to-transparent pointer-events-none"></div>
+      <div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white dark:from-gray-900 to-transparent pointer-events-none"></div>
+    </div>
+    
+    <!-- Software Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {localeSoftware.map(software => {
+        // Ensure categories is an array and log for debugging
+        const categories = software.categories || [];
+        return (
+          <div class="software-card" data-categories={JSON.stringify(categories)}>
+            <SoftwareCard software={software} />
+          </div>
+        );
+      })}
+    </div>
+  </div>
+  
+  <!-- Client-side filtering script -->
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const categoryPills = document.querySelectorAll('.category-pill');
+      const softwareCards = document.querySelectorAll('.software-card');
+      
+      // Debug function
+      function debugLog(message, data) {
+        console.log(message, data);
+      }
+      
+      // Set up click event for category pills
+      categoryPills.forEach(pill => {
+        pill.addEventListener('click', () => {
+          // Update active state
+          categoryPills.forEach(p => p.classList.remove('active', 'bg-primary', 'text-white'));
+          categoryPills.forEach(p => p.classList.add('bg-white', 'dark:bg-gray-700', 'text-gray-800', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-gray-600'));
+          
+          pill.classList.add('active', 'bg-primary', 'text-white');
+          pill.classList.remove('bg-white', 'dark:bg-gray-700', 'text-gray-800', 'dark:text-white', 'hover:bg-gray-100', 'dark:hover:bg-gray-600');
+          
+          // Remove .md from the category ID if present
+          let selectedCategory = pill.getAttribute('data-category');
+          selectedCategory = selectedCategory.replace('.md', '');
+          debugLog('Selected category (cleaned):', selectedCategory);
+          
+          // Filter software cards
+          softwareCards.forEach(card => {
+            try {
+              if (selectedCategory === 'all') {
+                card.classList.remove('hidden');
+                return;
+              }
+              
+              const categoriesAttr = card.getAttribute('data-categories');
+              debugLog('Card categories attribute:', categoriesAttr);
+              
+              // Handle potential JSON parsing errors gracefully
+              let categories = [];
+              try {
+                categories = JSON.parse(categoriesAttr || '[]');
+              } catch (e) {
+                debugLog('Error parsing categories:', e);
+                categories = [];
+              }
+              
+              debugLog('Parsed categories:', categories);
+              
+              // Get category name as well as ID for matching
+              const categoryPill = document.querySelector(`.category-pill[data-category="${selectedCategory}"]`);
+              const categoryName = categoryPill ? categoryPill.getAttribute('data-category-name') : '';
+              
+              debugLog('Category name from pill:', categoryName);
+              
+              // Convert everything to lowercase for case-insensitive comparison
+              const lowerSelectedCategory = selectedCategory.toLowerCase();
+              const lowerCategoryName = categoryName ? categoryName.toLowerCase() : '';
+              const lowerCategories = categories.map(c => typeof c === 'string' ? c.toLowerCase() : '');
+              
+              debugLog('Lower categories:', lowerCategories);
+              debugLog('Looking for category ID:', lowerSelectedCategory);
+              debugLog('Looking for category name:', lowerCategoryName);
+              
+              // Show the card if it contains either the selected category ID or name (case insensitive)
+              if (lowerCategories.includes(lowerSelectedCategory) || 
+                  (lowerCategoryName && lowerCategories.includes(lowerCategoryName))) {
+                debugLog('Match found!', card);
+                card.classList.remove('hidden');
+              } else {
+                debugLog('No match, hiding card', card);
+                card.classList.add('hidden');
+              }
+            } catch (error) {
+              console.error('Error in filtering:', error);
+              // If there's an error, we'll show the card to be safe
+              card.classList.remove('hidden');
+            }
+          });
+        });
+      });
+      
+      // Log initial state for debugging
+      debugLog('All category pills:', categoryPills);
+      debugLog('All software cards:', softwareCards);
+      softwareCards.forEach(card => {
+        debugLog('Card data-categories:', card.getAttribute('data-categories'));
+      });
+    });
+  </script>
+  
+  <style>
+    /* Hide scrollbar but maintain scrolling functionality */
+    .hide-scrollbar {
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;     /* Firefox */
+    }
+    .hide-scrollbar::-webkit-scrollbar {
+      display: none;  /* Chrome, Safari, Opera */
+    }
+  </style>
+</BaseLayout>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/[lang]/software/[id].astro b/apps-archived/techbase/apps/web/src/pages/[lang]/software/[id].astro
new file mode 100644
index 000000000..8be0ccb5a
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/[lang]/software/[id].astro
@@ -0,0 +1,137 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import { loadTranslations } from '../../../utils/i18n';
+import { i18nConfig } from '../../../content/config';
+import { getCollection } from 'astro:content';
+import SoftwarePanel from '../../../components/software/SoftwarePanel.astro';
+import ComparePanel from '../../../components/software/ComparePanel.astro';
+
+export async function getStaticPaths() {
+  const allSoftware = await getCollection('software');
+  
+  return allSoftware.map(entry => {
+    const [locale, id] = entry.id.split('/');
+    return {
+      params: { lang: locale, id },
+      props: { entry, locale, id, allSoftware }
+    };
+  });
+}
+
+const { entry, locale, id, allSoftware } = Astro.props;
+const t = await loadTranslations(locale);
+
+// Get software data from the entry
+const software = {
+  id,
+  ...entry.data
+};
+
+// Prepare similar software for the comparison feature
+const similarSoftwareEntries = allSoftware.filter(item => {
+  // Skip the current software
+  if (item.id === entry.id) return false;
+  
+  // Extract the software's locale and categories
+  const [itemLocale, itemId] = item.id.split('/');
+  const itemCategories = item.data.categories || [];
+  
+  // Only include software with the same locale and at least one shared category
+  return itemLocale === locale && 
+    itemCategories.some(cat => software.categories.includes(cat));
+});
+
+// Convert entries to a more usable format for the frontend
+const similarSoftware = similarSoftwareEntries.map(item => {
+  const [itemLocale, itemId] = item.id.split('/');
+  return {
+    id: itemId,
+    name: item.data.name,
+    description: item.data.description,
+    categories: item.data.categories || [],
+    logo: item.data.logo || '/logos/sample-logo.svg'
+  };
+});
+
+
+// In a real implementation, these metrics would come from Supabase
+const metrics = {
+  easeOfUse: { average: 4.2, count: 15 },
+  featureRichness: { average: 3.8, count: 12 },
+  valueForMoney: { average: 4.5, count: 18 },
+  support: { average: 3.5, count: 10 },
+  reliability: { average: 4.0, count: 14 }
+};
+---
+
+<BaseLayout title={software.name}>
+  <div 
+    id="softwareDetail"
+    data-software-id={software.id}
+    data-software={JSON.stringify(software)}
+    data-similar-software={JSON.stringify(similarSoftware)}
+    class="container mx-auto px-0 py-8"
+  >
+    <!-- Entfernt - Controls werden direkt im Panel angezeigt -->
+    
+    <!-- Flexibles Layout für die Software-Ansicht -->
+    <div 
+      class="flex flex-col lg:flex-row software-container w-full" 
+      style="display: flex; width: 100%;"
+    >
+      <!-- Linke Spalte - Aktuelle Software -->
+      <div 
+        class="transition-all overflow-hidden left-panel px-4" 
+        style="flex: 1; width: 100%;"
+      >
+        <SoftwarePanel 
+          software={software} 
+          similarSoftware={similarSoftware} 
+          metrics={metrics} 
+          locale={locale}
+          mode="detail"
+        />
+      </div>
+      
+      <!-- Vergleichs-Panels (werden per JS angezeigt) -->
+      <div class="compare-panels-container hidden" style="display: none; flex: 1;">
+        <!-- Erstes Vergleichspanel -->
+        <div class="compare-panel-container hidden lg:border-l border-gray-200 dark:border-gray-700 px-4" style="flex: 1; width: 100%;">
+          <SoftwarePanel
+            software={software}
+            locale={locale}
+            mode="comparison"
+          />
+        </div>
+        
+        <!-- Zweites Vergleichspanel (initial versteckt) -->
+        <div class="compare-panel-container-2 hidden lg:border-l border-gray-200 dark:border-gray-700 px-4" style="flex: 1; width: 100%;">
+          <SoftwarePanel
+            software={software}
+            locale={locale}
+            mode="comparison"
+          />
+        </div>
+        
+        <!-- Drittes Vergleichspanel (initial versteckt) -->
+        <div class="compare-panel-container-3 hidden lg:border-l border-gray-200 dark:border-gray-700 px-4" style="flex: 1; width: 100%;">
+          <SoftwarePanel
+            software={software}
+            locale={locale}
+            mode="comparison"
+          />
+        </div>
+      </div>
+    </div>
+    
+    <!-- Mobile-Ansicht-Umschalter (via JS eingeblendet) -->
+    <div class="mobile-switcher hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-3 flex justify-center space-x-4 lg:hidden z-10">
+      <button class="left-view-btn px-4 py-2 rounded-md transition-colors bg-primary text-white">
+        {software.name}
+      </button>
+      <button class="right-view-btn px-4 py-2 rounded-md transition-colors bg-gray-100 dark:bg-gray-700">
+        Compare
+      </button>
+    </div>
+  </div>
+</BaseLayout>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/admin/comments.astro b/apps-archived/techbase/apps/web/src/pages/admin/comments.astro
new file mode 100644
index 000000000..85e9849ed
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/admin/comments.astro
@@ -0,0 +1,189 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+import { supabase } from '../../utils/supabase';
+import { getCollection } from 'astro:content';
+
+// We would normally check authentication here
+// For demo purposes, we'll just fetch the comments
+
+// Default empty arrays in case of errors
+let pendingComments = [];
+let approvedComments = [];
+
+try {
+  // Fetch pending comments
+  const { data: pending, error: pendingError } = await supabase
+    .from('comments')
+    .select('*')
+    .eq('is_approved', false)
+    .eq('is_spam', false)
+    .order('created_at', { ascending: false });
+
+  if (!pendingError && pending) {
+    pendingComments = pending;
+  }
+
+  // Fetch recent approved comments
+  const { data: approved, error: approvedError } = await supabase
+    .from('comments')
+    .select('*')
+    .eq('is_approved', true)
+    .order('created_at', { ascending: false })
+    .limit(5);
+
+  if (!approvedError && approved) {
+    approvedComments = approved;
+  }
+} catch (error) {
+  console.error('Error fetching comments:', error);
+  // Continue with empty arrays
+}
+
+// Create a map of software IDs to names using content collection instead of DB
+const softwareMap = {};
+
+try {
+  // Get all software entries from content collections
+  const allSoftware = await getCollection('software');
+  
+  // Build a map of software IDs to names
+  allSoftware.forEach(entry => {
+    const [locale, id] = entry.id.split('/');
+    const fullId = entry.id; // Use full ID as used in the comments table
+    softwareMap[fullId] = entry.data.name;
+  });
+} catch (error) {
+  console.error('Error loading software data:', error);
+}
+
+// Format date for display
+function formatDate(dateString) {
+  const date = new Date(dateString);
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
+
+// Handle comment moderation actions
+const { searchParams } = Astro.url;
+const actionType = searchParams.get('action');
+const commentId = searchParams.get('id');
+
+let actionResult = null;
+
+if (actionType && commentId) {
+  if (actionType === 'approve') {
+    const { data, error } = await supabase
+      .from('comments')
+      .update({ 
+        is_approved: true,
+        moderated_at: new Date().toISOString(),
+        moderated_by: 'admin' // In a real app, this would be the actual admin's ID
+      })
+      .eq('id', commentId);
+      
+    actionResult = error ? { success: false, message: error.message } : { success: true, message: 'Comment approved successfully' };
+  }
+  
+  if (actionType === 'reject') {
+    const { data, error } = await supabase
+      .from('comments')
+      .update({ 
+        is_spam: true,
+        moderated_at: new Date().toISOString(),
+        moderated_by: 'admin' // In a real app, this would be the actual admin's ID
+      })
+      .eq('id', commentId);
+      
+    actionResult = error ? { success: false, message: error.message } : { success: true, message: 'Comment marked as spam' };
+  }
+}
+---
+
+<AdminLayout title="Comment Moderation">
+  <!-- Action Result Notification -->
+  {actionResult && (
+    <div class={`mb-6 p-4 rounded-md ${actionResult.success ? 'bg-green-50 text-green-800' : 'bg-red-50 text-red-800'}`}>
+      {actionResult.message}
+    </div>
+  )}
+  
+  <!-- Pending Comments Section -->
+  <section class="bg-white rounded-lg shadow-sm p-6 mb-8">
+    <h2 class="text-xl font-bold mb-4">Pending Comments ({pendingComments?.length || 0})</h2>
+    
+    {pendingComments && pendingComments.length > 0 ? (
+      <div class="divide-y divide-gray-200">
+        {pendingComments.map(comment => (
+          <div class="py-4 first:pt-0 last:pb-0">
+            <div class="flex justify-between mb-2">
+              <div>
+                <span class="font-medium">{comment.user_name}</span>
+                <span class="mx-2 text-gray-400">•</span>
+                <span class="text-sm text-gray-500">On {softwareMap[comment.software_id] || comment.software_id}</span>
+              </div>
+              <div class="text-sm text-gray-500">{formatDate(comment.created_at)}</div>
+            </div>
+            
+            <p class="text-gray-700 mb-3">{comment.comment}</p>
+            
+            <div class="flex space-x-3">
+              <a 
+                href={`/admin/comments?action=approve&id=${comment.id}`} 
+                class="px-3 py-1.5 bg-green-50 text-green-700 rounded-md text-sm font-medium hover:bg-green-100"
+              >
+                Approve
+              </a>
+              <a 
+                href={`/admin/comments?action=reject&id=${comment.id}`} 
+                class="px-3 py-1.5 bg-red-50 text-red-700 rounded-md text-sm font-medium hover:bg-red-100"
+              >
+                Mark as Spam
+              </a>
+            </div>
+          </div>
+        ))}
+      </div>
+    ) : (
+      <div class="text-center py-8 text-gray-500">
+        No pending comments to moderate
+      </div>
+    )}
+  </section>
+  
+  <!-- Recent Approved Comments Section -->
+  <section class="bg-white rounded-lg shadow-sm p-6">
+    <h2 class="text-xl font-bold mb-4">Recently Approved Comments</h2>
+    
+    {approvedComments && approvedComments.length > 0 ? (
+      <div class="divide-y divide-gray-200">
+        {approvedComments.map(comment => (
+          <div class="py-4 first:pt-0 last:pb-0">
+            <div class="flex justify-between mb-2">
+              <div>
+                <span class="font-medium">{comment.user_name}</span>
+                <span class="mx-2 text-gray-400">•</span>
+                <span class="text-sm text-gray-500">On {softwareMap[comment.software_id] || comment.software_id}</span>
+              </div>
+              <div>
+                <span class="text-sm text-gray-500">{formatDate(comment.created_at)}</span>
+                <span class="mx-2 text-gray-400">•</span>
+                <span class="text-xs px-2 py-0.5 bg-green-100 text-green-800 rounded-full">Approved</span>
+              </div>
+            </div>
+            
+            <p class="text-gray-700">{comment.comment}</p>
+          </div>
+        ))}
+      </div>
+    ) : (
+      <div class="text-center py-8 text-gray-500">
+        No approved comments yet
+      </div>
+    )}
+  </section>
+</AdminLayout>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/admin/index.astro b/apps-archived/techbase/apps/web/src/pages/admin/index.astro
new file mode 100644
index 000000000..358c8ad83
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/admin/index.astro
@@ -0,0 +1,127 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+import { supabase } from '../../utils/supabase';
+
+// We would normally check authentication here
+// For demo purposes, we'll just fetch the statistics
+
+// Fetch comment statistics
+const { data: commentsData, error: commentsError } = await supabase
+  .from('comments')
+  .select('is_approved, is_spam', { count: 'exact' })
+  .order('created_at', { ascending: false });
+
+const totalComments = commentsData?.length || 0;
+const pendingComments = commentsData?.filter(c => !c.is_approved && !c.is_spam).length || 0;
+const approvedComments = commentsData?.filter(c => c.is_approved).length || 0;
+const spamComments = commentsData?.filter(c => c.is_spam).length || 0;
+
+// Fetch voting statistics
+const { data: votesData, error: votesError } = await supabase
+  .from('votes')
+  .select('metric', { count: 'exact' });
+
+const totalVotes = votesData?.length || 0;
+
+// Get metrics distribution
+const metricCounts = {};
+votesData?.forEach(vote => {
+  metricCounts[vote.metric] = (metricCounts[vote.metric] || 0) + 1;
+});
+
+// Format metric names for display
+const formatMetricName = (metric) => {
+  switch(metric) {
+    case 'easeOfUse': return 'Ease of Use';
+    case 'featureRichness': return 'Feature Richness';
+    case 'valueForMoney': return 'Value for Money';
+    case 'support': return 'Support';
+    case 'reliability': return 'Reliability';
+    default: return metric;
+  }
+};
+---
+
+<AdminLayout title="Dashboard">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+    <!-- Total Comments Card -->
+    <div class="bg-white rounded-lg shadow-sm p-6">
+      <h3 class="text-gray-500 text-sm font-medium uppercase tracking-wider mb-1">Total Comments</h3>
+      <p class="text-3xl font-bold">{totalComments}</p>
+      <div class="mt-2 flex">
+        <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2.5 py-0.5 rounded-full mr-2">
+          {pendingComments} pending
+        </span>
+        <span class="text-xs font-medium bg-green-100 text-green-800 px-2.5 py-0.5 rounded-full">
+          {approvedComments} approved
+        </span>
+      </div>
+    </div>
+    
+    <!-- Spam Comments Card -->
+    <div class="bg-white rounded-lg shadow-sm p-6">
+      <h3 class="text-gray-500 text-sm font-medium uppercase tracking-wider mb-1">Spam Comments</h3>
+      <p class="text-3xl font-bold">{spamComments}</p>
+      <div class="mt-2">
+        <span class="text-xs font-medium bg-red-100 text-red-800 px-2.5 py-0.5 rounded-full">
+          {((spamComments / totalComments) * 100).toFixed(1)}% of total
+        </span>
+      </div>
+    </div>
+    
+    <!-- Total Votes Card -->
+    <div class="bg-white rounded-lg shadow-sm p-6">
+      <h3 class="text-gray-500 text-sm font-medium uppercase tracking-wider mb-1">Total Votes</h3>
+      <p class="text-3xl font-bold">{totalVotes}</p>
+    </div>
+    
+    <!-- Recent Activity Card -->
+    <div class="bg-white rounded-lg shadow-sm p-6">
+      <h3 class="text-gray-500 text-sm font-medium uppercase tracking-wider mb-1">Pending Moderation</h3>
+      <p class="text-3xl font-bold">{pendingComments}</p>
+      <div class="mt-2">
+        <a href="/admin/comments" class="text-sm text-primary hover:underline">
+          Moderate comments →
+        </a>
+      </div>
+    </div>
+  </div>
+  
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
+    <!-- Vote Distribution Card -->
+    <div class="bg-white rounded-lg shadow-sm p-6 md:col-span-2">
+      <h3 class="font-semibold text-lg mb-4">Vote Distribution by Metric</h3>
+      
+      <div class="space-y-4">
+        {Object.entries(metricCounts).map(([metric, count]) => (
+          <div>
+            <div class="flex justify-between mb-1">
+              <span class="text-sm font-medium">{formatMetricName(metric)}</span>
+              <span class="text-sm text-gray-500">{count} votes ({((count / totalVotes) * 100).toFixed(1)}%)</span>
+            </div>
+            <div class="w-full bg-gray-200 rounded-full h-2.5">
+              <div class="bg-primary h-2.5 rounded-full" style={`width: ${(count / totalVotes) * 100}%`}></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+    
+    <!-- Quick Actions Card -->
+    <div class="bg-white rounded-lg shadow-sm p-6">
+      <h3 class="font-semibold text-lg mb-4">Quick Actions</h3>
+      
+      <div class="space-y-3">
+        <a href="/admin/comments" class="block p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition">
+          <div class="font-medium">Moderate Comments</div>
+          <div class="text-sm text-gray-500 mt-1">Review and approve pending comments</div>
+        </a>
+        
+        <a href="/" class="block p-3 bg-gray-50 hover:bg-gray-100 rounded-lg transition">
+          <div class="font-medium">View Website</div>
+          <div class="text-sm text-gray-500 mt-1">Go to the public-facing website</div>
+        </a>
+      </div>
+    </div>
+  </div>
+</AdminLayout>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/admin/login.astro b/apps-archived/techbase/apps/web/src/pages/admin/login.astro
new file mode 100644
index 000000000..41a6d6750
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/admin/login.astro
@@ -0,0 +1,107 @@
+---
+// In a real application, this would handle authentication
+// For the demo, we'll implement a simple form that redirects to the admin area
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login | TechBase Admin</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="stylesheet" href="/styles/global.css" />
+  </head>
+  <body class="bg-gray-100 min-h-screen flex items-center justify-center">
+    <div class="max-w-md w-full px-6 py-8 bg-white shadow-md rounded-lg" x-data="{ 
+      email: '', 
+      password: '',
+      error: '',
+      loading: false,
+      
+      handleSubmit() {
+        this.error = '';
+        this.loading = true;
+        
+        // Validate input
+        if (!this.email || !this.password) {
+          this.error = 'Please fill in all fields';
+          this.loading = false;
+          return;
+        }
+        
+        // Demo login logic (in a real app, this would call an API endpoint)
+        if (this.email === 'admin@techbase.ad' && this.password === 'admin') {
+          // Successful login
+          setTimeout(() => {
+            window.location.href = '/admin';
+          }, 1000);
+        } else {
+          // Failed login
+          this.error = 'Invalid email or password';
+          this.loading = false;
+        }
+      }
+    }">
+      <div class="text-center mb-8">
+        <h1 class="text-2xl font-bold text-gray-800 mb-2">TechBase Admin</h1>
+        <p class="text-gray-600">Sign in to access the admin panel</p>
+      </div>
+      
+      <form @submit.prevent="handleSubmit" class="space-y-4">
+        <div>
+          <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+          <input 
+            type="email" 
+            id="email" 
+            x-model="email"
+            placeholder="admin@techbase.ad"
+            class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" 
+          />
+        </div>
+        
+        <div>
+          <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+          <input 
+            type="password" 
+            id="password" 
+            x-model="password"
+            placeholder="••••••••"
+            class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" 
+          />
+        </div>
+        
+        <!-- Error message -->
+        <div x-show="error" class="text-red-600 text-sm" x-text="error"></div>
+        
+        <button 
+          type="submit" 
+          class="w-full py-2 px-4 bg-primary text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50"
+          :disabled="loading"
+        >
+          <span x-show="!loading">Sign In</span>
+          <span x-show="loading" class="flex items-center justify-center">
+            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            Loading...
+          </span>
+        </button>
+      </form>
+      
+      <div class="mt-6 text-center text-sm text-gray-500">
+        <p class="mb-2">Demo credentials:</p>
+        <p>Email: admin@techbase.ad</p>
+        <p>Password: admin</p>
+      </div>
+      
+      <div class="mt-6 text-center">
+        <a href="/" class="text-sm text-primary hover:underline">← Back to website</a>
+      </div>
+    </div>
+    
+    <!-- Include Alpine.js from CDN -->
+    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/api/comment.ts b/apps-archived/techbase/apps/web/src/pages/api/comment.ts
new file mode 100644
index 000000000..d2103a3ef
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/api/comment.ts
@@ -0,0 +1,69 @@
+import type { APIRoute } from 'astro';
+import { submitComment, getComments } from '../../utils/api';
+
+export const GET: APIRoute = async ({ url }) => {
+	const softwareId = url.searchParams.get('softwareId');
+
+	if (softwareId) {
+		try {
+			const comments = await getComments(softwareId);
+			return new Response(JSON.stringify(comments), {
+				status: 200,
+				headers: { 'Content-Type': 'application/json' },
+			});
+		} catch (error) {
+			return new Response(JSON.stringify([]), {
+				status: 200,
+				headers: { 'Content-Type': 'application/json' },
+			});
+		}
+	}
+
+	return new Response(JSON.stringify({ message: 'Comment API is working' }), {
+		status: 200,
+		headers: { 'Content-Type': 'application/json' },
+	});
+};
+
+export const POST: APIRoute = async ({ request }) => {
+	try {
+		const bodyText = await request.text();
+
+		let parsedData;
+		try {
+			parsedData = JSON.parse(bodyText);
+		} catch (parseError) {
+			return new Response(JSON.stringify({ error: 'Invalid JSON in request body' }), {
+				status: 400,
+				headers: { 'Content-Type': 'application/json' },
+			});
+		}
+
+		const { softwareId, userName, comment } = parsedData;
+
+		// Validate input
+		if (!softwareId || !userName || !comment) {
+			return new Response(JSON.stringify({ error: 'Missing required fields' }), {
+				status: 400,
+				headers: { 'Content-Type': 'application/json' },
+			});
+		}
+
+		// Forward to backend
+		const result = await submitComment(softwareId, userName, comment);
+
+		return new Response(JSON.stringify(result), {
+			status: 200,
+			headers: { 'Content-Type': 'application/json' },
+		});
+	} catch (error) {
+		console.error('Error processing comment request:', error);
+		return new Response(
+			JSON.stringify({ error: 'Failed to process comment request' }),
+			{
+				status: 500,
+				headers: { 'Content-Type': 'application/json' },
+			}
+		);
+	}
+};
diff --git a/apps-archived/techbase/apps/web/src/pages/api/software.json.ts b/apps-archived/techbase/apps/web/src/pages/api/software.json.ts
new file mode 100644
index 000000000..dd7d5a5df
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/api/software.json.ts
@@ -0,0 +1,82 @@
+import { getCollection } from 'astro:content';
+// Falls Supabase-Umgebungsvariablen fehlen, wenden wir einen Fallback an
+let supabase;
+try {
+  supabase = await import('../../utils/supabase').then(m => m.supabase);
+} catch (error) {
+  console.warn('Supabase client could not be initialized, using fallback data');
+}
+
+export async function GET() {
+  try {
+    // Software-Daten aus Content Collections abrufen
+    const allSoftware = await getCollection('software');
+    
+    // Metriken-Map für die Software-Daten
+    let metricsMap = {};
+    
+    // Versuche, Daten von Supabase zu laden, falls verfügbar
+    if (supabase) {
+      try {
+        const { data: metricsData, error } = await supabase
+          .from('software_metrics')
+          .select('*');
+        
+        if (error) {
+          console.error('Error fetching metrics:', error);
+          // Weiter mit leeren Metriken
+        } else if (metricsData) {
+          // Metrics in ein leicht zugängliches Format konvertieren
+          metricsData.forEach(item => {
+            if (!metricsMap[item.software_id]) {
+              metricsMap[item.software_id] = {};
+            }
+            metricsMap[item.software_id][item.metric] = {
+              average: parseFloat(item.average_rating) || 0,
+              count: parseInt(item.vote_count) || 0
+            };
+          });
+        }
+      } catch (error) {
+        console.error('Supabase query failed:', error);
+        // Weiter mit leeren Metriken
+      }
+    } else {
+      // Fallback: Dummy-Metriken für die Demo
+      allSoftware.forEach(software => {
+        metricsMap[software.id] = {
+          'usability': { average: 4.5, count: 25 },
+          'features': { average: 4.2, count: 18 },
+          'reliability': { average: 4.0, count: 22 }
+        };
+      });
+    }
+    
+    // Daten für die Suche aufbereiten
+    const searchData = allSoftware.map(entry => {
+      const [locale, id] = entry.id.split('/');
+      return {
+        id,
+        locale,
+        ...entry.data,
+        metrics: metricsMap[entry.id] || {},
+        url: `/${locale}/software/${id}`
+      };
+    });
+    
+    return new Response(JSON.stringify(searchData), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  } catch (error) {
+    console.error('Error generating software data:', error);
+    return new Response(JSON.stringify({ error: 'Failed to generate software data' }), {
+      status: 500,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  }
+}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/api/software/[id].json.ts b/apps-archived/techbase/apps/web/src/pages/api/software/[id].json.ts
new file mode 100644
index 000000000..8728a9d6e
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/api/software/[id].json.ts
@@ -0,0 +1,98 @@
+import { getCollection } from "astro:content";
+import type { APIRoute } from "astro";
+
+// Option 2: Generate static paths for all software
+export async function getStaticPaths() {
+  const allSoftware = await getCollection("software");
+  const uniqueSoftwareIds = new Set();
+  
+  // Extract unique software IDs
+  allSoftware.forEach(entry => {
+    const [locale, id] = entry.id.split('/');
+    uniqueSoftwareIds.add(id);
+  });
+  
+  // Create a path for each unique software ID
+  return Array.from(uniqueSoftwareIds).map(id => ({
+    params: { id }
+  }));
+}
+
+export const GET: APIRoute = async ({ params, request }) => {
+  const id = params.id;
+  if (!id) {
+    return new Response(
+      JSON.stringify({
+        error: "Missing id parameter",
+      }),
+      {
+        status: 400,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  // Get all software content
+  const allSoftware = await getCollection("software");
+  
+  // Find the requested software in any language
+  const matchingSoftware = allSoftware.filter(entry => {
+    const [locale, softwareId] = entry.id.split('/');
+    return softwareId === id;
+  });
+
+  if (matchingSoftware.length === 0) {
+    return new Response(
+      JSON.stringify({
+        error: "Software not found",
+      }),
+      {
+        status: 404,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  // Get the URL to determine the preferred locale
+  const url = new URL(request.url);
+  const lang = url.searchParams.get("lang") || "en";
+  
+  // Find the exact match for the language, or fallback to the first matching item
+  const localizedSoftware = matchingSoftware.find(entry => entry.id.startsWith(`${lang}/`)) || matchingSoftware[0];
+  
+  // Extract the locale and id from the entry
+  const [locale, softwareId] = localizedSoftware.id.split('/');
+
+  // Mock metrics data (in a real implementation, these would come from Supabase)
+  const metrics = {
+    easeOfUse: { average: 4.2, count: 15 },
+    featureRichness: { average: 3.8, count: 12 },
+    valueForMoney: { average: 4.5, count: 18 },
+    support: { average: 3.5, count: 10 },
+    reliability: { average: 4.0, count: 14 }
+  };
+
+  // Format the response with the software data and additional info
+  const responseData = {
+    id: softwareId,
+    locale,
+    ...localizedSoftware.data,
+    metrics
+  };
+
+  return new Response(
+    JSON.stringify(responseData),
+    {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+        // Add cache control for better performance
+        "Cache-Control": "public, max-age=3600" // Cache for 1 hour
+      },
+    }
+  );
+};
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/pages/api/vote.ts b/apps-archived/techbase/apps/web/src/pages/api/vote.ts
new file mode 100644
index 000000000..06acf38d7
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/api/vote.ts
@@ -0,0 +1,45 @@
+import type { APIRoute } from 'astro';
+import { submitVote } from '../../utils/api';
+
+export const POST: APIRoute = async ({ request }) => {
+	try {
+		const bodyText = await request.text();
+
+		let parsedData;
+		try {
+			parsedData = JSON.parse(bodyText);
+		} catch (parseError) {
+			return new Response(JSON.stringify({ error: 'Invalid JSON in vote request' }), {
+				status: 400,
+				headers: { 'Content-Type': 'application/json' },
+			});
+		}
+
+		const { softwareId, metric, rating } = parsedData;
+
+		// Validate input
+		if (!softwareId || !metric || !rating || isNaN(Number(rating))) {
+			return new Response(JSON.stringify({ error: 'Invalid vote data' }), {
+				status: 400,
+				headers: { 'Content-Type': 'application/json' },
+			});
+		}
+
+		// Forward to backend
+		const result = await submitVote(softwareId, metric, Number(rating));
+
+		return new Response(JSON.stringify(result), {
+			status: 200,
+			headers: { 'Content-Type': 'application/json' },
+		});
+	} catch (error) {
+		console.error('Error processing vote request:', error);
+		return new Response(
+			JSON.stringify({ error: 'Failed to process vote request' }),
+			{
+				status: 500,
+				headers: { 'Content-Type': 'application/json' },
+			}
+		);
+	}
+};
diff --git a/apps-archived/techbase/apps/web/src/pages/index.astro b/apps-archived/techbase/apps/web/src/pages/index.astro
new file mode 100644
index 000000000..7fffd4e17
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/pages/index.astro
@@ -0,0 +1,7 @@
+---
+import { getLocaleFromUrl } from '../utils/i18n';
+
+const locale = getLocaleFromUrl(Astro.url);
+---
+
+<meta http-equiv="refresh" content={`0;url=/${locale}`} />
diff --git a/apps-archived/techbase/apps/web/src/scripts/softwarePage.js b/apps-archived/techbase/apps/web/src/scripts/softwarePage.js
new file mode 100644
index 000000000..d2ad155ce
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/scripts/softwarePage.js
@@ -0,0 +1,49 @@
+// Software page Alpine.js initialization
+function initSoftwarePage() {
+  return {
+    isCompareMode: false,
+    selectedSoftwareId: null,
+    currentViewSide: 'left',
+    isLeftMinimized: false,
+    isRightMinimized: false,
+    
+    init() {
+      // Check URL for compare parameter
+      const urlParams = new URLSearchParams(window.location.search);
+      const compareWith = urlParams.get('compare');
+      
+      if (compareWith) {
+        this.isCompareMode = true;
+        this.selectedSoftwareId = compareWith;
+      }
+    },
+    
+    toggleCompareMode() {
+      this.isCompareMode = !this.isCompareMode;
+      if (!this.isCompareMode) {
+        const url = new URL(window.location.href);
+        url.searchParams.delete('compare');
+        window.history.pushState({}, '', url.toString());
+        this.selectedSoftwareId = null;
+      }
+    },
+    
+    switchViewSide(side) {
+      this.currentViewSide = side;
+    },
+    
+    toggleMinimize(side) {
+      if (side === 'left') {
+        this.isLeftMinimized = !this.isLeftMinimized;
+        if (this.isLeftMinimized && this.isRightMinimized) {
+          this.isRightMinimized = false;
+        }
+      } else {
+        this.isRightMinimized = !this.isRightMinimized;
+        if (this.isRightMinimized && this.isLeftMinimized) {
+          this.isLeftMinimized = false;
+        }
+      }
+    }
+  };
+}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/styles/global.css b/apps-archived/techbase/apps/web/src/styles/global.css
new file mode 100644
index 000000000..4dde50b38
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/styles/global.css
@@ -0,0 +1,104 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom global styles */
+html, body {
+  @apply overflow-x-hidden w-full max-w-full relative;
+}
+
+body {
+  @apply bg-gray-50 text-gray-900 transition-colors duration-200 ease-in-out;
+}
+
+body.dark {
+  @apply bg-gray-900 text-gray-100;
+}
+
+/* Ensure containers don't cause horizontal scrolling */
+.container {
+  @apply max-w-full;
+}
+
+h1 {
+  @apply text-3xl font-bold mb-4;
+}
+
+h2 {
+  @apply text-2xl font-bold mb-3;
+}
+
+h3 {
+  @apply text-xl font-bold mb-2;
+}
+
+a {
+  @apply text-primary hover:underline;
+}
+
+.dark a {
+  @apply text-blue-400;
+}
+
+.btn {
+  @apply px-4 py-2 rounded transition-all;
+}
+
+.btn-primary {
+  @apply bg-primary text-white hover:bg-blue-700;
+}
+
+.btn-secondary {
+  @apply bg-secondary text-white hover:bg-green-700;
+}
+
+/* Dark mode toggle button */
+.theme-toggle {
+  @apply cursor-pointer;
+}
+
+/* Animation utilities */
+@keyframes blob {
+  0% {
+    transform: scale(1);
+  }
+  33% {
+    transform: scale(1.1);
+  }
+  66% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.animate-blob {
+  animation: blob 7s infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+/* Mobile-spezifische Klassen */
+@media (max-width: 1024px) {
+  .hidden-mobile {
+    display: none !important;
+  }
+}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/utils/api.ts b/apps-archived/techbase/apps/web/src/utils/api.ts
new file mode 100644
index 000000000..71e2a83e2
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/utils/api.ts
@@ -0,0 +1,115 @@
+/**
+ * API Client for TechBase Backend
+ * Replaces Supabase with direct calls to NestJS backend
+ */
+
+const API_URL = import.meta.env.PUBLIC_BACKEND_URL || 'http://localhost:3021';
+
+interface VoteResult {
+	success: boolean;
+	newAverage: number;
+	voteCount: number;
+}
+
+interface CommentResult {
+	success: boolean;
+	message: string;
+}
+
+interface MetricsResult {
+	metrics: Record<string, { average: number; count: number }>;
+}
+
+/**
+ * Submit a vote for a software metric
+ */
+export async function submitVote(
+	softwareId: string,
+	metric: string,
+	rating: number
+): Promise<VoteResult> {
+	const res = await fetch(`${API_URL}/api/votes`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ softwareId, metric, rating }),
+	});
+
+	if (!res.ok) {
+		const error = await res.json().catch(() => ({ message: 'Vote failed' }));
+		throw new Error(error.message || 'Failed to submit vote');
+	}
+
+	return res.json();
+}
+
+/**
+ * Get metrics for a specific software
+ */
+export async function getMetrics(softwareId: string): Promise<MetricsResult> {
+	const res = await fetch(`${API_URL}/api/votes/${softwareId}/metrics`);
+
+	if (!res.ok) {
+		// Return default metrics on error
+		return {
+			metrics: {
+				easeOfUse: { average: 0, count: 0 },
+				featureRichness: { average: 0, count: 0 },
+				valueForMoney: { average: 0, count: 0 },
+				support: { average: 0, count: 0 },
+				reliability: { average: 0, count: 0 },
+			},
+		};
+	}
+
+	return res.json();
+}
+
+/**
+ * Get all metrics for multiple software items
+ */
+export async function getAllMetrics(): Promise<
+	Record<string, Record<string, { average: number; count: number }>>
+> {
+	const res = await fetch(`${API_URL}/api/votes/metrics/all`);
+
+	if (!res.ok) {
+		return {};
+	}
+
+	return res.json();
+}
+
+/**
+ * Submit a comment for review
+ */
+export async function submitComment(
+	softwareId: string,
+	userName: string,
+	comment: string
+): Promise<CommentResult> {
+	const res = await fetch(`${API_URL}/api/comments`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify({ softwareId, userName, comment }),
+	});
+
+	if (!res.ok) {
+		const error = await res.json().catch(() => ({ message: 'Comment failed' }));
+		throw new Error(error.message || 'Failed to submit comment');
+	}
+
+	return res.json();
+}
+
+/**
+ * Get approved comments for a software
+ */
+export async function getComments(softwareId: string): Promise<any[]> {
+	const res = await fetch(`${API_URL}/api/comments/${softwareId}`);
+
+	if (!res.ok) {
+		return [];
+	}
+
+	return res.json();
+}
diff --git a/apps-archived/techbase/apps/web/src/utils/i18n.ts b/apps-archived/techbase/apps/web/src/utils/i18n.ts
new file mode 100644
index 000000000..120f76c9d
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/utils/i18n.ts
@@ -0,0 +1,18 @@
+import { i18nConfig } from '../content/config';
+
+export function getLocalizedUrl(path: string, locale: string) {
+  return `/${locale}${path.startsWith('/') ? path : '/' + path}`;
+}
+
+export function getLocaleFromUrl(url: URL) {
+  const [, locale] = url.pathname.split('/');
+  if (i18nConfig.locales.includes(locale)) {
+    return locale;
+  }
+  return i18nConfig.defaultLocale;
+}
+
+export async function loadTranslations(locale: string) {
+  const translations = await import(`../content/translations/${locale}.json`);
+  return translations.default;
+}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/utils/search.ts b/apps-archived/techbase/apps/web/src/utils/search.ts
new file mode 100644
index 000000000..2675abff3
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/utils/search.ts
@@ -0,0 +1,117 @@
+// Search utility functions
+
+/**
+ * Filters software based on category, platform, pricing, and rating filters
+ * @param softwareList The list of software to filter
+ * @param filters The filters to apply
+ * @returns Filtered software list
+ */
+export function filterSoftware(softwareList, filters) {
+  return softwareList.filter(software => {
+    // Filter by categories
+    if (filters.categories.length > 0) {
+      if (!software.categories?.some(category => filters.categories.includes(category))) {
+        return false;
+      }
+    }
+    
+    // Filter by platforms
+    if (filters.platforms.length > 0) {
+      if (!software.platforms?.some(platform => filters.platforms.includes(platform))) {
+        return false;
+      }
+    }
+    
+    // Filter by price range
+    if (filters.priceRanges.length > 0) {
+      const hasFree = filters.priceRanges.includes('free') && 
+        software.pricing?.some(p => p.model.toLowerCase().includes('free') || p.price.includes('0') || p.price.includes('kostenlos'));
+      
+      const hasPaid = filters.priceRanges.includes('paid') && 
+        software.pricing?.some(p => !p.model.toLowerCase().includes('free') && 
+                               !p.model.toLowerCase().includes('subscription') && 
+                               !p.price.includes('0') && 
+                               !p.price.includes('kostenlos'));
+      
+      const hasSubscription = filters.priceRanges.includes('subscription') && 
+        software.pricing?.some(p => p.model.toLowerCase().includes('subscription') || 
+                               p.model.toLowerCase().includes('abonnement') ||
+                               p.price.toLowerCase().includes('/month') || 
+                               p.price.toLowerCase().includes('/monat'));
+      
+      if (!(hasFree || hasPaid || hasSubscription)) {
+        return false;
+      }
+    }
+    
+    // Filter by rating thresholds
+    const metrics = software.metrics || {};
+    for (const [metric, threshold] of Object.entries(filters.ratingThresholds)) {
+      if (threshold > 0) {
+        const rating = metrics[metric]?.average || 0;
+        if (rating < threshold) {
+          return false;
+        }
+      }
+    }
+    
+    return true;
+  });
+}
+
+/**
+ * Sorts software by various criteria
+ * @param softwareList The list of software to sort
+ * @param sortBy The sort criterion
+ * @param sortOrder The sort order ('asc' or 'desc')
+ * @returns Sorted software list
+ */
+export function sortSoftware(softwareList, sortBy = 'rating', sortOrder = 'desc') {
+  return [...softwareList].sort((a, b) => {
+    let valueA, valueB;
+    
+    switch (sortBy) {
+      case 'name':
+        valueA = a.name.toLowerCase();
+        valueB = b.name.toLowerCase();
+        break;
+        
+      case 'rating':
+        // Calculate average rating
+        const metricsA = a.metrics || {};
+        const metricsB = b.metrics || {};
+        
+        const ratingsA = Object.values(metricsA).map(m => m.average || 0);
+        const ratingsB = Object.values(metricsB).map(m => m.average || 0);
+        
+        valueA = ratingsA.length > 0 ? ratingsA.reduce((sum, r) => sum + r, 0) / ratingsA.length : 0;
+        valueB = ratingsB.length > 0 ? ratingsB.reduce((sum, r) => sum + r, 0) / ratingsB.length : 0;
+        break;
+        
+      case 'votes':
+        // Calculate total votes
+        const votesA = Object.values(a.metrics || {}).reduce((sum, m) => sum + (m.count || 0), 0);
+        const votesB = Object.values(b.metrics || {}).reduce((sum, m) => sum + (m.count || 0), 0);
+        
+        valueA = votesA;
+        valueB = votesB;
+        break;
+        
+      case 'date':
+        valueA = new Date(a.lastUpdated).getTime();
+        valueB = new Date(b.lastUpdated).getTime();
+        break;
+        
+      default:
+        valueA = a.name.toLowerCase();
+        valueB = b.name.toLowerCase();
+    }
+    
+    // Apply sort order
+    if (sortOrder === 'asc') {
+      return valueA > valueB ? 1 : valueA < valueB ? -1 : 0;
+    } else {
+      return valueA < valueB ? 1 : valueA > valueB ? -1 : 0;
+    }
+  });
+}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/utils/software.js b/apps-archived/techbase/apps/web/src/utils/software.js
new file mode 100644
index 000000000..3da71a95a
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/utils/software.js
@@ -0,0 +1,66 @@
+// Zentraler Daten-Store für Software-Informationen
+document.addEventListener('alpine:init', () => {
+  Alpine.store('software', {
+    // Aktuelle Software, die im Detail angezeigt wird (aus MD-Datei geladen)
+    current: null,
+    
+    // Software zum Vergleich (über API geladen)
+    comparison: null,
+    
+    // Ähnliche Software-Optionen
+    similar: [],
+    
+    // Status-Flags
+    loading: false,
+    error: null,
+    
+    // Modus-Flags
+    compareMode: false,
+    
+    // Lädt Vergleichssoftware über API
+    async loadComparisonSoftware(id, locale) {
+      if (!id) return;
+      
+      this.loading = true;
+      this.error = null;
+      
+      try {
+        const response = await fetch(`/api/software/${id}.json?lang=${locale}`);
+        
+        if (!response.ok) {
+          throw new Error(`Error loading software: ${response.status}`);
+        }
+        
+        const data = await response.json();
+        this.comparison = data;
+        
+        return data;
+      } catch (error) {
+        console.error('Error loading comparison software:', error);
+        this.error = 'Failed to load software data. Please try again.';
+      } finally {
+        this.loading = false;
+      }
+    },
+    
+    // Setzt den aktuellen Vergleichsmodus
+    setCompareMode(mode) {
+      this.compareMode = mode;
+      
+      if (!mode) {
+        // Bei Beenden des Vergleichsmodus Daten zurücksetzen
+        this.comparison = null;
+      }
+    },
+    
+    // Initialisiert ähnliche Software-Optionen
+    initSimilarSoftware(similarOptions) {
+      this.similar = similarOptions || [];
+    },
+    
+    // Initialisiert die aktuelle Software
+    initCurrentSoftware(software) {
+      this.current = software;
+    }
+  });
+});
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/src/utils/softwareDataHandler.ts b/apps-archived/techbase/apps/web/src/utils/softwareDataHandler.ts
new file mode 100644
index 000000000..72f78117f
--- /dev/null
+++ b/apps-archived/techbase/apps/web/src/utils/softwareDataHandler.ts
@@ -0,0 +1,99 @@
+import { getCollection } from 'astro:content';
+import { getMetrics } from './api';
+
+interface SoftwareData {
+	id: string;
+	name: string;
+	description: string;
+	logo?: string;
+	screenshots?: string[];
+	features: string[];
+	platforms: string[];
+	categories: string[];
+	pricing: {
+		model: string;
+		price: string;
+		yearly_price?: string;
+		features: string[];
+	}[];
+	website: string;
+	lastUpdated: string;
+	metrics?: Record<string, { average: number; count: number }>;
+	similarSoftware?: any[];
+}
+
+export async function loadSoftwareData(entry: any, locale: string): Promise<SoftwareData> {
+	// Extract the software ID
+	const id = entry.id.split('/')[1]; // The format is 'locale/id'
+
+	// Get software data from the entry
+	const software: SoftwareData = {
+		id,
+		...entry.data,
+	};
+
+	// Load metrics from backend
+	await loadMetricsFromBackend(software.id, software);
+
+	// Load similar software
+	await loadSimilarSoftware(software, locale);
+
+	return software;
+}
+
+async function loadMetricsFromBackend(softwareId: string, software: SoftwareData): Promise<void> {
+	// Default metrics
+	software.metrics = {
+		easeOfUse: { average: 4.2, count: 15 },
+		featureRichness: { average: 3.8, count: 12 },
+		valueForMoney: { average: 4.5, count: 18 },
+		support: { average: 3.5, count: 10 },
+		reliability: { average: 4.0, count: 14 },
+	};
+
+	try {
+		const result = await getMetrics(softwareId);
+		if (result && result.metrics) {
+			software.metrics = result.metrics;
+		}
+	} catch (error) {
+		console.error('Error fetching metrics from backend:', error);
+		// Continue with default metrics
+	}
+}
+
+async function loadSimilarSoftware(software: SoftwareData, locale: string): Promise<void> {
+  try {
+    // Get all software entries
+    const allSoftware = await getCollection('software');
+    
+    // Filter similar software based on categories
+    const similarSoftwareEntries = allSoftware.filter(item => {
+      // Skip the current software
+      if (item.id === `${locale}/${software.id}`) return false;
+      
+      // Extract the software's locale and categories
+      const [itemLocale, itemId] = item.id.split('/');
+      const itemCategories = item.data.categories || [];
+      
+      // Only include software with the same locale and at least one shared category
+      return itemLocale === locale && 
+        itemCategories.some(cat => software.categories.includes(cat));
+    });
+    
+    // Convert entries to a more usable format for the frontend
+    software.similarSoftware = similarSoftwareEntries.map(item => {
+      const [itemLocale, itemId] = item.id.split('/');
+      return {
+        id: itemId,
+        name: item.data.name,
+        description: item.data.description,
+        categories: item.data.categories || [],
+        logo: item.data.logo || '/logos/sample-logo.svg'
+      };
+    });
+  } catch (error) {
+    console.error('Error loading similar software:', error);
+    software.similarSoftware = [];
+  }
+}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/tailwind.config.mjs b/apps-archived/techbase/apps/web/tailwind.config.mjs
new file mode 100644
index 000000000..0605a7dc8
--- /dev/null
+++ b/apps-archived/techbase/apps/web/tailwind.config.mjs
@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      // Hier kannst du deine eigene Farbpalette definieren
+      colors: {
+        'primary': '#3b82f6',
+        'secondary': '#10b981',
+      },
+    },
+  },
+  plugins: [],
+}
\ No newline at end of file
diff --git a/apps-archived/techbase/apps/web/tsconfig.json b/apps-archived/techbase/apps/web/tsconfig.json
new file mode 100644
index 000000000..8bf91d3bb
--- /dev/null
+++ b/apps-archived/techbase/apps/web/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}
diff --git a/apps-archived/techbase/package.json b/apps-archived/techbase/package.json
new file mode 100644
index 000000000..a69e6c294
--- /dev/null
+++ b/apps-archived/techbase/package.json
@@ -0,0 +1,20 @@
+{
+	"name": "techbase",
+	"version": "1.0.0",
+	"private": true,
+	"description": "TechBase - Software Comparison Platform",
+	"scripts": {
+		"dev": "turbo run dev",
+		"dev:web": "pnpm --filter @techbase/web dev",
+		"dev:backend": "pnpm --filter @techbase/backend dev",
+		"build": "turbo run build",
+		"lint": "turbo run lint",
+		"clean": "turbo run clean",
+		"db:push": "pnpm --filter @techbase/backend db:push",
+		"db:studio": "pnpm --filter @techbase/backend db:studio"
+	},
+	"devDependencies": {
+		"typescript": "^5.9.3"
+	},
+	"packageManager": "pnpm@9.15.0"
+}
diff --git a/package.json b/package.json
index d84329360..1fb0f2718 100644
--- a/package.json
+++ b/package.json
@@ -152,6 +152,8 @@
 		"dev:figgos:android": "pnpm --filter @figgos/mobile android",
 		"figgos:db:push": "pnpm --filter @figgos/backend db:push",
 		"figgos:db:studio": "pnpm --filter @figgos/backend db:studio",
+		"worldream:dev": "turbo run dev --filter=worldream...",
+		"dev:worldream:web": "pnpm --filter @worldream/web dev",
 		"docker:up": "docker compose -f docker-compose.dev.yml --env-file .env.development up -d postgres redis minio minio-init",
 		"docker:up:infra": "docker compose -f docker-compose.dev.yml --env-file .env.development up -d postgres redis minio minio-init",
 		"docker:up:db": "docker compose -f docker-compose.dev.yml --env-file .env.development up -d postgres redis",
diff --git a/scripts/generate-env.mjs b/scripts/generate-env.mjs
index 490a7e578..2c4c24edc 100644
--- a/scripts/generate-env.mjs
+++ b/scripts/generate-env.mjs
@@ -600,6 +600,39 @@ const APP_CONFIGS = [
 			PUBLIC_MANA_CORE_AUTH_URL: (env) => env.MANA_CORE_AUTH_URL,
 		},
 	},
+
+	// Worldream Web (SvelteKit)
+	{
+		path: 'games/worldream/apps/web/.env',
+		vars: {
+			PUBLIC_SUPABASE_URL: (env) => env.WORLDREAM_SUPABASE_URL,
+			PUBLIC_SUPABASE_ANON_KEY: (env) => env.WORLDREAM_SUPABASE_ANON_KEY,
+			PUBLIC_MANA_CORE_AUTH_URL: (env) => env.MANA_CORE_AUTH_URL,
+			OPENAI_API_KEY: (env) => env.WORLDREAM_OPENAI_API_KEY,
+			GEMINI_API_KEY: (env) => env.WORLDREAM_GEMINI_API_KEY,
+			REPLICATE_API_TOKEN: (env) => env.WORLDREAM_REPLICATE_API_TOKEN,
+		},
+	},
+
+	// TechBase Backend (NestJS)
+	{
+		path: 'apps/techbase/apps/backend/.env',
+		vars: {
+			NODE_ENV: () => 'development',
+			PORT: (env) => env.TECHBASE_BACKEND_PORT || '3021',
+			DATABASE_URL: (env) => env.TECHBASE_DATABASE_URL,
+			MANA_CORE_AUTH_URL: (env) => env.MANA_CORE_AUTH_URL,
+			CORS_ORIGINS: () => 'http://localhost:4321,http://localhost:5173',
+		},
+	},
+
+	// TechBase Web (Astro)
+	{
+		path: 'apps/techbase/apps/web/.env',
+		vars: {
+			PUBLIC_BACKEND_URL: (env) => `http://localhost:${env.TECHBASE_BACKEND_PORT || '3021'}`,
+		},
+	},
 ];
 
 function main() {