og image
This commit is contained in:
@@ -10,6 +10,7 @@ const inter = Inter({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
|
metadataBase: new URL("https://www.mb-grid-solutions.com"),
|
||||||
title: {
|
title: {
|
||||||
default: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
default: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||||
template: "%s | MB Grid Solutions"
|
template: "%s | MB Grid Solutions"
|
||||||
@@ -31,20 +32,11 @@ export const metadata: Metadata = {
|
|||||||
siteName: "MB Grid Solutions",
|
siteName: "MB Grid Solutions",
|
||||||
title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||||
description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV. Herstellerneutrale technische Beratung und Projektbegleitung.",
|
description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV. Herstellerneutrale technische Beratung und Projektbegleitung.",
|
||||||
images: [
|
|
||||||
{
|
|
||||||
url: "/assets/logo.png",
|
|
||||||
width: 800,
|
|
||||||
height: 600,
|
|
||||||
alt: "MB Grid Solutions Logo",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
twitter: {
|
twitter: {
|
||||||
card: "summary_large_image",
|
card: "summary_large_image",
|
||||||
title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||||
description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV.",
|
description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV.",
|
||||||
images: ["/assets/logo.png"],
|
|
||||||
},
|
},
|
||||||
robots: {
|
robots: {
|
||||||
index: true,
|
index: true,
|
||||||
|
|||||||
175
app/opengraph-image.tsx
Normal file
175
app/opengraph-image.tsx
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
import { ImageResponse } from 'next/og';
|
||||||
|
|
||||||
|
export const runtime = 'edge';
|
||||||
|
|
||||||
|
export const alt = 'MB Grid Solutions | Energiekabelprojekte & Technische Beratung';
|
||||||
|
export const size = {
|
||||||
|
width: 1200,
|
||||||
|
height: 630,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const contentType = 'image/png';
|
||||||
|
|
||||||
|
export default async function Image() {
|
||||||
|
return new ImageResponse(
|
||||||
|
(
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: '#ffffff',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
position: 'relative',
|
||||||
|
fontFamily: 'sans-serif',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Grid Pattern Background - matching .grid-pattern in globals.css */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
backgroundImage: 'radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px)',
|
||||||
|
backgroundSize: '40px 40px',
|
||||||
|
zIndex: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Content Container - matching .card-modern / .glass-panel style */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
padding: '60px 80px',
|
||||||
|
borderRadius: '48px',
|
||||||
|
border: '1px solid #e2e8f0',
|
||||||
|
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.1)',
|
||||||
|
zIndex: 1,
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Engineering Excellence Badge */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
padding: '8px 20px',
|
||||||
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||||
|
borderRadius: '100px',
|
||||||
|
marginBottom: '32px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
backgroundColor: '#10b981',
|
||||||
|
borderRadius: '50%',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#10b981',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.1em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Engineering Excellence
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Brand Mark */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: '100px',
|
||||||
|
height: '100px',
|
||||||
|
backgroundColor: '#0f172a',
|
||||||
|
borderRadius: '24px',
|
||||||
|
marginBottom: '32px',
|
||||||
|
boxShadow: '0 10px 15px -3px rgba(15, 23, 42, 0.3)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: '48px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#10b981',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
MB
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: '72px',
|
||||||
|
fontWeight: '900',
|
||||||
|
color: '#0f172a',
|
||||||
|
marginBottom: '16px',
|
||||||
|
textAlign: 'center',
|
||||||
|
letterSpacing: '-0.02em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
MB Grid <span style={{ color: '#10b981' }}>Solutions</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Subtitle */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: '32px',
|
||||||
|
fontWeight: '500',
|
||||||
|
color: '#64748b',
|
||||||
|
textAlign: 'center',
|
||||||
|
maxWidth: '800px',
|
||||||
|
lineHeight: 1.4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Energiekabelprojekte & Technische Beratung
|
||||||
|
<br />
|
||||||
|
bis 110 kV
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tech Lines - matching .tech-line style */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '10%',
|
||||||
|
left: 0,
|
||||||
|
width: '200px',
|
||||||
|
height: '1px',
|
||||||
|
backgroundColor: 'rgba(16, 185, 129, 0.2)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: '15%',
|
||||||
|
right: 0,
|
||||||
|
width: '300px',
|
||||||
|
height: '1px',
|
||||||
|
backgroundColor: 'rgba(16, 185, 129, 0.2)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
{
|
||||||
|
...size,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
175
app/twitter-image.tsx
Normal file
175
app/twitter-image.tsx
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
import { ImageResponse } from 'next/og';
|
||||||
|
|
||||||
|
export const runtime = 'edge';
|
||||||
|
|
||||||
|
export const alt = 'MB Grid Solutions | Energiekabelprojekte & Technische Beratung';
|
||||||
|
export const size = {
|
||||||
|
width: 1200,
|
||||||
|
height: 630,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const contentType = 'image/png';
|
||||||
|
|
||||||
|
export default async function Image() {
|
||||||
|
return new ImageResponse(
|
||||||
|
(
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
background: '#ffffff',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
position: 'relative',
|
||||||
|
fontFamily: 'sans-serif',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Grid Pattern Background */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
backgroundImage: 'radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px)',
|
||||||
|
backgroundSize: '40px 40px',
|
||||||
|
zIndex: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Content Container */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
padding: '60px 80px',
|
||||||
|
borderRadius: '48px',
|
||||||
|
border: '1px solid #e2e8f0',
|
||||||
|
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.1)',
|
||||||
|
zIndex: 1,
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Engineering Excellence Badge */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px',
|
||||||
|
padding: '8px 20px',
|
||||||
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||||
|
borderRadius: '100px',
|
||||||
|
marginBottom: '32px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
backgroundColor: '#10b981',
|
||||||
|
borderRadius: '50%',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#10b981',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
letterSpacing: '0.1em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Engineering Excellence
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Brand Mark */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: '100px',
|
||||||
|
height: '100px',
|
||||||
|
backgroundColor: '#0f172a',
|
||||||
|
borderRadius: '24px',
|
||||||
|
marginBottom: '32px',
|
||||||
|
boxShadow: '0 10px 15px -3px rgba(15, 23, 42, 0.3)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: '48px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#10b981',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
MB
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: '72px',
|
||||||
|
fontWeight: '900',
|
||||||
|
color: '#0f172a',
|
||||||
|
marginBottom: '16px',
|
||||||
|
textAlign: 'center',
|
||||||
|
letterSpacing: '-0.02em',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
MB Grid <span style={{ color: '#10b981' }}>Solutions</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Subtitle */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: '32px',
|
||||||
|
fontWeight: '500',
|
||||||
|
color: '#64748b',
|
||||||
|
textAlign: 'center',
|
||||||
|
maxWidth: '800px',
|
||||||
|
lineHeight: 1.4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Energiekabelprojekte & Technische Beratung
|
||||||
|
<br />
|
||||||
|
bis 110 kV
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tech Lines */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '10%',
|
||||||
|
left: 0,
|
||||||
|
width: '200px',
|
||||||
|
height: '1px',
|
||||||
|
backgroundColor: 'rgba(16, 185, 129, 0.2)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: '15%',
|
||||||
|
right: 0,
|
||||||
|
width: '300px',
|
||||||
|
height: '1px',
|
||||||
|
backgroundColor: 'rgba(16, 185, 129, 0.2)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
{
|
||||||
|
...size,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user