FEAT: Add consult us form and update page hero (#577)

* feat: Add consult us form

* fix: Image size

* fix: Section widths

* feat: Update hero section on staff augmentation page

* refactor: Split Staff augmentation into components. Add content to md collections

* fix: Smaller styling issues

* refactor: Move components to staff augmentation dir

* feat: Add Book a call button

* fix: improve color contrast on form submit button

* fix: Remove button opacity when disabled

* fix: Heading elements in sequentially-descending order

* fix: Heading elements in sequentially-descending order

* feat: create thank you card, edit existing form to fit design

* fix: Staff augmentation background pattern issue on wide screens

* feat: Make main content fact check section dynamic based on URL query param

* feat: Add content for different hero and ideal for section variants

* chore: copy updates

* feat: Make page content dynamic and update existing content (#605)

* feat: 2 separated requests for modal and primary form, created form for modal

* feat: add source into getPlan endpoint

* feat: add notification error message and source in api response message

* feat: show 2 quarters ahead on the dropdown

* fix: Svg background gets blurry on bigger screens

* fix: Smaller styling issues

* fix: edit variant id's, pill width on small screens

* fix: add opacity for disabled button

* chore: copy updates

* chore: minor copy correction

* fix: edit line heights and text sizes for headers and description paragraphs

* fix: change button background

* fix: add hover bg and cursor pointer on thank you card button

* fix: enable all button click but show error message if something wrong

* fix: path to notion

* feat: frontend contact us validation on get your plan form

* feat: add frontend validation for base contact form

* fix: import collections with astro:content

* fix: astro:content available only on server-side

* fix: allow 1 char for name in contact form API

* fix: revert direct .md file import for single files

* Feat ideal for section redesign (#619)

* feat: Redesign of 'Ideal for teams who' section

* fix: Smaller styling issues

* fix: add listener on whole form and check input clicked

* FEAT: Update specialization page (#622)

* FEAT: Add Trusted by and Testimonial section (#626)

* feat: Add Trusted by and Testimonial section

* feat: Optimize image for smaller screens

---------

Co-authored-by: ivke995 <ivanivic842@gmail.com>
Co-authored-by: vele616 <vele@crocoder.dev>

Author: 3 people

apps/contact/app/api/contact/route.tsx

@@ -6,9 +6,7 @@ import { NextRequest } from "next/server";
 import z from "zod";
 
 const bodyValidationSchema = z.object({
-  name: z
-    .string()
-    .min(2, { message: "Name must be at least 2 characters long" }),
+  name: z.string(),
   email: z
     .email({ message: "Invalid email adress" })
     .min(1, { message: "Required field" }),

apps/contact/app/api/get-plan/route.ts

@@ -0,0 +1,142 @@
+import { processContact } from "@/helpers/notion";
+import { nanoid } from "nanoid";
+import { NextRequest } from "next/server";
+import z from "zod";
+
+const { NOTION_GET_PLAN_DATABASE_ID } = process.env;
+
+const bodyValidationSchema = z.object({
+  name: z.string(),
+  email: z
+    .email({ message: "Invalid email adress" })
+    .min(1, { message: "Required field" }),
+  companyName: z.string().optional(),
+  mainChallenge: z.string().optional(),
+  expectedStartDate: z.string().optional(),
+  hasConsent: z.boolean().optional(),
+});
+
+type RequestBody = z.infer<typeof bodyValidationSchema>;
+
+const allowRequest = async (request: Request & { ip?: string }) => {
+  return { success: true, limit: 1, reset: Date.now() + 30000, remaining: 1 };
+};
+
+export async function OPTIONS() {
+  return new Response(null, {
+    status: 200,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "OPTIONS, POST",
+      "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    },
+  });
+}
+
+export async function POST(request: NextRequest) {
+  const corsHeaders = {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Credentials": "true",
+    "Access-Control-Allow-Methods": "POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type, Authorization",
+  };
+
+  if (request.headers.get("Content-Type") === "application/json") {
+    try {
+      const body = (await request.json()) as RequestBody;
+      const bodyValidationResult = bodyValidationSchema.safeParse(body);
+
+      if (!body || bodyValidationResult.error) {
+        return new Response(
+          JSON.stringify({
+            message: bodyValidationResult.error?.message || "No body was found",
+          }),
+          {
+            status: 400,
+            headers: {
+              ...corsHeaders,
+            },
+          },
+        );
+      }
+
+      const {
+        name,
+        email,
+        companyName,
+        mainChallenge,
+        expectedStartDate,
+        hasConsent,
+      } = body;
+
+      const message = `
+          Company name: ${companyName || ""} \n
+          Main challenge: ${mainChallenge || ""} \n
+          Expected start date: ${expectedStartDate || ""} \n`;
+
+      if (!hasConsent) {
+        return new Response(JSON.stringify({ message: "No consent by user" }), {
+          status: 403,
+          headers: {
+            ...corsHeaders,
+          },
+        });
+      }
+
+      const { success, limit, reset, remaining } = await allowRequest(request);
+
+      if (!success) {
+        return new Response(
+          JSON.stringify({
+            message: "Too many requests. Please try again in a minute",
+          }),
+          {
+            status: 429,
+            headers: {
+              ...corsHeaders,
+            },
+          },
+        );
+      }
+
+      await processContact({
+        id: nanoid(),
+        email,
+        name,
+        message: message || "",
+        databaseID: NOTION_GET_PLAN_DATABASE_ID || "",
+        source: request.nextUrl.searchParams.get("source") || "Unknown",
+      });
+
+      return new Response(
+        JSON.stringify({
+          message: "Success",
+        }),
+        {
+          status: 200,
+          headers: {
+            ...corsHeaders,
+            "X-RateLimit-Limit": limit.toString(),
+            "X-RateLimit-Remaining": remaining.toString(),
+            "X-RateLimit-Reset": reset.toString(),
+          },
+        },
+      );
+    } catch (error) {
+      console.error("Error - api/get-plan", error);
+
+      const statusCode = (error as any).statusCode || 501;
+      const message =
+        (error as any)?.body?.message || "Issue while processing request";
+
+      return new Response(JSON.stringify({ message }), {
+        status: statusCode,
+        headers: {
+          ...corsHeaders,
+        },
+      });
+    }
+  }
+
+  return new Response(null, { status: 400, headers: corsHeaders });
+}

apps/website/astro.config.mjs

@@ -19,7 +19,10 @@ export default defineConfig({
   adapter: vercel({
     imageService: true,
     imagesConfig: {
-      sizes: [320, 480, 578, 640, 720, 800, 940, 1200, 1412, 1536, 1800, 1920],
+      sizes: [
+        320, 480, 578, 640, 720, 800, 940, 960, 1200, 1280, 1412, 1440, 1536,
+        1600, 1800, 1920,
+      ],
       formats: ["image/avif", "image/webp"],
     },
   }),