fix: minor fixes

Author: 0xdevcollins

app/(landing)/about/page.tsx

@@ -24,8 +24,8 @@ const AboutPage = () => {
         <Timeline />
         <OurTeam />
         <Partners />
-        <TestimonialsSection testimonials={testimonials} />
       </div>
+      <TestimonialsSection testimonials={testimonials} />
     </section>
   );
 };

app/api/newsletter/subscribe/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+
+    const backendUrl =
+      process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';
+
+    const response = await fetch(`${backendUrl}/waitlist/subscribe`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+
+        ...(request.headers.get('user-agent') && {
+          'User-Agent': request.headers.get('user-agent')!,
+        }),
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      return NextResponse.json(
+        {
+          message: errorData.message || 'Failed to subscribe to waitlist',
+          status: response.status,
+        },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data, { status: 200 });
+  } catch {
+    return NextResponse.json(
+      {
+        message: 'Internal server error',
+        status: 500,
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/waitlist/subscribe/route.ts

@@ -7,7 +7,7 @@ export async function POST(request: NextRequest) {
     const backendUrl =
       process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';
 
-    const response = await fetch(`${backendUrl}/waitlist/subscribe`, {
+    const response = await fetch(`${backendUrl}/newsletter/subscribe`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

components/overview/Newsletter.tsx

@@ -25,7 +25,7 @@ import { BoundlessButton } from '../buttons';
 import { Input } from '../ui/input';
 import gsap from 'gsap';
 import { useGSAP } from '@gsap/react';
-import { addToWaitlist } from '@/lib/api/waitlist';
+import { newsletterSubscribe } from '@/lib/api/waitlist';
 import { Button } from '../ui/button';
 
 const formSchema = z.object({
@@ -84,18 +84,9 @@ const Newsletter = ({
     setIsSubmitting(true);
 
     try {
-      // Split name into firstName and lastName, handling edge cases
-      const nameParts = values.name
-        .trim()
-        .split(' ')
-        .filter(part => part.length > 0);
-      const firstName = nameParts[0] || '';
-      const lastName = nameParts.slice(1).join(' ') || '';
-
-      await addToWaitlist({
+      await newsletterSubscribe({
         email: values.email,
-        firstName,
-        lastName,
+        name: values.name,
       });
     } catch {
       setError('Failed to submit form. Please try again.');

components/testimonials/TestimonialsSection.tsx

@@ -7,6 +7,7 @@ import { BoundlessButton } from '../buttons';
 import { gsap } from 'gsap';
 import TestimonialCard from './TestimonialCard';
 import Image from 'next/image';
+import Newsletter from '../overview/Newsletter';
 
 type TestimonialsWallProps = {
   testimonials: Testimonial[];
@@ -19,7 +20,7 @@ export default function TestimonialsSection({
   const columnRefs = useRef<HTMLDivElement[]>([]);
   const animations = useRef<gsap.core.Tween[]>([]);
   const [numColumns, setNumColumns] = useState<number>(4);
-
+  const [open, setOpen] = useState(false);
   useEffect(() => {
     animations.current.forEach(anim => anim.kill());
     animations.current = [];
@@ -48,10 +49,16 @@ export default function TestimonialsSection({
       });
       wrapper.appendChild(cloneContainer);
 
-      gsap.set(wrapper, { y: 0, force3D: true, willChange: 'transform' });
+      const isEvenColumn = index % 2 === 0;
+      const initialY = isEvenColumn ? 0 : -totalHeight;
+      gsap.set(wrapper, {
+        y: initialY,
+        force3D: true,
+        willChange: 'transform',
+      });
 
       const anim = gsap.to(wrapper, {
-        y: -totalHeight,
+        y: isEvenColumn ? -totalHeight : 0,
         duration: 60,
         ease: 'none',
         repeat: -1,
@@ -205,7 +212,7 @@ export default function TestimonialsSection({
             </div>
           </div>
 
-          <div className='absolute lg:bottom-[60px] bottom-14  lg:mt-0 mt-20 left-1/2 -translate-x-1/2 md:max-h-[212px] w-[90%] max-w-6xl bg-primary rounded-xl shadow-lg p-8 md:p-12 text-black z-40'>
+          <div className='absolute lg:bottom-[60px] bottom-14  lg:mt-0 mt-20 left-1/2 -translate-x-1/2 md:max-h-[212px] w-full max-w-[90vw] bg-primary rounded-xl shadow-lg p-8 md:p-12 text-black z-40'>
             <div className='flex flex-col md:flex-row items-center md:justify-between gap-6'>
               <div>
                 <h2 className='text-3xl lg:text-5xl font-medium tracking-[-1.92px] leading-[100%] md:text-left text-center mb-2'>
@@ -233,6 +240,7 @@ export default function TestimonialsSection({
                     fullWidth
                     className='bg-transparent border border-black'
                     aria-label='Subscribe for updates'
+                    onClick={() => setOpen(true)}
                   >
                     Subscribe for Updates
                   </BoundlessButton>
@@ -242,6 +250,7 @@ export default function TestimonialsSection({
           </div>
         </div>
       </div>
+      <Newsletter open={open} onOpenChange={setOpen} />
     </section>
   );
 }

lib/api/waitlist.ts

@@ -7,8 +7,12 @@ type AddToWaitlistRequest = {
   tags?: string[];
 };
 
+type NewsletterSubscribeRequest = {
+  email: string;
+  name: string;
+};
+
 export const addToWaitlist = async (data: AddToWaitlistRequest) => {
-  // Use the local Next.js API route instead of external backend
   const res = await fetch('/api/waitlist/subscribe', {
     method: 'POST',
     headers: {
@@ -24,3 +28,20 @@ export const addToWaitlist = async (data: AddToWaitlistRequest) => {
 
   return res.json();
 };
+
+export const newsletterSubscribe = async (data: NewsletterSubscribeRequest) => {
+  const res = await fetch('/api/newsletter/subscribe', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  });
+
+  if (!res.ok) {
+    const errorData = await res.json().catch(() => ({}));
+    throw new Error(errorData.message || 'Failed to subscribe to newsletter');
+  }
+
+  return res.json();
+};