add favicon and create links page component
This commit is contained in:
Alaguraj0361
parent
bb0a217a39
commit
ec0837aa73
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
550
src/app/links/MetatroncubeLinksClient.tsx
Normal file
550
src/app/links/MetatroncubeLinksClient.tsx
Normal file
@ -0,0 +1,550 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import favicon from "../favicon.ico";
|
||||||
|
|
||||||
|
// ── Metatroncube brand colours (matched to metatroncubesolutions.com white theme) ──
|
||||||
|
const C = {
|
||||||
|
bg: "#f4f6fc", // very light gray-blue background
|
||||||
|
card: "#ffffff", // pure white for cards
|
||||||
|
cardAlt: "#f8fafc", // slate 50 for card hover
|
||||||
|
border: "rgba(55, 121, 185, 0.12)", // subtle brand blue border
|
||||||
|
blue: "var(--theme-color, #3779b9)", // primary brand blue
|
||||||
|
purple: "#6f42c1", // theme purple
|
||||||
|
pink: "#d63384", // theme pink
|
||||||
|
green: "#198754", // theme green
|
||||||
|
amber: "#ffc107", // theme amber
|
||||||
|
teal: "#0dcaf0", // theme teal
|
||||||
|
white: "#ffffff",
|
||||||
|
dark: "var(--theme-color-1, #1a1f2b)", // main text color from site theme
|
||||||
|
muted: "#595959", // secondary text color from site theme
|
||||||
|
sub: "#64748b", // slate 500 for subtext
|
||||||
|
};
|
||||||
|
|
||||||
|
const LOGO = favicon.src;
|
||||||
|
|
||||||
|
interface LinkItem {
|
||||||
|
label: string;
|
||||||
|
sub: string;
|
||||||
|
icon: string;
|
||||||
|
href: string;
|
||||||
|
accent: string;
|
||||||
|
glow: string;
|
||||||
|
solid: boolean;
|
||||||
|
dimText?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const links: LinkItem[] = [
|
||||||
|
{
|
||||||
|
label: "Book a Free Consultation",
|
||||||
|
sub: "30-min call · No commitment",
|
||||||
|
icon: "📅",
|
||||||
|
href: "https://calendly.com/metatroncubeswsolutions/request-consultation",
|
||||||
|
accent: "var(--theme-color, #3779b9)",
|
||||||
|
glow: "rgba(55, 121, 185, 0.25)",
|
||||||
|
solid: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "WhatsApp Us Now",
|
||||||
|
sub: "We reply within 1 hour",
|
||||||
|
icon: "💬",
|
||||||
|
href: "https://wa.me/16476797651",
|
||||||
|
accent: "#25D366",
|
||||||
|
glow: "rgba(37, 211, 102, 0.25)",
|
||||||
|
solid: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "View Our Portfolio",
|
||||||
|
sub: "Websites · Apps · ERP projects",
|
||||||
|
icon: "🎨",
|
||||||
|
href: "https://metatroncubesolutions.com/portfolio/",
|
||||||
|
accent: C.pink,
|
||||||
|
glow: "rgba(214, 51, 132, 0.12)",
|
||||||
|
solid: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "ERP Development & Implementation",
|
||||||
|
sub: "Custom ERP to automate your operations",
|
||||||
|
icon: "⚙️",
|
||||||
|
href: "https://metatroncubesolutions.com/service/erp-development-implementation/",
|
||||||
|
accent: C.purple,
|
||||||
|
glow: "rgba(111, 66, 193, 0.12)",
|
||||||
|
solid: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Website Development",
|
||||||
|
sub: "Fast, responsive & scalable websites",
|
||||||
|
icon: "🌐",
|
||||||
|
href: "https://metatroncubesolutions.com/service/website-development-company/",
|
||||||
|
accent: "var(--theme-color, #3779b9)",
|
||||||
|
glow: "rgba(55, 121, 185, 0.12)",
|
||||||
|
solid: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Mobile App Development",
|
||||||
|
sub: "iOS · Android · Flutter",
|
||||||
|
icon: "📱",
|
||||||
|
href: "https://metatroncubesolutions.com/service/mobile-application-development/",
|
||||||
|
accent: C.teal,
|
||||||
|
glow: "rgba(13, 202, 240, 0.12)",
|
||||||
|
solid: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Digital Marketing",
|
||||||
|
sub: "Social media · SEO · Content strategy",
|
||||||
|
icon: "📈",
|
||||||
|
href: "https://metatroncubesolutions.com/service/digital-marketing-agency-in-canada/",
|
||||||
|
accent: C.amber,
|
||||||
|
glow: "rgba(255, 193, 7, 0.12)",
|
||||||
|
solid: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "UI / UX & Graphic Design",
|
||||||
|
sub: "Brand identity · Interface design",
|
||||||
|
icon: "✏️",
|
||||||
|
href: "https://metatroncubesolutions.com/service/ui-ux-designing/",
|
||||||
|
accent: C.pink,
|
||||||
|
glow: "rgba(214, 51, 132, 0.10)",
|
||||||
|
solid: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "SEO & Content Writing",
|
||||||
|
sub: "Rank higher · Drive organic traffic",
|
||||||
|
icon: "🔍",
|
||||||
|
href: "https://metatroncubesolutions.com/service/search-engine-optimization-seo-content-writing/",
|
||||||
|
accent: C.green,
|
||||||
|
glow: "rgba(25, 135, 84, 0.12)",
|
||||||
|
solid: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Contact Us",
|
||||||
|
sub: "info@metatroncubesolutions.com",
|
||||||
|
icon: "✉️",
|
||||||
|
href: "https://metatroncubesolutions.com/contact/",
|
||||||
|
accent: "rgba(26, 31, 43, 0.25)",
|
||||||
|
glow: "rgba(26, 31, 43, 0.05)",
|
||||||
|
solid: false,
|
||||||
|
dimText: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// ── Brand SVG icons ─────────────────────────────────────────────────────────
|
||||||
|
const IconInstagram = () => (
|
||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="ig-grad" cx="30%" cy="107%" r="150%">
|
||||||
|
<stop offset="0%" stopColor="#fdf497"/>
|
||||||
|
<stop offset="10%" stopColor="#fdf497"/>
|
||||||
|
<stop offset="50%" stopColor="#fd5949"/>
|
||||||
|
<stop offset="68%" stopColor="#d6249f"/>
|
||||||
|
<stop offset="100%" stopColor="#285AEB"/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="2" y="2" width="20" height="20" rx="6" fill="url(#ig-grad)"/>
|
||||||
|
<circle cx="12" cy="12" r="4.5" stroke="white" strokeWidth="1.8" fill="none"/>
|
||||||
|
<circle cx="17.2" cy="6.8" r="1.2" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const IconLinkedIn = () => (
|
||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="24" height="24" rx="5" fill="#0A66C2"/>
|
||||||
|
<path d="M6.5 10H8.5V18H6.5V10ZM7.5 9C6.84 9 6.5 8.56 6.5 8C6.5 7.44 6.95 7 7.5 7C8.05 7 8.5 7.44 8.5 8C8.5 8.56 8.05 9 7.5 9Z" fill="white"/>
|
||||||
|
<path d="M10.5 10H12.4V11C12.8 10.4 13.6 10 14.5 10C16.4 10 17.5 11.2 17.5 13.2V18H15.5V13.5C15.5 12.4 15 11.8 14 11.8C13 11.8 12.5 12.5 12.5 13.5V18H10.5V10Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const IconFacebook = () => (
|
||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="24" height="24" rx="5" fill="#1877F2"/>
|
||||||
|
<path d="M15.5 8H13.5C13.2 8 13 8.2 13 8.5V10H15.5L15.1 12H13V19H11V12H9V10H11V8.5C11 7 12 6 13.5 6H15.5V8Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const IconYouTube = () => (
|
||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="24" height="24" rx="5" fill="#FF0000"/>
|
||||||
|
<path d="M20.5 8.5C20.5 8.5 20.3 7.2 19.7 6.6C18.9 5.8 18.1 5.8 17.7 5.7C15.3 5.5 12 5.5 12 5.5C12 5.5 8.7 5.5 6.3 5.7C5.9 5.8 5.1 5.8 4.3 6.6C3.7 7.2 3.5 8.5 3.5 8.5C3.5 8.5 3.3 10 3.3 11.5V12.9C3.3 14.4 3.5 15.9 3.5 15.9C3.5 15.9 3.7 17.2 4.3 17.8C5.1 18.6 6.1 18.6 6.5 18.7C8 18.8 12 18.8 12 18.8C12 18.8 15.3 18.8 17.7 18.6C18.1 18.5 18.9 18.5 19.7 17.7C20.3 17.1 20.5 15.8 20.5 15.8C20.5 15.8 20.7 14.3 20.7 12.8V11.4C20.7 10 20.5 8.5 20.5 8.5ZM10.2 14.5V9.5L15.2 12L10.2 14.5Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const IconX = () => (
|
||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="24" height="24" rx="5" fill="#000000"/>
|
||||||
|
<path d="M17.5 5H19.9L14.6 11.1L20.8 19H15.9L12.1 14L7.7 19H5.3L11 12.5L5 5H10L13.4 9.6L17.5 5ZM16.6 17.5H17.9L9.3 6.4H7.9L16.6 17.5Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
const socials = [
|
||||||
|
{ label: "Instagram", Icon: IconInstagram, href: "https://www.instagram.com/metatron_digitalagency" },
|
||||||
|
{ label: "LinkedIn", Icon: IconLinkedIn, href: "https://www.linkedin.com/company/metatroncube-software-solutions/" },
|
||||||
|
{ label: "Facebook", Icon: IconFacebook, href: "https://www.facebook.com/metatroncubecanada" },
|
||||||
|
{ label: "YouTube", Icon: IconYouTube, href: "https://www.youtube.com/@metatron_digitalagency" },
|
||||||
|
{ label: "X/Twitter", Icon: IconX, href: "https://x.com/MetatroncubeDA" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ v: "100+", l: "Projects" },
|
||||||
|
{ v: "50+", l: "Clients" },
|
||||||
|
{ v: "10+", l: "Years" },
|
||||||
|
{ v: "20+", l: "Experts" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function MetatroncubeLinks() {
|
||||||
|
const [active, setActive] = useState<number | null>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={s.root}>
|
||||||
|
{/* Soft ambient glows behind cards */}
|
||||||
|
<div style={{ ...s.blob, top: -160, left: -160, background: "radial-gradient(circle, rgba(55,121,185,0.10) 0%, transparent 70%)" } as React.CSSProperties} />
|
||||||
|
<div style={{ ...s.blob, bottom: -120, right: -120, background: "radial-gradient(circle, rgba(55,121,185,0.07) 0%, transparent 70%)" } as React.CSSProperties} />
|
||||||
|
<div style={{ ...s.blob, top: "40%", right: -80, background: "radial-gradient(circle, rgba(55,121,185,0.05) 0%, transparent 70%)" } as React.CSSProperties} />
|
||||||
|
|
||||||
|
<div style={s.wrap}>
|
||||||
|
|
||||||
|
{/* ── Logo ── */}
|
||||||
|
<div style={s.logoWrap}>
|
||||||
|
<div style={s.logoRing}>
|
||||||
|
<div style={s.logoBox}>
|
||||||
|
<img
|
||||||
|
src={LOGO}
|
||||||
|
alt="Metatroncube Software Solution"
|
||||||
|
style={s.logoImg}
|
||||||
|
onError={(e) => {
|
||||||
|
const target = e.currentTarget;
|
||||||
|
target.style.display = "none";
|
||||||
|
const fallback = target.nextSibling as HTMLElement | null;
|
||||||
|
if (fallback) {
|
||||||
|
fallback.style.display = "flex";
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Fallback if image fails */}
|
||||||
|
<div style={{ ...s.logoFallback, display: "none" } as React.CSSProperties}>
|
||||||
|
<span style={s.logoFallbackText}>MC</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Name & tagline ── */}
|
||||||
|
<h1 style={s.name}>Metatroncube</h1>
|
||||||
|
<p style={s.sub}>Software Solution</p>
|
||||||
|
<p style={s.tagline}>Web · App · ERP · Marketing · SEO · Design</p>
|
||||||
|
|
||||||
|
{/* ── Location pill ── */}
|
||||||
|
<div style={s.pill}>
|
||||||
|
<span>🇨🇦 Waterloo, Ontario</span>
|
||||||
|
<span style={{ color: "rgba(26, 31, 43, 0.25)", margin: "0 8px" }}>·</span>
|
||||||
|
<span>🇺🇸 USA</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Stats ── */}
|
||||||
|
<div style={s.statsRow}>
|
||||||
|
{stats.map((st, i) => (
|
||||||
|
<div key={i} style={{ ...s.stat, borderRight: i < stats.length - 1 ? `1px solid ${C.border}` : "none" } as React.CSSProperties}>
|
||||||
|
<span style={s.statV}>{st.v}</span>
|
||||||
|
<span style={s.statL}>{st.l}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Links ── */}
|
||||||
|
<div style={s.linksCol}>
|
||||||
|
{links.map((lk, i) => {
|
||||||
|
const isActive = active === i;
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={i}
|
||||||
|
href={lk.href}
|
||||||
|
target={lk.href.startsWith("mailto") ? "_self" : "_blank"}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
onMouseEnter={() => setActive(i)}
|
||||||
|
onMouseLeave={() => setActive(null)}
|
||||||
|
onTouchStart={() => setActive(i)}
|
||||||
|
onTouchEnd={() => setTimeout(() => setActive(null), 300)}
|
||||||
|
style={{
|
||||||
|
...s.btn,
|
||||||
|
background: lk.solid
|
||||||
|
? lk.accent
|
||||||
|
: isActive ? lk.glow : C.card,
|
||||||
|
border: lk.solid
|
||||||
|
? "1px solid transparent"
|
||||||
|
: `1px solid ${isActive ? lk.accent : C.border}`,
|
||||||
|
boxShadow: isActive
|
||||||
|
? `0 12px 20px -8px ${lk.glow === "rgba(26, 31, 43, 0.05)" ? "rgba(0,0,0,0.08)" : lk.glow}`
|
||||||
|
: `0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03)`,
|
||||||
|
transform: isActive ? "translateY(-2px)" : "none",
|
||||||
|
} as React.CSSProperties}
|
||||||
|
>
|
||||||
|
<span style={s.btnIcon}>{lk.icon}</span>
|
||||||
|
<div style={s.btnText}>
|
||||||
|
<span style={{
|
||||||
|
...s.btnLabel,
|
||||||
|
color: lk.solid
|
||||||
|
? C.white
|
||||||
|
: lk.dimText ? C.muted : C.dark
|
||||||
|
} as React.CSSProperties}>
|
||||||
|
{lk.label}
|
||||||
|
</span>
|
||||||
|
<span style={{
|
||||||
|
...s.btnSub,
|
||||||
|
color: lk.solid ? "rgba(255,255,255,0.75)" : C.sub
|
||||||
|
} as React.CSSProperties}>{lk.sub}</span>
|
||||||
|
</div>
|
||||||
|
<span style={{
|
||||||
|
...s.arrow,
|
||||||
|
color: lk.solid
|
||||||
|
? C.white
|
||||||
|
: isActive ? lk.accent : C.muted
|
||||||
|
} as React.CSSProperties}>→</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Phone ── */}
|
||||||
|
<a href="tel:+16476797651" style={s.phone}
|
||||||
|
onMouseEnter={(e) => e.currentTarget.style.color = "var(--theme-color, #3779b9)"}
|
||||||
|
onMouseLeave={(e) => e.currentTarget.style.color = C.muted}
|
||||||
|
>
|
||||||
|
📞 +1-647-679-7651
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{/* ── Socials ── */}
|
||||||
|
<div style={s.socialsRow}>
|
||||||
|
{socials.map((sc, i) => (
|
||||||
|
<a key={i} href={sc.href} target="_blank" rel="noopener noreferrer"
|
||||||
|
title={sc.label} style={s.socialBtn}
|
||||||
|
onMouseEnter={e => {
|
||||||
|
e.currentTarget.style.background = C.cardAlt;
|
||||||
|
e.currentTarget.style.borderColor = "var(--theme-color, #3779b9)";
|
||||||
|
}}
|
||||||
|
onMouseLeave={e => {
|
||||||
|
e.currentTarget.style.background = C.card;
|
||||||
|
e.currentTarget.style.borderColor = C.border;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<sc.Icon />
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Footer ── */}
|
||||||
|
<p style={s.footer}>
|
||||||
|
© {new Date().getFullYear()} Metatroncube Software Solution Inc.
|
||||||
|
<br />
|
||||||
|
<a href="https://metatroncubesolutions.com/privacy-policy/" target="_blank"
|
||||||
|
rel="noopener noreferrer" style={{ color: C.muted, fontSize: 10 }}>
|
||||||
|
Privacy Policy
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const s: Record<string, React.CSSProperties> = {
|
||||||
|
root: {
|
||||||
|
minHeight: "100vh",
|
||||||
|
background: "radial-gradient(circle at top, #f4f6fc 0%, #ffffff 100%)",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
padding: "48px 16px 64px",
|
||||||
|
position: "relative",
|
||||||
|
overflow: "hidden",
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
WebkitFontSmoothing: "antialiased",
|
||||||
|
},
|
||||||
|
blob: {
|
||||||
|
position: "fixed",
|
||||||
|
width: 460,
|
||||||
|
height: 460,
|
||||||
|
borderRadius: "50%",
|
||||||
|
pointerEvents: "none",
|
||||||
|
zIndex: 0,
|
||||||
|
},
|
||||||
|
wrap: {
|
||||||
|
width: "100%",
|
||||||
|
maxWidth: 480,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
position: "relative",
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
logoWrap: { marginBottom: 18 },
|
||||||
|
logoRing: {
|
||||||
|
padding: 2.5,
|
||||||
|
borderRadius: "50%",
|
||||||
|
background: "linear-gradient(135deg, var(--theme-color, #3779b9) 0%, #e2e8f0 100%)",
|
||||||
|
},
|
||||||
|
logoBox: {
|
||||||
|
width: 96,
|
||||||
|
height: 96,
|
||||||
|
borderRadius: "50%",
|
||||||
|
background: C.card,
|
||||||
|
border: `3px solid #f4f6fc`,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
overflow: "hidden",
|
||||||
|
},
|
||||||
|
logoImg: { width: 56, height: 56, objectFit: "contain" },
|
||||||
|
logoFallback: {
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
},
|
||||||
|
logoFallbackText: {
|
||||||
|
fontSize: 28,
|
||||||
|
fontWeight: 900,
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
background: "linear-gradient(135deg, var(--theme-color, #3779b9), var(--theme-color-1, #1a1f2b))",
|
||||||
|
WebkitBackgroundClip: "text",
|
||||||
|
WebkitTextFillColor: "transparent",
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontSize: "28px",
|
||||||
|
fontWeight: 700,
|
||||||
|
color: "var(--theme-color-1, #1a1f2b)",
|
||||||
|
margin: "0 0 2px",
|
||||||
|
letterSpacing: "-0.5px"
|
||||||
|
},
|
||||||
|
sub: {
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontSize: "13px",
|
||||||
|
color: "var(--theme-color, #3779b9)",
|
||||||
|
margin: "0 0 6px",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
letterSpacing: "1.5px",
|
||||||
|
fontWeight: 600
|
||||||
|
},
|
||||||
|
tagline: {
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontSize: "14px",
|
||||||
|
color: "#595959",
|
||||||
|
margin: "0 0 16px",
|
||||||
|
textAlign: "center",
|
||||||
|
fontWeight: 400
|
||||||
|
},
|
||||||
|
pill: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
background: "rgba(55, 121, 185, 0.06)",
|
||||||
|
border: `1px solid rgba(55, 121, 185, 0.15)`,
|
||||||
|
borderRadius: 20,
|
||||||
|
padding: "5px 16px",
|
||||||
|
fontSize: "13px",
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontWeight: 500,
|
||||||
|
color: "var(--theme-color-1, #1a1f2b)",
|
||||||
|
marginBottom: 22,
|
||||||
|
},
|
||||||
|
statsRow: {
|
||||||
|
display: "flex",
|
||||||
|
width: "100%",
|
||||||
|
background: C.card,
|
||||||
|
border: `1px solid ${C.border}`,
|
||||||
|
borderRadius: 14,
|
||||||
|
marginBottom: 28,
|
||||||
|
overflow: "hidden",
|
||||||
|
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -2px rgba(0, 0, 0, 0.02)",
|
||||||
|
},
|
||||||
|
stat: {
|
||||||
|
flex: 1,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
padding: "14px 6px",
|
||||||
|
},
|
||||||
|
statV: {
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontSize: "22px",
|
||||||
|
fontWeight: 700,
|
||||||
|
color: "var(--theme-color, #3779b9)"
|
||||||
|
},
|
||||||
|
statL: {
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontSize: "11px",
|
||||||
|
color: "#595959",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
letterSpacing: "0.8px",
|
||||||
|
marginTop: 3,
|
||||||
|
fontWeight: 500
|
||||||
|
},
|
||||||
|
linksCol: {
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 10,
|
||||||
|
marginBottom: 22,
|
||||||
|
},
|
||||||
|
btn: {
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 14,
|
||||||
|
padding: "15px 16px",
|
||||||
|
borderRadius: 13,
|
||||||
|
textDecoration: "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: "transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border 0.18s ease",
|
||||||
|
width: "100%",
|
||||||
|
boxSizing: "border-box",
|
||||||
|
},
|
||||||
|
btnIcon: { fontSize: 21, flexShrink: 0, lineHeight: 1 },
|
||||||
|
btnText: { display: "flex", flexDirection: "column", flex: 1, minWidth: 0 },
|
||||||
|
btnLabel: {
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontSize: "15px",
|
||||||
|
fontWeight: 600,
|
||||||
|
lineHeight: 1.4
|
||||||
|
},
|
||||||
|
btnSub: {
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontSize: "12px",
|
||||||
|
marginTop: 2,
|
||||||
|
fontWeight: 400,
|
||||||
|
lineHeight: 1.4
|
||||||
|
},
|
||||||
|
arrow: { fontSize: 15, flexShrink: 0, transition: "color 0.18s" },
|
||||||
|
phone: {
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontSize: "14px",
|
||||||
|
color: C.muted,
|
||||||
|
textDecoration: "none",
|
||||||
|
marginBottom: 20,
|
||||||
|
letterSpacing: "0.3px",
|
||||||
|
transition: "color 0.2s ease",
|
||||||
|
fontWeight: 500,
|
||||||
|
},
|
||||||
|
socialsRow: {
|
||||||
|
display: "flex",
|
||||||
|
gap: 10,
|
||||||
|
marginBottom: 28,
|
||||||
|
},
|
||||||
|
socialBtn: {
|
||||||
|
width: 48,
|
||||||
|
height: 48,
|
||||||
|
borderRadius: 12,
|
||||||
|
background: C.card,
|
||||||
|
border: `1px solid ${C.border}`,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
textDecoration: "none",
|
||||||
|
transition: "background 0.2s, border-color 0.2s",
|
||||||
|
cursor: "pointer",
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
fontFamily: "var(--primary-font, 'Inter', sans-serif)",
|
||||||
|
fontSize: "12px",
|
||||||
|
color: C.sub,
|
||||||
|
textAlign: "center",
|
||||||
|
margin: 0,
|
||||||
|
lineHeight: 1.8,
|
||||||
|
},
|
||||||
|
};
|
||||||
15
src/app/links/page.tsx
Normal file
15
src/app/links/page.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import MetatroncubeLinksClient from "./MetatroncubeLinksClient";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Connect with Us | Metatroncube Software Solution",
|
||||||
|
description: "Book a free consultation, WhatsApp us, view our portfolio, or explore our services. Find all Metatroncube links in one place.",
|
||||||
|
alternates: {
|
||||||
|
canonical: "/links",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function LinksPage() {
|
||||||
|
return <MetatroncubeLinksClient />;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user