diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..f51e8e4 Binary files /dev/null and b/public/favicon.ico differ diff --git a/src/app/links/MetatroncubeLinksClient.tsx b/src/app/links/MetatroncubeLinksClient.tsx new file mode 100644 index 0000000..72eb28e --- /dev/null +++ b/src/app/links/MetatroncubeLinksClient.tsx @@ -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 = () => ( + + + + + + + + + + + + + + +); + +const IconLinkedIn = () => ( + + + + + +); + +const IconFacebook = () => ( + + + + +); + +const IconYouTube = () => ( + + + + +); + +const IconX = () => ( + + + + +); + +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(null); + + return ( +
+ {/* Soft ambient glows behind cards */} +
+
+
+ +
+ + {/* ── Logo ── */} +
+
+
+ Metatroncube Software Solution { + 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 */} +
+ MC +
+
+
+
+ + {/* ── Name & tagline ── */} +

Metatroncube

+

Software Solution

+

Web · App · ERP · Marketing · SEO · Design

+ + {/* ── Location pill ── */} +
+ 🇨🇦 Waterloo, Ontario + · + 🇺🇸 USA +
+ + {/* ── Stats ── */} +
+ {stats.map((st, i) => ( +
+ {st.v} + {st.l} +
+ ))} +
+ + {/* ── Links ── */} + + + {/* ── Phone ── */} + e.currentTarget.style.color = "var(--theme-color, #3779b9)"} + onMouseLeave={(e) => e.currentTarget.style.color = C.muted} + > + 📞 +1-647-679-7651 + + + {/* ── Socials ── */} + + + {/* ── Footer ── */} +

+ © {new Date().getFullYear()} Metatroncube Software Solution Inc. +
+ + Privacy Policy + +

+ +
+
+ ); +} + +const s: Record = { + 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, + }, +}; diff --git a/src/app/links/page.tsx b/src/app/links/page.tsx new file mode 100644 index 0000000..16b9d41 --- /dev/null +++ b/src/app/links/page.tsx @@ -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 ; +}