Merge version_1 into main #4
@@ -2,296 +2,144 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Hammer, Flask } from 'lucide-react';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { Users } from "lucide-react";
|
||||
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
href: "/",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
href: "/services",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
href: "/portfolio",
|
||||
},
|
||||
{
|
||||
name: "Insights",
|
||||
id: "insights",
|
||||
href: "/insights",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
href: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="MTL Labs"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"
|
||||
},
|
||||
{
|
||||
name: "About", id: "/about"
|
||||
},
|
||||
{
|
||||
name: "Services", id: "/services"
|
||||
},
|
||||
{
|
||||
name: "Portfolio", id: "/portfolio"
|
||||
},
|
||||
{
|
||||
name: "Insights", id: "/insights"
|
||||
},
|
||||
{
|
||||
name: "Contact", id: "/contact"
|
||||
}
|
||||
]}
|
||||
brandName="MTL Labs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
imagePosition="right"
|
||||
title="Engineered Aesthetics, Designed for Impact"
|
||||
description="MTL Labs is a Montreal-based design and experimentation studio, blending rigorous processes with refined aesthetics to create distinctive brands, products, and digital experiences. We believe that true innovation stems from a deep understanding of both form and function, delivering solutions that are not just visually striking, but also deeply functional and intuitive."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Precision Engineering & Craftsmanship",
|
||||
description: "Applying meticulous attention to detail in every stage of design and development.",
|
||||
icon: Hammer,
|
||||
},
|
||||
{
|
||||
title: "Human-Centered Design Philosophy",
|
||||
description: "Creating experiences that resonate deeply with users, focusing on empathy and usability.",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
title: "Iterative Experimentation & Prototyping",
|
||||
description: "Constantly exploring new possibilities and refining ideas through rapid cycles of testing.",
|
||||
icon: Flask,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/an-authentic-photo-of-a-modern-industria-1774391289116-71ee3545.png?_wi=5"
|
||||
imageAlt="A modern, industrial design workspace in Montreal"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about-mission" data-section="about-mission">
|
||||
<SplitAbout
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="The MTL Labs Philosophy"
|
||||
description="We didn't just want to build a brand; we wanted to build a lab. A place for continuous exploration and refinement in design, fashion, and digital creation. Our philosophy centers on pushing the boundaries of what's possible, transforming concepts into tangible, impactful experiences."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Experimentation", description: "Our core belief is in iterative design and continuous improvement.", icon: Flask
|
||||
},
|
||||
{
|
||||
title: "Craftsmanship", description: "Meticulous attention to detail in every aspect of our work.", icon: Hammer
|
||||
}
|
||||
]}
|
||||
mediaAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Impact & Vision"
|
||||
description="Since our inception, MTL Labs has driven innovation across various sectors, delivering exceptional results and fostering long-term partnerships. Our commitment to excellence is reflected in every project, pushing the boundaries of what's possible."
|
||||
metrics={[
|
||||
{
|
||||
value: "150+",
|
||||
title: "Successful Projects",
|
||||
},
|
||||
{
|
||||
value: "10+",
|
||||
title: "Years of Innovation",
|
||||
},
|
||||
{
|
||||
value: "95%",
|
||||
title: "Client Satisfaction",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/a-full-bleed-high-quality-horizontal-pho-1774391288821-74ac7ff4.png?_wi=2"
|
||||
imageAlt="Modern industrial design lab workspace"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
useInvertedBackground={false}
|
||||
title="Meet the Minds Behind the Lab"
|
||||
tag="Our Innovators"
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "member-1", name: "Alexandre Dubois", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-diverse-team--1774391289896-91bd3cc0.png", imageAlt: "Alexandre Dubois"
|
||||
},
|
||||
{
|
||||
id: "member-2", name: "Sophia Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-another-diverse-1774391288834-a8fb0265.png", imageAlt: "Sophia Rodriguez"
|
||||
},
|
||||
{
|
||||
id: "member-3", name: "Omar Khan", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-third-diverse-1774391288586-87babd60.png", imageAlt: "Omar Khan"
|
||||
},
|
||||
{
|
||||
id: "member-4", name: "Isabelle Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-fourth-divers-1774391287834-7d7e1a7b.png", imageAlt: "Isabelle Chen"
|
||||
}
|
||||
]}
|
||||
memberVariant="card"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex Chen",
|
||||
role: "Lead Product Designer",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-diverse-team--1774391289896-91bd3cc0.png?_wi=2",
|
||||
imageAlt: "Professional headshot of Alex Chen",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sophie Dubois",
|
||||
role: "Creative Director",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-another-diverse-1774391288834-a8fb0265.png?_wi=2",
|
||||
imageAlt: "Professional headshot of Sophie Dubois",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Marc Tremblay",
|
||||
role: "Head of Engineering",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-third-diverse-1774391288586-87babd60.png?_wi=2",
|
||||
imageAlt: "Professional headshot of Marc Tremblay",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Lena Khan",
|
||||
role: "Brand Strategist",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-fourth-divers-1774391287834-7d7e1a7b.png?_wi=2",
|
||||
imageAlt: "Professional headshot of Lena Khan",
|
||||
},
|
||||
]}
|
||||
title="Meet the Minds Behind MTL Labs"
|
||||
description="Our diverse team of designers, engineers, and strategists are united by a passion for pushing creative boundaries and solving complex challenges. We are a collective of innovators dedicated to turning visionary ideas into tangible realities."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Emily Watson",
|
||||
handle: "@emilyw",
|
||||
testimonial: "MTL Labs transformed our brand identity with a process that was both thorough and inspiring. Their attention to detail is unparalleled.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-diverse-team--1774391289896-91bd3cc0.png?_wi=3",
|
||||
imageAlt: "Emily Watson",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "David Lee",
|
||||
handle: "@davidl",
|
||||
testimonial: "The product design team delivered beyond expectations, creating a user experience that has garnered rave reviews and boosted engagement.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-another-diverse-1774391288834-a8fb0265.png?_wi=3",
|
||||
imageAlt: "David Lee",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sarah Kim",
|
||||
handle: "@sarahk",
|
||||
testimonial: "Their approach to web development is truly innovative. We now have a platform that is not only beautiful but incredibly functional and scalable.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-third-diverse-1774391288586-87babd60.png?_wi=3",
|
||||
imageAlt: "Sarah Kim",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Michael Brown",
|
||||
handle: "@michaelb",
|
||||
testimonial: "Working with MTL Labs was a game-changer. They seamlessly integrated advanced engineering with stunning aesthetics to create something truly unique.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-fourth-divers-1774391287834-7d7e1a7b.png?_wi=3",
|
||||
imageAlt: "Michael Brown",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica Green",
|
||||
handle: "@jessicag",
|
||||
testimonial: "Exceptional creativity and strategic insight. MTL Labs is our go-to for all design and innovation needs, consistently delivering top-tier results.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-a-diverse-team--1774391289896-91bd3cc0.png?_wi=4",
|
||||
imageAlt: "Jessica Green",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Robert White",
|
||||
handle: "@robertw",
|
||||
testimonial: "The results speak for themselves. Their experimental drops are always pushing boundaries, offering fresh perspectives and cutting-edge solutions.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BPWWFF8pRrMe60nPv2rwJfkU6c/professional-headshot-of-another-diverse-1774391288834-a8fb0265.png?_wi=4",
|
||||
imageAlt: "Robert White",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="We're proud to have partnered with leading brands and startups, helping them achieve their vision with our unique blend of aesthetics and innovation. Their success stories are our greatest motivators."
|
||||
speed={50}
|
||||
topMarqueeDirection="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "/services",
|
||||
},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "/portfolio",
|
||||
},
|
||||
{
|
||||
label: "Insights",
|
||||
href: "/insights",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Blog",
|
||||
href: "/blog",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "/faq",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "/support",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "/careers",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "/privacy",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "/terms",
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy",
|
||||
href: "/cookies",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="MTL Labs"
|
||||
copyrightText="© 2024 MTL Labs. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "About MTL Labs", items: [
|
||||
{
|
||||
label: "MTL Labs: Experimentation and design from Montreal.", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Instagram", href: "https://instagram.com/mtllabs"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "About", href: "/about"
|
||||
},
|
||||
{
|
||||
label: "Portfolio", href: "/portfolio"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal & Contact", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Terms of Service", href: "#"
|
||||
},
|
||||
{
|
||||
label: "hello@mtllabs.com", href: "mailto:hello@mtllabs.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="MTL Labs"
|
||||
copyrightText="© 2024 MTL Labs | All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user