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

feat:change all section color

Browse Source
This commit is contained in:
sanjidarimi
2026-05-13 22:23:18 +06:00
parent 0772f8d827
commit 931c581c12
13 changed files with 104 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AboutSection.tsx
+7 -8
View File
@@ -1,6 +1,7 @@
import { motion, useInView } from "framer-motion";
import { Award, Rocket, Users, Zap } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import PremiumBadge from "./shared/PremiumBadge";
const stats = [
{ icon: Zap, value: 10, suffix: "+", label: "Years Experience" },
@@ -41,7 +42,7 @@ function AnimatedCounter({
}, [isInView, value]);
return (
<span className="text-4xl md:text-5xl font-bold text-primary neon-text-glow">
<span className="text-4xl md:text-5xl font-bold text-primary">
{count}
{suffix}
</span>
@@ -66,11 +67,9 @@ export default function AboutSection() {
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.6 }}
>
<span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4">
About Us
</span>
<PremiumBadge text="About Us" />
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
About <span className="text-primary neon-text-glow">TechZaa</span>
About <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">TechZaa</span>
</h2>
<div className="space-y-4 text-muted-foreground text-lg">
<p>
@@ -97,7 +96,7 @@ export default function AboutSection() {
(value) => (
<span
key={value}
className="px-4 py-2 rounded-full glass neon-glow text-sm font-medium hover:border-primary border transition-all cursor-default"
className="px-4 py-2 glass neon-glow text-sm font-medium hover:border-primary border rounded-md transition-all cursor-default "
>
{value}
</span>
@@ -119,10 +118,10 @@ 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 }}
className="p-6 rounded-2xl bg-primary/5 hover:neon-glow transition-all text-center group"
className="p-6 rounded-2xl hover:border transition-all text-center group shadow-sm shadow-primary"
>
{/* 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">
<div className="w-12 h-12 rounded-xl bg-blend-lighten flex items-center justify-center mx-auto mb-4 neon-glow transition-all">
<stat.icon className="w-6 h-6 text-primary" />
</div>
src/components/BlogSection.tsx
+7 -4
View File
@@ -3,6 +3,7 @@ import { useBlogs } from "@/hooks/queires/useBlogs";
import { motion } from "framer-motion";
import { ArrowRight, Calendar, Clock, User } from "lucide-react";
import { Link } from "react-router-dom";
import PremiumBadge from "./shared/PremiumBadge";
const containerVariants = {
hidden: { opacity: 0 },
@@ -41,11 +42,13 @@ export default function BlogSection() {
transition={{ duration: 0.6 }}
className="text-center mb-16"
>
<span className="inline-block px-4 py-2 rounded-full glass text-primary text-sm font-medium mb-4">
Latest Insights
</span>
<PremiumBadge text="Latest Insights" />
<h2 className="text-4xl md:text-5xl font-bold mb-6">
News & <span className="text-primary neon-text-glow">Blog</span>
News &{" "}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-sidebar-primary">
Blog
</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
Stay updated with the latest trends, insights, and thought
src/components/ContactModal.tsx
+1 -1
View File
@@ -103,7 +103,7 @@ export default function ContactModal({ isOpen, onClose }: ContactModalProps) {
delay: 0.2,
}}
>
<CheckCircle className="w-20 h-20 text-primary mx-auto mb-4 neon-text-glow" />
<CheckCircle className="w-20 h-20 text-primary mx-auto mb-4" />
</motion.div>
<h3 className="text-2xl font-bold mb-2">Message Sent!</h3>
<p className="text-muted-foreground">
src/components/ContactSection.tsx
+6 -6
View File
@@ -4,6 +4,7 @@ import { Textarea } from "@/components/ui/textarea";
import { motion, useInView } from "framer-motion";
import { CheckCircle, Mail, MapPin, Phone, Send } from "lucide-react";
import { useRef, useState } from "react";
import PremiumBadge from "./shared/PremiumBadge";
const contactInfo = [
{ icon: Mail, label: "Email", value: "techzaa.alpha@gmail.com" },
@@ -91,11 +92,10 @@ export default function ContactSection() {
transition={{ duration: 0.7 }}
className="text-center mb-20"
>
<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-4xl md:text-5xl lg:text-6xl font-bold mb-6">
Get In <span className="text-primary neon-text-glow">Touch</span>
<PremiumBadge text="Let's talk"/>
<h2 className="text-4xl md:text-5xl font-bold">
Get In <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Touch</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
Ready to bring your vision to life? Drop us a message.
@@ -178,7 +178,7 @@ export default function ContactSection() {
animate={{ opacity: 1, scale: 1 }}
className="text-center py-16"
>
<CheckCircle className="w-24 h-24 text-primary mx-auto mb-6 neon-text-glow" />
<CheckCircle className="w-24 h-24 text-primary mx-auto mb-6" />
<h3 className="text-3xl font-bold mb-3">
Message Sent Successfully!
</h3>
src/components/FAQSection.tsx
+5 -12
View File
@@ -5,8 +5,9 @@ import {
AccordionTrigger,
} from "@/components/ui/accordion";
import { motion, useInView, useScroll, useSpring } from "framer-motion";
import { ArrowUpRight, ShieldQuestion, Sparkles } from "lucide-react";
import { Sparkles } from "lucide-react";
import { useRef, useState } from "react";
import PremiumBadge from "./shared/PremiumBadge";
const faqs = [
{
@@ -61,18 +62,11 @@ export default function FAQSection() {
<div className="mx-auto px-6 max-w-6xl">
<div className="flex flex-col gap-10">
<div className="flex flex-col items-center">
<div className="flex items-center gap-2 mb-6">
<div className="p-2 bg-primary rounded-lg text-primary-foreground">
<ShieldQuestion size={20} />
</div>
<span className="text-sm font-bold uppercase text-primary/80">
Got Questions?
</span>
</div>
<PremiumBadge text="Got Questions?" />
<h2 className="text-4xl md:text-5xl font-bold">
Clear Answers {" "}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-foreground">
Clear Answers{" "}{" "}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">
For Big Ideas.
</span>
</h2>
@@ -139,7 +133,6 @@ export default function FAQSection() {
<AccordionContent className="px-6 pb-8 md:pl-[104px]">
<div className="text-muted-foreground text-base md:text-lg leading-relaxed max-w-2xl border-l-2 border-primary/20 pl-6">
{faq.answer}
</div>
</AccordionContent>
</AccordionItem>
src/components/HeroSection.tsx
+1 -1
View File
@@ -143,7 +143,7 @@ export default function HeroSection() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
className="block text-primary"
className="block text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground"
>
with Technology
</motion.span>
src/components/ProjectsSection.tsx
+3 -5
View File
@@ -5,6 +5,7 @@ import { ArrowRight } from "lucide-react";
import { useRef } from "react";
import { Link } from "react-router-dom";
import { ProjectCard } from "./ProjectCard";
import PremiumBadge from "./shared/PremiumBadge";
const gradientColors = [
"from-neon-blue/90",
@@ -49,12 +50,9 @@ export default function ProjectsSection() {
transition={{ duration: 0.7 }}
className="text-center mb-20"
>
<span className="inline-block px-5 py-2 rounded-full glass text-sm font-medium text-primary mb-4 tracking-widest">
OUR PORTFOLIO
</span>
<PremiumBadge text="our projects"/>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
Featured{" "}
<span className="text-primary neon-text-glow">Projects</span>
Featured <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Projects</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
Crafted with passion. Delivered with excellence.
src/components/ServicesSection.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ 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-primary">Do</span>
What We <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Do</span>
</h2>
<p className="text-muted-foreground text-lg leading-relaxed">
We deliver comprehensive technology solutions that empower
src/components/TeamSection.tsx
+4 -5
View File
@@ -6,6 +6,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
import { useTeam } from "@/hooks/queires/useTeam";
import { Link } from "react-router-dom";
import PremiumBadge from "./shared/PremiumBadge";
export default function TeamSection() {
const { data: teamdata } = useTeam();
@@ -21,7 +22,7 @@ export default function TeamSection() {
{/* 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]" />
<div className="absolute bottom-0 left-1/4 w-64 h-64 bg-primary/10 rounded-full blur-[100px]" />
<div className="absolute bottom-0 left-1/4 w-64 h-64 bg-primary/10 rounded-full blur-xl" />
</div>
<div className="container mx-auto px-4 relative z-10">
@@ -32,11 +33,9 @@ export default function TeamSection() {
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">
The Experts
</span>
<PremiumBadge text="Our experts"/>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
Meet Our <span className="text-primary neon-text-glow">Team</span>
Meet Our <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Team</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
A passionate team of innovators, designers, and developers.
src/components/TestimonialsSection.tsx
+1 -4
View File
@@ -41,8 +41,6 @@ export default function TestimonialsSection() {
return (
<section id="testimonials" className="py-24 relative overflow-hidden">
<div className="container mx-auto px-4 relative z-10">
{/* Section Header */}
<motion.div
@@ -56,8 +54,7 @@ export default function TestimonialsSection() {
Client Stories
</span>
<h2 className="text-4xl md:text-5xl font-bold mb-6">
What Our{" "}
<span className="text-primary neon-text-glow">Clients Say</span>
What Our <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Clients Say</span>
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
Don't just take our word for it - hear from the amazing companies
src/pages/Blog.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ export default function Blog() {
className="text-center mb-12"
>
<h1 className="text-5xl md:text-6xl font-bold mb-6">
Our <span className="text-primary neon-text-glow">Blog</span>
Our <span className="text-primary">Blog</span>
</h1>
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
Insights, tutorials, and thought leadership from our team of
src/pages/admins/components/projects/EditProjectModal.tsx
+26 -11
View File
@@ -1,15 +1,15 @@
import { useState } from "react";
import { T_projects } from "@/types/projects.type";
import { X } from "lucide-react";
import { useState } from "react";
export const EditProjectModal = ({
project,
onClose,
onSave
onSave,
}: {
project: T_projects;
onClose: () => void;
onSave: (data: Partial<T_projects>) => void
onSave: (data: Partial<T_projects>) => void;
}) => {
const [formData, setFormData] = useState({
name: project.name,
@@ -25,35 +25,50 @@ export const EditProjectModal = ({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="glass-strong w-full max-w-md p-8 rounded-2xl shadow-2xl relative">
<button onClick={onClose} className="absolute top-4 right-4 text-muted-foreground hover:text-foreground">
<button
onClick={onClose}
className="absolute top-4 right-4 text-muted-foreground hover:text-foreground"
>
<X size={24} />
</button>
<h2 className="text-2xl font-bold mb-6 neon-text-glow">Edit Project</h2>
<h2 className="text-2xl font-bold mb-6">Edit Project</h2>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="text-sm font-medium mb-1 block">Project Title</label>
<label className="text-sm font-medium mb-1 block">
Project Title
</label>
<input
className="w-full bg-background border border-border p-2.5 rounded-lg focus:ring-2 focus:ring-primary outline-none"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
onChange={(e) =>
setFormData({ ...formData, name: e.target.value })
}
/>
</div>
<div>
<label className="text-sm font-medium mb-1 block">Short Description</label>
<label className="text-sm font-medium mb-1 block">
Short Description
</label>
<textarea
className="w-full bg-background border border-border p-2.5 rounded-lg focus:ring-2 focus:ring-primary outline-none h-24"
value={formData.shortDescription}
onChange={(e) => setFormData({ ...formData, shortDescription: e.target.value })}
onChange={(e) =>
setFormData({ ...formData, shortDescription: e.target.value })
}
/>
</div>
<div>
<label className="text-sm font-medium mb-1 block">Preview URL</label>
<label className="text-sm font-medium mb-1 block">
Preview URL
</label>
<input
className="w-full bg-background border border-border p-2.5 rounded-lg focus:ring-2 focus:ring-primary outline-none"
value={formData.previewUrl}
onChange={(e) => setFormData({ ...formData, previewUrl: e.target.value })}
onChange={(e) =>
setFormData({ ...formData, previewUrl: e.target.value })
}
/>
</div>
src/pages/admins/components/projects/ManageProject.tsx
+23 -9
View File
@@ -1,24 +1,33 @@
import {
useDeleteProject,
useProjects,
useUpdateProject,
} from "@/hooks/queires/useProjects";
import { useState } from "react";
import { useProjects, useUpdateProject, useDeleteProject } from "@/hooks/queires/useProjects";
import { T_projects } from "@/types/projects.type";
import { ProjectCard } from "./ProjectCard";
import { EditProjectModal } from "./EditProjectModal";
import { ProjectCard } from "./ProjectCard";
export default function ManageProject() {
const { data: projectsData, isLoading } = useProjects();
const updateMutation = useUpdateProject();
const deleteMutation = useDeleteProject();
const [selectedProject, setSelectedProject] = useState<T_projects | null>(null);
const [selectedProject, setSelectedProject] = useState<T_projects | null>(
null,
);
const projects: T_projects[] = projectsData?.data?.data?.result || [];
const handleUpdate = (data: Partial<T_projects>) => {
if (selectedProject) {
updateMutation.mutate({ id: selectedProject.id, data }, {
onSuccess: () => setSelectedProject(null)
});
updateMutation.mutate(
{ id: selectedProject.id, data },
{
onSuccess: () => setSelectedProject(null),
},
);
}
};
@@ -28,13 +37,18 @@ export default function ManageProject() {
}
};
if (isLoading) return <div className="p-10 text-center animate-pulse">Loading Projects...</div>;
if (isLoading)
return (
<div className="p-10 text-center animate-pulse">Loading Projects...</div>
);
return (
<div className="p-8 max-w-5xl mx-auto">
<header className="mb-10">
<h1 className="text-4xl font-extrabold neon-text-glow">Manage Projects</h1>
<p className="text-muted-foreground">Edit, update or remove your portfolio items.</p>
<h1 className="text-4xl font-extrabold">Manage Projects</h1>
<p className="text-muted-foreground">
Edit, update or remove your portfolio items.
</p>
</header>
<div className="grid grid-cols-1 gap-6">