summer2026/techzaa-frontend
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix all pages

Browse Source
This commit is contained in:
sanjidaRimi023
2026-04-30 22:36:40 +06:00
parent 6683ca045e
commit 5c4ee4d10c
13 changed files with 405 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+2 -2
View File
@@ -24,8 +24,8 @@ function AnimatedRoutes() {
<Route path="/" element={<Index />} />
<Route path="/projects" element={<Projects />} />
<Route path="/projects/:slug" element={<ProjectDetails />} />
<Route path="/blog" element={<Blog />} />
<Route path="/blog/:id" element={<BlogArticle />} />
{/* <Route path="/blog" element={<Blog />} />
<Route path="/blog/:id" element={<BlogArticle />} /> */}
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
<Route path="*" element={<NotFound />} />
<Route path="/privacy" element={<PrivacyPolicy />} />
src/components/AboutSection.tsx
+2 -8
View File
@@ -58,11 +58,6 @@ export default function AboutSection() {
ref={ref}
className="py-24 relative overflow-hidden bg-secondary/30"
>
{/* Background decoration */}
<div className="absolute inset-0">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[200px]" />
</div>
<div className="container mx-auto px-4 relative z-10">
<div className="grid lg:grid-cols-2 gap-16 items-center">
{/* Content */}
@@ -102,7 +97,7 @@ export default function AboutSection() {
(value) => (
<span
key={value}
className="px-4 py-2 rounded-full glass border border-primary/30 text-sm font-medium hover:border-primary hover:neon-glow transition-all cursor-default"
className="px-4 py-2 rounded-full glass neon-glow text-sm font-medium hover:border-primary border transition-all cursor-default"
>
{value}
</span>
@@ -124,8 +119,7 @@ export default function AboutSection() {
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
whileHover={{ y: -5, scale: 1.02 }}
className="p-6 rounded-2xl glass hover:border-primary/50 transition-all text-center group"
className="p-6 rounded-2xl bg-primary/5 hover:neon-glow transition-all text-center group"
>
{/* Icon */}
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:neon-glow transition-all">
src/components/ContactSection.tsx
+154 -155
View File
@@ -24,11 +24,24 @@ export default function ContactSection() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
const [mousePositions, setMousePositions] = useState<
Record<number, { x: number; y: number }>
>({});
const handleMouseMove = (
index: number,
e: React.MouseEvent<HTMLDivElement>,
) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
setMousePositions((prev) => ({ ...prev, [index]: { x, y } }));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
// Simulate form submission
await new Promise((resolve) => setTimeout(resolve, 1500));
setIsSubmitting(false);
@@ -50,11 +63,24 @@ export default function ContactSection() {
};
return (
<section id="contact" ref={ref} className="relative overflow-hidden pb-24">
{/* Background */}
<div className="absolute inset-0 opacity-30">
<div className="absolute bottom-0 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
<div className="absolute top-1/4 right-1/4 w-72 h-72 bg-neon-purple/10 rounded-full blur-[120px]" />
<section id="contact" ref={ref} className="relative overflow-hidden pb-20">
<div className="absolute inset-0 opacity-40 pointer-events-none">
<motion.div
animate={{
x: [0, 30, 0],
y: [0, -40, 0],
}}
transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
className="absolute bottom-10 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[140px]"
/>
<motion.div
animate={{
x: [0, -50, 0],
y: [0, 30, 0],
}}
transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
className="absolute top-20 right-1/4 w-80 h-80 bg-neon-purple/10 rounded-full blur-[130px]"
/>
</div>
<div className="container mx-auto px-4 relative z-10">
@@ -62,192 +88,165 @@ export default function ContactSection() {
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
className="text-center mb-16"
transition={{ duration: 0.7 }}
className="text-center mb-20"
>
<span className="inline-block px-4 py-1.5 rounded-full text-sm font-medium text-primary mb-4">
Let's Connect
<span className="inline-block px-5 py-2 rounded-full glass text-sm font-medium text-primary mb-4 tracking-widest">
LET'S CONNECT
</span>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
Get In <span className="text-primary neon-text-glow">Touch</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
Ready to start your next project? We'd love to hear from you. Send
us a message and we'll respond as soon as possible.
Ready to bring your vision to life? Drop us a message.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
{/* Contact Info */}
{/* Interactive Contact Info */}
<motion.div
initial={{ opacity: 0, x: -30 }}
initial={{ opacity: 0, x: -40 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.6 }}
className="space-y-8"
transition={{ duration: 0.7 }}
className="space-y-6"
>
<div>
<h3 className="text-2xl font-bold mb-4">Contact Information</h3>
<p className="text-muted-foreground">
Fill out the form and our team will get back to you within 24
hours.
<div className="mb-8">
<h3 className="text-3xl font-bold mb-3">Contact Information</h3>
<p className="text-muted-foreground text-lg">
Our team typically responds within 24 hours.
</p>
</div>
{/* Contact cards */}
<div className="space-y-4">
{contactInfo.map((item, index) => (
<motion.div
key={item.label}
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
whileHover={{ x: 5 }}
className="flex items-center gap-4 p-4 rounded-xl glass border border-border/50 hover:border-primary/50 transition-all group"
>
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center group-hover:neon-glow transition-all">
<item.icon className="w-5 h-5 text-primary" />
</div>
<div>
<p className="text-sm text-muted-foreground">
{item.label}
</p>
<p className="font-medium">{item.value}</p>
</div>
</motion.div>
))}
<div className="space-y-6">
{contactInfo.map((item, index) => {
const pos = mousePositions[index] || { x: 50, y: 50 };
return (
<motion.div
key={item.label}
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ delay: 0.1 * index }}
onMouseMove={(e) => handleMouseMove(index, e)}
onMouseLeave={() => {
setMousePositions((prev) => ({
...prev,
[index]: { x: 50, y: 50 },
}));
}}
whileHover={{ scale: 1.02 }}
className="group relative rounded-xl overflow-hidden cursor-pointer h-full"
>
<div
className="relative p-4 rounded-xl border transition-all duration-300"
style={{
transform: `perspective(800px) rotateX(${(50 - pos.y) * 0.08}deg) rotateY(${(pos.x - 50) * 0.1}deg)`,
}}
>
<div className="flex items-start gap-6">
<div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-all group-hover:neon-glow">
<item.icon className="w-7 h-7 text-primary" />
</div>
<div className="pt-1">
<p className="text-sm text-muted-foreground mb-1">
{item.label}
</p>
<p className="text-xl font-medium group-hover:text-primary transition-colors">
{item.value}
</p>
</div>
</div>
</div>
</motion.div>
);
})}
</div>
</motion.div>
{/* Contact Form */}
{/* Interactive Contact Form */}
<motion.div
initial={{ opacity: 0, x: 30 }}
initial={{ opacity: 0, x: 40 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.6, delay: 0.2 }}
className="relative"
transition={{ duration: 0.7, delay: 0.1 }}
>
<div className="p-8 rounded-3xl glass border border-border/50 relative overflow-hidden">
{/* Decorative gradient */}
<div className="absolute -top-20 -right-20 w-40 h-40 rounded-full gradient-primary opacity-20 blur-3xl" />
<div className="p-10 rounded-3xl border backdrop-blur-2xl relative overflow-hidden">
{/* Subtle moving gradient */}
<div className="absolute -top-32 -right-32 w-64 h-64 bg-primary/10 rounded-full blur-3xl" />
{isSuccess ? (
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
className="text-center py-12"
className="text-center py-16"
>
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{
type: "spring",
damping: 15,
stiffness: 300,
delay: 0.2,
}}
>
<CheckCircle className="w-20 h-20 text-primary mx-auto mb-4 neon-text-glow" />
</motion.div>
<h3 className="text-2xl font-bold mb-2">Message Sent!</h3>
<p className="text-muted-foreground">
Thank you for reaching out. We'll get back to you soon.
<CheckCircle className="w-24 h-24 text-primary mx-auto mb-6 neon-text-glow" />
<h3 className="text-3xl font-bold mb-3">
Message Sent Successfully!
</h3>
<p className="text-muted-foreground text-lg">
Thank you! We'll get back to you very soon.
</p>
</motion.div>
) : (
<form
onSubmit={handleSubmit}
className="space-y-5 relative z-10"
className="space-y-6 relative z-10"
>
<div className="grid sm:grid-cols-2 gap-5">
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ delay: 0.3 }}
>
<Input
name="name"
placeholder="Your Name"
value={formData.name}
onChange={handleChange}
required
className="glass border-border/50 focus:border-primary focus:neon-glow transition-all h-12"
/>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ delay: 0.35 }}
>
<Input
name="email"
type="email"
placeholder="Your Email"
value={formData.email}
onChange={handleChange}
required
className="glass border-border/50 focus:border-primary focus:neon-glow transition-all h-12"
/>
</motion.div>
<div className="grid sm:grid-cols-2 gap-6">
<Input
name="name"
placeholder="Your Name"
value={formData.name}
onChange={handleChange}
required
className="h-14 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all text-base"
/>
<Input
name="email"
type="email"
placeholder="Your Email"
value={formData.email}
onChange={handleChange}
required
className="h-14 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all text-base"
/>
</div>
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ delay: 0.4 }}
>
<Input
name="subject"
placeholder="Subject"
value={formData.subject}
onChange={handleChange}
required
className="glass border-border/50 focus:border-primary focus:neon-glow transition-all h-12"
/>
</motion.div>
<Input
name="subject"
placeholder="Subject"
value={formData.subject}
onChange={handleChange}
required
className="h-14 focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all text-base"
/>
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ delay: 0.45 }}
>
<Textarea
name="message"
placeholder="Your Message"
value={formData.message}
onChange={handleChange}
required
rows={5}
className="glass border-border/50 focus:border-primary focus:neon-glow transition-all resize-none"
/>
</motion.div>
<Textarea
name="message"
placeholder="Tell us about your project..."
value={formData.message}
onChange={handleChange}
required
rows={6}
className=" focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all resize-none text-base"
/>
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ delay: 0.5 }}
<Button
type="submit"
disabled={isSubmitting}
className="w-full h-14 bg-primary hover:bg-primary/90 text-lg font-semibold rounded-2xl neon-glow hover:neon-glow-strong transition-all group"
>
<Button
type="submit"
disabled={isSubmitting}
className="w-full bg-primary text-primary-foreground font-semibold py-6 rounded-full neon-glow hover:neon-glow-strong transition-all group"
>
{isSubmitting ? (
<motion.div
animate={{ rotate: 360 }}
transition={{
duration: 1,
repeat: Infinity,
ease: "linear",
}}
className="w-5 h-5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full"
/>
) : (
<>
Send Message
<Send className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
</>
)}
</Button>
</motion.div>
{isSubmitting ? (
<div className="flex items-center gap-3">
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
Sending...
</div>
) : (
<div className="flex items-center justify-center gap-3">
Send Message
<Send className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</div>
)}
</Button>
</form>
)}
</div>
src/components/FAQSection.tsx
+84 -63
View File
@@ -5,6 +5,7 @@ import {
AccordionTrigger,
} from "@/components/ui/accordion";
import { motion, useInView } from "framer-motion";
import { ArrowRight, Mail } from "lucide-react";
import { useRef } from "react";
const faqs = [
@@ -28,21 +29,11 @@ const faqs = [
answer:
"Yes! We offer comprehensive maintenance packages that include bug fixes, security updates, performance optimization, and feature enhancements. Our support team is available to ensure your application runs smoothly 24/7.",
},
{
question: "What technologies do you work with?",
answer:
"Our tech stack includes React, Next.js, Node.js, Python, TypeScript, AWS, Google Cloud, and more. We stay current with industry trends and select the best technologies for each project's specific requirements.",
},
{
question: "How do you handle project pricing?",
answer:
"We offer flexible pricing models including fixed-price projects, time & materials, and dedicated team arrangements. After understanding your requirements, we provide transparent quotes with no hidden costs. Contact us for a free consultation and estimate.",
},
{
question: "Can you work with our existing team?",
answer:
"Absolutely! We frequently collaborate with in-house teams, providing additional expertise and resources. Whether you need staff augmentation, specialized skills, or full project delivery, we adapt to your working style and processes.",
},
{
question: "What industries do you serve?",
answer:
@@ -55,64 +46,94 @@ export default function FAQSection() {
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
<section id="faq" ref={ref} className="py-24 relative overflow-hidden">
{/* Background decoration */}
<div className="absolute inset-0 opacity-30">
<div className="absolute top-1/4 right-0 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
<div className="absolute bottom-1/4 left-0 w-80 h-80 bg-neon-purple/10 rounded-full blur-[120px]" />
</div>
<section
id="faq"
ref={ref}
className="pb-20 relative overflow-hidden bg-background"
>
{/* Decorative gradients */}
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/5 rounded-full blur-3xl -z-10" />
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-secondary/5 rounded-full blur-3xl -z-10" />
<div className="container mx-auto px-4 relative z-10">
{/* Section Header */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
className="text-center mb-16"
>
<span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4">
Got Questions?
</span>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
Frequently Asked{" "}
<span className="text-primary neon-text-glow">Questions</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
Everything you need to know about working with TechZaa. Can't find
what you're looking for? Reach out to our team.
</p>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-[1fr,1.5fr] gap-12 lg:gap-20 items-start">
{/* Left Column - Header and CTA */}
<motion.div
initial={{ opacity: 0, x: -30 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.6 }}
className="flex flex-col gap-8 lg:sticky lg:top-24"
>
<div>
<span className="inline-flex px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase bg-primary/10 text-primary mb-4">
Got Questions?
</span>
<h2 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4 leading-[1.15]">
Frequently Asked <br />
<span className="text-primary">Questions</span>
</h2>
<p className="text-muted-foreground text-lg leading-relaxed max-w-md">
Everything you need to know about working with TechZaa. Can't
find what you're looking for? Reach out to our team.
</p>
</div>
{/* FAQ Accordion */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.2 }}
className="max-w-3xl mx-auto"
>
<Accordion type="single" collapsible className="space-y-4">
{faqs.map((faq, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.4, delay: 0.1 * index }}
{/* Support CTA Card */}
<div className="p-6 rounded-2xl border border-border/50 bg-card/40 backdrop-blur-sm flex flex-col gap-5 max-w-md shadow-sm">
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
<Mail className="w-5 h-5" />
</div>
<div>
<h4 className="font-semibold text-foreground text-sm">
Still have questions?
</h4>
<p className="text-muted-foreground text-xs">
We're here to help you out with any queries.
</p>
</div>
</div>
<a
href="mailto:support@techzaa.com"
className="inline-flex items-center justify-center gap-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-10 px-4 py-2 rounded-xl w-full group"
>
<AccordionItem
value={`item-${index}`}
className="glass border border-border/50 rounded-xl px-6 overflow-hidden data-[state=open]:border-primary/50 transition-colors"
Contact Support
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
</a>
</div>
</motion.div>
{/* Right Column - Accordion */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.2 }}
className="w-full"
>
<Accordion type="single" collapsible className="space-y-4">
{faqs.map((faq, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.4, delay: 0.06 * index }}
>
<AccordionTrigger className="text-left hover:no-underline py-5 text-base md:text-lg font-medium hover:text-primary transition-colors">
{faq.question}
</AccordionTrigger>
<AccordionContent className="text-muted-foreground pb-5 text-sm md:text-base leading-relaxed">
{faq.answer}
</AccordionContent>
</AccordionItem>
</motion.div>
))}
</Accordion>
</motion.div>
<AccordionItem
value={`item-${index}`}
className="bg-card/40 border border-border/40 rounded-2xl px-6 py-1 overflow-hidden data-[state=open]:border-primary/50 data-[state=open]:shadow-md transition-all duration-300"
>
<AccordionTrigger className="text-left hover:no-underline py-5 text-base md:text-lg font-medium text-foreground hover:text-primary transition-colors">
{faq.question}
</AccordionTrigger>
<AccordionContent className="text-muted-foreground pt-1 pb-5 text-sm md:text-base leading-relaxed">
{faq.answer}
</AccordionContent>
</AccordionItem>
</motion.div>
))}
</Accordion>
</motion.div>
</div>
</div>
</section>
);
src/components/HeroSection.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export default function HeroSection() {
<section
id="home"
ref={containerRef}
className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
className="relative min-h-screen flex items-center justify-center overflow-hidden pt-10"
>
{/* Animated gradient background */}
<div className="absolute inset-0 gradient-primary-animated opacity-10" />
src/components/Navbar.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export default function Navbar() {
>
<div className="container mx-auto px-4 flex items-center justify-between">
{/* Logo */}
<Link to="#home" className="flex items-center gap-2">
<Link to="/" className="flex items-center gap-2">
<img src={logo} alt="TechZaa" className="h-16 w-auto" />
</Link>
src/components/ProjectsSection.tsx
+145 -81
View File
@@ -1,43 +1,43 @@
import { useRef } from 'react';
import { motion, useInView } from 'framer-motion';
import { ArrowRight, ExternalLink } from 'lucide-react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { useProjects } from '@/hooks/queires/useProjects';
import { Button } from "@/components/ui/button";
import { useProjects } from "@/hooks/queires/useProjects";
import { motion, useInView } from "framer-motion";
import { ArrowRight, ExternalLink } from "lucide-react";
import { useRef, useState } from "react";
import { Link } from "react-router-dom";
const gradientColors = [
"from-neon-blue/80",
"from-neon-purple/80",
"from-neon-green/80",
"from-neon-pink/80"
"from-neon-blue/90",
"from-neon-purple/90",
"from-neon-green/90",
"from-neon-pink/90",
];
export default function ProjectsSection() {
const { data: projectsData } = useProjects({
fields: "category, title, image",
limit: 6
fields: "category, title, image, liveUrl",
limit: 6,
});
const projects = projectsData?.data.data.result;
const projects = projectsData?.data.data.result || [];
const ref = useRef<HTMLElement>(null);
const isInView = useInView(ref, { once: true, margin: '-100px' });
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
<section id="projects" ref={ref} className="py-24 relative overflow-hidden bg-secondary/30">
{/* Background pattern */}
<section
id="projects"
ref={ref}
className="py-24 relative overflow-hidden bg-secondary/30"
>
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div className="absolute inset-0" style={{
backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
backgroundSize: '40px 40px',
}} />
<div
className="absolute inset-0"
style={{
backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
backgroundSize: "40px 40px",
}}
/>
</div>
<div className="container mx-auto px-4 relative z-10">
@@ -45,84 +45,52 @@ export default function ProjectsSection() {
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
className="text-center mb-16"
transition={{ duration: 0.7 }}
className="text-center mb-20"
>
<span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4">
Our Portfolio
<span className="inline-block px-5 py-2 rounded-full glass text-sm font-medium text-primary mb-4 tracking-widest">
OUR PORTFOLIO
</span>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
Our <span className="text-primary neon-text-glow">Projects</span>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
Featured{" "}
<span className="text-primary neon-text-glow">Projects</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
Explore our latest work and see how we've helped businesses
transform their digital presence.
Crafted with passion. Delivered with excellence.
</p>
</motion.div>
{/* Projects Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
{projects?.map((project, index) => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
{projects.map((project, index) => {
const color = gradientColors[index % gradientColors.length];
return (
<motion.div
<ProjectCard
key={project._id}
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: index * 0.1 }}
whileHover={{ y: -8 }}
className="group relative rounded-2xl overflow-hidden cursor-pointer"
>
{/* Image */}
<div className="aspect-[4/3] overflow-hidden">
<img
src={project.image}
alt={project.title}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
/>
</div>
{/* Overlay */}
<div
className={`absolute inset-0 bg-gradient-to-t ${color} to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
/>
{/* Content */}
<div className="absolute inset-0 flex flex-col justify-end p-6">
<div className="transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
<span className="inline-block px-3 py-1 rounded-full bg-background/20 backdrop-blur-sm text-white text-xs font-medium mb-2">
{project.category}
</span>
<h3 className="text-xl font-bold text-white mb-2">{project.title}</h3>
<div className="flex items-center gap-2 text-white/80 text-sm">
<span>View Project</span>
<ExternalLink className="w-4 h-4" />
</div>
</div>
</div>
{/* Border glow effect */}
<div className="absolute inset-0 rounded-2xl border-2 border-transparent group-hover:border-primary/50 group-hover:neon-glow transition-all duration-300 pointer-events-none" />
</motion.div>
project={project}
color={color}
index={index}
isInView={isInView}
/>
);
})}
</div>
{/* See All Button */}
<motion.div
initial={{ opacity: 0, y: 20 }}
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.5 }}
className="text-center"
transition={{ duration: 0.7, delay: 0.3 }}
className="flex justify-center"
>
<Link to="/projects">
<Button
size="lg"
className="bg-primary text-primary-foreground font-semibold px-8 py-6 text-lg rounded-full neon-glow hover:neon-glow-strong transition-all group"
className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold px-10 py-7 text-lg rounded-full neon-glow hover:neon-glow-strong transition-all group flex items-center gap-3"
>
See All Projects
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
Explore All Projects
<ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
</Button>
</Link>
</motion.div>
@@ -130,3 +98,99 @@ export default function ProjectsSection() {
</section>
);
}
function ProjectCard({ project, color, index, isInView }) {
const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
const [isHovered, setIsHovered] = useState(false);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
setMousePosition({ x, y });
};
return (
<motion.div
initial={{ opacity: 0, y: 60, rotateX: 15 }}
animate={isInView ? { opacity: 1, y: 0, rotateX: 0 } : {}}
transition={{ duration: 0.6, delay: index * 0.08 }}
whileHover={{ scale: 1.02 }}
className="group relative rounded-3xl overflow-hidden cursor-pointer h-full"
onMouseMove={handleMouseMove}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => {
setIsHovered(false);
setMousePosition({ x: 50, y: 50 });
}}
>
{/* Main Card Container with 3D Tilt */}
<div
className="relative h-full rounded-3xl overflow-hidden shadow-2xl transition-transform duration-300"
style={{
transform: isHovered
? `perspective(1000px) rotateX(${(50 - mousePosition.y) * 0.12}deg) rotateY(${(mousePosition.x - 50) * 0.15}deg)`
: "perspective(1000px) rotateX(0deg) rotateY(0deg)",
transition: isHovered
? "transform 0.1s ease-out"
: "transform 0.4s ease-out",
}}
>
{/* Image Container */}
<div className="aspect-[16/13] overflow-hidden relative">
<img
src={project.image}
alt={project.title}
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
/>
{/* Dynamic Shine Overlay */}
<div
className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"
style={{
background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(255,255,255,0.8) 0%, transparent 60%)`,
}}
/>
</div>
{/* Gradient Overlay */}
<div
className={`absolute inset-0 bg-gradient-to-t ${color} via-black/40 to-transparent opacity-60 group-hover:opacity-90 transition-all duration-500`}
/>
{/* Content */}
<div className="absolute inset-0 flex flex-col justify-end p-8">
<div className="space-y-4 transform transition-all duration-500 group-hover:translate-y-0">
{/* Category */}
<motion.span
initial={{ opacity: 0, y: 20 }}
animate={
isHovered ? { opacity: 1, y: 0 } : { opacity: 0.7, y: 10 }
}
className="inline-block px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md text-white text-xs font-medium border border-white/20"
>
{project.category}
</motion.span>
{/* Title */}
<h3 className="text-2xl md:text-3xl font-bold text-white leading-tight tracking-tight">
{project.title}
</h3>
{/* View Project Link */}
<Link
to={project.liveUrl}
className="flex items-center gap-3 text-white/80 group-hover:text-white transition-colors"
>
<span className="font-medium text-sm tracking-wider">live</span>
<ExternalLink className="w-5 h-5 transition-transform group-hover:rotate-45" />
</Link>
</div>
</div>
{/* Neon Border Glow */}
<div className="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-primary/60 transition-all duration-500 pointer-events-none neon-glow" />
</div>
</motion.div>
);
}
src/components/ServicesSection.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export default function ServicesSection() {
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
<section id="services" ref={ref} className="py-24 relative overflow-hidden">
<section id="services" ref={ref} className="py-20 relative overflow-hidden">
{/* Background decoration */}
<div className="absolute inset-0 opacity-30">
<div className="absolute bottom-1/2 left-0 w-96 h-96 bg-primary rounded-full blur-[200px]" />
src/components/TeamSection.tsx
+2 -12
View File
@@ -1,32 +1,22 @@
import { motion, useInView } from "framer-motion";
import { Github, Linkedin, Twitter } from "lucide-react";
import { useRef } from "react";
// Import Swiper React components and modules
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import { useTeam } from "@/hooks/queires/useTeam";
export default function TeamSection() {
const {data: teamdata} = useTeam();
const { data: teamdata } = useTeam();
const team = teamdata?.data.data;
const ref = useRef<HTMLElement>(null);
const isInView = useInView(ref, { once: true, margin: "-100px" });
const shouldScroll = team?.length >= 5;
return (
<section id="team" ref={ref} className="py-24 relative overflow-hidden">
<section id="team" ref={ref} className="pt-20 1relative overflow-hidden">
{/* Background decoration */}
<div className="absolute inset-0 opacity-30">
<div className="absolute top-0 right-1/4 w-72 h-72 bg-neon-purple/10 rounded-full blur-[120px]" />
src/components/TestimonialsSection.tsx
+11 -13
View File
@@ -41,11 +41,7 @@ export default function TestimonialsSection() {
return (
<section id="testimonials" className="py-24 relative overflow-hidden">
{/* Background */}
<div className="absolute inset-0">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-neon-purple/10 rounded-full blur-3xl" />
</div>
<div className="container mx-auto px-4 relative z-10">
{/* Section Header */}
@@ -76,7 +72,7 @@ export default function TestimonialsSection() {
variant="outline"
size="icon"
onClick={scrollPrev}
className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 z-10 rounded-full glass border-primary/30 hover:neon-glow hidden md:flex"
className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 z-10 rounded-full glass neon-glow hidden md:flex"
>
<ChevronLeft className="w-5 h-5" />
</Button>
@@ -84,7 +80,7 @@ export default function TestimonialsSection() {
variant="outline"
size="icon"
onClick={scrollNext}
className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 z-10 rounded-full glass border-primary/30 hover:neon-glow hidden md:flex"
className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 z-10 rounded-full glass neon-glow hidden md:flex"
>
<ChevronRight className="w-5 h-5" />
</Button>
@@ -104,11 +100,13 @@ export default function TestimonialsSection() {
scale: selectedIndex === index ? 1 : 0.9,
}}
transition={{ duration: 0.4 }}
className="glass-strong rounded-3xl p-8 md:p-10 relative"
className="glass-strong rounded-3xl p-8 md:p-10 relative overflow-hidden border dark:border-none"
>
{/* Quote Icon */}
<div className="absolute -top-4 -left-4 w-12 h-12 rounded-full bg-primary flex items-center justify-center neon-glow">
<Quote className="w-6 h-6 text-primary-foreground" />
{/* Triangular Quote Corner Tab */}
<div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-primary/10 to-transparent flex items-start justify-end p-3 rounded-bl-[60px] border-l border-b border-primary/20 pointer-events-none">
<div className="pointer-events-auto flex items-center justify-center neon-glow w-9 h-9 rounded-full bg-primary shadow-lg">
<Quote className="w-4 h-4 text-primary-foreground" />
</div>
</div>
{/* Stars */}
@@ -121,7 +119,7 @@ export default function TestimonialsSection() {
))}
</div>
{/* Quote */}
{/* review */}
<p className="text-lg md:text-xl text-foreground/90 mb-8 leading-relaxed">
"{testimonial.review}"
</p>
@@ -153,7 +151,7 @@ export default function TestimonialsSection() {
{testimonials?.map((_, index) => (
<button
key={index}
onClick={() => emblaApi?.scrollTo(index)}
onClick={() => (emblaApi) => emblaApi?.scrollTo(index)}
className={`w-2 h-2 rounded-full transition-all duration-300 ${
selectedIndex === index
? "w-8 bg-primary neon-glow"
src/index.css
+1 -1
View File
@@ -176,7 +176,7 @@
background: hsl(var(--glass-bg));
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid hsl(var(--glass-border));
/* border: 1px solid hsl(var(--glass-border)); */
}
/* Gradient backgrounds */
src/pages/Index.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const Index = () => {
<TeamSection />
<AboutSection />
<TestimonialsSection />
<BlogSection />
{/* <BlogSection /> */}
<FAQSection />
<ContactSection />
</div>