tech page completed
This commit is contained in:
sanjidarimi
Generated
+18
-8
@@ -53,13 +53,14 @@
|
||||
"react-day-picker": "^8.10.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.61.1",
|
||||
"react-icons": "^5.6.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-resizable-panels": "^2.1.9",
|
||||
"react-router-dom": "^6.30.1",
|
||||
"recharts": "^2.15.4",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"sonner": "^1.7.4",
|
||||
"swiper": "^12.1.2",
|
||||
"swiper": "^12.1.4",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vaul": "^0.9.9",
|
||||
@@ -8017,6 +8018,15 @@
|
||||
"react": "^16.8.0 || ^17 || ^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
|
||||
"integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
@@ -8798,17 +8808,17 @@
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "12.1.2",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.2.tgz",
|
||||
"integrity": "sha512-4gILrI3vXZqoZh71I1PALqukCFgk+gpOwe1tOvz5uE9kHtl2gTDzmYflYCwWvR4LOvCrJi6UEEU+gnuW5BtkgQ==",
|
||||
"version": "12.1.4",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.4.tgz",
|
||||
"integrity": "sha512-bihiwoKMOQwW8FfdUbo1DgkVH25E+4ZELIq0oopL1KTKBteLuaTMi/wwFjMxtlhTkk45k3XQ89D1Fvv0spSqBA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
"type": "custom",
|
||||
"url": "https://sponsors.nolimits4web.com"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/nolimits4web"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
|
||||
+2
-1
@@ -58,13 +58,14 @@
|
||||
"react-day-picker": "^8.10.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.61.1",
|
||||
"react-icons": "^5.6.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-resizable-panels": "^2.1.9",
|
||||
"react-router-dom": "^6.30.1",
|
||||
"recharts": "^2.15.4",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"sonner": "^1.7.4",
|
||||
"swiper": "^12.1.2",
|
||||
"swiper": "^12.1.4",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vaul": "^0.9.9",
|
||||
|
||||
@@ -15,6 +15,7 @@ import { PrivacyPolicy } from "./pages/PrivacyPolicy";
|
||||
import ProjectDetails from "./pages/ProjectDetails";
|
||||
import Projects from "./pages/Projects";
|
||||
import { QueryProvider } from "./provider/QueryProvider";
|
||||
import Technologies from "./pages/Technologies";
|
||||
|
||||
function AnimatedRoutes() {
|
||||
const location = useLocation();
|
||||
@@ -27,6 +28,7 @@ function AnimatedRoutes() {
|
||||
<Route path="/" element={<Index />} />
|
||||
<Route path="/projects" element={<Projects />} />
|
||||
<Route path="/projects/:id" element={<ProjectDetails />} />
|
||||
<Route path="technologies" element={<Technologies/>}/>
|
||||
{/* <Route path="/blog" element={<Blog />} />
|
||||
<Route path="/blog/:id" element={<BlogArticle />} /> */}
|
||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||
|
||||
@@ -50,11 +50,14 @@ export default function ServicesSection() {
|
||||
>
|
||||
<PremiumBadge text="Our Expertise" />
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 mt-2">
|
||||
What We <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Do</span>
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">
|
||||
Services {" "}
|
||||
</span>
|
||||
We Provide
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-lg leading-relaxed">
|
||||
We deliver comprehensive technology solutions that empower
|
||||
businesses to thrive in the digital age.
|
||||
We design and develop digital products that solve real business
|
||||
problems and create better user experiences.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { MdAutoGraph, MdPsychology, MdQueryStats } from "react-icons/md";
|
||||
|
||||
const aiSolutions = [
|
||||
{
|
||||
title: "NLP & LLMs",
|
||||
icon: <MdPsychology />,
|
||||
desc: "Custom language models and chatbots tailored to your specific business data.",
|
||||
features: ["Sentiment Analysis", "Entity Recognition", "Auto-Support"],
|
||||
color: "#3b82f6", // Blue
|
||||
},
|
||||
{
|
||||
title: "Predictive Analytics",
|
||||
icon: <MdQueryStats />,
|
||||
desc: "Turn historical data into future-proof strategies with deep learning.",
|
||||
features: ["Trend Forecasting", "Risk Assessment", "User Behavior"],
|
||||
color: "#a855f7", // Purple
|
||||
},
|
||||
{
|
||||
title: "Computer Vision",
|
||||
icon: <MdAutoGraph />,
|
||||
desc: "Extracting actionable insights from visual data and real-time streams.",
|
||||
features: ["Object Detection", "Image Synthesis", "Facial Recognition"],
|
||||
color: "#10b981", // Emerald
|
||||
},
|
||||
];
|
||||
|
||||
export const AISolutions = () => {
|
||||
return (
|
||||
<section className="">
|
||||
<div className="container mx-auto px-6">
|
||||
{/* Header Section */}
|
||||
<div className="max-w-3xl mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold tracking-tight mb-6">
|
||||
AI <span className="text-primary">Solutions</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg">
|
||||
We build AI-powered features and automation tools that help
|
||||
businesses save time, improve workflows, and deliver smarter user
|
||||
experiences.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Grid Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{aiSolutions.map((solution, i) => (
|
||||
<motion.div
|
||||
key={solution.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
whileHover={{ y: -8 }}
|
||||
className="relative group p-8 rounded-3xl hover:border bg-card transition-colors overflow-hidden"
|
||||
>
|
||||
{/* Subtle Background Glow */}
|
||||
<div
|
||||
className="absolute -right-10 -top-10 w-32 h-32 blur-2xl opacity-30 transition-opacity"
|
||||
style={{ backgroundColor: solution.color }}
|
||||
/>
|
||||
|
||||
{/* Icon & Title */}
|
||||
<div
|
||||
className="text-4xl mb-6 inline-block p-3 rounded-2xl border"
|
||||
style={{ color: solution.color }}
|
||||
>
|
||||
{solution.icon}
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-semibold mb-4 tracking-tight">
|
||||
{solution.title}
|
||||
</h3>
|
||||
|
||||
<p className=" leading-relaxed mb-8">{solution.desc}</p>
|
||||
|
||||
{/* Feature Tags */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{solution.features.map((feature) => (
|
||||
<span
|
||||
key={feature}
|
||||
className="text-xs tracking-widest font-bold px-3 py-1 rounded-full bg-primary/10 text-primary"
|
||||
>
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom Accent Line */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 h-1 group-hover:w-0 w-full transition-all duration-500"
|
||||
style={{ backgroundColor: solution.color }}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,96 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { MdCloudQueue, MdSecurity } from "react-icons/md";
|
||||
import { SiDocker } from "react-icons/si";
|
||||
|
||||
const cloudServices = [
|
||||
{
|
||||
title: "Serverless Architecture",
|
||||
icon: <MdCloudQueue />,
|
||||
desc: "Scale to millions of users without managing a single server.",
|
||||
color: "text-orange-400",
|
||||
border: "group-hover:border-orange-500/50",
|
||||
},
|
||||
{
|
||||
title: "Containerization",
|
||||
icon: <SiDocker />,
|
||||
desc: "Orchestrated deployments using Docker for zero-downtime.",
|
||||
color: "text-blue-400",
|
||||
border: "group-hover:border-blue-500/50",
|
||||
},
|
||||
{
|
||||
title: "Cyber Security",
|
||||
icon: <MdSecurity />,
|
||||
desc: "End-to-end encryption and automated threat detection.",
|
||||
color: "text-emerald-400",
|
||||
border: "group-hover:border-emerald-500/50",
|
||||
},
|
||||
];
|
||||
|
||||
export const CloudSolutions = () => {
|
||||
return (
|
||||
<section className=" mt-32 px-6 overflow-hidden">
|
||||
<div className="container mx-auto grid lg:grid-cols-2 gap-16 items-center">
|
||||
{/* Left Side: Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="z-10"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold tracking-tighter leading-none mb-8">
|
||||
Cloud {" "}
|
||||
<span className="text-primary tracking-tight">Solutions</span>
|
||||
</h2>
|
||||
<p className=" text-lg leading-relaxed">
|
||||
We build high-availability cloud systems that guarantee reliability,
|
||||
performance, and a scalable architecture for the modern web.
|
||||
</p>
|
||||
|
||||
{/* Optional: Simple CTA or stat to fill space */}
|
||||
<div className="mt-10 flex gap-8 border-t border-border pt-8">
|
||||
<div>
|
||||
<p className="text-2xl font-bold ">99.9%</p>
|
||||
<p className="text-xs uppercase tracking-widest ">Uptime</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold ">Global</p>
|
||||
<p className="text-xs uppercase tracking-widest ">Edge Network</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right Side: Cards */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{cloudServices.map((service, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.15, duration: 0.5 }}
|
||||
className={`group flex items-center gap-6 p-6 rounded-3xl border border-border transition-all duration-300 cursor-default ${service.border}`}
|
||||
>
|
||||
{/* Icon Container */}
|
||||
<div
|
||||
className={`text-4xl p-4 rounded-2xl border group-hover:scale-110 transition-transform duration-300 ${service.color}`}
|
||||
>
|
||||
{service.icon}
|
||||
</div>
|
||||
|
||||
{/* Text Content */}
|
||||
<div>
|
||||
<h4 className="text-xl font-bold mb-1 transition-colors">
|
||||
{service.title}
|
||||
</h4>
|
||||
<p className="text-sm leading-relaxed max-w-xs">
|
||||
{service.desc}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,113 @@
|
||||
import { motion } from "framer-motion";
|
||||
import React from "react";
|
||||
import { MdCloudQueue } from "react-icons/md";
|
||||
import { SiFlutter, SiKotlin, SiSwift } from "react-icons/si";
|
||||
|
||||
// 1. Define the interface for your timeline items
|
||||
interface TimelineItem {
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
desc: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const timelineData: TimelineItem[] = [
|
||||
{
|
||||
title: "iOS Native",
|
||||
icon: <SiSwift />,
|
||||
desc: "Premium Swift-based applications optimized for the Apple ecosystem performance.",
|
||||
color: "text-[#00B4D8]",
|
||||
},
|
||||
{
|
||||
title: "Android Native",
|
||||
icon: <SiKotlin />,
|
||||
desc: "Robust Kotlin applications built for scalability across all Android devices.",
|
||||
color: "text-[#2E8B57]",
|
||||
},
|
||||
{
|
||||
title: "Cross-Platform",
|
||||
icon: <SiFlutter />,
|
||||
desc: "High-performance Flutter apps with a single codebase for iOS and Android.",
|
||||
color: "text-[#7B2D8E]",
|
||||
},
|
||||
{
|
||||
title: "Cloud Sync",
|
||||
icon: <MdCloudQueue />,
|
||||
desc: "Real-time data synchronization and secure backend cloud integration.",
|
||||
color: "text-primary",
|
||||
},
|
||||
];
|
||||
|
||||
export default function MobileHorizontalTimeline(): React.JSX.Element {
|
||||
return (
|
||||
<section className="py-20 px-6 bg-background overflow-hidden">
|
||||
{/* Header Section */}
|
||||
<div className="max-w-3xl mx-auto text-center mb-16 space-y-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold tracking-tight">
|
||||
Mobile App Development <span className="text-primary">Services</span>
|
||||
</h2>
|
||||
<p>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
We develop mobile applications that are smooth, reliable, and built
|
||||
to deliver a better experience for your users.
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative container mx-auto">
|
||||
{/* Horizontal Spine */}
|
||||
<div className="absolute top-[44px] left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/50 to-transparent hidden md:block" />
|
||||
|
||||
{/* Scroll Container */}
|
||||
<div className="flex flex-col md:flex-row gap-2 pb-12">
|
||||
{timelineData.map((item, index) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="flex-shrink-0 w-full md:w-1/4 snap-center relative pt-12 md:pt-0"
|
||||
>
|
||||
{/* Icon Node */}
|
||||
<div className="absolute top-0 md:top-6 left-1/2 -translate-x-1/2 z-20">
|
||||
<motion.div
|
||||
initial={{ scale: 0, y: 20 }}
|
||||
whileInView={{ scale: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="w-10 h-10 rounded-full glass border-2 border-primary flex items-center justify-center text-primary neon-glow "
|
||||
>
|
||||
{item.icon}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 3D Flip Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="mt-6 md:mt-24 px-2"
|
||||
>
|
||||
<div className="group relative ">
|
||||
<div className="relative h-full w-full transition-all">
|
||||
{/* Front Side */}
|
||||
<div className="absolute inset-0 rounded-2xl shimmer bg-card p-6 flex flex-col items-center text-center justify-center">
|
||||
<span
|
||||
className={`text-4xl mb-4 opacity-40 ${item.color}`}
|
||||
>
|
||||
{item.icon}
|
||||
</span>
|
||||
<h3 className="text-xl font-bold mb-3 tracking-tight">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-xs leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import {
|
||||
SiFastapi,
|
||||
SiGo,
|
||||
SiJavascript,
|
||||
SiNestjs,
|
||||
SiNextdotjs,
|
||||
SiNodedotjs,
|
||||
SiReact,
|
||||
SiTypescript,
|
||||
} from "react-icons/si";
|
||||
import { TbApi } from "react-icons/tb";
|
||||
|
||||
export default function WebDev() {
|
||||
const techStack = [
|
||||
{
|
||||
name: "React",
|
||||
icon: <SiReact />,
|
||||
desc: "We use React to build fast, interactive, and smooth user interfaces that improve the overall user experience.",
|
||||
color: "text-[#61DAFB]",
|
||||
},
|
||||
{
|
||||
name: "Next.js",
|
||||
icon: <SiNextdotjs />,
|
||||
desc: "We use Next.js for better performance, SEO, and scalable frontend applications that load quickly.",
|
||||
color: "text-foreground",
|
||||
},
|
||||
{
|
||||
name: "TypeScript",
|
||||
icon: <SiTypescript />,
|
||||
desc: "We use TypeScript to write safer, maintainable code and reduce bugs in large-scale applications.",
|
||||
color: "text-[#3178C6]",
|
||||
},
|
||||
{
|
||||
name: "JavaScript",
|
||||
icon: <SiJavascript />,
|
||||
desc: "JavaScript powers the core functionality of our web applications, making them dynamic and responsive.",
|
||||
color: "text-[#F7DF1E]",
|
||||
},
|
||||
{
|
||||
name: "Node.js",
|
||||
icon: <SiNodedotjs />,
|
||||
desc: "We use Node.js to build fast, scalable backend systems capable of handling real-time applications and APIs.",
|
||||
color: "text-[#339933]",
|
||||
},
|
||||
{
|
||||
name: "GoLang",
|
||||
icon: <SiGo />,
|
||||
desc: "We use Go for high-performance backend services that require speed, scalability, and efficient concurrency.",
|
||||
color: "text-[#00ADD8]",
|
||||
},
|
||||
{
|
||||
name: "Fast API",
|
||||
icon: <SiFastapi />,
|
||||
desc: "We use FastAPI to develop secure and high-performance APIs with clean architecture and rapid development.",
|
||||
color: "text-[#05998B]",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Nest JS",
|
||||
icon: <SiNestjs />,
|
||||
desc: "We use NestJS to build structured, scalable, and enterprise-ready backend applications with clean architecture.",
|
||||
color: "text-[#E0234E]",
|
||||
},
|
||||
{
|
||||
name: "Rest API",
|
||||
icon: <TbApi />,
|
||||
desc: "REST APIs help our applications communicate smoothly between frontend, backend, and third-party services.",
|
||||
color: "text-primary",
|
||||
},
|
||||
];
|
||||
const services = [
|
||||
"Custom Web Application Development",
|
||||
"E-commerce Solution Architectures",
|
||||
"Real-time Dashboard Systems",
|
||||
"API Design & Integration",
|
||||
"Progressive Web Apps (PWA)",
|
||||
"Legacy Code Migration",
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<section className="container mx-auto flex flex-col lg:flex-row gap-16 items-center">
|
||||
<div className="w-full lg:w-1/3 space-y-8 sticky top-24 self-start">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold tracking-tight">
|
||||
Our Web Development{" "}
|
||||
<span className="text-primary">Services</span>
|
||||
</h2>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
From business websites to complex web applications, we create
|
||||
digital solutions focused on performance, usability, and growth.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{services.map((service, i) => (
|
||||
<li key={i} className="flex items-center gap-3 group">
|
||||
<span className="h-2 w-2 rounded-full bg-primary group-hover:scale-150 transition-transform duration-300 neon-glow" />
|
||||
<span className="font-medium text-lg hover:text-primary transition-colors cursor-default">
|
||||
{service}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="container mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full lg:w-2/3">
|
||||
{techStack.map((tech, index) => (
|
||||
<div key={index} className="group [perspective:1000px]">
|
||||
{/* Inner Wrapper for Flip */}
|
||||
<div className="relative h-full w-full transition-all duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
|
||||
{/* Front Side: Icon & Title */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center p-12 rounded-2xl border border-gradient ">
|
||||
<div
|
||||
className={`text-6xl mb-4 transition-transform duration-300 group-hover:scale-110 ${tech.color}`}
|
||||
>
|
||||
{tech.icon}
|
||||
</div>
|
||||
<h3 className=" font-bold tracking-wide">{tech.name}</h3>
|
||||
</div>
|
||||
|
||||
{/* Back Side: "Why we use it" */}
|
||||
<div className="absolute inset-0 h-full w-full rounded-2xl bg-card px-8 py-10 text-center [transform:rotateY(180deg)] [backface-visibility:hidden] flex flex-col items-center justify-center border-2 border-primary/50 neon-glow">
|
||||
<h4 className="text-primary font-bold mb-2 uppercase text-sm tracking-tighter">
|
||||
Why we use it
|
||||
</h4>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed">
|
||||
{tech.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { AISolutions } from "@/components/services/AISolutions";
|
||||
import { CloudSolutions } from "@/components/services/CloudSolutions";
|
||||
import MobileService from "@/components/services/MobileService";
|
||||
import WebDev from "@/components/services/WebDev";
|
||||
import PremiumBadge from "@/components/shared/PremiumBadge";
|
||||
|
||||
const Technologies = () => {
|
||||
return (
|
||||
<div className="py-24">
|
||||
{/* Hero Section */}
|
||||
<section className="mb-20 bg-primary/5 dark:bg-secondary/70 py-20 text-foreground text-center space-y-4">
|
||||
<PremiumBadge text=" Our Tech Stack" />
|
||||
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight">
|
||||
Modern Technology for Real <br />
|
||||
<span className="text-primary">Business</span> Needs.
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-lg md:text-xl max-w-4xl mx-auto">
|
||||
We leverage the most advanced and reliable technologies to build
|
||||
scalable, high-performance digital solutions tailored to your needs.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* web Section */}
|
||||
<WebDev />
|
||||
<MobileService />
|
||||
<AISolutions />
|
||||
<CloudSolutions />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Technologies;
|
||||
Reference in New Issue
Block a user