diff --git a/README.md b/README.md index 7bbd6fa..07442ce 100644 --- a/README.md +++ b/README.md @@ -128,7 +128,7 @@ Comprehensive color format conversion including: - Accurate conversion algorithms - Copy-to-clipboard functionality -### Accessibility Testing +### Accessibilit## Contributiny Testing Built-in WCAG compliance checker: - Calculates contrast ratios - Tests against AA (4.5:1) and AAA (7:1) standards @@ -142,9 +142,9 @@ Generate harmonious color schemes based on color theory: - Triadic - Tetradic -## Contributing -Contributions are welcome! Please feel free to submit a Pull Request. + + ## License diff --git a/app/about/page.tsx b/app/about/page.tsx index b4078f2..f6afefa 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -2,367 +2,194 @@ import { Navbar } from "@/components/layout/navbar"; import { Footer } from "@/components/layout/footer"; -import { Palette, Cpu, Sparkles, PaintBucket, Github, Eye } from "lucide-react"; +import { Palette, Cpu, Sparkles, PaintBucket, Github, Eye, ArrowRight, CheckCircle2, Heart } from "lucide-react"; import Link from "next/link"; import { motion } from "framer-motion"; import Image from "next/image"; +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import { Separator } from "@/components/ui/separator"; const pageVariants = { hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, - transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const }, + transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] as const, staggerChildren: 0.1 }, }, }; +const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }, +}; + export default function AboutPage() { return ( -
- {/* Navbar */} +
{/* Decorative Background */} -
-
+
+
- {/* Main Content */} - {/* Hero Section */} + {/* Header */} - {/* Logo */} -
- ColorKit Logo +
+
+
+ ColorKit Logo +
-

- About ColorKit -

-

- A simple yet powerful platform that helps you explore, extract, and - analyze colors from images or palettes — designed for creators, - developers, and artists. -

+
+

+ About ColorKit +

+

+ A simple yet powerful platform that helps you explore, extract, and analyze colors from images or palettes. +

+
-
- } - title="Pick from Image" - description="Upload an image and automatically extract its dominant, complementary, and accent colors." - gradient="bg-gradient-to-br from-cyan-500 to-blue-600" - layer1="bg-cyan-200" - layer2="bg-cyan-100" - /> - - } - title="Analyze Colors" - description="View detailed HEX, RGB, HSL, and CMYK values, along with lightness and saturation info." - gradient="bg-gradient-to-br from-pink-500 to-purple-600" - layer1="bg-pink-200" - layer2="bg-pink-100" - /> - - } - title="AI-Powered Insights" - description="Smart detection for mood, warmth, and context-based color suggestions for better design." - gradient="bg-gradient-to-br from-violet-600 to-indigo-700" - layer1="bg-violet-200" - layer2="bg-violet-100" - /> - - } - title="Accessibility Ready" - description="Simulate color blindness and check contrast ratios to ensure inclusive design." - gradient="bg-gradient-to-br from-emerald-500 to-teal-600" - layer1="bg-emerald-200" - layer2="bg-emerald-100" - /> - - } - title="Dynamic Variations" - description="Explore color variations, tints, shades, and harmonious combinations with one click." - gradient="bg-gradient-to-br from-yellow-400 to-orange-500" - layer1="bg-yellow-200" - layer2="bg-yellow-100" - /> - - } - title="Open Source" - description="Built with Next.js, TailwindCSS, and Shadcn/UI — completely open and community-driven." - gradient="bg-gradient-to-br from-slate-600 to-gray-700" - layer1="bg-gray-300" - layer2="bg-gray-200" - /> -
- - {/* Mission Section */} - -
-
- -
- -
+ - bg-white/30 border-white/40 shadow-blue-200 - dark:bg-slate-900/40 dark:border-white/10 dark:shadow-xl dark:shadow-blue-900/20 - " - > -

- Our Mission + {/* Intro Story */} +
+

+ More Than Just a Picker

- -

- Our mission is to make color exploration effortless, beautiful, - and intelligent. Whether you are working on UI, graphics, - branding, or visual experiments, - - {" "} - ColorKit{" "} - - empowers you to visualize, analyze, and perfect every shade with - clarity and confidence. +

+ ColorKit was born from the need for a modern, fast, and privacy-focused color tool. + We noticed that most color pickers were either cluttered with ads or lacked precision. + So, we built something better—a tool designed for creators, developers, and artists who care about aesthetics and accessibility.

+
+ + + + {/* Features List (Clean Layout) */} +
+
+

Whats Inside

+

Everything you need to master your color palette.

+
+ +
+
+ } + title="Smart Extraction" + description="Upload an image and automatically extract its dominant, complementary, and accent colors." + /> + } + title="Detailed Analysis" + description="View HEX, RGB, HSL, and CMYK values instantly." + /> + } + title="AI-Powered Insights" + description="Get context-based color suggestions and mood analysis." + /> +
+
+ } + title="Accessibility Checks" + description="Simulate color blindness and check contrast ratios (WCAG)." + /> + } + title="Dynamic Variations" + description="Explore tints, shades, and harmonious combinations." + /> + } + title="Open Source" + description="Transparent, community-driven, and free forever." + /> +
+
+
+ + + + {/* Mission & Community Combined */} +
+
+
+ +
+

Our Mission

+

+ To make color exploration effortless and intelligent. We believe that the right tools should get out of your way and let your creativity flow. + ColorKit empowers you to visualize and perfect every shade with confidence. +

+
+ +
+
+ +
+

Join the Community

+

+ We welcome contributors! Whether its reporting a bug, suggesting a feature, or fixing a typo, your help makes ColorKit better for everyone. +

+ +
-

- - {/* Join Community */} - -
- {/* --- Layer 1 (Glow L --- */} -
- - {/* --- Layer 2 (Soft Panel) --- */} -
- - {/* --- Main Card --- */} -
-

- Join the Community -

- -

- Want to contribute, improve features, or report bugs? We welcome - open-source contributors, designers, and creative minds like - you. Be a part of the project and help shape the future of - ColorKit. -

- - {/* Button */} - - - - - - View on GitHub - -
-
+ + - {/* Footer */}
); } -/* ===================== NEW LAYERED CARD COMPONENT ===================== */ - -function FeatureCard({ - icon, - title, - description, - gradient, - layer1, - layer2, -}: { - icon: React.ReactNode; - title: string; - description: string; - gradient: string; - layer1: string; - layer2: string; -}) { +function FeatureRow({ icon, title, description }: { icon: React.ReactNode, title: string, description: string }) { return ( - -
- {/* Layer 1 */} -
- - {/* Layer 2 */} -
- - {/* Main Layer */} -
-
{icon}
- -

{title}

- -

{description}

-
+
+
+ {icon}
- - ); +
+

{title}

+

{description}

+
+
+ ) } diff --git a/app/contrast-checker/page.tsx b/app/contrast-checker/page.tsx index 6085b46..16773fb 100644 --- a/app/contrast-checker/page.tsx +++ b/app/contrast-checker/page.tsx @@ -37,69 +37,77 @@ export default function ContrastCheckerPage() { }; return ( -
-
+
+
+
{/* Navbar stays static */} {/* Page Content */} -
-
+
+
{/* Header Section */} -

+

Contrast Checker

-

- Check color contrast ratios and ensure your designs meet WCAG - accessibility standards +

+ Check color contrast ratios and ensure your designs meet WCAG accessibility standards with our real-time analyzer.

{/* Color Selection + WCAG Compliance */} {/* Color Selection Card */} - -
+ +
+
-

Color Selection

+

+ + Color Selection +

-
+
{/* Foreground Color */} -
-