Merge pull request #4 from selimaj-dev/pricing-patches

Pricing patches

src/app/about/page.tsx

@@ -21,18 +21,19 @@ import {
   SiPython,
   SiDocker,
   SiLinux,
+  SiX,
 } from "@icons-pack/react-simple-icons";
 import { motion } from "motion/react";
 import {
   staggerContainer,
   fadeInUp,
-  fadeIn,
   cardReveal,
   timelineItemLeft,
   timelineItemRight,
   slowFloat,
 } from "@/lib/animations";
 import { cn } from "@/lib/utils";
+import { ComponentType, SVGProps } from "react";
 
 const timeline = [
   {
@@ -72,16 +73,31 @@ const timeline = [
   },
 ];
 
-export default function About() {
+const socialLinks: [
-  const techStack = [
+  string,
-    { name: "Rust", icon: <SiRust />, color: "text-orange-500" },
+  React.ComponentType<React.SVGProps<SVGSVGElement>>,
-    { name: "TypeScript", icon: <SiTypescript />, color: "text-blue-500" },
+][] = [
-    { name: "React", icon: <SiReact />, color: "text-cyan-500" },
+  ["https://github.com/selimaj-dev", Github],
-    { name: "Go", icon: <SiGo />, color: "text-cyan-400" },
+  ["https://instagram.com/selimaj.dev", Instagram],
-    { name: "Python", icon: <SiPython />, color: "text-yellow-500" },
+  ["https://x.com/selimajdev", SiX],
+  ["https://www.linkedin.com/in/klesti-selimaj", Linkedin],
+  ["https://youtube.com/@0xkleo", Youtube],
+  ["https://dev.to/selimaj", ExternalLink],
+];
+
+const techStack: {
+  name: string;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  color: string;
+}[] = [
+  { name: "Rust", icon: SiRust, color: "text-orange-500" },
+  { name: "TypeScript", icon: SiTypescript, color: "text-blue-500" },
+  { name: "React", icon: SiReact, color: "text-cyan-500" },
+  { name: "Go", icon: SiGo, color: "text-cyan-400" },
+  { name: "Python", icon: SiPython, color: "text-yellow-500" },
   {
     name: "Java",
-      icon: (
+    icon: () => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -100,37 +116,37 @@ export default function About() {
     ),
     color: "text-red-500",
   },
-    { name: "Docker", icon: <SiDocker />, color: "text-blue-400" },
+  { name: "Docker", icon: SiDocker, color: "text-blue-400" },
-    { name: "Linux", icon: <SiLinux />, color: "text-yellow-400" },
+  { name: "Linux", icon: SiLinux, color: "text-yellow-400" },
 ];
 
 const achievements = [
   {
-      icon: <Trophy className="w-10 h-10 text-accent mx-auto" />,
+    icon: Trophy,
     title: "Top GitHub Contributor in Albania",
     description:
       "Ranked #2 nationally based on commits, contributions, and repository activity.",
   },
   {
-      icon: <Github className="w-10 h-10 text-accent mx-auto" />,
+    icon: Github,
     title: "Contributor to 80+ Public Repositories",
-      description:
+    description: "Actively contributed code to multiple open-source projects.",
-        "Actively contributed code, bug fixes, and features to multiple open-source projects.",
   },
   {
-      icon: <Box className="w-10 h-10 text-accent mx-auto" />,
+    icon: Box,
     title: "Built & Deployed 3 Full-Stack Applications",
     description:
-        "Completed end-to-end development projects using Next.js, React, and TypeScript.",
+      "Completed end-to-end development projects using Next.js, React, and Rust.",
   },
   {
-      icon: <FileText className="w-10 h-10 text-accent mx-auto" />,
+    icon: FileText,
     title: "Published Technical Guides & Documentation",
     description:
       "Authored clear technical documentation and tutorials in public repositories.",
   },
 ];
 
+export default function About() {
   return (
     <>
       {/* Hero */}
@@ -159,14 +175,14 @@ export default function About() {
                   </div>
                 </div>
                 {/* Floating badges */}
-                <motion.div
+                {/* <motion.div
                   className="absolute -bottom-4 -right-4 glass-card rounded-xl px-4 py-2 flex items-center gap-2"
                   variants={fadeInUp}
                   transition={{ delay: 0.6, type: "spring" }}
                 >
                   <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
                   <span className="text-sm text-foreground">Available</span>
-                </motion.div>
+                </motion.div> */}
               </div>
             </motion.div>
 
@@ -187,8 +203,8 @@ export default function About() {
                 className="text-lg text-muted-foreground mb-6"
               >
                 A 16-year-old software engineer from Albania with 6+ years of
-                experience. I'm passionate about building things that matter,
+                experience. I'm passionate about building low-level systems and
-                from low-level systems to beautiful user interfaces.
+                beautiful user interfaces.
               </motion.p>
               <motion.p
                 variants={fadeInUp}
@@ -225,18 +241,18 @@ export default function About() {
                 variants={fadeInUp}
                 className="flex items-center gap-4"
               >
-                {[Github, Linkedin, Youtube, Instagram, ExternalLink].map(
+                {socialLinks.map(([link, Icon], i) => (
-                  (Icon, i) => (
                   <motion.a
                     key={i}
-                      whileHover={{ y: -4, scale: 1.05 }}
+                    whileHover={{ y: -1 }}
                     whileTap={{ scale: 0.95 }}
-                      className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-all"
+                    className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-colors text-foreground hover:text-accent"
+                    href={link}
+                    target="_blank"
                   >
-                      <Icon className="w-5 h-5 text-foreground" />
+                    <Icon className="w-5 h-5" />
                   </motion.a>
-                  ),
+                ))}
-                )}
               </motion.div>
             </motion.div>
           </div>
@@ -273,7 +289,7 @@ export default function About() {
                 className="glass-card rounded-2xl p-6 text-center hover-lift group"
               >
                 <div className={cn("text-4xl mb-3 mx-auto w-max", tech.color)}>
-                  {tech.icon}
+                  <tech.icon />
                 </div>
                 <h3 className="font-semibold text-foreground group-hover:text-accent transition-colors">
                   {tech.name}
@@ -312,7 +328,9 @@ export default function About() {
                 variants={cardReveal}
                 className="glass-card rounded-2xl p-6 text-center hover-lift"
               >
-                <div className="text-4xl mb-4">{achievement.icon}</div>
+                <div className="text-4xl mb-4">
+                  <achievement.icon className="w-10 h-10 text-accent mx-auto" />
+                </div>
                 <h3 className="font-semibold text-foreground mb-2">
                   {achievement.title}
                 </h3>

src/app/pricing/page.tsx

@@ -14,7 +14,7 @@ const plans = [
   {
     name: "Starter",
     description: "Small, clearly defined tasks and improvements",
-    price: "$500",
+    price: "$499",
     period: "project",
     icon: Zap,
     features: [
@@ -25,27 +25,27 @@ const plans = [
       "1 revision round",
       "Async communication",
       "Source code included",
+      "CLI or TUI applications",
     ],
-    cta: "Get Started",
+    cta: "Contact Me",
     popular: false,
   },
   {
     name: "Professional",
     description: "Product features, MVPs, and system components",
-    price: "$2,000+",
+    price: "$1,999",
     period: "project",
     icon: Crown,
     features: [
       "Multi-feature application or system module",
       "Backend services or APIs (Rust, Node, etc.)",
-      "CLI or TUI applications",
       "Frontend integration where needed",
       "Architecture and technical decisions",
-      "2–3 revision rounds",
+      "2-3 revision rounds",
       "Documentation for delivered components",
       "Performance and reliability considerations",
     ],
-    cta: "Start Project",
+    cta: "Contact Me",
     popular: true,
   },
   {
@@ -127,12 +127,15 @@ export default function Pricing() {
               Pricing
             </span>
             <h1 className="text-4xl md:text-5xl font-bold text-foreground mt-2 mb-6">
-              Transparent Pricing for{" "}
+              Fair Pricing for{" "}
               <span className="text-gradient-gold">Premium Quality</span>
             </h1>
             <p className="text-lg text-muted-foreground">
-              Choose a plan that fits your needs. Every project receives the
+              Choose a plan that fits your needs.
-              same attention to detail and commitment to excellence.
+            </p>
+
+            <p className="mt-3 text-sm text-muted-foreground/80">
+              Payments are accepted in crypto.
             </p>
           </motion.div>
         </div>
@@ -280,7 +283,7 @@ export default function Pricing() {
                 variants={fadeInUp}
                 className="glass-card rounded-2xl p-6 hover-lift group"
               >
-                <h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-accent transition-colors">
+                <h3 className="text-lg font-semibold text-foreground mb-2 transition-colors">
                   {service.title}
                 </h3>
                 <p className="text-muted-foreground text-sm">

src/components/home/HeroSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowRight, Github, Linkedin, Youtube } from "lucide-react";
+import { ArrowRight, Github, Instagram, Linkedin } from "lucide-react";
 import Link from "next/link";
 import { motion } from "motion/react";
 import { staggerContainer, fadeInUp, slowFloat } from "@/lib/animations";
@@ -30,26 +30,15 @@ export function HeroSection() {
           className="max-w-4xl mx-auto text-center"
           variants={staggerContainer}
         >
-          {/* Status Badge */}
-          <motion.div
-            className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-8"
-            variants={fadeInUp}
-          >
-            <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
-            <span className="text-sm text-muted-foreground">
-              Available for new projects
-            </span>
-          </motion.div>
-
           {/* Main Heading */}
           <motion.h1
             className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6"
             variants={fadeInUp}
           >
             <span className="text-foreground">Building</span>{" "}
-            <span className="text-gradient-gold">exceptional</span>
+            <span className="text-gradient-gold">powerful</span>
             <br />
-            <span className="text-foreground">digital experiences</span>
+            <span className="text-foreground">digital products</span>
           </motion.h1>
 
           {/* Subheading */}
@@ -62,7 +51,7 @@ export function HeroSection() {
             <span className="text-foreground font-medium">Klesti Selimaj</span>,
             a 16-year-old software engineer with 6+ years of experience.
             Passionate about low-level systems, modern web apps, and crafting
-            tools that make a difference.
+            tools.
           </motion.p>
 
           {/* CTA Buttons */}
@@ -79,13 +68,11 @@ export function HeroSection() {
               <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
             </Link>
             <a
-              href="https://github.com/selimaj-dev"
+              href="/about"
-              target="_blank"
               rel="noopener noreferrer"
               className="flex items-center gap-2 bg-secondary text-secondary-foreground px-8 py-4 rounded-xl font-medium hover:bg-secondary/80 transition-colors"
             >
-              <Github className="w-4 h-4" />
+              About Me
-              View GitHub
             </a>
           </motion.div>
 
@@ -104,7 +91,7 @@ export function HeroSection() {
               <Github className="w-5 h-5" />
             </a>
             <a
-              href="https://www.linkedin.com/in/klesti-selimaj-7a0162343/"
+              href="https://www.linkedin.com/in/klesti-selimaj-7a0162343"
               target="_blank"
               rel="noopener noreferrer"
               className="text-muted-foreground hover:text-accent transition-colors"
@@ -112,12 +99,12 @@ export function HeroSection() {
               <Linkedin className="w-5 h-5" />
             </a>
             <a
-              href="https://www.youtube.com/@0xkleo"
+              href="https://www.instagram.com/selimaj.dev"
               target="_blank"
               rel="noopener noreferrer"
               className="text-muted-foreground hover:text-accent transition-colors"
             >
-              <Youtube className="w-5 h-5" />
+              <Instagram className="w-5 h-5" />
             </a>
           </motion.div>
         </motion.div>

src/components/home/ProjectsSection.tsx

@@ -111,7 +111,7 @@ export function ProjectsSection() {
               </div>
 
               {/* Content */}
-              <h3 className="text-xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors">
+              <h3 className="text-xl font-semibold text-foreground mb-2 transition-colors">
                 {project.name}
               </h3>
               <p className="text-muted-foreground text-sm mb-4 line-clamp-2">

src/components/layout/Footer.tsx

@@ -20,8 +20,6 @@ export function Footer() {
             </Link>
             <p className="text-muted-foreground text-sm max-w-sm">
               Building digital experiences with precision and passion.
-              Specializing in low-level systems, modern web applications, and
-              everything in between.
             </p>
           </div>
 
@@ -118,10 +116,10 @@ export function Footer() {
           <p className="text-sm text-muted-foreground">
             © {currentYear} Klesti Selimaj. All rights reserved.
           </p>
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          {/* <div className="flex items-center gap-2 text-sm text-muted-foreground">
             <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
             Available for work
-          </div>
+          </div> */}
         </div>
       </div>
     </footer>