MetatroncubeSoftwareSolutions/MetatronLatestWebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: MetatroncubeSoftwareSolutions:08366424d1090946106669a3ca1d3bcc8203b38b
Branches Tags
MetatroncubeSoftwareSolutions:main
..
compare: MetatroncubeSoftwareSolutions:d5f2a2a59e035304efa38c7affebd408c560da02
Branches Tags
MetatroncubeSoftwareSolutions:main

No commits in common. "08366424d1090946106669a3ca1d3bcc8203b38b" and "d5f2a2a59e035304efa38c7affebd408c560da02" have entirely different histories.
08366424d1 ... d5f2a2a59e

33 changed files with 407 additions and 515 deletions
Show Stats Expand all files Collapse all files

6
src/app/faq/page.tsx
View File

@ -8,8 +8,6 @@ import FaqPageSection from "@/components/faq/FaqPageSection";
import FaqVideoSection from "@/components/careers/FaqVideoSection"; import FaqVideoSection from "@/components/careers/FaqVideoSection";
import PageHeader from "@/components/common/PageHeader"; import PageHeader from "@/components/common/PageHeader";
import FaqSection from "@/components/home/home-3/FaqSection"; import FaqSection from "@/components/home/home-3/FaqSection";
import FaqFour from "@/components/home/FaqFour";
import FaqFive from "@/components/home/FaqFive";
export default function FaqPage() { export default function FaqPage() {
useEffect(() => { useEffect(() => {
@ -29,10 +27,8 @@ export default function FaqPage() {
<main> <main>
<PageHeader title="FAQ" /> <PageHeader title="FAQ" />
<FaqPageSection /> <FaqPageSection />
<FaqFour />
<FaqFive />
<FaqVideoSection /> <FaqVideoSection />
{/* <FaqSection/> */} <FaqSection/>
</main> </main>
<Footer1 /> <Footer1 />
</> </>

9
src/app/globals.css
View File

@ -9021,7 +9021,7 @@ body {
/* Why Choose Us Section Styles */ /* Why Choose Us Section Styles */
.why-choose-us { .why-choose-us {
padding: 80px 0; padding: 80px 0;
background: #eaf0f9 !important; background: #eaf0f9;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -9130,7 +9130,6 @@ body {
.why-choose-us .main-image img { .why-choose-us .main-image img {
width: 100%; width: 100%;
height: 550px;
display: block; display: block;
} }
@ -10102,7 +10101,7 @@ body {
/* FAQ Page Section Styles */ /* FAQ Page Section Styles */
.faq-page-section { .faq-page-section {
/* background: #f8fbff; */ background: #f8fbff;
padding: 80px 0; padding: 80px 0;
} }
@ -11233,9 +11232,9 @@ body {
/* ============================================================ /* ============================================================
BLOG SECTION & PAGINATION (GLOBAL) BLOG SECTION & PAGINATION (GLOBAL)
============================================================ */ ============================================================ */
/* .blog-section-one.section-space { .blog-section-one.section-space {
padding-bottom: 0; padding-bottom: 0;
} */ }
.pagination-wrapper { .pagination-wrapper {
padding-top: 60px; padding-top: 60px;

6
src/app/services-digital-solutions/[slug]/page.tsx
View File

@ -3,11 +3,11 @@ import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1"; import Footer1 from "@/components/layout/Footer1";
import PageHeader from "@/components/common/PageHeader"; import PageHeader from "@/components/common/PageHeader";
import ServiceDetails from "@/components/services-digital-solutions/ServiceDetails"; import ServiceDetails from "@/components/services-digital-solutions/ServiceDetails";
import { ourServices } from "@/utils/data"; import { psychologyServices } from "@/utils/data";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
export async function generateStaticParams() { export async function generateStaticParams() {
return ourServices.map((service) => ({ return psychologyServices.map((service) => ({
slug: service.slug, slug: service.slug,
})); }));
} }
@ -15,7 +15,7 @@ export async function generateStaticParams() {
export default async function ServiceDetailsPage({ params }: { params: Promise<{ slug: string }> }) { export default async function ServiceDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params; const { slug } = await params;
const service = ourServices.find((s) => s.slug === slug); const service = psychologyServices.find((s) => s.slug === slug);
if (!service) { if (!service) {
notFound(); notFound();

2
src/app/services-digital-solutions/page.tsx
View File

@ -24,7 +24,6 @@ import WorkProcessSection2 from "@/components/careers/WorkProcessSection";
import AboutService from "@/components/services-digital-solutions/AboutService"; import AboutService from "@/components/services-digital-solutions/AboutService";
import PageHeader from "@/components/common/PageHeader"; import PageHeader from "@/components/common/PageHeader";
import AboutTwo from "@/components/home/AboutTwo"; import AboutTwo from "@/components/home/AboutTwo";
import ResultsSection from "@/components/about/Results";
export default function Home3() { export default function Home3() {
useEffect(() => { useEffect(() => {
@ -50,7 +49,6 @@ export default function Home3() {
<ServiceSection2 /> <ServiceSection2 />
<WorkProcessSection /> <WorkProcessSection />
<AboutTwo /> <AboutTwo />
<ResultsSection />
{/* <AboutService /> */} {/* <AboutService /> */}
{/* <FeaturesSection2 /> */} {/* <FeaturesSection2 /> */}
{/* <ProjectsSection /> */} {/* <ProjectsSection /> */}

74
src/components/about/Results.tsx
View File

@ -1,74 +0,0 @@
import React from "react";
const ResultsSection = () => {
return (
<section className="why-choose-us section-space">
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area pr-50">
<div className="sec-title-wrapper mb-30">
<div className="sec-title">
<div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">Discover Our Process</h6>
<h3 className="sec-title__title">How We Deliver Exceptional Results</h3>
</div>
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
<p>
Delve into Metatroncube’s unique approach to delivering exceptional results. Our ‘Discover Our Process’ section illuminates the meticulous steps we take in transforming your digital vision into tangible success.
</p>
<p className="section-desc">
From the initial consultation to the final launch and beyond, we blend strategic planning, innovative design, and cutting-edge technology to craoft digital solutions that stand out. This journey is not just about reaching yur goals; it’s about exceeding them and setting new standards in the digital world. Explore our proven process that combines expertise, creativity, and client collaboration to achieve extraordinary outcomes.
</p>
</div>
{/* <div className="feature-list mb-40">
<div className="feature-item d-flex align-items-center mb-30">
<div className="feature-icon">
<i className="fa-solid fa-handshake-angle"></i>
</div>
<div className="feature-content">
<h4>We Are Improve Choose Business.</h4>
<p>Market research branding of engagement.</p>
</div>
</div>
<div className="feature-item d-flex align-items-center mb-0 border-top-line">
<div className="feature-icon">
<i className="fa-solid fa-lightbulb"></i>
</div>
<div className="feature-content">
<h4>Business Consulting This Network.</h4>
<p>Business tailored design, management & off support.</p>
</div>
</div>
</div>
<div className="bottom-note">
<div className="note-item">
<i className="fa-solid fa-circle-arrow-right"></i>
<span>We are business many variations of passages of this business magical solution.</span>
</div>
</div> */}
</div>
</div>
<div className="col-lg-6">
<div className="image-area-wrapper p-relative">
<div className="main-image">
<img src="/assets/img-app/about/about-img5.png" alt="Business Meeting" />
</div>
<div className="circular-image">
<div className="inner-circle">
<img src="/assets/img-app/about/about-img5.png" alt="Profile" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default ResultsSection;

12
src/components/careers/FaqVideoSection.tsx
View File

@ -93,9 +93,8 @@ const FaqVideoSection = () => {
<div className="col-lg-8 wow fadeInUp" data-wow-delay="0ms"> <div className="col-lg-8 wow fadeInUp" data-wow-delay="0ms">
<div className="contact-form-card"> <div className="contact-form-card">
<div className="section-title-wrapper text-center mb-40"> <div className="section-title-wrapper text-center mb-40">
<span className="section-subtitle">Let's Connect</span> <span className="section-subtitle">Get In Touch</span>
<h2 className="section-heading text-white">Get In Touch With Metatroncube</h2> <h2 className="section-heading text-white">Have a Project in Mind?</h2>
<p className="text-white">Your Questions and Ideas Matter to Us</p>
</div> </div>
{alert.show && ( {alert.show && (
@ -202,12 +201,7 @@ const FaqVideoSection = () => {
<div className="video-content-overlay"> <div className="video-content-overlay">
<h2 className="consultation-title">Take the First Step Towards Digital Excellence.</h2> <h2 className="consultation-title">Take the First Step Towards Digital Excellence.</h2>
<p className="consultation-text">Book Your Personalized Consultation with Our Experts Today.</p> <p className="consultation-text">Book Your Personalized Consultation with Our Experts Today.</p>
<a <a href="/contact" className="primary-btn-1-link mt-30">
href="https://calendly.com/metatroncubeswsolutions/request-consultation?month=2025-05"
className="primary-btn-1 mt-4"
target="_blank"
rel="noopener noreferrer"
>
Schedule Consultation &nbsp; | <i className="fa-solid fa-calendar-check"></i> Schedule Consultation &nbsp; | <i className="fa-solid fa-calendar-check"></i>
</a> </a>
</div> </div>

6
src/components/careers/ServiceSection.tsx
View File

@ -2,7 +2,7 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
import Link from "next/link"; import Link from "next/link";
import { ourServices } from "@/utils/data"; import { psychologyServices } from "@/utils/data";
const ServiceSection2 = () => { const ServiceSection2 = () => {
const sectionRef = useRef<HTMLDivElement>(null); const sectionRef = useRef<HTMLDivElement>(null);
@ -44,7 +44,7 @@ const ServiceSection2 = () => {
return () => observer.disconnect(); return () => observer.disconnect();
}, []); }, []);
const services = ourServices; const services = psychologyServices;
return ( return (
<section ref={sectionRef} className="service-three"> <section ref={sectionRef} className="service-three">
@ -61,7 +61,7 @@ const ServiceSection2 = () => {
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">OUR BEST SERVICE</h6> <h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
<h3 className="sec-title__title">We Run All Kinds Of Services <br /> From Technologies</h3> <h3 className="sec-title__title">We Are Service Your Business</h3>
</div> </div>
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>

19
src/components/careers/WorkProcessSection.tsx
View File

@ -35,12 +35,12 @@ const WorkProcessSection2 = () => {
}, []); }, []);
const processCards = [ const processCards = [
{ id: 1, text: "Consultation & Strategy Development", icon: "tolak-icons-two-lamp" }, { id: 1, text: "Brainstorming \n Ideas", icon: "tolak-icons-two-lamp" },
{ id: 2, text: "Design & Development", icon: "tolak-icons-two-settings-2" }, { id: 2, text: "Product \n Design", icon: "tolak-icons-two-settings-2" },
{ id: 3, text: "Implementation & Optimization", icon: "tolak-icons-two-optimization" }, { id: 3, text: "Back-End \n Development", icon: "tolak-icons-two-optimization" },
{ id: 4, text: "Testing & Launch", icon: "tolak-icons-two-business-analysis" }, { id: 4, text: "SEO \n Optimization", icon: "tolak-icons-two-business-analysis" },
{ id: 5, text: "Ongoing Support & Analysis", icon: "tolak-icons-two-support" }, { id: 6, text: "Digital SEO \n Marketing", icon: "tolak-icons-two-support" },
{ id: 6, text: "Client Engagement & Feedback", icon: "tolak-icons-two-smart-solution" }, { id: 7, text: "Mobile \n Development", icon: "tolak-icons-two-smart-solution" },
]; ];
return ( return (
@ -69,13 +69,14 @@ const WorkProcessSection2 = () => {
<div className="sec-title-wrapper wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}> <div className="sec-title-wrapper wow" data-wow-delay="0.3s" style={{ visibility: "hidden" }}>
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">digital transformation journey</h6> <h6 className="sec-title__tagline">HOW WE DO</h6>
<h3 className="sec-title__title">Embark on a digital transformation journey with Metatroncube</h3> <h3 className="sec-title__title">Amazing Solutions<br />For Business</h3>
</div> </div>
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>
<p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}> <p className="wow text-dark" data-wow-delay="0.5s" style={{ visibility: "hidden" }}>
Our process begins with consultation and strategy development, where we understand your vision and create a customized plan aligned with your goals. We then move into design and development, combining creativity and technology to build functional and visually appealing solutions. Next, we implement and optimize the strategy to ensure efficiency, performance, and measurable impact. After thorough testing, we launch your project smoothly with a focus on quality and reliability. Finally, we provide ongoing support, continuous analysis, and client feedback integration to ensure long-term growth and sustained digital success. We don&apos;t believe in a one-size-fit-all approach. Our services are carefully
customized to suit your specific need, ensuring you to achieve your goals.
</p> </p>
</div> </div>
</div> </div>

11
src/components/contact/ContactSection.tsx
View File

@ -97,11 +97,10 @@ const ContactSection = () => {
<div className="sec-title-wrapper"> <div className="sec-title-wrapper">
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">Let's Connect</h6> <h6 className="sec-title__tagline">CONTACT WITH US</h6>
<h3 className="sec-title__title">Drop us a Line.</h3> <h3 className="sec-title__title">Feel Free to Get in Touch</h3>
<p>Whether you have a question, a project idea, or just want to chat about your digital needs, our team is here to listen and provide tailored solutions. Reach out to Metatroncube Software Solutions and start your journey towards innovative digital success.</p>
</div> </div>
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */} <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>
<div className="contact-info-list"> <div className="contact-info-list">
<div className="contact-info-item d-flex align-items-center mb-30"> <div className="contact-info-item d-flex align-items-center mb-30">
@ -127,8 +126,8 @@ const ContactSection = () => {
<i className="fa-solid fa-location-dot"></i> <i className="fa-solid fa-location-dot"></i>
</div> </div>
<div className="content"> <div className="content">
<span>Location</span> <span>Visit Now</span>
<h6>Waterloo, Ontario Canada</h6> <h6>Canada</h6>
</div> </div>
</div> </div>
</div> </div>

203
src/components/faq/FaqPageSection.tsx
View File

@ -3,47 +3,123 @@
import React, { useState } from "react"; import React, { useState } from "react";
const FaqPageSection = () => { const FaqPageSection = () => {
const [activeLeftId, setActiveLeftId] = useState<number | null>(1); const [activeId, setActiveId] = useState<number | null>(1);
const [activeRightId, setActiveRightId] = useState<number | null>(null);
const toggleLeftAccordion = (id: number) => { const toggleAccordion = (id: number) => {
setActiveLeftId(activeLeftId === id ? null : id); setActiveId(activeId === id ? null : id);
};
const toggleRightAccordion = (id: number) => {
setActiveRightId(activeRightId === id ? null : id);
}; };
const leftFaqs = [ const leftFaqs = [
{ id: 1, question: "What is digital transformation, and why is it important for traditional businesses?", answer: "Digital transformation involves integrating digital technology into all areas of a business, fundamentally changing how you operate and deliver value to customers. It's crucial for staying competitive and relevant in the ever-evolving digital landscape.", animationDelay: ".5s" }, {
{ id: 2, question: "How can we transition to digital without losing the essence of our brand?", answer: "We focus on understanding your brand’s core values and message to ensure that your digital presence reflects your brand's unique identity. This involves creating a consistent brand voice and imagery across all digital platforms.", animationDelay: ".5s" }, id: 1,
{ id: 3, question: "What are the benefits of effective online marketing for restaurants?", answer: "Online marketing can significantly increase your restaurant's visibility, attract new customers, and enhance customer engagement through social media, online reviews, and a strong online presence.", animationDelay: ".5s" }, question: "How does Metatron Cube ensure project success?",
{ id: 4, question: "How can Metatroncube help in managing negative online reviews?", answer: "We provide strategies for proactive review management, encouraging positive reviews, and professionally responding to negative feedback, turning challenges into opportunities to showcase excellent customer service.", animationDelay: ".5s" }, answer: "We follow a rigorous discovery process, Agile development cycles, and continuous quality assurance to ensure every project meets client goals on time and within budget."
},
{
id: 2,
question: "What tech stacks do you specialize in?",
answer: "Our expertise spans modern frameworks including React, Next.js, Node.js, and Python, along with specialized platforms like Shopify and custom ERP solutions."
},
{
id: 3,
question: "How do you handle intellectual property (IP)?",
answer: "Upon project completion and final payment, full ownership and IP rights of the source code and assets are transferred to the client, as stipulated in our standard agreements."
},
{
id: 4,
question: "Can you work with our existing in-house team?",
answer: "Absolutely. We offer staff augmentation and dedicated team models that integrate seamlessly with your internal workflows and communication tools."
},
{
id: 5,
question: "What is your communication model during development?",
answer: "We use Slack, Jira, and regular Zoom check-ins to provide transparent updates. You'll have a dedicated project manager acting as your primary point of contact."
}
]; ];
const rightFaqs = [ const rightFaqs = [
{ id: 5, question: "Can digital lead generation truly benefit real estate agents?", answer: "Absolutely. Digital lead generation, through targeted online ads and local SEO, can significantly increase your visibility to potential clients, helping you stand out in the competitive real estate market.", animationDelay: ".5s" }, {
{ id: 6, question: "What strategies do you recommend for real estate agents to improve their online presence?", answer: "We recommend a combination of an updated, user-friendly website, active social media engagement, and targeted digital marketing campaigns to enhance your online presence and attract potential clients.", animationDelay: ".5s" }, id: 6,
{ id: 7, question: "How can mortgage agents build a trustworthy online brand?", answer: "Building a trustworthy online brand involves creating consistent, valuable content, showcasing client testimonials, and engaging with your audience to establish credibility and authority in your field.", animationDelay: ".5s" }, question: "How do you maintain code quality and standards?",
{ id: 8, question: "How can small businesses manage social media effectively?", answer: "Small businesses can manage social media effectively by maintaining a consistent posting schedule, creating engaging and relevant content, and actively interacting with their audience to build a loyal community.", animationDelay: ".5s" }, answer: "Our developers follow strict linting rules, conduct peer code reviews, and implement automated testing to maintain a clean, scalable, and bug-free codebase."
{ id: 9, question: "What are the key elements of a successful e-commerce platform for physical stores?", answer: "A successful e-commerce platform should offer an easy-to-navigate layout, mobile optimization, secure payment options, and a seamless shopping experience that mirrors the in-store experience.", animationDelay: ".5s" }, },
{
id: 7,
question: "What are your post-launch support options?",
answer: "We offer tiered maintenance packages that include security patches, performance monitoring, regular backups, and feature enhancements to keep your platform running smoothly."
},
{
id: 8,
question: "How quickly can you start a new project?",
answer: "Depending on the scope and resource availability, we can typically kick off a project within 1 to 2 weeks after the discovery phase and agreement signing."
},
{
id: 9,
question: "Do you provide UI/UX design services?",
answer: "Yes, our design-led approach ensures that every project starts with a focus on user experience, creating intuitive and visually stunning interfaces."
},
{
id: 10,
question: "How do you handle security and data protection?",
answer: "We implement industry-standard encryption, secure API protocols, and regular security audits to protect your data and ensure compliance with global standards."
}
]; ];
// const leftFaqs2 = [ const leftFaqs2 = [
// { id: 10, question: "How can Metatroncube assist in setting up an e-commerce site for my store?", answer: " We can help by designing a user-friendly e-commerce website, ensuring mobile optimization, and integrating secure payment gateways to provide a smooth online shopping experience for your customers.", animationDelay: ".5s" }, {
// { id: 11, question: "What's the importance of content marketing for service-based businesses?", answer: "Content marketing helps establish your business as an industry authority, increases engagement, and drives lead generation. It's a vital tool for building long-term relationships with your audience.", animationDelay: ".5s" }, id: 11,
// { id: 12, question: "How can I ensure my content marketing strategy is effective?", answer: "Your strategy should focus on creating valuable, relevant content that addresses your audience's needs and interests. Storytelling and regular engagement are key to connecting with potential clients.", animationDelay: ".5s" }, question: "How does Metatron Cube ensure project success?",
// { id: 13, question: "How does Metatroncube address the challenges faced by businesses in digital transformation?", answer: "We offer tailored solutions that simplify the digital transition, provide comprehensive support throughout the process, and create strategies that align with your business objectives.", animationDelay: ".5s" }, answer: "We follow a rigorous discovery process, Agile development cycles, and continuous quality assurance to ensure every project meets client goals on time and within budget."
// { id: 14, question: "Can digital marketing strategies be cost-effective for small businesses?", answer: "Yes, digital marketing offers cost-effective solutions with measurable results. We focus on strategies that provide the best ROI, tailored to fit the budget and goals of small businesses.", animationDelay: ".5s" }, },
// ]; {
id: 12,
question: "What tech stacks do you specialize in?",
answer: "Our expertise spans modern frameworks including React, Next.js, Node.js, and Python, along with specialized platforms like Shopify and custom ERP solutions."
},
{
id: 13,
question: "How do you handle intellectual property (IP)?",
answer: "Upon project completion and final payment, full ownership and IP rights of the source code and assets are transferred to the client, as stipulated in our standard agreements."
},
{
id: 14,
question: "Can you work with our existing in-house team?",
answer: "Absolutely. We offer staff augmentation and dedicated team models that integrate seamlessly with your internal workflows and communication tools."
},
{
id: 15,
question: "What is your communication model during development?",
answer: "We use Slack, Jira, and regular Zoom check-ins to provide transparent updates. You'll have a dedicated project manager acting as your primary point of contact."
}
];
// const rightFaqs2 = [ const rightFaqs2 = [
// { id: 15, question: "How can we measure the success of our digital marketing efforts?", answer: "Success can be measured using various metrics such as website traffic, engagement rates, conversion rates, and ROI. We also provide detailed analytics to track and optimize your digital marketing campaigns.", animationDelay: ".5s" }, {
// { id: 16, question: "What kind of support does Metatroncube offer for maintaining an online presence?", answer: "We offer ongoing support in website maintenance, content creation, social media management, and digital marketing strategies to ensure your online presence remains strong and effective.", animationDelay: ".5s" }, id: 16,
// { id: 17, question: "How often should we update our digital marketing strategies?", answer: "The digital landscape is constantly evolving, so it's important to regularly review and update your strategies. We recommend a quarterly review to stay ahead of trends and adjust tactics as needed.", animationDelay: ".5s" }, question: "How do you maintain code quality and standards?",
// { id: 18, question: "What makes Metatroncube unique in digital marketing services?", answer: "Our approach is client-centric, focusing on customized solutions that align with your specific business goals. Our team stays updated with the latest trends to ensure innovative and effective strategies.", animationDelay: ".5s" }, answer: "Our developers follow strict linting rules, conduct peer code reviews, and implement automated testing to maintain a clean, scalable, and bug-free codebase."
// { id: 19, question: "How can we start working with Metatroncube for our digital needs?", answer: "Getting started is easy. Simply contact us for a consultation, and we'll discuss your business needs, goals, and how we can assist in achieving your digital transformation objectives.", animationDelay: ".5s" }, },
// ]; {
id: 17,
question: "What are your post-launch support options?",
answer: "We offer tiered maintenance packages that include security patches, performance monitoring, regular backups, and feature enhancements to keep your platform running smoothly."
},
{
id: 18,
question: "How quickly can you start a new project?",
answer: "Depending on the scope and resource availability, we can typically kick off a project within 1 to 2 weeks after the discovery phase and agreement signing."
},
{
id: 19,
question: "Do you provide UI/UX design services?",
answer: "Yes, our design-led approach ensures that every project starts with a focus on user experience, creating intuitive and visually stunning interfaces."
},
{
id: 20,
question: "How do you handle security and data protection?",
answer: "We implement industry-standard encryption, secure API protocols, and regular security audits to protect your data and ensure compliance with global standards."
}
];
return ( return (
<section className="faq-page-section"> <section className="faq-page-section">
@ -51,9 +127,10 @@ const FaqPageSection = () => {
<div className="row align-items-end mb-60"> <div className="row align-items-end mb-60">
<div className="col-lg-6"> <div className="col-lg-6">
<div className="section-title-wrapper"> <div className="section-title-wrapper">
<div className="sec-title__shape"></div> <span className="section-subtitle">
<h6 className="sec-title__tagline">Digital Mastery Unlocked</h6> Digital Mastery Unlocked
<h2 className="section-title mt-4" style={{ margin: 0 }}>Metatroncube FAQs: Web-Apps, SEO, & Digital Marketing</h2> </span>
<h2 className="section-title" style={{ margin: 0 }}>Metatroncube FAQs: Web-Apps, SEO, & Digital Marketing</h2>
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">
@ -66,26 +143,20 @@ const FaqPageSection = () => {
</div> </div>
{/* Section 1: 3-Column with Image */} {/* Section 1: 3-Column with Image */}
<div className="row align-items-center"> <div className="row align-items-center mb-40">
{/* Left Side FAQs */} {/* Left Side FAQs */}
<div className="col-lg-4 col-md-12"> <div className="col-lg-4 col-md-12">
<div className="faq-one__accordion pelocis-accrodion"> <div className="accordion-custom">
{leftFaqs.map((faq) => ( {leftFaqs.map((faq) => (
<div key={faq.id} className={`accrodion ${activeLeftId === faq.id ? 'active' : ''}`}> <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
<div className="accrodion-title" onClick={() => toggleLeftAccordion(faq.id)}> <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
<div className="accrodion-title__shape"></div> <span className="question-text">{faq.question}</span>
<div className="accrodion-title__icon"> <span className="faq-icon">
<i className="fa fa-check"></i> <i className="fa-solid fa-chevron-down"></i>
</div> </span>
<h4 style={{ fontSize: '14px', lineHeight: '1.4' }}> </button>
{faq.question} <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
<i className="icon-right-arrow-white"></i> <div className="answer-inner">{faq.answer}</div>
</h4>
</div>
<div className="accrodion-content" style={{ display: activeLeftId === faq.id ? 'block' : 'none' }}>
<div className="inner">
<p>{faq.answer}</p>
</div>
</div> </div>
</div> </div>
))} ))}
@ -101,23 +172,17 @@ const FaqPageSection = () => {
{/* Right Side FAQs */} {/* Right Side FAQs */}
<div className="col-lg-4 col-md-12"> <div className="col-lg-4 col-md-12">
<div className="faq-one__accordion pelocis-accrodion"> <div className="accordion-custom">
{rightFaqs.map((faq) => ( {rightFaqs.map((faq) => (
<div key={faq.id} className={`accrodion ${activeRightId === faq.id ? 'active' : ''}`}> <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
<div className="accrodion-title" onClick={() => toggleRightAccordion(faq.id)}> <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
<div className="accrodion-title__shape"></div> <span className="question-text">{faq.question}</span>
<div className="accrodion-title__icon"> <span className="faq-icon">
<i className="fa fa-check"></i> <i className="fa-solid fa-chevron-down"></i>
</div> </span>
<h4 style={{ fontSize: '14px', lineHeight: '1.4' }}> </button>
{faq.question} <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
<i className="icon-right-arrow-white"></i> <div className="answer-inner">{faq.answer}</div>
</h4>
</div>
<div className="accrodion-content" style={{ display: activeRightId === faq.id ? 'block' : 'none' }}>
<div className="inner">
<p>{faq.answer}</p>
</div>
</div> </div>
</div> </div>
))} ))}
@ -126,7 +191,7 @@ const FaqPageSection = () => {
</div> </div>
{/* Section 2: 2-Column Standard Layout */} {/* Section 2: 2-Column Standard Layout */}
{/* <div className="row section-space-top"> <div className="row section-space-top">
<div className="col-lg-6 col-md-12"> <div className="col-lg-6 col-md-12">
<div className="accordion-custom"> <div className="accordion-custom">
{leftFaqs2.map((faq) => ( {leftFaqs2.map((faq) => (
@ -161,7 +226,7 @@ const FaqPageSection = () => {
))} ))}
</div> </div>
</div> </div>
</div> */} </div>
</div> </div>
</section> </section>

27
src/components/home/AboutTwo.tsx
View File

@ -31,34 +31,29 @@ const AboutTwo = () => {
<div className="sec-title"> <div className="sec-title">
{/* <span className="about-two__dot-circle"></span> */} {/* <span className="about-two__dot-circle"></span> */}
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">Why Choose Us</h6> <h6 className="sec-title__tagline">OUR ABOUT COMPANY</h6>
<h3 className="sec-title__title">Comprehensive Digital Solutions Expertise</h3> <h3 className="sec-title__title">Psychology Seeks To Explore The About Workings of Human</h3>
</div> </div>
{/* <p className="about-two__text"> <p className="about-two__text">
Business tailored design, management & support services Business Business tailored design, management & support services Business
business agency elit, sed do eiusmod tempor &nbsp;majority have business agency elit, sed do eiusmod tempor &nbsp;majority have
in some we form, by injected humour solution. in some we form, by injected humour solution.
</p> */} </p>
<ul className="about-two__list"> <ul className="about-two__list">
<li> <li>
<span className="icon-social-care"></span> <span className="icon-social-care"></span>
<div className="about-two__list__content"> <div className="about-two__list__content">
<h3 className="about-two__list__title">Latest Technology</h3> <h3 className="about-two__list__title">Behavioral Psychology</h3>
<p className="about-two__list__text">Harness advanced tech for top-notch web, app, and digital projects.</p> <p className="about-two__list__text">Supporting individuals inovercoming and for their
quality of life whether solution.</p>
</div> </div>
</li> </li>
<li> <li>
<span className="icon-social-care"></span> <span className="icon-social-care"></span>
<div className="about-two__list__content"> <div className="about-two__list__content">
<h4 className="about-two__list__title">Certified Experts</h4> <h4 className="about-two__list__title">Behavioral Psychology</h4>
<p className="about-two__list__text">Trust our certified team for expert guidance in all digital realms.</p> <p className="about-two__list__text">Supporting individuals inovercoming and for their
</div> quality of life whether solution.</p>
</li>
<li>
<span className="icon-social-care"></span>
<div className="about-two__list__content">
<h4 className="about-two__list__title">Get Reasonable Price</h4>
<p className="about-two__list__text">Get value-driven solutions at prices tailored for your business needs.</p>
</div> </div>
</li> </li>
</ul> </ul>

6
src/components/home/CallAreaThree.tsx
View File

@ -11,9 +11,9 @@ const CallAreaThree: React.FC = () => {
<div className="container"> <div className="container">
<div className="call-area-three__content"> <div className="call-area-three__content">
<h2 className="call-area-three__title wow fadeInUp" data-wow-delay="0.1s"> <h2 className="call-area-three__title wow fadeInUp" data-wow-delay="0.1s">
MetatronCube Finished this Achivement <br /> in 10 Years We Are Always Ready For Every Challenge <br /> Please Trust Us
</h2> </h2>
{/* <p className="call-area-three__text wow fadeInUp" data-wow-delay="0.2s"> <p className="call-area-three__text wow fadeInUp" data-wow-delay="0.2s">
Business tailored design, management &amp; support services Business agency, sed <br /> Business tailored design, management &amp; support services Business agency, sed <br />
tempor &nbsp;majority have in some we form, by injected solution. tempor &nbsp;majority have in some we form, by injected solution.
</p> </p>
@ -23,7 +23,7 @@ const CallAreaThree: React.FC = () => {
Get A Free Quote <i className="icon-right-arrow-white"></i> Get A Free Quote <i className="icon-right-arrow-white"></i>
</span> </span>
</Link> </Link>
</div> */} </div>
</div> </div>
</div> </div>
</section> </section>

38
src/components/home/CounsellingSolutions.tsx
View File

@ -20,45 +20,47 @@ const CounsellingSolutions: React.FC = () => {
className="counselling-solutions__image__two" className="counselling-solutions__image__two"
/> />
<div className="counselling-solutions__image__watch-btn"> <div className="counselling-solutions__image__watch-btn">
{/* <Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup"> */} <Link href="https://www.youtube.com/watch?v=h9MbznbxlLc" className="video-popup">
<i className="fa-solid fa-award"></i> <i className="icon-play"></i>
{/* </Link> */} </Link>
<span>Metatroncube Solutions</span> <span>WATCH VIDEO</span>
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">
<div className="counselling-solutions__title"> <div className="counselling-solutions__title">
<div className="sec-title mt-50"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">METATRONCUBE</h6> <h6 className="sec-title__tagline">BEST COUNSELLING SOLUTION</h6>
<h3 className="sec-title__title"> <h3 className="sec-title__title">
Why Choose Metatroncube Solution. Psychology is a Broad Field So <br /> Consider Skill Solution
</h3> </h3>
</div> </div>
</div> </div>
<div className="counselling-solutions__content"> <div className="counselling-solutions__content">
{/* <p className="counselling-solutions__text"> <p className="counselling-solutions__text">
Business tailored design, management &amp; support services Business Business tailored design, management &amp; support services Business
business agency elit, sed do eiusmod tempor &nbsp;majority have business agency elit, sed do eiusmod tempor &nbsp;majority have
in some we form, by injected humour solution. in some we form, by injected humour solution.
</p> */}
<p className="counselling-solutions__text">
<strong>Client-Centric Approach</strong>: Our dedication to client success sets us apart. We prioritize understanding your unique business needs, ensuring our digital solutions are tailored to your specific goals and objectives.
</p> </p>
<p className="counselling-solutions__text"> <p className="counselling-solutions__text">
<strong>Continuous Innovation & Learning</strong>: At Metatroncube, we're committed to staying ahead of industry trends. Our team regularly undergoes training and adopts new methodologies to deliver the most current and effective solutions. <strong>Psychology:</strong> The scientific study of behavior and mental processes It explores
</p> various aspects of human behavior such as perception, cognition, emotion,
<p className="counselling-solutions__text"> personality, development, and social interactions.
<strong>Collaborative Project Management</strong>: We believe in transparent and collaborative project management. Our clients are involved at every step, ensuring a seamless process from initial concept to final implementation.
</p> </p>
{/* <div className="about-btn-box mt-4"> <ul className="counselling-solutions__list--two">
<li>
<span className="icon-arrow-circle-check"></span>
The right therapist can help you develop the skills to manage
</li>
</ul>
<div className="about-btn-box mt-4">
<Link className="primary-btn-1 btn-hover" href="/about"> <Link className="primary-btn-1 btn-hover" href="/about">
Discover More &nbsp; | <i className="fa-solid fa-arrow-right"></i> Discover More &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
</Link> </Link>
</div> */} </div>
</div> </div>
</div> </div>
</div> </div>

24
src/components/home/CounterAreaThree.tsx
View File

@ -49,28 +49,28 @@ const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
const counterItems = [ const counterItems = [
{ {
icon: "/assets/imgs/icon/icon-4.png", icon: "/assets/imgs/icon/icon-1.png",
count: 100, count: 950,
suffix: "+", suffix: "k+",
text: "Projects Completed" text: "Projects Succefull"
}, },
{ {
icon: "/assets/imgs/icon/icon-2.png", icon: "/assets/imgs/icon/icon-2.png",
count: 50, count: 256,
suffix: "+", suffix: "k+",
text: "Active Clients" text: "Happy Customers"
}, },
{ {
icon: "/assets/imgs/icon/icon-3.png", icon: "/assets/imgs/icon/icon-3.png",
count: 20, count: 852,
suffix: "+", suffix: "k+",
text: "Expert People" text: "Consultants Planing"
}, },
{ {
icon: "/assets/imgs/icon/icon-4.png", icon: "/assets/imgs/icon/icon-4.png",
count: 50, count: 965,
suffix: "+", suffix: "+",
text: "Happy Clients" text: "Awards Winners"
} }
]; ];

24
src/components/home/CounterAreaTwo.tsx
View File

@ -49,28 +49,28 @@ const Counter: React.FC<CounterProps> = ({ end, duration = 2000 }) => {
const counterItems = [ const counterItems = [
{ {
icon: "/assets/imgs/icon/icon-2.png", icon: "/assets/imgs/icon/icon-1.png",
count: 100, count: 950,
suffix: "+", suffix: "k+",
text: "Projects Completed" text: "Projects Succefull"
}, },
{ {
icon: "/assets/imgs/icon/icon-2.png", icon: "/assets/imgs/icon/icon-2.png",
count: 50, count: 256,
suffix: "+", suffix: "k+",
text: "Active Clients" text: "Happy Customers"
}, },
{ {
icon: "/assets/imgs/icon/icon-3.png", icon: "/assets/imgs/icon/icon-3.png",
count: 20, count: 852,
suffix: "+", suffix: "k+",
text: "Expert People" text: "Consultants Planing"
}, },
{ {
icon: "/assets/imgs/icon/icon-4.png", icon: "/assets/imgs/icon/icon-4.png",
count: 100, count: 965,
suffix: "+", suffix: "+",
text: "Happy Clients" text: "Awards Winners"
} }
]; ];

83
src/components/home/FaqFive.tsx
View File

@ -1,83 +0,0 @@
"use client";
import React, { useState } from 'react';
const FaqFive = () => {
const [activeIndex, setActiveIndex] = useState(0);
const toggleAccordion = (index: number) => {
setActiveIndex(index === activeIndex ? -1 : index);
};
const faqItems = [
{
question: "How can we measure the success of our digital marketing efforts?",
answer: "Success can be measured using various metrics such as website traffic, engagement rates, conversion rates, and ROI. We also provide detailed analytics to track and optimize your digital marketing campaigns."
},
{
question: "What kind of support does Metatroncube offer for maintaining an online presence?",
answer: "We offer ongoing support in website maintenance, content creation, social media management, and digital marketing strategies to ensure your online presence remains strong and effective."
},
{
question: "How often should we update our digital marketing strategies?",
answer: "The digital landscape is constantly evolving, so it's important to regularly review and update your strategies. We recommend a quarterly review to stay ahead of trends and adjust tactics as needed."
},
{
question: "What makes Metatroncube unique in digital marketing services?",
answer: "Our approach is client-centric, focusing on customized solutions that align with your specific business goals. Our team stays updated with the latest trends to ensure innovative and effective strategies."
},
{
question: "How can we start working with Metatroncube for our digital needs?",
answer: "Getting started is easy. Simply contact us for a consultation, and we'll discuss your business needs, goals, and how we can assist in achieving your digital transformation objectives."
}
];
return (
<section className="faq-four section-space">
<div className="container">
<div className="row">
<div className="col-xl-6">
<div className="pelocis-stretch-element-inside-column">
<div className="faq-four__image2">
<img
src="https://bracketweb.com/pelocishtml/assets/images/resources/faq-4-1.jpg"
alt="pelocis"
/>
<div className="faq-four__image2__icon">
<i className="icon-faq"></i>
</div>
</div>
</div>
</div>
<div className="col-xl-6">
<div className="faq-four__content">
<div className="faq-one__accordion pelocis-accrodion">
{faqItems.map((item, index) => (
<div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
<div className="accrodion-title" onClick={() => toggleAccordion(index)}>
<div className="accrodion-title__shape"></div>
<div className="accrodion-title__icon">
<i className="fa fa-check"></i>
</div>
<h4>
{item.question}
<i className="icon-right-arrow-white"></i>
</h4>
</div>
<div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
<div className="inner">
<p>{item.answer}</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default FaqFive;

33
src/components/home/FaqFour.tsx
View File

@ -11,37 +11,30 @@ const FaqFour = () => {
const faqItems = [ const faqItems = [
{ {
question: "How can Metatroncube assist in setting up an e-commerce site for my store?", question: "What are the different branches of psychology?",
answer: " We can help by designing a user-friendly e-commerce website, ensuring mobile optimization, and integrating secure payment gateways to provide a smooth online shopping experience for your customers." answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
}, },
{ {
question: "What's the importance of content marketing for service-based businesses?", question: "How does psychology differ from psychiatry?",
answer: "Content marketing helps establish your business as an industry authority, increases engagement, and drives lead generation. It's a vital tool for building long-term relationships with your audience." answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
}, },
{ {
question: "How can I ensure my content marketing strategy is effective?", question: "How do psychologists diagnose mental disorders?",
answer: "Your strategy should focus on creating valuable, relevant content that addresses your audience's needs and interests. Storytelling and regular engagement are key to connecting with potential clients." answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
}, },
{ {
question: "How does Metatroncube address the challenges faced by businesses in digital transformation?", question: "What are the common methods used in psychological?",
answer: "We offer tailored solutions that simplify the digital transition, provide comprehensive support throughout the process, and create strategies that align with your business objectives." answer: "Supporting individuals in overcome expert many of variations challenges, and enhancing their best quality of life whether are going to use."
},
{
question: "Can digital marketing strategies be cost-effective for small businesses?",
answer: "Yes, digital marketing offers cost-effective solutions with measurable results. We focus on strategies that provide the best ROI, tailored to fit the budget and goals of small businesses."
} }
]; ];
return ( return (
<section <section className="faq-four">
className="faq-four section-space"
style={{ backgroundColor: "#f8fbff" }}
>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-xl-6"> <div className="col-xl-6">
<div className="faq-four__content"> <div className="faq-four__content">
{/* <div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">OUR FAQ US</h6> <h6 className="sec-title__tagline">OUR FAQ US</h6>
<h3 className="sec-title__title">We Providing Psychology People Choose of Promoting</h3> <h3 className="sec-title__title">We Providing Psychology People Choose of Promoting</h3>
@ -49,7 +42,7 @@ const FaqFour = () => {
<p className="faq-four__content__text"> <p className="faq-four__content__text">
Business tailored design, management &amp; support services Business business agency elit, Business tailored design, management &amp; support services Business business agency elit,
sed do eiusmod tempor majority have in some we form, by injected humour solution. sed do eiusmod tempor majority have in some we form, by injected humour solution.
</p> */} </p>
<div className="faq-one__accordion pelocis-accrodion"> <div className="faq-one__accordion pelocis-accrodion">
{faqItems.map((item, index) => ( {faqItems.map((item, index) => (
<div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}> <div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
@ -65,9 +58,9 @@ const FaqFour = () => {
</div> </div>
<div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}> <div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
<div className="inner"> <div className="inner">
{/* <div className="accrodion-content__icon"> <div className="accrodion-content__icon">
<span className="icon-faq1"></span> <span className="icon-faq1"></span>
</div> */} </div>
<p>{item.answer}</p> <p>{item.answer}</p>
</div> </div>
</div> </div>

40
src/components/home/HistoryTwo.tsx
View File

@ -8,10 +8,8 @@ const HistoryTwo = () => {
<div className="history-two__title text-center"> <div className="history-two__title text-center">
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">Experience US</h6> <h6 className="sec-title__tagline">OUR HISTORY</h6>
<h3 className="sec-title__title">We Offer & Do <h3 className="sec-title__title">Psychology Diverse And Multidisciplinary <br />Field Encompassing Areas</h3>
More than Ever Platforms.</h3>
<p>Appropriately enhance principle-centered innovation rather than high standards in platforms. <br /> Credibly orchestrate functional.</p>
</div> </div>
</div> </div>
<div className="row history-two__wrapper"> <div className="row history-two__wrapper">
@ -20,23 +18,26 @@ const HistoryTwo = () => {
<div className="history-two__content"> <div className="history-two__content">
<div className="history-two__content__count"></div> <div className="history-two__content__count"></div>
<p className="history-two__content__text"> <p className="history-two__content__text">
Our mission is to empower businesses with state-of-the-art digital products that drive growth, efficiency, and connectivity. We strive to be at forefront of innovation, delivering web & mobile solutions that exceed expectations. History company support continue
to explore new frontiers, including
team stands ready to our reliable
or assistance of and technical.
</p> </p>
<h3 className="history-two__content__title">Our Mission</h3> <h3 className="history-two__content__title">Psychology Today</h3>
{/* <span className="history-two__content__date">02-08-2021</span> */} <span className="history-two__content__date">02-08-2021</span>
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">
<div className="history-two__images"> <div className="history-two__images">
<span className="history-two__images__date"></span> <span className="history-two__images__date">2021</span>
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" /> <img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">
<div className="history-two__images history-two__images--right"> <div className="history-two__images history-two__images--right">
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" /> <img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
{/* <span className="history-two__images__date">2021</span> */} <span className="history-two__images__date">2021</span>
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">
@ -44,11 +45,13 @@ const HistoryTwo = () => {
<div className="history-two__content history-two__content--left"> <div className="history-two__content history-two__content--left">
<div className="history-two__content__count"></div> <div className="history-two__content__count"></div>
<p className="history-two__content__text"> <p className="history-two__content__text">
Redefining digital innovation to create smarter, connected experiences for businesses worldwide. History company support continue
Building a future where technology drives efficiency, growth, and sustainable success. to explore new frontiers, including
team stands ready to our reliable
or assistance of and technical.
</p> </p>
<h3 className="history-two__content__title">Our Vision</h3> <h3 className="history-two__content__title">Psychology Today</h3>
{/* <span className="history-two__content__date">02-08-2021</span> */} <span className="history-two__content__date">02-08-2021</span>
</div> </div>
</div> </div>
</div> </div>
@ -57,16 +60,19 @@ const HistoryTwo = () => {
<div className="history-two__content"> <div className="history-two__content">
<div className="history-two__content__count"></div> <div className="history-two__content__count"></div>
<p className="history-two__content__text"> <p className="history-two__content__text">
Integrity and Trust, Innovation and Excellence, Collaboration and Empowerment, Adaptability and Learning, Customer-Centric Approach, Sustainability and Responsibility. History company support continue
to explore new frontiers, including
team stands ready to our reliable
or assistance of and technical.
</p> </p>
<h3 className="history-two__content__title">Our Values</h3> <h3 className="history-two__content__title">Psychology Today</h3>
{/* <span className="history-two__content__date">02-08-2021</span> */} <span className="history-two__content__date">02-08-2021</span>
</div> </div>
</div> </div>
</div> </div>
<div className="col-lg-6"> <div className="col-lg-6">
<div className="history-two__images"> <div className="history-two__images">
<span className="history-two__images__date"></span> <span className="history-two__images__date">2021</span>
<img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" /> <img src="https://bracketweb.com/pelocishtml/assets/images/resources/history-2-1.png" alt="pelocis" />
</div> </div>
</div> </div>

2
src/components/home/PortfolioSection.tsx
View File

@ -214,7 +214,7 @@ export default function PortfolioSection() {
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">PORTFOLIO</h6> <h6 className="sec-title__tagline">PORTFOLIO</h6>
<h3 className="sec-title__title">We Serve the Best Works<span className="inner-text"></span></h3> <h3 className="sec-title__title">Our Latest <span className="inner-text">Work </span></h3>
</div> </div>
</div> </div>

29
src/components/home/WhyChooseTwo.tsx
View File

@ -14,14 +14,13 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
<div className="why-choose-two__content"> <div className="why-choose-two__content">
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">Watch Us Live</h6> <h6 className="sec-title__tagline">WHY CHOOSE US</h6>
<h3 className="sec-title__title">An Agency That Gets Excited <br /> About Your Mission</h3> <h3 className="sec-title__title">We Providing&nbsp;Psychology People <br /> Choose of Promoting</h3>
</div> </div>
<p>
Every project we take on is personal. We get excited about your goals, your grit, and the journey you’re on.
</p>
<p className="why-choose-two__text"> <p className="why-choose-two__text">
Whether you’re launching something new or leveling up an existing brand, we bring fresh energy, deep expertise, and full-stack creativity to your table. We don’t just work for you, we work with you, as committed collaborators invested in your long-term growth. Business tailored design, management &amp; support services Business
business agency elit, sed do eiusmod tempor &nbsp;majority have
in some we form, by injected humour solution.
</p> </p>
<div className="why-choose-two__box"> <div className="why-choose-two__box">
<ul className="why-choose-two__list"> <ul className="why-choose-two__list">
@ -31,10 +30,10 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
<span className="fa-solid fa-lightbulb"></span> <span className="fa-solid fa-lightbulb"></span>
</div> </div>
<div className="why-choose-two__item__content"> <div className="why-choose-two__item__content">
<h3 className="why-choose-two__item__title">Urgent development solutions</h3> <h3 className="why-choose-two__item__title">Family Service Psychology</h3>
{/* <p className="why-choose-two__item__text"> <p className="why-choose-two__item__text">
Supporting individuals in overcoming service Supporting individuals in overcoming service
</p> */} </p>
</div> </div>
</li> </li>
<li className="why-choose-two__item"> <li className="why-choose-two__item">
@ -43,10 +42,10 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
<span className="fa-solid fa-brain"></span> <span className="fa-solid fa-brain"></span>
</div> </div>
<div className="why-choose-two__item__content"> <div className="why-choose-two__item__content">
<h3 className="why-choose-two__item__title">Top quality services with reasonable price</h3> <h3 className="why-choose-two__item__title">Cognitive off Psychology</h3>
{/* <p className="why-choose-two__item__text"> <p className="why-choose-two__item__text">
Supporting individuals in overcoming service Supporting individuals in overcoming service
</p> */} </p>
</div> </div>
</li> </li>
<li className="why-choose-two__item"> <li className="why-choose-two__item">
@ -55,10 +54,10 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
<span className="fa-solid fa-people-roof"></span> <span className="fa-solid fa-people-roof"></span>
</div> </div>
<div className="why-choose-two__item__content"> <div className="why-choose-two__item__content">
<h3 className="why-choose-two__item__title">Professional & experienced team</h3> <h3 className="why-choose-two__item__title">Relationship Psychology</h3>
{/* <p className="why-choose-two__item__text"> <p className="why-choose-two__item__text">
Supporting individuals in overcoming service Supporting individuals in overcoming service
</p> */} </p>
</div> </div>
</li> </li>
</ul> </ul>

29
src/components/home/home-1/AboutSection.tsx
View File

@ -19,18 +19,18 @@ const AboutSection = () => {
<div className="image-2-area"> <div className="image-2-area">
<div className="image-2 p-relative"> <div className="image-2 p-relative">
<img src="/assets/img/about/about-img7.png" alt="" /> <img src="/assets/img/about/about-img7.png" alt="" />
{/* <div className="play-btn"> <div className="play-btn">
<div className="video_player_btn"> <div className="video_player_btn">
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a> <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
</div> </div>
</div> */} </div>
</div> </div>
</div> </div>
<div className="working-area float-bob-y"> <div className="working-area float-bob-y">
<div className="inner p-relative"> <div className="inner p-relative">
<div className="icon-box"> <div className="icon-box">
<i className="fa-solid fa-award"></i> <i className="fa-solid fa-award"></i>
<h4><span className="counter">10+</span> Years</h4> <h4><span className="counter">25</span> Years</h4>
<p>Working Experience</p> <p>Working Experience</p>
</div> </div>
</div> </div>
@ -42,19 +42,19 @@ const AboutSection = () => {
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s"> <div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">Digital Excellence</h6> <h6 className="sec-title__tagline">ABOUT US</h6>
<h3 className="sec-title__title">Let's Work Together.<br /></h3> <h3 className="sec-title__title">Selecting the Finest IT<br />Service Provider</h3>
</div> </div>
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>
<p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">Partner with Metatroncube Software Solutions and unlock a world of digital possibilities in web & app development, SEO, digital marketing, and graphic design services. Our commitment extends beyond mere product delivery; we focus on enhancing your market presence and driving business success with comprehensive digital strategies. Experience the unique Metatroncube advantage in every aspect of digital transformation.</p> <p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s"> <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
<div className="icon"> <div className="icon">
<img src="/assets/imgs/about/about-three-icon1.png" alt="img" /> <img src="/assets/imgs/about/about-three-icon1.png" alt="img" />
</div> </div>
<div className="content"> <div className="content">
<h5><a href="#">Exceptional Digital Quality</a></h5> <h5><a href="#">Business Growth</a></h5>
<p>High-quality graphics and precise web app development ensuring excellence.</p> <p>Embarrassing hidden in the middle All the Lorem Ipsum generators on the Internet repeat predefined chunks</p>
</div> </div>
</div> </div>
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s"> <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
@ -62,17 +62,8 @@ const AboutSection = () => {
<img src="/assets/imgs/about/about-three-icon2.png" alt="img" /> <img src="/assets/imgs/about/about-three-icon2.png" alt="img" />
</div> </div>
<div className="content"> <div className="content">
<h5><a href="#">Expertise in innovation</a></h5> <h5><a href="#">Technology Consultancy</a></h5>
<p>Skilled developers leading in SEO, digital marketing, and technological advancements.</p> <p>Embarrassing hidden in the middle All the Lorem Ipsum generators on the Internet repeat predefined chunks</p>
</div>
</div>
<div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
<div className="icon">
<img src="/assets/imgs/about/about-three-icon2.png" alt="img" />
</div>
<div className="content">
<h5><a href="#">Comprehensive web solutions</a></h5>
<p>Robust web and mobile development with strategic SEO and marketing.</p>
</div> </div>
</div> </div>
<div className="about-btn-box wow fadeInLeft" data-wow-delay="1s"> <div className="about-btn-box wow fadeInLeft" data-wow-delay="1s">

2
src/components/home/home-1/BlogSection.tsx
View File

@ -59,7 +59,7 @@ const BlogSection = ({ hideHeader = false, isPaginated = false }: { hideHeader?:
<h6 className="sec-title__tagline">LATEST BLOG</h6> <h6 className="sec-title__tagline">LATEST BLOG</h6>
<h3 className="sec-title__title">Latest Blog Insights</h3> <h3 className="sec-title__title">Latest Blog Insights</h3>
</div> </div>
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */} <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>
)} )}
<div className="row g-4"> <div className="row g-4">

28
src/components/home/home-1/ChooseSection.tsx
View File

@ -10,19 +10,27 @@ const ChooseSection = () => (
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s"> <div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">WELCOME TO METATRONCUBE</h6> <h6 className="sec-title__tagline">WHY CHOOSE US</h6>
<h3 className="sec-title__title text-white">Driving Client Success with Cutting-Edge Digital Solutions in Web & App Development, SEO, and Digital Marketing</h3> <h3 className="sec-title__title text-white">What&apos;s Make Us Different</h3>
</div> </div>
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>
<div className="choose-content text-white wow fadeInRight" data-wow-delay=".7s"> {[
<p className="text-white"> { icon: "fa-solid fa-building", title: "Commercial Service", delay: ".5s" },
At Metatroncube Software Solutions, we're not just about web design and mobile app development; we're a hub of innovation in SEO, digital marketing, and graphic design services. Located in the Kitchener and Waterloo regions, our services stand out through a unique blend of innovative design and advanced technology. { icon: "fa-solid fa-bullseye", title: "Mission Statement Metatron", delay: ".7s" },
</p> { icon: "fa-solid fa-handshake-angle", title: "Safety And Reliability", delay: ".9s" }
<p className="text-white"> ].map((item, i) => (
Our expertise spans across AngularJS, ReactJS, HTML5, Node.js, PHP, and comprehensive frameworks for native Android, iOS, and Flutter. This is complemented by our strength in SEO strategies and digital marketing solutions, ensuring your brand not only looks good but also ranks high. <React.Fragment key={i}>
</p> <div className={`choose-area-icon-box mb-15 wow fadeInRight`} data-wow-delay={item.delay}>
</div> <div className="icon-box p-relative"><i className={item.icon}></i></div>
<div className="content">
<h5><a href="#">{item.title}</a></h5>
<p>Embarrassing hidden in the middle All the Lorem Ipsum generators on the Internet repeat predefined chunks</p>
</div>
</div>
<hr />
</React.Fragment>
))}
</div> </div>
<div className="col-xxl-6 col-xl-6 col-lg-6 wow fadeInLeft" data-wow-delay="1.2s"> <div className="col-xxl-6 col-xl-6 col-lg-6 wow fadeInLeft" data-wow-delay="1.2s">
<figure className="image m-img"><img src="/assets/imgs/resources/choose-1.png" alt="" /></figure> <figure className="image m-img"><img src="/assets/imgs/resources/choose-1.png" alt="" /></figure>

4
src/components/home/home-1/CtaSection.tsx
View File

@ -11,8 +11,8 @@ const CtaSection = () => (
<div className="content p-relative"> <div className="content p-relative">
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-12.png)" }}></div> <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-12.png)" }}></div>
<div className="icon-box"><i className="fa-solid fa-phone-volume"></i></div> <div className="icon-box"><i className="fa-solid fa-phone-volume"></i></div>
<h3>Let’s Discuss How to Make your Business Better.</h3> <h3 className="mb-15">Need Any Help?</h3>
{/* <h5><a href="tel:2085550112">+208-555-0112</a></h5> */} <h5><a href="tel:2085550112">+208-555-0112</a></h5>
</div> </div>
</div> </div>
</div> </div>

20
src/components/home/home-1/FeaturesSection.tsx
View File

@ -53,16 +53,16 @@ const ArrowIcon = () => (
const features: FeatureItem[] = [ const features: FeatureItem[] = [
{ {
title: "Comprehensive digital development", title: "The future Latest Technology",
desc: "Expert web, app development and e-commerce solutions.", desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun",
icon: <IdeaIcon />, icon: <IdeaIcon />,
image: "/assets/img-app/about/about-img2.png", image: "/assets/img-app/about/about-img2.png",
imageAlt: "Versatile Latest Technology", imageAlt: "Versatile Latest Technology",
delay: 0, delay: 0,
}, },
{ {
title: "Strategic online growth solutions", title: "Business Planning Strategies",
desc: "Strategic SEO and digital marketing for growth.", desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun",
icon: <GrowthIcon />, icon: <GrowthIcon />,
image: "/assets/img-app/about/about-img4.png", image: "/assets/img-app/about/about-img4.png",
imageAlt: "Business Planning Strategies", imageAlt: "Business Planning Strategies",
@ -70,8 +70,8 @@ const features: FeatureItem[] = [
delay: 200, delay: 200,
}, },
{ {
title: "Creative design and branding excellence", title: "Professional Team Members",
desc: "Creative graphic design and branding strategy services.", desc: "There are many variations of passages of Lorem Ipsum avalab but the majority have suffered alteration in some having fun",
icon: <TeamIcon />, icon: <TeamIcon />,
image: "/assets/img-app/about/about-img1.png", image: "/assets/img-app/about/about-img1.png",
imageAlt: "Professional Team Members", imageAlt: "Professional Team Members",
@ -118,8 +118,8 @@ const FeaturesSection = () => {
<div className="history-two__title text-center"> <div className="history-two__title text-center">
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">Strategic Digital Services</h6> <h6 className="sec-title__tagline">OUR HISTORY</h6>
<h3 className="sec-title__title">Innovation & Growth</h3> <h3 className="sec-title__title">Psychology Diverse And Multidisciplinary <br />Field Encompassing Areas</h3>
</div> </div>
</div> </div>
<div className="fo-row"> <div className="fo-row">
@ -143,9 +143,9 @@ const FeaturesSection = () => {
{feature.icon} {feature.icon}
</div> </div>
<h3 className="fo-hover-title">{feature.title}</h3> <h3 className="fo-hover-title">{feature.title}</h3>
{/* <Link href="#" className="fo-hover-btn"> <Link href="#" className="fo-hover-btn">
<ArrowIcon /> <ArrowIcon />
</Link> */} </Link>
</div> </div>
{/* Main card */} {/* Main card */}

13
src/components/home/home-1/ServiceThreeSlider.tsx
View File

@ -2,11 +2,11 @@
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
import { ourServices } from "@/utils/data"; import { psychologyServices } from "@/utils/data";
import { ServiceType } from "@/types"; import { ServiceType } from "@/types";
const ServiceThreeSlider = () => { const ServiceThreeSlider = () => {
const services: ServiceType[] = ourServices; const services: ServiceType[] = psychologyServices;
return ( return (
<section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#07172b" }}> <section className="service-slider-section service-three section-space dark-bg p-relative" style={{ background: "#07172b" }}>
@ -16,18 +16,17 @@ const ServiceThreeSlider = () => {
<div className="small-container"> <div className="small-container">
<div className="row align-items-end"> <div className="row align-items-end">
<div className="col-xxl-10 col-xl-6"> <div className="col-xxl-6 col-xl-6">
<div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s"> <div className="sec-title-wrapper wow fadeInLeft" data-wow-delay=".5s">
<div className="sec-title sec-title--light"> <div className="sec-title sec-title--light">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">OUR SERVICEs</h6> <h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
<h3 className="sec-title__title text-white">We Shape the Perfect Solution.</h3> <h3 className="sec-title__title text-white">We Are Service Your Business</h3>
<p className="text-white mt-4">At Metatroncube, we sculpt digital excellence, meticulously blending innovation with user-centric design to manifest your business vision. Partner with us to experience a seamless fusion of web & app development, SEO, digital marketing, and graphic design services. Our strategic solutions and unparalleled execution pave the way for your digital voyage. We are your navigators in the digital realm, steering your project from conception to completion with precision and creativity.</p>
</div> </div>
<img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>
</div> </div>
<div className="col-xxl-2 col-xl-6"> <div className="col-xxl-6 col-xl-6">
<div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30"> <div className="service_1_navigation__wrapprer position-relative z-1 text-end mt-30">
<div className="common-slider-navigation"> <div className="common-slider-navigation">
<button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button> <button className="service-1-button-prev slider-nav-btn"><i className="fa-solid fa-chevron-left"></i></button>

2
src/components/home/home-1/TestimonialsSection.tsx
View File

@ -99,7 +99,7 @@ const TestimonialsSection = () => {
<GoogleReviewsBranding /> <GoogleReviewsBranding />
</div> </div>
</div> </div>
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */} <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>
<div className="testi-slider-wrapper" style={{ position: 'relative', zIndex: 2, marginTop: '70px' }}> <div className="testi-slider-wrapper" style={{ position: 'relative', zIndex: 2, marginTop: '70px' }}>

54
src/components/home/home-2/About2Section.tsx
View File

@ -20,7 +20,7 @@ const About2Section = () => (
</div> </div>
<div className="content"> <div className="content">
<h3 className="mb-10"><span className="counter">10</span>+</h3> <h3 className="mb-10"><span className="counter">10</span>+</h3>
<p>Experience</p> <p>World Best Business Award Got</p>
</div> </div>
</div> </div>
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-29.png)" }}></div> <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-29.png)" }}></div>
@ -32,44 +32,28 @@ const About2Section = () => (
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">ABOUT US</h6> <h6 className="sec-title__tagline">ABOUT US</h6>
<h3 className="sec-title__title">Our Story</h3> <h3 className="sec-title__title">We Strive To Offer Intelligent<br />Business Solutions</h3>
</div> </div>
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */} <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>
<p className="mb-35">Metatroncube Software Solutions was born from a passion for technology and a vision to revolutionize digital interactions. Based in the heart of Waterloo's tech hub, we have been pioneering custom software solutions since 2019.</p> <p className="mb-35">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
<div className="about-features-list mb-45"> <div className="row mb-45">
<div className="about-feature-item-3 mb-25 wow fadeInRight" data-wow-delay=".6s"> <div className="col-lg-6">
<div className="icon"> <ul className="list-area">
<i className="fa-solid fa-microchip"></i> <li className="mb-10">Technology Consultancy</li>
</div> <li className="mb-10">We Provide best services</li>
<div className="content"> <li className="mb-10">Maintenance And Support</li>
{/* <span className="tagline">Innovative technology and strategy by Metatron Cube Solutions.</span> */} </ul>
<h4 className="title">Innovative Solutions</h4>
<p>Tailoring cutting-edge web and mobile applications that set industry standards.</p>
</div>
</div> </div>
<div className="about-feature-item-3 wow fadeInRight" data-wow-delay=".7s"> <div className="col-lg-6">
<div className="icon"> <ul className="list-area">
<i className="fa-solid fa-users-gear"></i> <li className="mb-10">300+ Successful Projects done</li>
</div> <li className="mb-10">Professional Engineers Provide</li>
<div className="content"> <li className="mb-10">Requirements Gathering</li>
{/* <span className="tagline">digital solutions team</span> */} </ul>
<h4 className="title">Expert Teamwork</h4>
<p>A synergy of skilled developers and creative designers committed to your success.</p>
</div>
</div>
<div className="about-feature-item-3 wow fadeInRight" data-wow-delay=".8s">
<div className="icon">
<i className="fa-solid fa-chess-knight"></i>
</div>
<div className="content">
{/* <span className="tagline">Future-ready strategy by Metatron Cube Solutions.</span> */}
<h4 className="title">Future-Ready Approach</h4>
<p>Anticipating market trends to keep your business ahead of the curve.</p>
</div>
</div> </div>
</div> </div>
{/* <div className="about-2-btn-area"> <div className="about-2-btn-area">
<a className="primary-btn-1 btn-hover" href="/about"> <a className="primary-btn-1 btn-hover" href="/about">
about us &nbsp; | <i className="fa-solid fa-arrow-right"></i> about us &nbsp; | <i className="fa-solid fa-arrow-right"></i>
<span className="btn-hover-span"></span> <span className="btn-hover-span"></span>
@ -83,7 +67,7 @@ const About2Section = () => (
<h5><a href="tel:2085550112">+208-555-0112</a></h5> <h5><a href="tel:2085550112">+208-555-0112</a></h5>
</div> </div>
</div> </div>
</div> */} </div>
</div> </div>
</div> </div>
</div> </div>

15
src/components/home/home-2/WorkProcessSection.tsx
View File

@ -7,17 +7,16 @@ const WorkProcessSection = () => (
<div className="sec-title-wrapper text-center wow fadeInLeft" data-wow-delay=".5s"> <div className="sec-title-wrapper text-center wow fadeInLeft" data-wow-delay=".5s">
<div className="sec-title"> <div className="sec-title">
<div className="sec-title__shape"></div> <div className="sec-title__shape"></div>
<h6 className="sec-title__tagline">Get To Know Us More</h6> <h6 className="sec-title__tagline">WORKING PROCESS</h6>
<h3 className="sec-title__title">We’re Reliable & Cost Efficient <br /> Digital Agency.</h3> <h3 className="sec-title__title">Our Development Process</h3>
<p>Appropriately enhance principle-centered innovation rather than high standards in platforms. <br /> Credibly orchestrate functional.</p>
</div> </div>
{/* <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" /> */} <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
</div> </div>
<div className="row g-4"> <div className="row g-4">
{[ {[
{ num: 1, title: "Our Mission", icon: "icon-4.png", desc: "Empowering businesses with innovative digital growth solutions."}, { num: 1, title: "Define Requirements", icon: "icon-4.png" },
{ num: 2, title: "Our Vision", icon: "icon-5.png", desc: "Redefining digital innovation for a connected, efficient future."}, { num: 2, title: "Design & Prototyping", icon: "icon-5.png" },
{ num: 3, title: "Our Values", icon: "icon-6.png", desc: "Redefining digital innovation for a connected, efficient future."} { num: 3, title: "Final Solution", icon: "icon-6.png" }
].map((proc, i) => ( ].map((proc, i) => (
<div key={i} className="col-xxl-4 col-xl-4 col-lg-4"> <div key={i} className="col-xxl-4 col-xl-4 col-lg-4">
<div className="work-process-box text-center"> <div className="work-process-box text-center">
@ -27,7 +26,7 @@ const WorkProcessSection = () => (
</div> </div>
<div className="content"> <div className="content">
<h4 className="pt-25 pb-25">{proc.title}</h4> <h4 className="pt-25 pb-25">{proc.title}</h4>
<p>{proc.desc}</p> <p>In a free hour, when our power of choice is untrammelled and when nothing prevents dolor sit amet, consectetur</p>
</div> </div>
</div> </div>
</div> </div>

14
src/components/home/home-3/ChooseSection.tsx
View File

@ -15,11 +15,11 @@ const ChooseSection = () => (
<div className="image-3-area"> <div className="image-3-area">
<div className="image-3 p-relative"> <div className="image-3 p-relative">
<img src="/assets/imgs/about/about-2.jpg" alt="" /> <img src="/assets/imgs/about/about-2.jpg" alt="" />
{/* <div className="play-btn"> <div className="play-btn">
<div className="video_player_btn"> <div className="video_player_btn">
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a> <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
</div> </div>
</div> */} </div>
</div> </div>
</div> </div>
<h1>Metatron</h1> <h1>Metatron</h1>
@ -28,12 +28,12 @@ const ChooseSection = () => (
<div className="col-xxl-6 col-xl-6 col-lg-6"> <div className="col-xxl-6 col-xl-6 col-lg-6">
<div className="choose-3-content-area pl-60 pt-20 p-relative"> <div className="choose-3-content-area pl-60 pt-20 p-relative">
<SectionTitle <SectionTitle
tagline="Our Services" tagline="WHY CHOOSE US"
title="Crafting Tailored Digital Solutions for Every Need" title="Elevate Your Achievements Using Premier IT Solutions"
className="wow fadeInLeft" className="wow fadeInLeft"
/> />
<p>At Metatroncube, we blend innovation with expertise to shape bespoke digital solutions. Furthermore, our services range from cutting-edge web & app development, leveraging technologies like HTML, CSS, Node.js, and Angular, to strategic SEO and impactful digital marketing. Additionally, in creative graphic design, we meticulously craft each project to meet your unique business objectives. Moreover, in the realm of mobile app development, we utilize platforms such as Flutter, Android, and Swift to deliver exceptional user experiences. Consequently, we’re not just developers and designers; we’re architects of your digital success.</p> <p>It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
{/* <div className="row g-4 pt-35"> <div className="row g-4 pt-35">
{[ {[
{ icon: "fa-solid fa-microchip", label: "Quality Materials", isIcon: true }, { icon: "fa-solid fa-microchip", label: "Quality Materials", isIcon: true },
{ icon: "icon-8.png", label: "Best Services", isIcon: false }, { icon: "icon-8.png", label: "Best Services", isIcon: false },
@ -49,7 +49,7 @@ const ChooseSection = () => (
</div> </div>
</div> </div>
))} ))}
</div> */} </div>
</div> </div>
</div> </div>
</div> </div>

4
src/components/mobile-app-development-service/Service.tsx
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal'; import GsapReveal from '@/components/mobile-app-development-service/support/common/GsapReveal';
import ServiceCard from '@/components/mobile-app-development-service/support/cards/ServiceCard'; import ServiceCard from '@/components/mobile-app-development-service/support/cards/ServiceCard';
import { services1 } from '@/utils/data'; import { services } from '@/utils/data';
import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup'; import ContactPopup from '@/components/mobile-app-development-service/support/common/ContactPopup/ContactPopup';
const Service = () => { const Service = () => {
@ -43,7 +43,7 @@ const Service = () => {
{/* Service Cards */} {/* Service Cards */}
<div className="row g-4"> <div className="row g-4">
{services1.slice(0, 6).map((service, i) => ( {services.slice(6, 12).map((service, i) => (
<div key={service.id} className="col-lg-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-duration={800 + i * 100}> <div key={service.id} className="col-lg-4 col-md-6 d-flex" data-aos="zoom-in" data-aos-duration={800 + i * 100}>
<ServiceCard service={service} /> <ServiceCard service={service} />
</div> </div>

4
src/components/services-digital-solutions/ServiceDetails.tsx
View File

@ -3,7 +3,7 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import { ServiceType } from "@/types"; import { ServiceType } from "@/types";
import { ourServices } from "@/utils/data"; import { psychologyServices } from "@/utils/data";
interface ServiceDetailsProps { interface ServiceDetailsProps {
service: ServiceType; service: ServiceType;
@ -30,7 +30,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
<div className="service-sidebar__single"> <div className="service-sidebar__single">
<h3 className="service-sidebar__title">All Services</h3> <h3 className="service-sidebar__title">All Services</h3>
<ul className="list-unstyled service-sidebar__nav"> <ul className="list-unstyled service-sidebar__nav">
{ourServices.map((item) => ( {psychologyServices.map((item) => (
<li key={item.id} className={item.slug === service.slug ? "active" : ""}> <li key={item.id} className={item.slug === service.slug ? "active" : ""}>
<Link href={`/services-digital-solutions/${item.slug}`}> <Link href={`/services-digital-solutions/${item.slug}`}>
{item.title} {item.title}

79
src/utils/data.ts
View File

@ -37,6 +37,42 @@ export const services: ServiceType[] = [
title: 'Website Maintenance & Support', title: 'Website Maintenance & Support',
description: 'Ongoing updates, security monitoring, and performance optimization.', description: 'Ongoing updates, security monitoring, and performance optimization.',
}, },
{
id: 7,
icon: '/assets/img-app/home/section3/android.webp',
title: 'Android App Development',
description: 'Custom Android apps built for performance and scalability.',
},
{
id: 8,
icon: '/assets/img-app/home/section3/ios.webp',
title: 'iOS App Development',
description: 'High-quality iPhone and iPad applications optimized for Apple ecosystem.',
},
{
id: 9,
icon: '/assets/img-app/home/section3/cross.webp',
title: 'Cross-Platform App Development',
description: 'One codebase, multiple platforms — cost-effective and scalable.',
},
{
id: 10,
icon: '/assets/img-app/home/section3/mvp.webp',
title: 'MVP Development',
description: 'Launch faster with a Minimum Viable Product to validate your idea.',
},
{
id: 11,
icon: '/assets/img-app/home/section3/ui.webp',
title: 'UI/UX App Design',
description: 'Visually stunning and conversion-focused mobile app interfaces.',
},
{
id: 12,
icon: '/assets/img-app/home/section3/app.webp',
title: 'App Maintenance & Support',
description: 'Ongoing updates, bug fixes, security monitoring, and feature upgrades.',
}
]; ];
export const features2 = [ export const features2 = [
@ -46,41 +82,26 @@ export const features2 = [
]; ];
export const services1: ServiceType[] = [ export const services1: ServiceType[] = [
{ {
id: 1, id: 1,
icon: '/assets/img-app/home/section3/android.webp', icon: '/assets/imgs/icon/icon.png',
title: 'Android App Development', image: '/assets/imgs/service/service-img1.png',
description: 'Custom Android apps built for performance and scalability.', title: 'Custom Website Development',
description: 'Tailor-made websites built specifically for your business goals and audience.',
}, },
{ {
id: 2, id: 2,
icon: '/assets/img-app/home/section3/ios.webp', icon: '/assets/imgs/icon/icon-2.png',
title: 'iOS App Development', image: '/assets/imgs/service/service-img2.png',
description: 'High-quality iPhone and iPad applications optimized for Apple ecosystem.', title: 'E-commerce Development',
description: 'High-converting online stores with seamless checkout and payment integration.',
}, },
{ {
id: 3, id: 3,
icon: '/assets/img-app/home/section3/cross.webp', icon: '/assets/imgs/icon/icon-3.png',
title: 'Cross-Platform App Development', image: '/assets/imgs/service/service-img3.png',
description: 'One codebase, multiple platforms — cost-effective and scalable.', title: 'Mobile App Development',
}, description: 'Custom iOS and Android applications built for performance and scalability.',
{
id: 4,
icon: '/assets/img-app/home/section3/mvp.webp',
title: 'MVP Development',
description: 'Launch faster with a Minimum Viable Product to validate your idea.',
},
{
id: 5,
icon: '/assets/img-app/home/section3/ui.webp',
title: 'UI/UX App Design',
description: 'Visually stunning and conversion-focused mobile app interfaces.',
},
{
id: 6,
icon: '/assets/img-app/home/section3/app.webp',
title: 'App Maintenance & Support',
description: 'Ongoing updates, bug fixes, security monitoring, and feature upgrades.',
} }
]; ];
@ -526,7 +547,7 @@ export const pricingPlans: PricingType[] = [
} }
]; ];
export const ourServices = [ export const psychologyServices = [
{ {
id: 1, id: 1,
title: "Website Development", title: "Website Development",