How I Made My Website Load in 0.364 Seconds | Build and Deploy

buildQuery.ts

export function buildQuery(params: BuildQueryParams) {
  const { type, query, category, page = 1, perPage = 20 } = params;

  const conditions = [`*[_type=="${type}"`];

  if (query) conditions.push(`title match "*${query}*"`);

  if (category && category !== "all") {
    conditions.push(`category == "${category}"`);
  }

  // Calculate pagination limits
  const offset = (page - 1) * perPage;
  const limit = perPage;

  return conditions.length > 1
    ? `${conditions[0]} && (${conditions
        .slice(1)
        .join(" && ")})][${offset}...${limit}]`
    : `${conditions[0]}][${offset}...${limit}]`;
}

globals.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  font-family: "Poppins", sans-serif;
}

@layer utilities {
  .paddle-checkout {
    @apply min-h-screen w-full py-10 md:py-20 lg:w-1/2;
  }

  .hero-height {
    @apply min-h-[calc(100vh-100px)];
  }

  .text-gradient {
    background: linear-gradient(90deg, #4ca5ff 2.34%, #b673f8 100.78%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .heading1 {
    @apply text-[64px] leading-[67.2px] font-bold;
  }

  .heading2 {
    @apply font-bold text-[48px] leading-[50.4px];
  }

  .heading3 {
    @apply font-bold sm:text-[32px] sm:leading-[33.6px] text-[28px] leading-[40px] tracking-[-0.25%];
  }

  .base-regular {
    @apply text-[24px] font-normal leading-[31.2px];
  }

  .base-bold {
    @apply text-[24px] font-semibold leading-[31.2px];
  }

  .paragraph-regular {
    @apply text-[20px] font-normal leading-[26px];
  }

  .paragraph-semibold {
    @apply text-[20px] font-semibold leading-[26px];
  }

  .body-regular {
    @apply text-[16px] font-normal leading-[20.8px];
  }

  .body-semibold {
    @apply text-[16px] font-semibold leading-[20.8px];
  }

  .body-medium {
    @apply text-[16px] font-medium leading-[22.4px];
  }

  .small-regular {
    @apply text-[14px] font-normal leading-[17.5px];
  }

  .small-bold {
    @apply text-[14px] font-semibold leading-[17.5px];
  }

  .heading4 {
    @apply font-semibold text-[20px] leading-[26px] tracking-[0.25%];
  }

  .body-text {
    @apply text-[16px] leading-[22px] font-normal;
  }

  .nav-padding {
    @apply pt-[98px];
  }

  .paddings {
    @apply sm:p-16 xs:p-8 px-6 py-12;
  }

  .y-paddings {
    @apply sm:py-16 py-12;
  }

  .x-paddings {
    @apply sm:px-16 px-6;
  }

  .career-paddings {
    @apply sm:p-28 xs:p-8 px-6 py-12;
  }

  .flex-between {
    @apply flex justify-between items-center;
  }

  .flex-center {
    @apply flex justify-center items-center;
  }

  .flex-start {
    @apply flex justify-start items-start;
  }

  .flex-end {
    @apply flex justify-end;
  }

  .inner-width {
    @apply 3xl:max-w-[1280px] w-full mx-auto;
  }

  .inter-width {
    @apply lg:w-[80%] w-[100%];
  }

  .no-focus {
    @apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
  }
}

.frame {
  border-style: inset;
  border: 1px solid #40a0ff;
  position: relative;
}

.sm-box {
  width: 25px;
  height: 25px;
  position: absolute;
  border: 1px solid #40a0ff;
}

.sm-box-1 {
  top: -15px;
  left: -15px;
}

.sm-box-2 {
  top: -15px;
  right: -15px;
}

.sm-box-3 {
  bottom: -15px;
  right: -15px;
}

.sm-box-4 {
  bottom: -15px;
  left: -15px;
}

.sm-box-5 {
  bottom: 50%;
  left: -15px;
}

.sm-box-6 {
  bottom: 50%;
  right: -15px;
}

.sm-box-7 {
  bottom: -15px;
  left: 50%;
}

.sm-box-8 {
  top: -15px;
  left: 50%;
}

@media screen and (max-width: 500px) {
  .sm-box-5,
  .sm-box-6,
  .sm-box-7,
  .sm-box-8 {
    display: none;
  }

  .frame {
    border-radius: 10px;
  }
}

.text-gradient_purple-blue {
  background: linear-gradient(90deg, #4c73ff 0%, #73e0f8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.gradient_blue-purple {
  background: linear-gradient(90deg, #4ca5ff 0%, #b573f8 100%);
}

.text-gradient_blue {
  background: linear-gradient(90deg, #4c73ff 2.34%, #389bff 100.78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.gradient_purple {
  background: linear-gradient(90deg, #854cff 0%, #b573f8 100%);
}

.text-gradient_blue-purple {
  background: linear-gradient(90deg, #4ca5ff 0%, #b573f8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    screens: {
      xs: "400px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1220px",
      "2xl": "1440px",
      "3xl": "1700px",
    },
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        poppins: ["Poppins", "sans-serif"],
        inter: ["Inter", "sans-serif"],
      },
      colors: {
        primary: "#2190FF",
        black: {
          DEFAULT: "#000",
          100: "#0D1117",
          200: "#161B22",
          300: "#1F2428",
          400: "#242C38",
        },
        grey: {
          100: "#969BA5",
          200: "#55616D",
        },
        white: {
          DEFAULT: "#FFF",
          400: "#A3B3BC",
          500: "#A4B8D5",
          800: "#D0DFFF",
        },
        purple: "#8C7CFF",
        pink: "#ED5FBD",
        violet: "#F16565",
        orange: "#FF964B",
      },
      backgroundImage: {
        banner: "url('/jsm_resources_banner.svg')",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

Amazing🚀🚀🚀🚀

I have this problem can someone help me?

I have this problem can someone help me?

copy also global.css

in your vscode on the bar at the bottom, change the language type from css to tailwindcss and format the document