enhance ssr, add routes and enhance the header styles
This commit is contained in:
Mohammed Al-yaseen
32
src/app/about/layout.tsx
Normal file
32
src/app/about/layout.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "About Us | Tech Master - Award-Winning IT Solutions Dubai",
|
||||
description: "Learn about Tech Master, an award-winning Dubai-based technology agency specializing in digital transformation, web development, and innovative IT solutions since 2020.",
|
||||
keywords: [
|
||||
"about Tech Master",
|
||||
"Dubai IT company",
|
||||
"award-winning tech agency",
|
||||
"digital transformation company",
|
||||
"web development company Dubai",
|
||||
"IT solutions provider",
|
||||
"tech company Dubai",
|
||||
"software development company"
|
||||
],
|
||||
openGraph: {
|
||||
title: "About Us | Tech Master - Award-Winning IT Solutions Dubai",
|
||||
description: "Learn about Tech Master, an award-winning Dubai-based technology agency specializing in digital transformation and innovative IT solutions.",
|
||||
url: "https://tech-masters.guru/about",
|
||||
},
|
||||
alternates: {
|
||||
canonical: "/about",
|
||||
},
|
||||
};
|
||||
|
||||
export default function AboutLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return children;
|
||||
}
|
||||
253
src/app/about/page.tsx
Normal file
253
src/app/about/page.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
GlobalOutlined,
|
||||
RocketOutlined,
|
||||
StarOutlined,
|
||||
TeamOutlined,
|
||||
TrophyOutlined
|
||||
} from "@ant-design/icons";
|
||||
import { Avatar, Card, Col, Row, Typography } from "antd";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
export default function AboutPage() {
|
||||
const stats = [
|
||||
{ icon: <TrophyOutlined />, number: "50+", label: "Projects Completed" },
|
||||
{ icon: <GlobalOutlined />, number: "25+", label: "Happy Clients" },
|
||||
{ icon: <TeamOutlined />, number: "15+", label: "Expert Developers" },
|
||||
{ icon: <RocketOutlined />, number: "3+", label: "Years Experience" },
|
||||
];
|
||||
|
||||
const values = [
|
||||
{
|
||||
title: "Innovation First",
|
||||
description: "We stay ahead of technology trends to deliver cutting-edge solutions that give our clients a competitive advantage.",
|
||||
icon: <RocketOutlined />
|
||||
},
|
||||
{
|
||||
title: "Quality Excellence",
|
||||
description: "Every project is crafted with attention to detail, ensuring the highest standards of quality and performance.",
|
||||
icon: <StarOutlined />
|
||||
},
|
||||
{
|
||||
title: "Client Success",
|
||||
description: "Your success is our success. We work closely with clients to understand their needs and deliver solutions that exceed expectations.",
|
||||
icon: <CheckCircleOutlined />
|
||||
},
|
||||
{
|
||||
title: "Transparency",
|
||||
description: "We believe in open communication and transparent processes, keeping you informed at every step of your project.",
|
||||
icon: <GlobalOutlined />
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="pt-20">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 bg-gradient-to-br from-[#0F0525] to-[#2A0B45] text-white">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Title level={1} className="text-5xl font-bold mb-6 text-white">
|
||||
About Tech Master
|
||||
</Title>
|
||||
<Paragraph className="text-xl text-gray-300 max-w-3xl mx-auto">
|
||||
From Dubai to the stars, we're an award-winning technology agency
|
||||
dedicated to transforming businesses through innovative digital solutions.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<Row gutter={[32, 32]} justify="center">
|
||||
{stats.map((stat, index) => (
|
||||
<Col xs={24} sm={12} md={6} key={index}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="text-4xl text-[#6e48aa] mb-2">
|
||||
{stat.icon}
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-800 mb-1">
|
||||
{stat.number}
|
||||
</div>
|
||||
<div className="text-gray-600">{stat.label}</div>
|
||||
</motion.div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Story Section */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<Row gutter={[48, 48]} align="middle">
|
||||
<Col xs={24} lg={12}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<Title level={2} className="text-4xl font-bold mb-6">
|
||||
Our Story
|
||||
</Title>
|
||||
<Paragraph className="text-lg text-gray-700 mb-6">
|
||||
Founded in 2020, Tech Master emerged from a vision to bridge the gap
|
||||
between traditional business practices and cutting-edge technology.
|
||||
Based in Dubai, we've grown from a small startup to an award-winning
|
||||
technology agency serving clients across the UAE and beyond.
|
||||
</Paragraph>
|
||||
<Paragraph className="text-lg text-gray-700">
|
||||
Our journey has been marked by continuous innovation, unwavering
|
||||
commitment to quality, and a deep understanding of our clients' needs.
|
||||
We believe that technology should be an enabler, not a barrier,
|
||||
and we work tirelessly to make digital transformation accessible
|
||||
to businesses of all sizes.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
</Col>
|
||||
<Col xs={24} lg={12}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="w-64 h-64 mx-auto bg-gradient-to-br from-[#6e48aa] to-[#9d50bb] rounded-full flex items-center justify-center">
|
||||
<GlobalOutlined className="text-6xl text-white" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Values Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<Title level={2} className="text-4xl font-bold mb-4">
|
||||
Our Values
|
||||
</Title>
|
||||
<Paragraph className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
These core values guide everything we do and shape the way we
|
||||
approach every project and client relationship.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<Row gutter={[32, 32]}>
|
||||
{values.map((value, index) => (
|
||||
<Col xs={24} sm={12} lg={6} key={index}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="h-full text-center hover:shadow-lg transition-shadow">
|
||||
<div className="text-4xl text-[#6e48aa] mb-4">
|
||||
{value.icon}
|
||||
</div>
|
||||
<Title level={4} className="mb-3">
|
||||
{value.title}
|
||||
</Title>
|
||||
<Paragraph className="text-gray-600">
|
||||
{value.description}
|
||||
</Paragraph>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Section */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<Title level={2} className="text-4xl font-bold mb-4">
|
||||
Our Team
|
||||
</Title>
|
||||
<Paragraph className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
Meet the passionate professionals behind Tech Master's success.
|
||||
Our diverse team brings together expertise from various domains
|
||||
to deliver exceptional results.
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
|
||||
<Row gutter={[32, 32]} justify="center">
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Avatar size={120} src="https://randomuser.me/api/portraits/men/32.jpg" className="mb-4" />
|
||||
<Title level={4} className="mb-2">Ahmed Hassan</Title>
|
||||
<Paragraph className="text-gray-600 mb-2">CEO & Founder</Paragraph>
|
||||
<Paragraph className="text-sm text-gray-500">
|
||||
Visionary leader with 10+ years in digital transformation
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Avatar size={120} src="https://randomuser.me/api/portraits/women/44.jpg" className="mb-4" />
|
||||
<Title level={4} className="mb-2">Sarah Johnson</Title>
|
||||
<Paragraph className="text-gray-600 mb-2">CTO</Paragraph>
|
||||
<Paragraph className="text-sm text-gray-500">
|
||||
Technical expert specializing in AI and cloud solutions
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-center"
|
||||
>
|
||||
<Avatar size={120} src="https://randomuser.me/api/portraits/men/67.jpg" className="mb-4" />
|
||||
<Title level={4} className="mb-2">Raj Patel</Title>
|
||||
<Paragraph className="text-gray-600 mb-2">Lead Developer</Paragraph>
|
||||
<Paragraph className="text-sm text-gray-500">
|
||||
Full-stack developer with expertise in modern frameworks
|
||||
</Paragraph>
|
||||
</motion.div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user