init

apps/website/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/website/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/website/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

apps/website/next.config.ts

@@ -0,0 +1,14 @@
+import type { NextConfig } from "next";
+import createMDX from "@next/mdx";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
+};
+
+const withMDX = createMDX({
+  // Add markdown plugins here, as desired
+});
+
+// Merge MDX config with Next.js config
+export default withMDX(nextConfig);

apps/website/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "website",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
+    "@next/mdx": "^16.1.3",
+    "@types/mdx": "^2.0.13",
+    "next": "16.1.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

apps/website/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

apps/website/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

apps/website/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

apps/website/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

apps/website/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

apps/website/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

apps/website/src/app/contact/page.tsx

@@ -0,0 +1,9 @@
+import ContactContent from "@/content/en/contact.mdx";
+
+export default function Page() {
+  return (
+    <main className="w-full">
+      <ContactContent />
+    </main>
+  );
+}

apps/website/src/app/globals.css

@@ -0,0 +1,53 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #0071E3;
+  --color-background: #050508;
+  --color-accent-blue: #5E5CE6;
+  --color-accent-pink: #FF375F;
+  --color-accent-teal: #4FD1B5;
+  --color-neutral-white: #FFFFFF;
+  --color-neutral-light: #F7F7F9;
+  --color-neutral-gray: #8E8E93;
+  --color-ui-dark: #18181B;
+  --color-ui-border: #2A2A3A;
+
+  --font-sans: "SF Pro Display", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "MonoLisa", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --radius-lg: 12px;
+  --radius-xl: 24px;
+
+  --blur-glass: 20px;
+}
+
+:root {
+  --background: #050508;
+  --foreground: #FFFFFF;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+@layer components {
+  .glass-effect {
+    @apply backdrop-blur-[var(--blur-glass)] bg-ui-dark/75 border border-ui-border;
+  }
+
+  .text-gradient-cool {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent-teal;
+  }
+
+  .text-gradient-vibrant {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-accent-blue via-accent-pink to-accent-teal;
+  }
+
+  .blueprint-grid {
+    background-image: linear-gradient(to right, rgba(0, 113, 227, 0.1) 1px, transparent 1px),
+                      linear-gradient(to bottom, rgba(0, 113, 227, 0.1) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+}

apps/website/src/app/layout.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Cable Creations",
+  description: "Jaw-dropping 3D visuals for the energy sector",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="scroll-smooth">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-white`}
+      >
+        <Navbar />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  );
+}

apps/website/src/app/page.tsx

@@ -0,0 +1,75 @@
+import { ComparisonCards } from "@/components/ComparisonCards";
+import { ComparisonSlider } from "@/components/ComparisonSlider";
+import { ContactCTA } from "@/components/ContactCTA";
+import { Hero } from "@/components/Hero";
+import { SectionHeader } from "@/components/SectionHeader";
+import { VideoSection } from "@/components/VideoSection";
+
+export default function Page() {
+  return (
+    <main className="w-full">
+      <Hero 
+        title="Turn Your Cables Into Pure Art"
+        subtitle1="Why settle for boring cable photos when you can have jaw-dropping 3D visuals? We make your products look so good, they practically sell themselves."
+        subtitle2="Forget expensive photo shoots and prototypes. We create stunning visuals from just your specs – and yeah, we're that good at it."
+        primaryButtonText="Request a Quote"
+        primaryButtonLink="/contact"
+        secondaryButtonText="Learn How It Works"
+        secondaryButtonLink="#how-it-works"
+        videoSrc="/animations/cables/ymekrvaslqwd-fca-1x-al_tower_v01_s01_horizontal_c03.4k.webm"
+      />
+
+      <section id="how-it-works" className="py-24 container mx-auto px-4">
+        <SectionHeader 
+          label="WHAT IS 3D VISUALIZATION?"
+          title="See It to Understand It"
+          description="3D visualization creates photorealistic images of products before they're even built. It's like having a crystal ball for your products – but way more useful."
+        />
+
+        <ComparisonSlider 
+          beforeImage="/img/cable-comparison/na2xsfl2y-drawing.png"
+          afterImage="/img/cable-comparison/na2xsfl2y-rendered.png"
+        />
+
+        <div className="mt-32">
+          <SectionHeader 
+            label="COMPARISON"
+            title="Traditional Photography vs. 3D Visualization"
+            description="Understanding the fundamental differences and advantages."
+          />
+
+          <ComparisonCards 
+            traditionalImage="/img/industry-standard/NA2XS(F)2Y-6_10kV,12_20kV,1.png"
+            visualizationImage="/img/cable-comparison/na2xsfl2y-rendered.png"
+            points={[
+              { traditional: "Requires physical products", visualization: "Creates images before physical production" },
+              { traditional: "Limited to what exists in reality", visualization: "Shows products in any environment or scenario" },
+              { traditional: "Needs studio setup, lighting, photographers", visualization: "Can be modified instantly (colors, materials, angles)" }
+            ]}
+          />
+        </div>
+      </section>
+
+      <VideoSection 
+        title="Dynamic Cable Animations"
+        description="Captivate your audience with eye-catching 3D animations that bring your cable products to life, perfect for marketing, trade shows, and digital campaigns."
+        videoSrc="/animations/cables/na2xsfl2y-helix.webm"
+        features={[
+          "Brand integration",
+          "Visual storytelling",
+          "Attention-grabbing",
+          "Multi-platform use"
+        ]}
+      />
+
+
+
+      <ContactCTA 
+        title="Have a Question or Project Idea?"
+        description="We'd love to hear from you. Reach out to discuss your 3D modeling needs or get a custom quote."
+        buttonText="Contact Us"
+        buttonLink="/contact"
+      />
+    </main>
+  );
+}

apps/website/src/components/BusinessImpact.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React from 'react';
+import Image from 'next/image';
+
+interface ImpactItem {
+  title: string;
+  description: string;
+  stat1Label: string;
+  stat1Value: string;
+  stat2Label: string;
+  stat2Value: string;
+  image: string;
+}
+
+interface BusinessImpactProps {
+  items: ImpactItem[];
+}
+
+export const BusinessImpact: React.FC<BusinessImpactProps> = ({ items }) => {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
+      <div className="lg:col-span-5 space-y-4">
+        {items.map((item, index) => (
+          <div 
+            key={index}
+            className={`p-6 rounded-xl cursor-pointer transition-all duration-500 border ${
+              activeIndex === index 
+                ? 'bg-ui-dark/90 border-primary shadow-lg shadow-primary/10' 
+                : 'bg-ui-dark/40 border-ui-border hover:border-ui-border/80'
+            }`}
+            onClick={() => setActiveIndex(index)}
+          >
+            <h4 className={`text-xl font-semibold mb-2 transition-colors ${
+              activeIndex === index ? 'text-white' : 'text-neutral-gray'
+            }`}>
+              {item.title}
+            </h4>
+            <p className={`text-sm leading-relaxed transition-colors ${
+              activeIndex === index ? 'text-neutral-light' : 'text-neutral-gray/60'
+            }`}>
+              {activeIndex === index ? item.description : item.description.substring(0, 80) + '...'}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <div className="lg:col-span-7 relative aspect-video rounded-2xl overflow-hidden border border-ui-border shadow-2xl group">
+        {items.map((item, index) => (
+          <div 
+            key={index}
+            className={`absolute inset-0 transition-all duration-700 ease-in-out ${
+              activeIndex === index ? 'opacity-100 scale-100' : 'opacity-0 scale-105 pointer-events-none'
+            }`}
+          >
+            <Image 
+              src={item.image} 
+              alt={item.title} 
+              fill 
+              className="object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent"></div>
+            <div className="absolute inset-0 p-8 flex flex-col justify-end">
+              <div className="grid grid-cols-2 gap-8 max-w-md">
+                <div>
+                  <div className="text-3xl font-bold text-primary mb-1">{item.stat1Value}</div>
+                  <div className="text-xs text-neutral-gray uppercase tracking-wider">{item.stat1Label}</div>
+                </div>
+                <div>
+                  <div className="text-3xl font-bold text-primary mb-1">{item.stat2Value}</div>
+                  <div className="text-xs text-neutral-gray uppercase tracking-wider">{item.stat2Label}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/website/src/components/ComparisonCards.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface ComparisonPoint {
+  traditional: string;
+  visualization: string;
+}
+
+interface ComparisonCardsProps {
+  traditionalImage: string;
+  visualizationImage: string;
+  points: ComparisonPoint[];
+}
+
+export const ComparisonCards: React.FC<ComparisonCardsProps> = ({
+  traditionalImage,
+  visualizationImage,
+  points,
+}) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+      {/* Traditional Photography Card */}
+      <div className="bg-ui-dark/80 backdrop-blur-xl border border-ui-border rounded-xl overflow-hidden relative group hover:border-neutral-gray/30 transition-all">
+        <div className="h-64 relative">
+          <Image 
+            src={traditionalImage} 
+            alt="Traditional Photography" 
+            fill 
+            className="object-cover opacity-80 group-hover:opacity-100 transition-opacity"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-background to-transparent"></div>
+          <div className="absolute bottom-4 left-4 bg-background/90 backdrop-blur-xl px-4 py-2 rounded-lg text-xs text-white border border-ui-border font-medium uppercase tracking-widest">
+            Traditional Photography
+          </div>
+        </div>
+        <div className="p-8">
+          <h4 className="text-xl font-semibold text-white mb-6 flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-ui-dark border border-ui-border flex items-center justify-center text-neutral-gray">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path><circle cx="12" cy="13" r="3"></circle></svg>
+            </div>
+            The Traditional Approach
+          </h4>
+          <ul className="space-y-4">
+            {points.map((point, index) => (
+              <li key={index} className="flex items-start gap-4">
+                <div className="w-6 h-6 rounded-full bg-ui-dark border border-ui-border flex items-center justify-center flex-shrink-0 text-neutral-gray">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
+                </div>
+                <span className="text-neutral-gray text-sm leading-relaxed">{point.traditional}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="mt-8 pt-6 border-t border-ui-border">
+            <p className="italic text-neutral-gray/60 text-sm">
+              The old-school way — expensive, slow, and you need the actual product first.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* 3D Visualization Card */}
+      <div className="bg-ui-dark/80 backdrop-blur-xl border border-primary/30 rounded-xl overflow-hidden relative group hover:border-primary/50 transition-all shadow-[0_0_30px_rgba(0,113,227,0.1)]">
+        <div className="absolute -top-20 -right-20 w-40 h-40 bg-primary/10 rounded-full blur-3xl"></div>
+        <div className="h-64 relative">
+          <Image 
+            src={visualizationImage} 
+            alt="3D Visualization" 
+            fill 
+            className="object-cover opacity-90 group-hover:opacity-100 transition-opacity"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-background to-transparent"></div>
+          <div className="absolute bottom-4 right-4 bg-primary/20 backdrop-blur-xl px-4 py-2 rounded-lg text-xs text-white border border-primary/30 font-medium uppercase tracking-widest">
+            3D Visualization
+          </div>
+        </div>
+        <div className="p-8 relative z-10">
+          <h4 className="text-xl font-semibold text-white mb-6 flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center text-white shadow-[0_0_15px_rgba(0,113,227,0.4)]">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><line x1="12" y1="22" x2="12" y2="12"></line></svg>
+            </div>
+            The Modern Approach
+          </h4>
+          <ul className="space-y-4">
+            {points.map((point, index) => (
+              <li key={index} className="flex items-start gap-4">
+                <div className="w-6 h-6 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center flex-shrink-0 text-primary">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                </div>
+                <span className="text-white text-sm leading-relaxed">{point.visualization}</span>
+              </li>
+            ))}
+          </ul>
+          <div className="mt-8 pt-6 border-t border-primary/20">
+            <p className="italic text-neutral-light text-sm">
+              The smart way — create stunning visuals before you even build the thing.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/website/src/components/ComparisonSlider.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import React, { useState, useRef } from 'react';
+import Image from 'next/image';
+
+interface ComparisonSliderProps {
+  beforeImage: string;
+  afterImage: string;
+  beforeLabel?: string;
+  afterLabel?: string;
+}
+
+export const ComparisonSlider: React.FC<ComparisonSliderProps> = ({
+  beforeImage,
+  afterImage,
+  beforeLabel = "Technical Drawing",
+  afterLabel = "3D Visualization",
+}) => {
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleMove = (event: React.MouseEvent | React.TouchEvent) => {
+    if (!containerRef.current) return;
+
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = 'touches' in event ? event.touches[0].clientX : (event as React.MouseEvent).clientX;
+    const position = ((x - rect.left) / rect.width) * 100;
+
+    if (position >= 0 && position <= 100) {
+      setSliderPosition(position);
+    }
+  };
+
+  return (
+    <div 
+      ref={containerRef}
+      className="relative aspect-video rounded-xl overflow-hidden cursor-ew-resize select-none border border-ui-border shadow-2xl"
+      onMouseMove={handleMove}
+      onTouchMove={handleMove}
+    >
+      {/* After Image (3D Visualization) - Bottom Layer */}
+      <div className="absolute inset-0">
+        <Image 
+          src={afterImage} 
+          alt="After" 
+          fill
+          className="object-cover"
+          priority
+        />
+      </div>
+
+      {/* Before Image (Technical Drawing) - Top Layer with Clip Path */}
+      <div 
+        className="absolute inset-0 z-10"
+        style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
+      >
+        <Image 
+          src={beforeImage} 
+          alt="Before" 
+          fill
+          className="object-cover"
+          priority
+        />
+      </div>
+
+      {/* Slider Handle */}
+      <div 
+        className="absolute top-0 bottom-0 z-20 w-1 bg-white pointer-events-none"
+        style={{ left: `${sliderPosition}%` }}
+      >
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 bg-white rounded-full shadow-xl flex items-center justify-center pointer-events-auto">
+          <div className="w-7 h-7 md:w-8 md:h-8 rounded-full bg-primary flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m18 8 4 4-4 4"></path><path d="m6 8-4 4 4 4"></path></svg>
+          </div>
+        </div>
+      </div>
+
+      {/* Labels */}
+      <div className="absolute bottom-4 left-4 md:bottom-8 md:left-8 z-30 glass-effect px-4 py-2 md:px-6 md:py-3 rounded-lg text-[10px] md:text-sm font-bold uppercase tracking-widest">
+        {beforeLabel}
+      </div>
+      <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 z-30 bg-primary/80 backdrop-blur-xl border border-primary/30 px-4 py-2 md:px-6 md:py-3 rounded-lg text-[10px] md:text-sm font-bold uppercase tracking-widest text-white">
+        {afterLabel}
+      </div>
+    </div>
+  );
+};

apps/website/src/components/ContactCTA.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface ContactCTAProps {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonLink: string;
+}
+
+export const ContactCTA: React.FC<ContactCTAProps> = ({
+  title,
+  description,
+  buttonText,
+  buttonLink,
+}) => {
+  return (
+    <section className="py-24 container mx-auto px-4">
+      <div className="glass-effect p-12 rounded-2xl text-center relative overflow-hidden">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-accent-teal/10 rounded-full blur-3xl"></div>
+        
+        <div className="relative z-10 max-w-2xl mx-auto">
+          <h2 className="text-3xl md:text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent-teal">
+            {title}
+          </h2>
+          <p className="text-lg text-neutral-light mb-10 leading-relaxed">
+            {description}
+          </p>
+          <a
+            href={buttonLink}
+            className="inline-flex items-center gap-2 px-10 py-4 rounded-full bg-gradient-to-r from-primary to-accent-teal text-white font-bold hover:shadow-[0_0_30px_rgba(0,113,227,0.4)] transition-all transform hover:-translate-y-1"
+          >
+            {buttonText}
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};

apps/website/src/components/FeatureCard.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface FeatureCardProps {
+  title: string;
+  description: string;
+  icon?: React.ReactNode;
+  badge?: string;
+}
+
+export const FeatureCard: React.FC<FeatureCardProps> = ({
+  title,
+  description,
+  icon,
+  badge,
+}) => {
+  return (
+    <div className="glass-effect p-8 rounded-xl relative overflow-hidden group hover:border-primary/50 transition-all duration-500">
+      <div className="absolute -top-20 -right-20 w-40 h-40 bg-primary/5 rounded-full blur-3xl group-hover:bg-primary/10 transition-all"></div>
+      
+      <div className="relative z-10">
+        {icon && (
+          <div className="w-12 h-12 rounded-lg bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+            {icon}
+          </div>
+        )}
+        
+        {badge && (
+          <span className="absolute top-4 right-4 px-3 py-1 rounded-full bg-primary text-white text-[10px] font-bold uppercase tracking-widest">
+            {badge}
+          </span>
+        )}
+        
+        <h3 className="text-xl font-bold mb-4 text-white group-hover:text-primary transition-colors">
+          {title}
+        </h3>
+        <p className="text-neutral-gray text-sm leading-relaxed">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+};

apps/website/src/components/Footer.tsx

@@ -0,0 +1,48 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className="bg-background border-t border-ui-border py-20 relative overflow-hidden">
+      <div className="absolute inset-0 blueprint-grid opacity-5"></div>
+      
+      <div className="container mx-auto px-4 relative z-10">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
+          <div className="col-span-1 md:col-span-2">
+            <Link href="/" className="flex items-center gap-3 mb-6 group">
+              <div className="relative w-24 h-12 group-hover:scale-110 transition-transform">
+                <Image 
+                  src="/img/logo-white.svg" 
+                  alt="Cable Creations Logo" 
+                  fill
+                  className="object-contain"
+                />
+              </div>
+            </Link>
+            <p className="text-neutral-gray max-w-sm leading-relaxed mb-6">
+              Jaw-dropping 3D visuals for the energy sector. We turn boring cables into pure visual art.
+            </p>
+            <div className="flex gap-4">
+              <a href="https://www.linkedin.com/company/101094754" target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-ui-dark border border-ui-border flex items-center justify-center hover:border-primary transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
+              </a>
+              <a href="https://instagram.com/cablecreations.de" target="_blank" rel="noopener noreferrer" className="w-10 h-10 rounded-full bg-ui-dark border border-ui-border flex items-center justify-center hover:border-primary transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+        
+        <div className="pt-8 border-t border-ui-border flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="text-neutral-gray text-sm">
+            © 2024 Cable Creations. All rights reserved.
+          </p>
+          <p className="text-neutral-gray text-sm flex items-center gap-1">
+            Designed with <span className="text-accent-pink">♥</span> for creative professionals
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};

apps/website/src/components/Hero.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+interface HeroProps {
+  title: string;
+  subtitle1: string;
+  subtitle2?: string;
+  primaryButtonText: string;
+  primaryButtonLink: string;
+  secondaryButtonText?: string;
+  secondaryButtonLink?: string;
+  videoSrc?: string;
+}
+
+export const Hero: React.FC<HeroProps> = ({
+  title,
+  subtitle1,
+  subtitle2,
+  primaryButtonText,
+  primaryButtonLink,
+  secondaryButtonText,
+  secondaryButtonLink,
+  videoSrc,
+}) => {
+  return (
+    <section className="relative min-h-screen w-full flex flex-col justify-center items-center overflow-hidden bg-background">
+      {videoSrc && (
+        <div className="absolute inset-0 z-0">
+          <video
+            autoPlay
+            muted
+            loop
+            playsInline
+            className="absolute inset-0 w-full h-full object-cover opacity-60"
+          >
+            <source src={videoSrc} type="video/webm" />
+          </video>
+          <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/40 to-background/80 z-2"></div>
+        </div>
+      )}
+      
+      <div className="relative z-10 container mx-auto px-4 text-center max-w-5xl">
+        <h1 className="text-5xl md:text-8xl font-bold tracking-tighter leading-[0.9] mb-8 text-white">
+          {title}
+        </h1>
+        <p className="text-xl md:text-3xl text-neutral-light leading-relaxed mb-6 max-w-3xl mx-auto">
+          {subtitle1}
+        </p>
+        {subtitle2 && (
+          <p className="text-lg md:text-xl text-neutral-gray mb-10 max-w-2xl mx-auto">
+            {subtitle2}
+          </p>
+        )}
+        
+        <div className="flex flex-wrap justify-center gap-6">
+          <a
+            href={primaryButtonLink}
+            className="px-10 py-5 rounded-full bg-primary text-white font-bold hover:shadow-[0_0_30px_rgba(0,113,227,0.5)] transition-all transform hover:-translate-y-1"
+          >
+            {primaryButtonText}
+          </a>
+          {secondaryButtonText && secondaryButtonLink && (
+            <a
+              href={secondaryButtonLink}
+              className="px-10 py-5 rounded-full glass-effect text-white font-bold hover:bg-white/10 transition-all transform hover:-translate-y-1"
+            >
+              {secondaryButtonText}
+            </a>
+          )}
+        </div>
+      </div>
+      
+      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center animate-bounce opacity-50">
+        <div className="w-6 h-10 border-2 border-white rounded-full flex justify-center p-1">
+          <div className="w-1 h-2 bg-white rounded-full"></div>
+        </div>
+      </div>
+    </section>
+  );
+};

apps/website/src/components/Navbar.tsx

@@ -0,0 +1,33 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
+
+export const Navbar: React.FC = () => {
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 flex justify-center p-6 pointer-events-none">
+      <nav className="glass-effect px-8 py-4 rounded-full flex items-center gap-8 pointer-events-auto max-w-7xl w-full justify-between">
+        <Link href="/" className="flex items-center gap-2 group">
+          <div className="relative w-24 h-10 group-hover:scale-110 transition-transform">
+            <Image 
+              src="/img/logo-white.svg" 
+              alt="Cable Creations Logo" 
+              fill
+              className="object-contain"
+            />
+          </div>
+        </Link>
+        
+        <div className="hidden md:flex items-center gap-8">
+          <Link href="/" className="text-sm font-medium hover:text-primary transition-colors text-white">Home</Link>
+        </div>
+        
+        <Link 
+          href="/contact" 
+          className="px-6 py-2 rounded-full bg-primary text-white text-sm font-bold hover:shadow-[0_0_15px_rgba(0,113,227,0.4)] transition-all"
+        >
+          Quote
+        </Link>
+      </nav>
+    </header>
+  );
+};

apps/website/src/components/ProcessSteps.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface Step {
+  title: string;
+  description: string;
+}
+
+interface ProcessStepsProps {
+  steps: Step[];
+}
+
+export const ProcessSteps: React.FC<ProcessStepsProps> = ({ steps }) => {
+  return (
+    <div className="relative py-12">
+      <div className="absolute top-1/2 left-0 right-0 h-1 bg-ui-dark -translate-y-1/2 hidden md:block"></div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-12 relative z-10">
+        {steps.map((step, index) => (
+          <div key={index} className="flex flex-col items-center text-center group">
+            <div className="w-16 h-16 rounded-full bg-background border-2 border-ui-border flex items-center justify-center mb-6 group-hover:border-primary group-hover:shadow-[0_0_20px_rgba(0,113,227,0.3)] transition-all duration-500 relative z-20">
+              <span className="text-xl font-bold text-neutral-gray group-hover:text-primary transition-colors">
+                {index + 1}
+              </span>
+            </div>
+            <h4 className="text-lg font-bold mb-2 text-white">{step.title}</h4>
+            <p className="text-sm text-neutral-gray leading-relaxed">{step.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/website/src/components/SectionHeader.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface SectionHeaderProps {
+  label: string;
+  title: string;
+  description?: string;
+  align?: 'left' | 'center';
+}
+
+export const SectionHeader: React.FC<SectionHeaderProps> = ({
+  label,
+  title,
+  description,
+  align = 'center',
+}) => {
+  const alignmentClass = align === 'center' ? 'text-center mx-auto' : 'text-left';
+  
+  return (
+    <div className={`max-w-4xl mb-16 ${alignmentClass}`}>
+      <div className="flex items-center gap-2 mb-4 justify-center md:justify-start">
+        <span className="font-mono text-primary text-sm tracking-widest uppercase">
+          {"// "}{label}
+        </span>
+      </div>
+      <h2 className="text-4xl md:text-6xl font-bold tracking-tighter leading-tight mb-6">
+        {title}
+      </h2>
+      {description && (
+        <p className="text-lg md:text-xl text-neutral-gray leading-relaxed">
+          {description}
+        </p>
+      )}
+      <div className={`w-24 h-1 bg-gradient-to-r from-primary to-accent-teal rounded-full mt-8 ${align === 'center' ? 'mx-auto' : ''}`}></div>
+    </div>
+  );
+};

apps/website/src/components/ServiceHighlight.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import React from 'react';
+import Image from 'next/image';
+
+interface ServiceItem {
+  title: string;
+  description: string;
+  keyPoints: string[];
+  image: string;
+  icon: React.ReactNode;
+}
+
+interface ServiceHighlightProps {
+  title: string;
+  subtitle: string;
+  items: ServiceItem[];
+}
+
+export const ServiceHighlight: React.FC<ServiceHighlightProps> = ({
+  title,
+  subtitle,
+  items,
+}) => {
+  const [activeIndex, setActiveIndex] = React.useState(0);
+
+  return (
+    <section className="py-24 bg-background relative overflow-hidden">
+      <div className="container mx-auto px-4 relative z-10">
+        <div className="max-w-4xl mx-auto text-center mb-20">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent-teal">
+            {title}
+          </h2>
+          <p className="text-lg md:text-xl text-neutral-light max-w-2xl mx-auto leading-relaxed">
+            {subtitle}
+          </p>
+        </div>
+
+        {/* Desktop Layout */}
+        <div className="hidden md:grid grid-cols-12 gap-12 items-start">
+          <div className="col-span-5 space-y-4">
+            {items.map((item, index) => (
+              <div 
+                key={index}
+                className={`p-6 rounded-xl cursor-pointer transition-all duration-500 border ${
+                  activeIndex === index 
+                    ? 'bg-ui-dark/90 border-primary shadow-lg shadow-primary/10' 
+                    : 'bg-ui-dark/40 border-ui-border hover:border-ui-border/80'
+                }`}
+                onClick={() => setActiveIndex(index)}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
+                    activeIndex === index ? 'bg-primary text-white' : 'bg-ui-dark border border-ui-border text-neutral-gray'
+                  }`}>
+                    {item.icon}
+                  </div>
+                  <h4 className={`text-lg font-semibold transition-colors ${
+                    activeIndex === index ? 'text-white' : 'text-neutral-gray'
+                  }`}>
+                    {item.title}
+                  </h4>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="col-span-7 bg-ui-dark border border-ui-border rounded-2xl overflow-hidden shadow-2xl relative aspect-[4/3]">
+            {items.map((item, index) => (
+              <div 
+                key={index}
+                className={`absolute inset-0 transition-all duration-700 ease-in-out ${
+                  activeIndex === index ? 'opacity-100 scale-100' : 'opacity-0 scale-105 pointer-events-none'
+                }`}
+              >
+                <Image 
+                  src={item.image} 
+                  alt={item.title} 
+                  fill 
+                  className="object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent"></div>
+                <div className="absolute inset-0 p-10 flex flex-col justify-end">
+                  <p className="text-neutral-light text-lg mb-6 max-w-md">
+                    {item.description}
+                  </p>
+                  <div className="grid grid-cols-2 gap-4">
+                    {item.keyPoints.map((point, pIndex) => (
+                      <div key={pIndex} className="flex items-center gap-2 text-sm text-white/80">
+                        <div className="w-1.5 h-1.5 rounded-full bg-primary"></div>
+                        {point}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Mobile Layout */}
+        <div className="md:hidden space-y-8">
+          {items.map((item, index) => (
+            <div key={index} className="bg-ui-dark border border-ui-border rounded-2xl overflow-hidden">
+              <div className="relative aspect-video">
+                <Image src={item.image} alt={item.title} fill className="object-cover" />
+                <div className="absolute inset-0 bg-gradient-to-t from-ui-dark to-transparent"></div>
+                <div className="absolute bottom-4 left-4 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
+                    {item.icon}
+                  </div>
+                  <h4 className="text-lg font-bold text-white">{item.title}</h4>
+                </div>
+              </div>
+              <div className="p-6">
+                <p className="text-neutral-gray text-sm mb-6">{item.description}</p>
+                <div className="grid grid-cols-1 gap-3">
+                  {item.keyPoints.map((point, pIndex) => (
+                    <div key={pIndex} className="flex items-center gap-2 text-xs text-neutral-light">
+                      <div className="w-1.5 h-1.5 rounded-full bg-primary"></div>
+                      {point}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};

apps/website/src/components/VideoSection.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+interface VideoSectionProps {
+  title: string;
+  description: string;
+  videoSrc: string;
+  features: string[];
+}
+
+export const VideoSection: React.FC<VideoSectionProps> = ({
+  title,
+  description,
+  videoSrc,
+  features,
+}) => {
+  return (
+    <section className="relative min-h-[80vh] w-full flex flex-col justify-center items-center overflow-hidden bg-background py-24">
+      {/* Background Video */}
+      <div className="absolute inset-0 z-0">
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="absolute inset-0 w-full h-full object-cover opacity-70"
+        >
+          <source src={videoSrc} type="video/webm" />
+        </video>
+        {/* Gradient Overlays */}
+        <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/10 to-background/40 z-1"></div>
+        <div className="absolute inset-0 bg-gradient-to-r from-background/40 via-transparent to-background/40 z-1"></div>
+      </div>
+
+      <div className="relative z-10 container mx-auto px-4">
+        <div className="max-w-4xl">
+          <h3 className="text-4xl md:text-6xl font-bold tracking-tighter leading-tight mb-8 text-white">
+            {title}
+          </h3>
+          <p className="text-xl md:text-2xl text-neutral-light leading-relaxed mb-12 max-w-2xl">
+            {description}
+          </p>
+          
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-3xl">
+            {features.map((feature, index) => (
+              <div key={index} className="glass-effect p-6 rounded-xl flex items-center gap-4 group hover:border-primary/50 transition-all">
+                <div className="w-3 h-3 rounded-full bg-primary shadow-[0_0_10px_rgba(0,113,227,0.8)]"></div>
+                <span className="text-lg font-medium text-white/90">{feature}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      
+      {/* Blueprint Grid Overlay */}
+      <div className="absolute inset-0 blueprint-grid opacity-[0.03] pointer-events-none"></div>
+    </section>
+  );
+};

apps/website/src/content/en/contact.mdx

@@ -0,0 +1,36 @@
+<section id="contact-form" className="pt-32 pb-24 container mx-auto px-4">
+  <div className="max-w-3xl mx-auto">
+    <SectionHeader 
+      label="CONTACT"
+      title="Send Us a Message"
+      align="left"
+    />
+    
+    <div className="glass-effect p-8 rounded-xl">
+      <p className="text-neutral-gray mb-8">Our contact form is coming soon. In the meantime, please reach out via email or phone.</p>
+      
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <div className="w-10 h-10 rounded-full bg-primary/20 text-primary flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+          </div>
+          <a href="mailto:info@cablecreations.de" className="text-xl font-bold hover:text-primary transition-colors">info@cablecreations.de</a>
+        </div>
+        
+        <div className="flex items-center gap-4">
+          <div className="w-10 h-10 rounded-full bg-primary/20 text-primary flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+          </div>
+          <a href="tel:+4915678584306" className="text-xl font-bold hover:text-primary transition-colors">+49 15678 584306</a>
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="w-10 h-10 rounded-full bg-[#25D366]/20 text-[#25D366] flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"></path></svg>
+          </div>
+          <a href="https://wa.me/4915678584306" target="_blank" rel="noopener noreferrer" className="text-xl font-bold hover:text-[#25D366] transition-colors">Chat on WhatsApp</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

apps/website/src/content/en/home.mdx

@@ -0,0 +1,195 @@
+<Hero 
+  title="Turn Your Cables Into Pure Art"
+  subtitle1="Why settle for boring cable photos when you can have jaw-dropping 3D visuals? We make your products look so good, they practically sell themselves."
+  subtitle2="Forget expensive photo shoots and prototypes. We create stunning visuals from just your specs – and yeah, we're that good at it."
+  primaryButtonText="Request a Quote"
+  primaryButtonLink="/contact"
+  secondaryButtonText="Learn How It Works"
+  secondaryButtonLink="#how-it-works"
+  videoSrc="/animations/cables/ymekrvaslqwd-fca-1x-al_tower_v01_s01_horizontal_c03.4k.webm"
+/>
+
+<section id="how-it-works" className="py-24 container mx-auto px-4">
+  <SectionHeader 
+    label="WHAT IS 3D VISUALIZATION?"
+    title="See It to Understand It"
+    description="3D visualization creates photorealistic images of products before they're even built. It's like having a crystal ball for your products – but way more useful."
+  />
+
+  <ComparisonSlider 
+    beforeImage="/img/cable-comparison/na2xsfl2y-drawing.png"
+    afterImage="/img/cable-comparison/na2xsfl2y-rendered.png"
+  />
+
+  <div className="mt-32">
+    <SectionHeader 
+      label="COMPARISON"
+      title="Traditional Photography vs. 3D Visualization"
+      description="Understanding the fundamental differences and advantages."
+    />
+
+    <ComparisonCards 
+      traditionalImage="/img/industry-standard/NA2XS(F)2Y-6_10kV,12_20kV,1.png"
+      visualizationImage="/img/cable-comparison/na2xsfl2y-rendered.png"
+      points={[
+        { traditional: "Requires physical products", visualization: "Creates images before physical production" },
+        { traditional: "Limited to what exists in reality", visualization: "Shows products in any environment or scenario" },
+        { traditional: "Needs studio setup, lighting, photographers", visualization: "Can be modified instantly (colors, materials, angles)" }
+      ]}
+    />
+  </div>
+</section>
+
+<VideoSection 
+  title="Dynamic Cable Animations"
+  description="Captivate your audience with eye-catching 3D animations that bring your cable products to life, perfect for marketing, trade shows, and digital campaigns."
+  videoSrc="/animations/cables/na2xsfl2y-helix.webm"
+  features={[
+    "Brand integration",
+    "Visual storytelling",
+    "Attention-grabbing",
+    "Multi-platform use"
+  ]}
+/>
+
+<section className="py-24 container mx-auto px-4">
+  <SectionHeader 
+    label="BUSINESS VALUE"
+    title="The Business Impact of 3D Visualization"
+    description="Discover how our premium 3D visualization transforms your marketing and sales process."
+  />
+
+  <BusinessImpact 
+    items={[
+      {
+        title: "Immediate Visual Impact",
+        description: "Captivate clients instantly with photorealistic visuals that showcase your products in their best light, even before physical production. Our 3D visualizations create an emotional connection that drives decision-making.",
+        stat1Value: "94%",
+        stat1Label: "of first impressions are design-related",
+        stat2Value: "3x",
+        stat2Label: "higher engagement with 3D visuals",
+        image: "/img/cables/render.png"
+      },
+      {
+        title: "Business Efficiency",
+        description: "Eliminate expensive photo shoots, physical prototypes, and lengthy production cycles. Get marketing-ready visuals in days, not weeks, and easily update designs without additional costs.",
+        stat1Value: "70%",
+        stat1Label: "reduction in production time",
+        stat2Value: "50%",
+        stat2Label: "cost savings vs. traditional photography",
+        image: "/img/mockups/Magazine-mockups-vol-4-16 copy.jpg"
+      },
+      {
+        title: "Unlimited Creative Freedom",
+        description: "Showcase products from any angle, in any environment, with perfect lighting every time. Create impossible shots that physical photography can't achieve.",
+        stat1Value: "∞",
+        stat1Label: "possible angles and environments",
+        stat2Value: "100%",
+        stat2Label: "control over every visual element",
+        image: "/img/cables/render 2.png"
+      },
+      {
+        title: "Premium Brand Perception",
+        description: "Elevate your brand with consistently high-quality visuals that outshine competitors and impress stakeholders. Our photorealistic 3D visualizations convey precision and technological sophistication.",
+        stat1Value: "85%",
+        stat1Label: "of executives prioritize visual quality",
+        stat2Value: "2x",
+        stat2Label: "higher perceived value with premium visuals",
+        image: "/img/cables/render 4.png"
+      }
+    ]}
+  />
+</section>
+
+<ServiceHighlight 
+  title="Unlock Your Products' Potential with 3D"
+  subtitle="Discover how our specialized 3D visualization services can transform your cable products into powerful visual tools."
+  items={[
+    {
+      title: "Product Catalog Visualization",
+      description: "Ultra-detailed photorealistic renders that showcase your cables with perfect clarity and precision.",
+      keyPoints: ["Photorealistic materials", "Perfect lighting", "Clean backgrounds", "Multiple angles"],
+      image: "/img/mockups/Magazine-mockups-vol-4-16 copy.jpg",
+      icon: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+    },
+    {
+      title: "Technical Documentation",
+      description: "Precision-focused visuals highlighting specifications, internal components, and technical details.",
+      keyPoints: ["Cross-section views", "Component highlighting", "Technical accuracy", "Specification integration"],
+      image: "/img/cable-comparison/na2xsfl2y-label.png",
+      icon: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>
+    },
+    {
+      title: "Custom Cable Modeling",
+      description: "Specialized modeling services for unique cable designs, configurations, and specifications.",
+      keyPoints: ["Proprietary cable designs", "Complex configurations", "Exact specifications", "Industry compliance"],
+      image: "/img/cable-comparison/na2xsfl2y-rendered.png",
+      icon: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.29 7 12 12 20.71 7"></polyline><line x1="12" y1="22" x2="12" y2="12"></line></svg>
+    },
+    {
+      title: "3D Animations",
+      description: "Dynamic animations that showcase your cables in motion, demonstrating functionality and installation.",
+      keyPoints: ["Motion sequences", "Installation demos", "Functional animations", "Marketing videos"],
+      image: "/img/exhibition/viz-9.png",
+      icon: <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path><circle cx="12" cy="13" r="3"></circle></svg>
+    }
+  ]}
+/>
+
+<section className="py-24 bg-ui-dark/30">
+  <div className="container mx-auto px-4">
+    <SectionHeader 
+      label="OUR ADVANTAGE"
+      title="Why Smart Companies Choose 3D"
+      description="Because waiting for prototypes is so last century."
+    />
+
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+      <FeatureCard 
+        title="Time"
+        description="Get your marketing ready while others are still building prototypes."
+        badge="70% Faster"
+      />
+      <FeatureCard 
+        title="Cost"
+        description="Skip the expensive photo shoots and prototype headaches."
+        badge="Save 50%"
+      />
+      <FeatureCard 
+        title="Flexibility"
+        description="Show your products anywhere, anytime, however you want."
+        badge="Unlimited"
+      />
+      <FeatureCard 
+        title="Impact"
+        description="Make visuals so good, they practically close deals for you."
+        badge="3x Engagement"
+      />
+    </div>
+  </div>
+</section>
+
+<section className="py-24 container mx-auto px-4">
+  <SectionHeader 
+    label="WORKFLOW"
+    title="Our 3D Visualization Process"
+    description="From technical specifications to stunning photorealistic assets, our streamlined process ensures both accuracy and maximum visual impact."
+  />
+
+  <ProcessSteps 
+    steps={[
+      { title: "Specifications", description: "We start with your cable's technical specifications." },
+      { title: "Modeling", description: "Our engineers create accurate 3D models." },
+      { title: "Materials", description: "We apply photorealistic materials and textures." },
+      { title: "Lighting", description: "Studio lighting setups showcase your product's features." },
+      { title: "Rendering", description: "Final high-resolution images and animations are rendered." }
+    ]}
+  />
+</section>
+
+<ContactCTA 
+  title="Have a Question or Project Idea?"
+  description="We'd love to hear from you. Reach out to discuss your 3D modeling needs or get a custom quote."
+  buttonText="Contact Us"
+  buttonLink="/contact"
+/>

apps/website/src/mdx-components.tsx

@@ -0,0 +1,29 @@
+import type { MDXComponents } from 'mdx/types'
+import Image from 'next/image'
+import { Hero } from './components/Hero'
+import { SectionHeader } from './components/SectionHeader'
+import { FeatureCard } from './components/FeatureCard'
+import { ComparisonSlider } from './components/ComparisonSlider'
+import { ComparisonCards } from './components/ComparisonCards'
+import { BusinessImpact } from './components/BusinessImpact'
+import { ServiceHighlight } from './components/ServiceHighlight'
+import { ProcessSteps } from './components/ProcessSteps'
+import { ContactCTA } from './components/ContactCTA'
+import { VideoSection } from './components/VideoSection'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    Image,
+    Hero,
+    SectionHeader,
+    FeatureCard,
+    ComparisonSlider,
+    ComparisonCards,
+    BusinessImpact,
+    ServiceHighlight,
+    ProcessSteps,
+    ContactCTA,
+    VideoSection,
+    ...components,
+  }
+}

apps/website/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.mdx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}