og image
This commit is contained in:
@@ -10,6 +10,7 @@ const inter = Inter({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL("https://www.mb-grid-solutions.com"),
|
||||
title: {
|
||||
default: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||
template: "%s | MB Grid Solutions"
|
||||
@@ -31,20 +32,11 @@ export const metadata: Metadata = {
|
||||
siteName: "MB Grid Solutions",
|
||||
title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||
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: {
|
||||
card: "summary_large_image",
|
||||
title: "MB Grid Solutions | Energiekabelprojekte & Technische Beratung",
|
||||
description: "Spezialisierter Partner für Energiekabelprojekte bis 110 kV.",
|
||||
images: ["/assets/logo.png"],
|
||||
},
|
||||
robots: {
|
||||
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