init
This commit is contained in:
9
apps/website/src/app/contact/page.tsx
Normal file
9
apps/website/src/app/contact/page.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import ContactContent from "@/content/en/contact.mdx";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<main className="w-full">
|
||||
<ContactContent />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
BIN
apps/website/src/app/favicon.ico
Normal file
BIN
apps/website/src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
53
apps/website/src/app/globals.css
Normal file
53
apps/website/src/app/globals.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
38
apps/website/src/app/layout.tsx
Normal file
38
apps/website/src/app/layout.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
75
apps/website/src/app/page.tsx
Normal file
75
apps/website/src/app/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
82
apps/website/src/components/BusinessImpact.tsx
Normal file
82
apps/website/src/components/BusinessImpact.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
102
apps/website/src/components/ComparisonCards.tsx
Normal file
102
apps/website/src/components/ComparisonCards.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
87
apps/website/src/components/ComparisonSlider.tsx
Normal file
87
apps/website/src/components/ComparisonSlider.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
40
apps/website/src/components/ContactCTA.tsx
Normal file
40
apps/website/src/components/ContactCTA.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
42
apps/website/src/components/FeatureCard.tsx
Normal file
42
apps/website/src/components/FeatureCard.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
48
apps/website/src/components/Footer.tsx
Normal file
48
apps/website/src/components/Footer.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
79
apps/website/src/components/Hero.tsx
Normal file
79
apps/website/src/components/Hero.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
33
apps/website/src/components/Navbar.tsx
Normal file
33
apps/website/src/components/Navbar.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
32
apps/website/src/components/ProcessSteps.tsx
Normal file
32
apps/website/src/components/ProcessSteps.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
36
apps/website/src/components/SectionHeader.tsx
Normal file
36
apps/website/src/components/SectionHeader.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
132
apps/website/src/components/ServiceHighlight.tsx
Normal file
132
apps/website/src/components/ServiceHighlight.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
58
apps/website/src/components/VideoSection.tsx
Normal file
58
apps/website/src/components/VideoSection.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
36
apps/website/src/content/en/contact.mdx
Normal file
36
apps/website/src/content/en/contact.mdx
Normal file
@@ -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>
|
||||
195
apps/website/src/content/en/home.mdx
Normal file
195
apps/website/src/content/en/home.mdx
Normal file
@@ -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"
|
||||
/>
|
||||
29
apps/website/src/mdx-components.tsx
Normal file
29
apps/website/src/mdx-components.tsx
Normal file
@@ -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,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user