Skip to content

About enhancement #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
palchhinparihar merged 2 commits into from
Dec 11, 2025
+114 −100
Merged

About enhancement #215

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
798ad05
Enhanced the about section
KaranUnique Dec 11, 2025
e091d5d
Merge branch 'palchhinparihar:main' into about-enhancement
KaranUnique Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 114 additions & 100 deletions src/components/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,160 +1,174 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Code2, Palette, Database, Zap } from "lucide-react";
import {
Code2,
Palette,
Database,
Zap,
Sparkles,
Comment thread
palchhinparihar marked this conversation as resolved.
LayoutGrid,
Users
} from "lucide-react";
import { accordionItems } from "../data/accordionItems";

const About = ({ theme }) => {
const [openAccordion, setOpenAccordion] = useState(null);
const { t } = useTranslation();
const [openAccordion, setOpenAccordion] = useState(null);

const toggleAccordion = (id) => {
setOpenAccordion(openAccordion === id ? null : id);
};

const glassLight = "bg-white/20 border-white/30 shadow-lg backdrop-blur-xl";
const glassDark = "bg-gray-800/30 border-gray-600/30 shadow-xl backdrop-blur-xl";

const techStack = [
{
name: "React",
icon: Code2,
description: "UI Library",
color: "text-blue-500"
{ name: "React", icon: Code2, description: "UI Library", color: "text-blue-400" },
{ name: "Tailwind", icon: Palette, description: "Styling Framework", color: "text-cyan-400" },
{ name: "Contentful", icon: Database, description: "Headless CMS", color: "text-purple-400" },
{ name: "Vite", icon: Zap, description: "Build Tool", color: "text-yellow-400" },
];

const features = [
{
title: "Modern UI/UX",
description: "Smooth animations, layered glass cards & premium interactions.",
icon: LayoutGrid,
},
{
title: "Performance Optimized",
description: "Built using Vite, lazy-loading and caching for speed.",
icon: Zap,
},
{
name: "Tailwind CSS",
icon: Palette,
description: "Styling Framework",
color: "text-cyan-500"
{
title: "Scalable Architecture",
description: "Reusable components, modular structure & clean code.",
icon: Database,
},
{
name: "Contentful",
icon: Database,
description: "Content API",
color: "text-purple-500"
{
title: "Community First",
description: "Open-source, contributor friendly and well documented.",
icon: Users,
},
{
name: "Vite",
icon: Zap,
description: "Build Tool",
color: "text-yellow-500"
}
];
Comment thread
palchhinparihar marked this conversation as resolved.

return (
<section
data-aos="fade-up"
className={`min-h-screen py-8 ${
theme === "light" ? "text-gray-900" : "text-white"
className={`min-h-screen py-12 ${
theme === "light"
? "text-gray-900 bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100"
: "text-white "
Comment thread
palchhinparihar marked this conversation as resolved.
}`}
>
<div className="container mx-auto px-4 max-w-4xl">
<h2 className="text-3xl font-bold mb-8">
{t("aboutPage.heading", "About Us")}
</h2>

{/* Tech Stack Section */}
<div className={`mb-8 p-6 rounded-lg ${
theme === "light"
? "bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200"
: "bg-gradient-to-br from-gray-800 to-gray-700 border border-gray-600"
}`}>
<h3 className="text-xl font-semibold mb-4">
{t("aboutPage.techStack", "Built With")}
</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{techStack.map((tech) => {
const IconComponent = tech.icon;
return (
<div
key={tech.name}
className={`p-4 rounded-lg text-center transition-all duration-300 hover:scale-105 hover:-translate-y-1 ${
theme === "light"
? "bg-white shadow-sm hover:shadow-md"
: "bg-gray-900 hover:bg-gray-850"
}`}
>
<div className="flex justify-center mb-3">
<IconComponent
className={`w-10 h-10 ${tech.color}`}
strokeWidth={1.5}
/>
</div>
<div className="font-semibold text-sm">{tech.name}</div>
<div className={`text-xs mt-1 ${
theme === "light" ? "text-gray-600" : "text-gray-400"
}`}>
{tech.description}
</div>
<div className="container mx-auto px-4 max-w-5xl">

{/* ================= HERO GLASS ================= */}
<div
className={`mb-16 p-10 rounded-3xl border ${
theme === "light" ? glassLight : glassDark
} transition-all hover:scale-[1.01]`}
>
<h1 className="text-4xl md:text-5xl font-bold mb-4 flex items-center gap-3">
{t("aboutPage.heading", "About Us")}
</h1>

<p className="text-lg opacity-90 leading-relaxed">
We combine design, innovation, and technology to craft delightful user experiences.
Everything here is built with attention to detail and modern development practices.
Comment thread
palchhinparihar marked this conversation as resolved.
</p>
</div>

{/* ================= TECH STACK GLASS GRID ================= */}
<h3 className="text-2xl font-bold mb-6">{t("aboutPage.techStack", "Built With")}</h3>

<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
{techStack.map((tech) => {
const Icon = tech.icon;
return (
<div
key={tech.name}
className={`p-6 rounded-2xl border cursor-pointer transition-all
hover:scale-105 hover:shadow-2xl
${theme === "light" ? glassLight : glassDark}`}
>
<Icon className={`w-12 h-12 mx-auto mb-3 ${tech.color}`} strokeWidth={1.5} />
<h4 className="font-semibold text-lg text-center">{tech.name}</h4>
<p className="text-sm opacity-80 text-center">{tech.description}</p>
</div>
);
})}
</div>

{/* ================= FEATURES SECTION (GLASS) ================= */}
<h3 className="text-2xl font-bold mb-6">Key Highlights</h3>
Comment thread
palchhinparihar marked this conversation as resolved.

<div className="grid md:grid-cols-2 gap-6 mb-20">
{features.map((feature, index) => {
const Icon = feature.icon;
return (
<div
key={index}
Comment thread
palchhinparihar marked this conversation as resolved.
className={`p-6 rounded-2xl border transition-all
hover:scale-105 hover:shadow-2xl
${theme === "light" ? glassLight : glassDark}`}
>
<div className="flex items-center gap-4 mb-3">
<Icon className="w-8 h-8 text-blue-300" />
Comment thread
palchhinparihar marked this conversation as resolved.
<h4 className="text-xl font-semibold">{feature.title}</h4>
</div>
);
})}
</div>
<p className="text-sm opacity-90">{feature.description}</p>
</div>
);
})}
</div>

{/* Accordion Section */}
<div className="space-y-4">
{/* ================= GLASS ACCORDION (Q/Q TYPE) ================= */}
<h3 className="text-2xl font-bold mb-6">How It Works</h3>
Comment thread
palchhinparihar marked this conversation as resolved.

<div className="space-y-4 mb-20">
{accordionItems.map((item) => {
const isOpen = openAccordion === item.id;

const titleText = t(item.titleKey || item.title);
const bodyText = t(item.contentKey || item.content);

return (
<div
key={item.id}
className={`border rounded-lg overflow-hidden ${
theme === "light" ? "border-gray-200" : "border-gray-600"
}`}
className={`rounded-2xl border overflow-hidden transition-all
${theme === "light" ? glassLight : glassDark}`}
>
<button
className={`w-full px-6 py-4 text-left font-semibold flex justify-between items-center transition-colors ${
theme === "light"
? "bg-gradient-to-r from-white to-gray-50 hover:from-gray-50 hover:to-gray-100 text-gray-900"
: "bg-gradient-to-r from-gray-800 to-gray-700 hover:from-gray-700 hover:to-gray-600 text-white"
} cursor-pointer`}
onClick={() => toggleAccordion(item.id)}
aria-expanded={isOpen}
aria-controls={`accordion-content-${item.id}`}
className="w-full px-6 py-4 text-left font-semibold flex justify-between items-center"
Comment thread
palchhinparihar marked this conversation as resolved.
>
<span>{titleText}</span>
<svg
className={`w-5 h-5 transition-transform ${
isOpen ? "rotate-180" : ""
}`}
className={`w-5 h-5 transition-transform ${isOpen ? "rotate-180" : ""}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>

{/* Accordion Content */}
<div
id={`accordion-content-${item.id}`}
className={`transition-all duration-300 ease-in-out ${
className={`transition-all duration-300 ${
isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
} overflow-hidden`}
>
<div
className={`px-6 py-4 ${
theme === "light"
? "bg-gradient-to-br from-gray-50 to-gray-100 text-gray-900"
: "bg-gradient-to-br from-gray-700 to-gray-600 text-white"
}`}
>
<span>{bodyText}</span>
</div>
<div className="px-6 py-4 text-sm opacity-90">{bodyText}</div>
</div>
</div>
);
})}
</div>

</div>
</section>
);
};

export default About;
export default About;
Loading