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

Pricing patches
2026-01-22 12:49:27 +01:00
parent 602fc01585 08554acbe4
commit e3503c1cfe
5 changed files with 120 additions and 114 deletions
@@ -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,
-                from low-level systems to beautiful user interfaces.
+                experience. I'm passionate about building low-level systems and
+                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(
-                  (Icon, i) => (
-                    <motion.a
-                      key={i}
-                      whileHover={{ y: -4, scale: 1.05 }}
-                      whileTap={{ scale: 0.95 }}
-                      className="glass-card p-3 rounded-xl hover:ring-1 hover:ring-accent/30 transition-all"
-                    >
-                      <Icon className="w-5 h-5 text-foreground" />
-                    </motion.a>
-                  ),
-                )}
+                {socialLinks.map(([link, Icon], i) => (
+                  <motion.a
+                    key={i}
+                    whileHover={{ y: -1 }}
+                    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"
+                    href={link}
+                    target="_blank"
+                  >
+                    <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>
@@ -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
-              same attention to detail and commitment to excellence.
+              Choose a plan that fits your needs.
+            </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">
@@ -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"
-              target="_blank"
+              href="/about"
              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" />
-              View GitHub
+              About Me
            </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>
@@ -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">
@@ -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>