feat: add our-services section (#31)

package.json

@@ -16,6 +16,7 @@
         "@radix-ui/react-slot": "^1.1.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "framer-motion": "^11.15.0",
         "lucide-react": "^0.469.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

src/assets/icons/index.ts

@@ -0,0 +1,2 @@
+export * from "./services/NipIcon";
+export * from "./services/RelayIcon";

src/assets/icons/services/NipIcon.tsx

@@ -0,0 +1,32 @@
+import { IconProps } from "@/@types/iconProps";
+
+export const NipIcon = ({ ...props }: IconProps) => {
+    return (
+        <svg
+            {...props}
+            width="23"
+            height="23"
+            viewBox="0 0 23 23"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M21.6351 7.21794C21.081 5.90792 20.288 4.73167 19.2782 3.72183C18.2683 2.71201 17.0921 1.91903 15.7821 1.36494C14.4251 0.79101 12.9844 0.5 11.5 0.5C10.0156 0.5 8.57486 0.79101 7.21794 1.36494C5.90794 1.91906 4.73167 2.71201 3.72183 3.72183C2.71201 4.73164 1.91903 5.90792 1.36494 7.21794C0.79101 8.57486 0.5 10.0155 0.5 11.5C0.5 12.9844 0.79101 14.4251 1.36494 15.7821C1.91906 17.0921 2.71201 18.2683 3.72183 19.2782C4.73167 20.288 5.90792 21.081 7.21794 21.6351C8.57486 22.209 10.0156 22.5 11.5 22.5C12.3606 22.5 13.2181 22.4001 14.0486 22.2029C14.8563 22.0112 15.6432 21.7266 16.3876 21.3569C16.9935 21.056 17.2407 20.3209 16.9398 19.7151C16.6389 19.1092 15.9038 18.8619 15.2979 19.1628C14.1123 19.7517 12.8345 20.0502 11.5 20.0502C10.3452 20.0502 9.22557 19.8243 8.17226 19.3788C7.15425 18.9482 6.23973 18.3315 5.45409 17.5459C4.66846 16.7603 4.05179 15.8458 3.62119 14.8277C3.17567 13.7744 2.94977 12.6548 2.94977 11.5C2.94977 10.3452 3.17567 9.22562 3.62119 8.17231C4.05179 7.1543 4.66846 6.23978 5.45409 5.45415C6.23973 4.66851 7.15425 4.05184 8.17226 3.62125C9.22557 3.17572 10.3452 2.94983 11.5 2.94983C12.6548 2.94983 13.7744 3.17572 14.8277 3.62125C15.8457 4.05184 16.7602 4.66851 17.5459 5.45415C18.3315 6.23978 18.9482 7.1543 19.3788 8.17231C19.8243 9.22562 20.0502 10.3452 20.0502 11.5V14.7718C20.0502 15.2917 19.6272 15.7147 19.1073 15.7147C18.8554 15.7147 18.6187 15.6166 18.4406 15.4385C18.2625 15.2604 18.1644 15.0236 18.1644 14.7718V11.5C18.1644 10.6008 17.9881 9.72788 17.6402 8.90549C17.3044 8.11179 16.8241 7.39922 16.2124 6.78753C15.6007 6.17586 14.8882 5.6955 14.0945 5.35978C13.2721 5.01192 12.3992 4.83552 11.5 4.83552C10.6009 4.83552 9.72794 5.0119 8.90554 5.35975C8.11182 5.69547 7.3992 6.17583 6.78755 6.7875C6.17588 7.39917 5.69553 8.11176 5.3598 8.90549C5.01195 9.72791 4.83558 10.6008 4.83558 11.4999C4.83558 12.3991 5.01195 13.272 5.3598 14.0944C5.69553 14.8881 6.17591 15.6008 6.78755 16.2124C7.3992 16.8241 8.11179 17.3044 8.90554 17.6401C9.72796 17.988 10.6009 18.1644 11.5 18.1644C12.5395 18.1644 13.536 17.9312 14.4616 17.4714C15.0674 17.1705 15.3146 16.4354 15.0137 15.8295C14.7127 15.2236 13.9776 14.9765 13.3717 15.2774C12.7878 15.5675 12.158 15.7146 11.5 15.7146C10.3742 15.7146 9.31584 15.2762 8.51982 14.4801C7.72377 13.6841 7.28538 12.6257 7.28538 11.4999C7.28538 10.3742 7.7238 9.31579 8.51982 8.51974C9.31587 7.72369 10.3743 7.2853 11.5 7.2853C12.6257 7.2853 13.6841 7.72372 14.4802 8.51976C15.2762 9.31581 15.7147 10.3742 15.7147 11.4999V14.7717C15.7147 15.6779 16.0675 16.5299 16.7083 17.1707C17.3491 17.8115 18.2011 18.1644 19.1073 18.1644C20.0135 18.1644 20.8655 17.8115 21.5063 17.1707C22.1471 16.5299 22.5 15.6779 22.5 14.7717V11.5C22.5 10.0155 22.209 8.57484 21.6351 7.21794Z"
+                fill="url(#paint0_linear_269_65)"
+            />
+            <defs>
+                <linearGradient
+                    id="paint0_linear_269_65"
+                    x1="11.5"
+                    y1="22.5"
+                    x2="11.5"
+                    y2="0.5"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stop-color="#D8ECF8" />
+                    <stop offset="1" stop-color="#98C0EF" />
+                </linearGradient>
+            </defs>
+        </svg>
+    );
+};

src/assets/icons/services/RelayIcon.tsx

@@ -0,0 +1,34 @@
+import { IconProps } from "@/@types/iconProps";
+
+export const RelayIcon = ({ ...props }: IconProps) => {
+    return (
+        <svg
+            width="19"
+            height="23"
+            viewBox="0 0 19 23"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.27539 0.529278C6.15978 0.664028 4.1965 1.13552 2.75227 1.85572C0.662617 2.8978 -0.112195 4.32213 0.662145 5.69799C0.827059 5.99095 1.34324 6.53558 1.71814 6.81208C4.3566 8.75822 9.95358 9.36537 14.2755 8.17428C15.32 7.88639 16.3576 7.43955 17.0411 6.98327C17.4653 6.69998 18.0391 6.15586 18.2525 5.83433C18.6272 5.26976 18.7281 4.60632 18.529 4.01538C17.9303 2.23793 14.8294 0.825633 10.9099 0.545262C10.3378 0.504313 8.81237 0.495074 8.27539 0.529278ZM0.347656 8.01379C0.347656 8.71951 0.366863 9.40112 0.390367 9.52844C0.413828 9.65571 0.513773 9.92422 0.612387 10.1251C0.75848 10.4226 0.864098 10.5622 1.18202 10.8779C1.65528 11.3479 2.06851 11.6281 2.86133 12.0166C4.08757 12.6175 5.57781 13.0223 7.39453 13.2479C7.88571 13.309 8.33134 13.3254 9.5 13.3254C10.6687 13.3254 11.1143 13.309 11.6055 13.2479C13.9282 12.9594 15.7634 12.3675 17.1172 11.4702C17.288 11.3571 17.6033 11.0903 17.818 10.8774C18.1362 10.5618 18.2413 10.4229 18.3876 10.1251C18.4862 9.92422 18.5862 9.65571 18.6096 9.52844C18.6497 9.31114 18.6728 6.73057 18.6347 6.73057C18.625 6.73057 18.5042 6.83963 18.3662 6.97296C16.9464 8.34422 14.3599 9.27857 11.1758 9.57042C10.4293 9.63887 8.57067 9.63887 7.82422 9.57042C4.64556 9.27909 2.07143 8.34813 0.634773 6.97034C0.497273 6.83847 0.376402 6.73057 0.366219 6.73057C0.355992 6.73057 0.347656 7.30803 0.347656 8.01379ZM1.65339 9.00542C1.52444 9.05986 1.37891 9.25902 1.37891 9.3811C1.37891 9.62404 1.58339 9.82432 1.83141 9.82432C1.88903 9.82432 1.99886 9.76829 2.07547 9.6998C2.18977 9.5977 2.21486 9.54356 2.21486 9.39902C2.21486 9.10919 1.9115 8.89654 1.65339 9.00542ZM3.39513 10.0359C3.07609 10.3549 3.37983 10.8675 3.80488 10.7273C4.14094 10.6163 4.17922 10.134 3.86486 9.97149C3.68061 9.87618 3.53482 9.89616 3.39513 10.0359ZM0.347656 12.5596C0.347656 13.3073 0.367336 13.9541 0.394578 14.1015C0.701074 15.7593 3.25256 17.2118 6.77148 17.7315C9.34132 18.1111 12.0978 17.9404 14.4064 17.2588C16.8093 16.5494 18.3698 15.3761 18.6054 14.1015C18.6327 13.9541 18.6523 13.3073 18.6523 12.5596V11.2716L18.3838 11.5273C16.9721 12.8712 14.6165 13.7614 11.5557 14.1075C11.0632 14.1633 10.5434 14.1821 9.5 14.1821C8.45663 14.1821 7.93684 14.1633 7.44433 14.1075C5.507 13.8885 3.93168 13.4734 2.58586 12.8275C1.68549 12.3954 1.17193 12.0564 0.616211 11.5273L0.347656 11.2716V12.5596ZM1.58301 13.6949C1.48504 13.752 1.37891 13.9597 1.37891 14.0943C1.37891 14.1527 1.42896 14.26 1.49015 14.3327C1.70225 14.5848 2.13705 14.4758 2.21877 14.15C2.25474 14.0069 2.13395 13.7595 1.99787 13.6975C1.86617 13.6375 1.6836 13.6364 1.58301 13.6949ZM3.40871 14.6602C3.30477 14.733 3.23219 14.9477 3.26085 15.0977C3.27091 15.1503 3.32797 15.2421 3.38761 15.3018C3.63481 15.549 4.08594 15.3553 4.08594 15.0021C4.08594 14.6793 3.67657 14.4726 3.40871 14.6602ZM0.347914 17.1397C0.348043 17.831 0.366906 18.5126 0.389809 18.6544C0.595844 19.9289 2.24451 21.1589 4.68179 21.8565C7.68345 22.7156 11.3165 22.7156 14.3182 21.8565C15.8579 21.4158 17.0635 20.7821 17.8414 20.0046C18.1351 19.7111 18.2492 19.559 18.3903 19.2731C18.4894 19.0725 18.587 18.7977 18.6102 18.6544C18.6551 18.3763 18.6695 15.8829 18.6261 15.8829C18.6117 15.8829 18.4452 16.0284 18.2561 16.2063C16.9701 17.4161 14.6537 18.292 11.7764 18.6565C11.0446 18.7493 8.80146 18.7881 7.96859 18.7225C4.86019 18.4776 2.15784 17.5365 0.743871 16.2063C0.554809 16.0284 0.388305 15.8829 0.373867 15.8829C0.359473 15.8829 0.347785 16.4485 0.347914 17.1397ZM1.64729 18.3553C1.35691 18.4774 1.29473 18.8472 1.53024 19.0519C1.86119 19.3394 2.37913 18.944 2.17886 18.5567C2.10147 18.407 2.07122 18.3828 1.90046 18.3339C1.82385 18.3119 1.73207 18.3196 1.64729 18.3553ZM3.50586 19.2751C3.13134 19.4284 3.18218 19.9871 3.57856 20.0742C3.82778 20.1289 4.08594 19.9203 4.08594 19.6642C4.08594 19.5072 3.96515 19.3316 3.82301 19.2821C3.66613 19.2274 3.62462 19.2265 3.50586 19.2751Z"
+                fill="url(#paint0_linear_269_55)"
+            />
+            <defs>
+                <linearGradient
+                    id="paint0_linear_269_55"
+                    x1="9.5009"
+                    y1="22.5009"
+                    x2="9.5009"
+                    y2="0.508301"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stop-color="#D8ECF8" />
+                    <stop offset="1" stop-color="#98C0EF" />
+                </linearGradient>
+            </defs>
+        </svg>
+    );
+};

src/components/AnimateWrapper.tsx

@@ -0,0 +1,48 @@
+import {
+    AnimatePresence,
+    AnimationProps,
+    motion,
+    TargetAndTransition,
+    VariantLabels,
+} from "framer-motion";
+import React from "react";
+type AnimateWrapperType = {
+    duration?: number;
+    whileInView?: VariantLabels | TargetAndTransition;
+    transition?: AnimationProps;
+    delay?: number;
+    once?: boolean;
+    children?: React.ReactNode;
+} & AnimationProps;
+
+export default function AnimateWrapper({
+    exit,
+    whileInView,
+    initial,
+    duration,
+    children,
+    transition,
+    delay,
+    once,
+}: AnimateWrapperType) {
+    return (
+        <>
+            <AnimatePresence>
+                <motion.div
+                    transition={
+                        transition ?? {
+                            duration: duration ?? 0.8,
+                            delay: delay ?? 0,
+                        }
+                    }
+                    initial={initial ?? { opacity: 0, y: 15 }}
+                    whileInView={whileInView ?? { opacity: 1, y: 0 }}
+                    exit={exit ?? { opacity: 0, y: 15 }}
+                    viewport={{ once: once }}
+                >
+                    {children}
+                </motion.div>
+            </AnimatePresence>
+        </>
+    );
+}

src/components/pages/Home/HeroSection.tsx

@@ -1,7 +1,7 @@
 const HeroSection = () => {
     return (
         <section className="  pt-[212px] pb-[289px] relative  ">
-            <h1 className="gradient-text text text-center font-bold   text-[80px] uppercase max-w-[873px] mx-auto leading-[56px]  ">
+            <h1 className="gradient-text text text-center font-bold   text-[80px] uppercase max-w-[873px] mx-auto leading-[56px]  animate-fade-up ">
                 Stay
                 <br /> Immortal!
             </h1>

src/components/pages/Home/Services/ServicesCard.tsx

@@ -0,0 +1,32 @@
+import GradientIconBox from "@/components/ui/GradientIconBox";
+import { ServicesCardProps } from "./data";
+
+const ServicesCard = ({
+    title,
+    description,
+    icon,
+    isItPublished,
+}: ServicesCardProps) => {
+    return (
+        <div className="relative text-center max-w-[467px] rounded-[22px] p-[1px] bg-gradient-to-tl from-[#A0C5F7] to-[#111628]/[0.62]">
+            <div className="bg-[url(/svg/services-bg.svg)] bg-[#141B30] bg-cover bg-center rounded-[20px] p-4 h-full  flex flex-col items-center ">
+                <GradientIconBox>{icon}</GradientIconBox>
+                <div className="py-6 mt-4">
+                    {!isItPublished && (
+                        <span className="purple-gradient-text text-sm leading-6 font-medium font-robotoMono">
+                            Coming Soon
+                        </span>
+                    )}
+                    <p className="text-[#ACCDF2] text-center  font-bankGothic font-bold text-[38px] leading-[26px] ">
+                        {title}
+                    </p>
+                </div>
+                <p className="text-[#80899F] text-center text-lg font-robotoMono leading-5">
+                    {description}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default ServicesCard;

src/components/pages/Home/Services/data.tsx

@@ -0,0 +1,24 @@
+import { TitleDescriptionT } from "@/@types/global";
+import { NipIcon, RelayIcon } from "@/assets/icons";
+import { ReactNode } from "react";
+
+export type ServicesCardProps = {
+    icon: ReactNode;
+    isItPublished?: boolean;
+} & TitleDescriptionT;
+
+export const servicesData: ServicesCardProps[] = [
+    {
+        title: "NIP-05 Service",
+        description:
+            "Let your friends to find you by your name on chaotic nostr ecosystem easily. Pay once keep it forever.",
+        icon: <NipIcon />,
+        isItPublished: true,
+    },
+    {
+        title: "Relay Services",
+        description:
+            "Let your friends to find you by your name on chaotic nostr ecosystem easily. Pay once keep it forever.",
+        icon: <RelayIcon />,
+    },
+];

src/components/pages/Home/Services/index.tsx

@@ -0,0 +1,21 @@
+import SectionTitle from "@/components/ui/SectionTitle";
+import { servicesData } from "./data";
+import ServicesCard from "./ServicesCard";
+import AnimateWrapper from "@/components/AnimateWrapper";
+
+const ServicesSection = () => {
+    return (
+        <section className="space-y-[84px] mt-20">
+            <SectionTitle className="text-center">Our Services</SectionTitle>
+            <AnimateWrapper delay={0.4}>
+                <div className="flex justify-center gap-4">
+                    {servicesData.map((service, key) => (
+                        <ServicesCard {...service} key={key} />
+                    ))}
+                </div>
+            </AnimateWrapper>
+        </section>
+    );
+};
+
+export default ServicesSection;

src/components/pages/Home/index.tsx

@@ -1,9 +1,11 @@
 import HeroSection from "./HeroSection";
+import ServicesSection from "./Services";
 
 export const HomePage = () => {
     return (
         <>
             <HeroSection />
+            <ServicesSection />
         </>
     );
 };

src/components/ui/GradientIconBox.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+const GradientIconBox = ({ children }: { children: ReactNode }) => {
+    return (
+        <div className="bg-gradient-to-tr from-[#070C20] to-[#A0C5F7] p-[1px]   size-[45px] rounded-[12px] ">
+            <span className="size-full flex justify-center items-center rounded-[12px] bg-gradient-to-b from-[#1B2550] to-[#070C20]   ">
+                {children}
+            </span>
+        </div>
+    );
+};
+
+export default GradientIconBox;

src/components/ui/SectionTitle.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils";
+import { ReactNode, forwardRef } from "react";
+import AnimateWrapper from "../AnimateWrapper";
+
+type SectionTitleProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+const SectionTitle = forwardRef<HTMLHeadingElement, SectionTitleProps>(
+    ({ className, children, ...props }: SectionTitleProps) => {
+        return (
+            <AnimateWrapper delay={0.3}>
+                <h2
+                    className={cn(
+                        "text-[72px] font-bold leading-[86px] tracking-tighter gradient-text",
+                        className,
+                    )}
+                    {...props}
+                >
+                    {children}
+                </h2>
+            </AnimateWrapper>
+        );
+    },
+);
+
+SectionTitle.displayName = "SectionTitle";
+
+export default SectionTitle;

src/styles/index.css

@@ -48,4 +48,7 @@
         @apply bg-clip-text text-transparent bg-gradient-to-r from-[#ACCDF2] via-[#D4E9F7] to-[#ACCDF2];
         text-shadow: 0px 0px 22.76px #a0c5f7a8;
     }
+    .purple-gradient-text {
+        @apply bg-clip-text text-transparent bg-gradient-to-r from-[#F869B6] to-[#D34CD9];
+    }
 }