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,65 +73,80 @@ const timeline = [
   },
 ];
 
+const socialLinks: [
+  string,
+  React.ComponentType<React.SVGProps<SVGSVGElement>>,
+][] = [
+  ["https://github.com/selimaj-dev", Github],
+  ["https://instagram.com/selimaj.dev", Instagram],
+  ["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: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M8.717 18.555s-.922.561.641.721c1.882.24 2.885.2 4.969-.2a7.515 7.515 0 0 0 1.322.641c-4.688 2.004-10.62-.12-6.933-1.163zm-.6-2.605s-1.002.761.561.923c2.044.2 3.647.24 6.412-.32a2.445 2.445 0 0 0 .962.601c-5.651 1.683-11.982.16-7.935-1.202zm11.06 4.568s.681.561-.761 1.002c-2.685.803-11.261 1.043-13.665 0-.842-.36.761-.881 1.275-.961.521-.12.803-.12.803-.12-.922-.641-6.131 1.322-2.645 1.882 9.578 1.563 17.472-.681 14.987-1.803zM9.15 13.225s-4.368 1.043-1.563 1.402c1.202.161 3.566.12 5.771-.04 1.803-.16 3.608-.48 3.608-.48s-.641.281-1.082.561c-4.448 1.163-12.984.641-10.539-.561 2.084-1.002 3.807-.881 3.807-.881zm7.815 4.368c4.488-2.325 3.004-4.568.962-4.288-.36.08-.521.16-.521.16s.12-.24.401-.32c2.846-1.002 5.089 3.005-0.922 4.568 0 0 .04-.04.08-.12zm-7.373 6.332c4.328.28 10.94-.16 11.1-2.205 0 0-.32.803-3.566 1.402-3.687.681-8.255.6-10.94.16 0 0 .561.48 3.407.641z"
+          fill="currentColor"
+        />
+        <path
+          d="M14.247.001s2.485 2.525-2.364 6.332c-3.887 3.086-.881 4.848 0 6.853-2.285-2.044-3.927-3.848-2.805-5.53C10.72 5.17 15.249 3.975 14.247.001zm-1.275 11.501c1.163 1.322-.32 2.525-.32 2.525s2.966-1.523 1.605-3.407c-1.242-1.803-2.205-2.685 3.005-5.69 0 0-8.215 2.044-4.288 6.572z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+    color: "text-red-500",
+  },
+  { name: "Docker", icon: SiDocker, color: "text-blue-400" },
+  { name: "Linux", icon: SiLinux, color: "text-yellow-400" },
+];
+
+const achievements = [
+  {
+    icon: Trophy,
+    title: "Top GitHub Contributor in Albania",
+    description:
+      "Ranked #2 nationally based on commits, contributions, and repository activity.",
+  },
+  {
+    icon: Github,
+    title: "Contributor to 80+ Public Repositories",
+    description: "Actively contributed code to multiple open-source projects.",
+  },
+  {
+    icon: Box,
+    title: "Built & Deployed 3 Full-Stack Applications",
+    description:
+      "Completed end-to-end development projects using Next.js, React, and Rust.",
+  },
+  {
+    icon: FileText,
+    title: "Published Technical Guides & Documentation",
+    description:
+      "Authored clear technical documentation and tutorials in public repositories.",
+  },
+];
+
 export default function About() {
-  const techStack = [
-    { 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: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M8.717 18.555s-.922.561.641.721c1.882.24 2.885.2 4.969-.2a7.515 7.515 0 0 0 1.322.641c-4.688 2.004-10.62-.12-6.933-1.163zm-.6-2.605s-1.002.761.561.923c2.044.2 3.647.24 6.412-.32a2.445 2.445 0 0 0 .962.601c-5.651 1.683-11.982.16-7.935-1.202zm11.06 4.568s.681.561-.761 1.002c-2.685.803-11.261 1.043-13.665 0-.842-.36.761-.881 1.275-.961.521-.12.803-.12.803-.12-.922-.641-6.131 1.322-2.645 1.882 9.578 1.563 17.472-.681 14.987-1.803zM9.15 13.225s-4.368 1.043-1.563 1.402c1.202.161 3.566.12 5.771-.04 1.803-.16 3.608-.48 3.608-.48s-.641.281-1.082.561c-4.448 1.163-12.984.641-10.539-.561 2.084-1.002 3.807-.881 3.807-.881zm7.815 4.368c4.488-2.325 3.004-4.568.962-4.288-.36.08-.521.16-.521.16s.12-.24.401-.32c2.846-1.002 5.089 3.005-0.922 4.568 0 0 .04-.04.08-.12zm-7.373 6.332c4.328.28 10.94-.16 11.1-2.205 0 0-.32.803-3.566 1.402-3.687.681-8.255.6-10.94.16 0 0 .561.48 3.407.641z"
-            fill="currentColor"
-          />
-          <path
-            d="M14.247.001s2.485 2.525-2.364 6.332c-3.887 3.086-.881 4.848 0 6.853-2.285-2.044-3.927-3.848-2.805-5.53C10.72 5.17 15.249 3.975 14.247.001zm-1.275 11.501c1.163 1.322-.32 2.525-.32 2.525s2.966-1.523 1.605-3.407c-1.242-1.803-2.205-2.685 3.005-5.69 0 0-8.215 2.044-4.288 6.572z"
-            fill="currentColor"
-          />
-        </svg>
-      ),
-      color: "text-red-500",
-    },
-    { name: "Docker", icon: <SiDocker />, color: "text-blue-400" },
-    { name: "Linux", icon: <SiLinux />, color: "text-yellow-400" },
-  ];
-
-  const achievements = [
-    {
-      icon: <Trophy className="w-10 h-10 text-accent mx-auto" />,
-      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" />,
-      title: "Contributor to 80+ Public Repositories",
-      description:
-        "Actively contributed code, bug fixes, and features to multiple open-source projects.",
-    },
-    {
-      icon: <Box className="w-10 h-10 text-accent mx-auto" />,
-      title: "Built & Deployed 3 Full-Stack Applications",
-      description:
-        "Completed end-to-end development projects using Next.js, React, and TypeScript.",
-    },
-    {
-      icon: <FileText className="w-10 h-10 text-accent mx-auto" />,
-      title: "Published Technical Guides & Documentation",
-      description:
-        "Authored clear technical documentation and tutorials in public repositories.",
-    },
-  ];
-
   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
-                    <motion.a
+                    key={i}
-                      key={i}
+                    whileHover={{ y: -1 }}
-                      whileHover={{ y: -4, scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
-                      whileTap={{ scale: 0.95 }}
+                    className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-colors text-foreground hover:text-accent"
-                      className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-all"
+                    href={link}
-                    >
+                    target="_blank"
-                      <Icon className="w-5 h-5 text-foreground" />
+                  >
-                    </motion.a>
+                    <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>