From 99131c7c4b9a7a006adad3b34ad2229b303ce4e1 Mon Sep 17 00:00:00 2001
From: sajadevo <nawabisajadahmad@gmail.com>
Date: Tue, 28 Jan 2025 05:25:37 +0500
Subject: [PATCH] update the pages

---
 app/about/page.tsx                   |   2 +-
 app/components/contact.tsx           | 170 ---------------------------
 app/components/experience.tsx        |  58 ---------
 app/components/hero.tsx              |  78 ------------
 app/components/index.ts              |   7 --
 app/components/projects-carousel.tsx |  85 --------------
 app/components/recommendations.tsx   |  35 ------
 app/components/services.tsx          |  63 ----------
 app/components/story.tsx             |  26 ----
 app/page.tsx                         |   2 +-
 app/projects/page.tsx                |   2 +-
 11 files changed, 3 insertions(+), 525 deletions(-)
 delete mode 100644 app/components/contact.tsx
 delete mode 100644 app/components/experience.tsx
 delete mode 100644 app/components/hero.tsx
 delete mode 100644 app/components/index.ts
 delete mode 100644 app/components/projects-carousel.tsx
 delete mode 100644 app/components/recommendations.tsx
 delete mode 100644 app/components/services.tsx
 delete mode 100644 app/components/story.tsx

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 5f08c64..138fcc0 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -36,7 +36,7 @@ export default function About() {
         <h2 className="mt-12 mb-4 font-sans text-2xl font-semibold text-black">
           Bio
         </h2>
-        <p className="text-foreground text-base leading-relaxed">
+        <p className="text-foreground text-base leading-relaxed sm:text-lg">
           Hey I&apos;m Sajad, a self-taught frontend engineer and passionate
           creator of intuitive web experiences, crafting stunning web
           experiences and intuitive designs for over seven years, I&apos;m all
diff --git a/app/components/contact.tsx b/app/components/contact.tsx
deleted file mode 100644
index ff73486..0000000
--- a/app/components/contact.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-"use client";
-
-import React from "react";
-
-// @components
-import { Input, Textarea, Button } from "@/components";
-
-// @hooks
-import { useForm } from "react-hook-form";
-
-// @utils
-import { z } from "zod";
-import { cn } from "@/lib/utils";
-import { zodResolver } from "@hookform/resolvers/zod";
-
-// @actions
-import { sendInquiry } from "@/lib/actions";
-
-const formSchema = z.object({
-  name: z.string().min(3, {
-    message: "Name must be at least 3 characters long",
-  }),
-  email: z.string().email({
-    message: "Invalid email address",
-  }),
-  message: z.string().min(26, {
-    message: "Message must be at least 26 characters long",
-  }),
-});
-
-export function Contact() {
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isSuccess, setIsSuccess] = React.useState(false);
-  const [error, setError] = React.useState<string | null>(null);
-
-  const {
-    reset,
-    handleSubmit,
-    register,
-    formState: { errors },
-  } = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: "",
-      email: "",
-      message: "",
-    },
-  });
-
-  async function onSubmit(values: z.infer<typeof formSchema>) {
-    setIsLoading(true);
-
-    const response = await sendInquiry(values);
-
-    if (response.sent) {
-      reset();
-      setError(null);
-      setIsSuccess(true);
-      setIsLoading(false);
-
-      setTimeout(() => {
-        setIsSuccess(false);
-      }, 3000);
-    } else {
-      setIsLoading(false);
-      setIsSuccess(false);
-      setError("Could not send message. Please try again later.");
-    }
-  }
-
-  return (
-    <section className="px-8 pt-8 sm:px-10 sm:pt-10 lg:px-20 lg:pt-20">
-      <div className="mx-auto max-w-2xl">
-        <h2 className="mb-6 text-xl font-normal text-black md:text-2xl">
-          Let&apos;s Connect
-        </h2>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2">
-            <div className="w-full">
-              <Input
-                placeholder="Your name"
-                isError={Boolean(errors.name?.message)}
-                {...register("name")}
-              />
-              {errors.name?.message && (
-                <p className="mt-2 text-sm text-red-500">
-                  {errors.name?.message}
-                </p>
-              )}
-            </div>
-            <div className="w-full">
-              <Input
-                type="email"
-                placeholder="Your email"
-                isError={Boolean(errors.email?.message)}
-                {...register("email")}
-              />
-              {errors.email?.message && (
-                <p className="mt-2 text-sm text-red-500">
-                  {errors.email?.message}
-                </p>
-              )}
-            </div>
-          </div>
-          <div className="mb-6">
-            <Textarea
-              placeholder="Your message"
-              rows={8}
-              isError={Boolean(errors.message?.message)}
-              {...register("message")}
-            />
-            {errors.message?.message && (
-              <p className="mt-2 text-sm text-red-500">
-                {errors.message?.message}
-              </p>
-            )}
-          </div>
-          <Button
-            type="submit"
-            disabled={isLoading}
-            className={cn("w-full", {
-              "pointer-events-none border-green-600 bg-green-600": isSuccess,
-            })}
-          >
-            {isSuccess && (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="mx-auto size-5"
-              >
-                <circle cx={12} cy={12} r={10} />
-                <path d="m9 12 2 2 4-4" />
-              </svg>
-            )}
-            {isLoading && (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="mx-auto size-5 animate-spin"
-              >
-                <path d="M12 2v4" />
-                <path d="m16.2 7.8 2.9-2.9" />
-                <path d="M18 12h4" />
-                <path d="m16.2 16.2 2.9 2.9" />
-                <path d="M12 18v4" />
-                <path d="m4.9 19.1 2.9-2.9" />
-                <path d="M2 12h4" />
-                <path d="m4.9 4.9 2.9 2.9" />
-              </svg>
-            )}
-            {!isLoading && !isSuccess && "Send Message"}
-          </Button>
-          {error && (
-            <p className="mt-6 text-center text-sm text-red-500">{error}</p>
-          )}
-        </form>
-      </div>
-    </section>
-  );
-}
diff --git a/app/components/experience.tsx b/app/components/experience.tsx
deleted file mode 100644
index 048ac72..0000000
--- a/app/components/experience.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// @components
-import { ExperienceTimeline } from "@/components";
-
-const experiences = [
-  {
-    companyLogo: "/reach.png",
-    companyWebsite: "https://www.getreach.xyz/",
-    date: "2024 - 2024",
-    role: "Senior Frontend Engineer",
-    description:
-      "Developing a high-performance frontend architecture for Reach web application, ensuring a scalable and flexible codebase, high-quality user interface and seamless user experience across devices.",
-  },
-  {
-    companyLogo: "/mintra.png",
-    companyWebsite: "https://www.mintra.ai/",
-    date: "2022 - 2024",
-    role: "Senior Frontend Engineer",
-    description:
-      "Led the design and development of scalable, high-performance, feature rich frontend architectures for a NFT marketplace, ensuring the best user interface and user experience for the end users.",
-  },
-  {
-    companyLogo: "/creative-tim.png",
-    companyWebsite: "https://www.creative-tim.com/",
-    date: "2020 - 2022",
-    role: "Web Developer & Community Manager",
-    description:
-      "Built high quality and responsive templates, ui kits, dashboard, building blocks, open-source component library for react.js and managed developers community.",
-  },
-];
-
-export function Experience() {
-  return (
-    <section className="p-8 sm:p-10 lg:p-20">
-      <div className="mx-auto max-w-2xl">
-        <h2 className="mb-10 text-xl font-normal text-black md:text-2xl">
-          My Experiences
-        </h2>
-        <div className="space-y-14">
-          {experiences.map(
-            (
-              { role, date, description, companyWebsite, companyLogo }: any,
-              key,
-            ) => (
-              <ExperienceTimeline
-                key={key}
-                role={role}
-                date={date}
-                description={description}
-                companyLogo={companyLogo}
-                companyWebsite={companyWebsite}
-              />
-            ),
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/app/components/hero.tsx b/app/components/hero.tsx
deleted file mode 100644
index 16ecb3b..0000000
--- a/app/components/hero.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// @components
-import Link from "next/link";
-import Image from "next/image";
-import { Button } from "@/components";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/tooltip";
-
-// @icons
-import { Contra } from "@/icons";
-
-export function Hero() {
-  return (
-    <section className="p-8 sm:p-10 lg:p-20">
-      <div className="mx-auto max-w-2xl">
-        <div className="relative size-26 md:size-28 lg:size-32">
-          <Image
-            src="/avatar.png"
-            alt="sajadevo avatar"
-            width={1024}
-            height={1024}
-            className="border-secondary size-full rounded-full border object-cover object-center"
-          />
-          <TooltipProvider delayDuration={0}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  href="https://tiny.supply?ref=sajadevo"
-                  target="_blank"
-                  className="absolute right-2 bottom-2"
-                >
-                  <Image
-                    src="https://framerusercontent.com/images/HAsr1urDKnVXkS4v4m7XoFC7GE.svg"
-                    alt="tiny supply"
-                    width={250}
-                    height={250}
-                    className="bg-secondary border-secondary size-6 rounded-full border"
-                  />
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side="right">PFP by Darius</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-        <h1 className="xs:text-3xl mt-8 text-2xl leading-tight font-normal text-black md:text-4xl lg:text-5xl">
-          Hey, I&apos;m Sajad.
-          <br />
-          Developer & Designer
-        </h1>
-        <p className="text-foreground mt-4 text-base text-balance md:text-lg">
-          A web developer and designer with 7+ year experience helping startups
-          and early-stage companies to build their websites and apps.
-        </p>
-        <div className="xs:flex-row mt-8 flex flex-col items-center gap-3">
-          <Link
-            href="https://cal.com/sajadevo/talk-with-sajad"
-            target="_blank"
-            className="xs:w-auto w-full"
-          >
-            <Button className="w-full">Book a call</Button>
-          </Link>
-          <Link
-            href="https://contra.com/sajadevo"
-            target="_blank"
-            className="xs:w-auto w-full"
-          >
-            <Button variant="secondary" className="w-full gap-2">
-              <Contra className="size-4 shrink-0" /> Hire me on Contra
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/app/components/index.ts b/app/components/index.ts
deleted file mode 100644
index f9d7efe..0000000
--- a/app/components/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from "./hero";
-export * from "./projects-carousel";
-export * from "./story";
-export * from "./services";
-export * from "./experience";
-export * from "./recommendations";
-export * from "./contact";
diff --git a/app/components/projects-carousel.tsx b/app/components/projects-carousel.tsx
deleted file mode 100644
index 63814e1..0000000
--- a/app/components/projects-carousel.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// @components
-import { ProjectFrame, ScrollContainer } from "@/components";
-
-const projects = [
-  {
-    title: "DevResume",
-    description:
-      "An open-source tool that generates beautiful resume based on your GitHub profile data. It's a great way to showcase your skills, projects, and contributions in a visually appealing way.",
-    url: "https://www.devresume.xyz/",
-    image: "/projects/devresume.png",
-  },
-  {
-    title: "Mintra App",
-    description:
-      "Mintra is Pulsechain's premiere on-chain, decentralized, fee-sharing NFT ecosystem. Deploy, trade, and collect NFTs on Pulsechain",
-    url: "https://app.mintra.ai/",
-    image: "/projects/mintra.png",
-  },
-  {
-    title: "Material Tailwind",
-    description:
-      "An open-source library that uses the power of Tailwind CSS and React to help you build unique web projects faster and easier.",
-    url: "https://www.material-tailwind.com/v3",
-    image: "/projects/material-tailwind.png",
-  },
-  {
-    title: "LookIntoHex",
-    description:
-      "LookIntoHex is a Hex analytics visualization tool for checking data like ROI, Liquidity, Shares, Adoption, Inflation and Social.",
-    url: "https://www.lookintohex.com/",
-    image: "/projects/lookintohex.png",
-  },
-  {
-    title: "Reach App",
-    description:
-      "Simplified, automated, permissionless protocol for quality engagement rewarding.",
-    url: "https://www.getreach.xyz/",
-    image: "/projects/get-reach-app.png",
-  },
-  {
-    title: "Gerardo Portfolio",
-    description: "Gerardo is a Web 3.0 Entrepreneur, Investor & Founder",
-    url: "https://www.gerawrdog.com/",
-    image: "/projects/gerardo.png",
-  },
-  {
-    title: "NF-Tim",
-    description:
-      "All our NFTs have utilities that will give you access to premium products for web developers and UI/UX designers.",
-    url: "https://nf-tim.com/",
-    image: "/projects/nf-tim.png",
-  },
-  {
-    title: "Soft UI Dashboard",
-    description:
-      "Innovative Admin Template for MUI and React. It features a huge number of components built to fit together and look amazing.",
-    url: "https://demos.creative-tim.com/soft-ui-dashboard-pro-react/",
-    image: "/projects/soft-ui-dashboard.png",
-  },
-  {
-    title: "Argon Dashboard",
-    description:
-      "Innovative Admin Template for MUI and React. It features a huge number of components built to fit together and look amazing.",
-    url: "https://demos.creative-tim.com/argon-dashboard-pro-material-ui/",
-    image: "/projects/argon-dashboard.png",
-  },
-];
-
-export function ProjectsCarousel() {
-  return (
-    <section className="w-full">
-      <ScrollContainer className="flex gap-6 lg:gap-12 relative py-2 px-6 lg:px-12 overflow-x-auto no-scrollbar">
-        {projects.map(({ title, description, image, url }) => (
-          <ProjectFrame
-            key={title}
-            img={image}
-            url={url}
-            title={title}
-            description={description}
-          />
-        ))}
-      </ScrollContainer>
-    </section>
-  );
-}
diff --git a/app/components/recommendations.tsx b/app/components/recommendations.tsx
deleted file mode 100644
index 933b321..0000000
--- a/app/components/recommendations.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-// @components
-import Marquee from "react-fast-marquee";
-import { RecommendationCard } from "@/components";
-
-export function Recommendations() {
-  return (
-    <section>
-      <div className="px-8 pt-8 sm:px-10 sm:pt-10 lg:px-20 lg:pt-20">
-        <div className="relative z-10 mx-auto max-w-2xl">
-          <h2 className="mb-6 text-xl font-normal text-black md:text-2xl">
-            Recommendations
-          </h2>
-        </div>
-      </div>
-      <div className="border-secondary -mx-96 border-x py-2">
-        <Marquee autoFill pauseOnHover>
-          {new Array(10).fill(0).map((_, key) => (
-            <RecommendationCard
-              key={key}
-              img="/user.png"
-              name="Alexandru Paduraru"
-              role="CEO at Creative Tim"
-              feedback="Working with Sajad was a pleasure. Their clear communication and
-              well-defined project requirements made collaboration seamless and
-              productive. I highly recommend them for their professionalism and
-              vision."
-            />
-          ))}
-        </Marquee>
-      </div>
-    </section>
-  );
-}
diff --git a/app/components/services.tsx b/app/components/services.tsx
deleted file mode 100644
index 0c73553..0000000
--- a/app/components/services.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-// @components
-import Link from "next/link";
-import Image from "next/image";
-import { Button, ServiceCard } from "@/components";
-
-// @icons
-import { Codepen, Figma, PencilRuler } from "lucide-react";
-
-export function Services() {
-  return (
-    <section className="p-8 sm:p-10 lg:p-20">
-      <div className="mx-auto max-w-2xl">
-        <h2 className="mb-10 text-xl font-normal text-black md:text-2xl">
-          What I do
-        </h2>
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-          <ServiceCard
-            icon={Codepen}
-            title="Web Development"
-            description="Professional web development delivering modern, responsive, and
-              user-friendly websites."
-          />
-          <ServiceCard
-            icon={Figma}
-            title="Web Design"
-            description="Bringing your vision to life with designs that enhance user experience and align with your brand identity."
-          />
-          <ServiceCard
-            icon={PencilRuler}
-            title="Product Design"
-            description="Delivering functional and visually engaging products that meet business goals and user needs."
-          />
-          <div className="border-secondary flex flex-col items-center justify-center rounded-[10px] border border-dashed p-6 text-center">
-            <div className="flex items-center justify-center gap-2">
-              <Image
-                src="/avatar.png"
-                alt="sajadevo avatar"
-                width={256}
-                height={256}
-                className="border-secondary size-10 rounded-full border object-cover object-center"
-              />
-              <span className="text-foreground font-normal">+</span>
-              <div className="bg-background border-secondary grid size-10 place-items-center rounded-full border text-xs font-normal text-black">
-                You
-              </div>
-            </div>
-            <p className="text-foreground mx-auto my-4 max-w-40 text-base">
-              Currently accepting projects for Q1 2025
-            </p>
-            <Link
-              href="https://cal.com/sajadevo/talk-with-sajad"
-              target="_blank"
-            >
-              <Button className="h-9 rounded-lg px-3 text-sm">
-                Book a call
-              </Button>
-            </Link>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/app/components/story.tsx b/app/components/story.tsx
deleted file mode 100644
index 8cbe617..0000000
--- a/app/components/story.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-export function Story() {
-  return (
-    <section className="p-8 sm:p-10 lg:p-20">
-      <div className="mx-auto max-w-2xl">
-        <h2 className="mb-6 text-xl font-normal text-black md:text-2xl">
-          My Story
-        </h2>
-        <p className="text-foreground text-base text-balance md:text-lg">
-          Crafting stunning web experiences and intuitive designs for over seven
-          years, I&apos;m all about merging creativity with functionality, one
-          line of code at a time.
-          <br />
-          <br />
-          From sleek websites to captivating user interfaces and thoughtful
-          designs, I channel my passion into building digital spaces that leave
-          a lasting impression.
-          <br />
-          <br />
-          Driven by curiosity and an eye for detail, I&apos;m constantly
-          refining my craft to transform ideas into seamless, user-friendly
-          realities that resonate on every screen.
-        </p>
-      </div>
-    </section>
-  );
-}
diff --git a/app/page.tsx b/app/page.tsx
index 248619b..8ec04ee 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -36,7 +36,7 @@ export default async function Home() {
           I&apos;m a passionate developer and designer interested in JavaScript,
           TypeScript, Rust, Product Design, Startups, Web 3.0 and OSS.
         </p>
-        <div className="xs:flex-row mt-8 flex flex-col items-center gap-2">
+        <div className="xs:flex-row mt-8 flex flex-col items-center gap-3">
           <Button className="xs:w-auto w-full" asChild>
             <Link
               href="https://cal.com/sajadevo/talk-with-sajad"
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index cfffae8..4e4523a 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -105,7 +105,7 @@ export default function About() {
         <h1 className="text-2xl leading-tight font-semibold text-black sm:text-3xl md:text-4xl">
           What I&apos;ve done so far
         </h1>
-        <p className="text-foreground mt-4 text-base text-balance md:leading-relaxed">
+        <p className="text-foreground mt-4 text-base text-balance sm:text-lg md:leading-relaxed">
           I&apos;m passionate about creating and sharing my journey through
           building in public. Here, you can explore unique websites, apps, and
           libraries I&apos;ve developed. Some of these projects are thriving,