From ec0837aa733ffbae6c4da9c6de45265729a748a2 Mon Sep 17 00:00:00 2001 From: Alaguraj0361 Date: Sat, 27 Jun 2026 12:04:08 +0530 Subject: [PATCH] add favicon and create links page component --- public/favicon.ico | Bin 0 -> 1220 bytes src/app/links/MetatroncubeLinksClient.tsx | 550 ++++++++++++++++++++++ src/app/links/page.tsx | 15 + 3 files changed, 565 insertions(+) create mode 100644 public/favicon.ico create mode 100644 src/app/links/MetatroncubeLinksClient.tsx create mode 100644 src/app/links/page.tsx diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..f51e8e44c0b84ab85842b53bf32ad7fd3342def3 GIT binary patch literal 1220 zcmWIYbaUIo!oU#j>J$(bU=hK^z`$St#42Fq>FgYEf)U7NU_1dLS%6Zxc_l?b?oJ93 zkx>fl4;UDM5DXHNiwhtutRzs?w`&l!mvynKz%R&|l3JV$RPq6cRf>R?1KlJ7WQ(Lj z*cu>q5`=97VwaZ`lmOKPfY?PLLC!#S3XrXlj>JwvVkZ|AfzZ zZ((5Ab{-*y2$O=uqC~K9z}R45N=sv4__UmXfj5$YLHGg#16MRy4oKi|n*vZu2I#JQ zAWUb-VMt|AVDMzfV@PJu1G0>Ok!r|b=I9gPaextM>V)Fk+cxg~^*#Oew%prhTI!j- zuZqPNZ<|}QBKh{U^xGC6i{IC}2?+`})SDjq@~b6hov1vI);HOS$5(thelhUIRcn)2 z@#Qn0mOoMc*OU7q=bxH};m1>=9^q?p@0u$fFil#QEVrgATV1XHgGA^*3oEX7%zVDr zBTc+x`f6HE+-N)ZEMMs6L)q^NyOMHW@8e{sQ!QVA#(B@ZTYGBVAIz%A6M0j->Xc7I z?BBow|6?iv_50-~AE=zpq%WvU^tNbb7S+o1v_QJmHxzDEdN!vq2u6z zB&7{mRepDQpU(U*@xbN5)+?5xiHE=3uw0PO_@^o}-s;g8m0i<}tJ4*(oqL~_|4P1D zSWv53Kz`-jEUB)@*w1k%X4{s@zlvzMQ^ob8-@nJ|q4Au50cwn9-*rVcZ2EdaRQros z+Vz)@kGpH@%H7R4d+1m5`AgXG zgUj*2bRXwjn_~BS%nq;H zPHnBy+4Fq8^QNC3&aDgF-49r8eE9QS1mj%y1HWr*S@K#{fH_rx4H%CX*cs+BYN;}) zGT7znO>$kLv~ao6aM{kR;ONizAJ~h%XmuIZFY%i=jux{HBU_V zATjHwcNp)@xTia<6bt`OFzzPcc+%ImCO9~iJLR8 La%KLvKMV{2$WyQ@ literal 0 HcmV?d00001 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 ; +}