Developing the Dr.Acula Landing Page

The Dr.Acula landing page project required creating a sophisticated, high-performance web experience that would effectively showcase our minimalist drug and alcohol tracking mobile application. As co-founder, this project demanded not only advanced technical implementation but also strategic thinking about conversion optimization and global market penetration.

As co-founder of Dr.Acula, I needed to build a landing page that would convert visitors into app users through compelling visual storytelling and seamless user experience. The challenge was to balance sophisticated 3D animations with optimal performance while implementing intelligent region-based App Store routing for our global audience.

My responsibilities encompassed full-stack development, product strategy, performance optimization, advanced animation implementation, and creating a scalable foundation for our future marketing campaigns and business growth. Additionally, I architected and developed backend AI infrastructure that integrates LLM APIs to provide intelligent habit tracking suggestions and personalized insights within the Dr.Acula mobile app, enhancing user engagement through AI-powered recommendations and behavioral analysis.

The project leveraged cutting-edge web technologies to deliver exceptional performance and user engagement across all devices and regions, ensuring our product could compete in the competitive health app market.

Next.js 14 with App Router

Next.js 14's App Router provided the foundation for server-side rendering, dynamic routing, and optimal SEO performance. The implementation included force-dynamic rendering for personalized content delivery.

Example: Dynamic Region Detection with Server-Side Rendering

export const dynamic = "force-dynamic";

const HomePage: React.FC = async () => {
  let appStoreUrl: string;
  let detectedRegion: string;

  try {
    const headersList = headers();
    detectedRegion = await getCountryCodeFromHeaders(headersList);
    appStoreUrl = getAppStoreLinkByRegion(detectedRegion);
    
    console.log(`✅ Region detected: ${detectedRegion}, App Store URL: ${appStoreUrl}`);
  } catch (error) {
    console.warn("⚠️ Region detection failed, using US fallback:", error);
    detectedRegion = "US";
    appStoreUrl = getAppStoreLinkByRegion("US");
  }

  return (
    <VantaDotsBackground>
      <Hero appStoreUrl={appStoreUrl} />
      <Container>
        <Benefits />
        <Stats />
        <CTA appStoreUrl={appStoreUrl} />
      </Container>
    </VantaDotsBackground>
  );
};

Framer Motion for Advanced Animations

Framer Motion enabled sophisticated scroll-based animations and micro-interactions while maintaining accessibility compliance through reduced motion support.

Example: Performance-Optimized Animation System

const createAnimationVariants = (shouldReduceMotion: boolean) => ({
  containerVariants: {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        duration: shouldReduceMotion ? 0.3 : 1.2,
        staggerChildren: shouldReduceMotion ? 0.1 : 0.25,
        ease: [0.25, 0.46, 0.45, 0.94],
      },
    },
  },
  textVariants: {
    hidden: {
      opacity: 0,
      y: shouldReduceMotion ? 10 : 40,
      scale: shouldReduceMotion ? 1 : 0.98,
    },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: {
        duration: shouldReduceMotion ? 0.3 : 0.8,
        type: "spring",
        bounce: shouldReduceMotion ? 0 : 0.25,
      },
    },
  },
});

Three.js and Vanta.js Integration

The implementation of interactive 3D backgrounds required careful optimization and fallback strategies to ensure performance across all devices.

Example: Optimized 3D Background Implementation

const initVanta = async () => {
  try {
    const THREE = await import("three");
    (window as any).THREE = THREE;
    
    const VANTA = await import("vanta/dist/vanta.dots.min.js");
    const vantaModule = VANTA as any;
    
    effect = vantaModule.default({
      el: vantaRef.current,
      THREE: (window as any).THREE,
      backgroundColor: 0xf8fafc,
      color: 0x0099e5,
      color2: 0x304fff,
      size: 2.5,
      spacing: 40,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      scale: 1.0,
      scaleMobile: 0.8,
    });
    
    setVantaEffect(effect);
  } catch (error) {
    console.error("❌ Failed to initialize Vanta:", error);
    setIsVantaSupported(false);
  }
};

Tailwind CSS with Custom Design System

A comprehensive design system was implemented using Tailwind CSS with custom utilities and responsive design tokens.

Example: Advanced Responsive Design System

:root {
  --background: #ffffff;
  --foreground: #171717;
  --primary: #0099e5;
  --secondary: #304fff;
  --primary-accent: #000000;
  --foreground-accent: #454545;
  --hero-background: #f3f3f5;
}

@layer utilities {
  .section-padding {
    @apply py-12 sm:py-16 lg:py-20;
  }
  
  .text-responsive-lg {
    @apply text-lg sm:text-xl lg:text-2xl;
  }
  
  .gap-responsive {
    @apply gap-4 sm:gap-6 lg:gap-8;
  }
}

As co-founder, the development process emphasized not only technical excellence but also business strategy, conversion optimization, and creating a scalable foundation for our startup's growth. A critical component of this foundation involved developing robust backend AI infrastructure to power intelligent features within the mobile application.

Strategic Performance Optimization

Every technical decision was evaluated through the lens of business impact - how animations, loading speeds, and user interactions would affect conversion rates and user acquisition costs.

AI-Powered Backend Architecture

Beyond the frontend experience, I designed and implemented backend services that integrate with LLM APIs to provide intelligent habit tracking suggestions and personalized behavioral insights. This AI infrastructure analyzes user patterns and delivers contextual recommendations, significantly enhancing user retention and engagement metrics. The system architecture ensures scalable AI processing while maintaining data privacy and real-time responsiveness crucial for health-focused applications.

Accessibility and Inclusive Design

Understanding our target audience of health-conscious users, comprehensive accessibility features were non-negotiable, including reduced motion support and WCAG-compliant touch targets.

Example: Accessibility-First Form Implementation

const ContactForm = () => {
  const [formStatus, setFormStatus] = useState<FormStatus>("idle");
  const [isMounted, setIsMounted] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormStatus("submitting");

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });

      if (!response.ok) throw new Error("Failed to submit form");
      
      setFormStatus("success");
      setTimeout(() => {
        setFormData({ name: "", email: "", subject: "", message: "" });
        setFormStatus("idle");
      }, 3000);
    } catch {
      setFormStatus("error");
      setTimeout(() => setFormStatus("idle"), 3000);
    }
  };

  return (
    <motion.form
      variants={inputVariants}
      whileFocus="focus"
      onSubmit={handleSubmit}
      className="space-y-6"
    >
      {/* Form fields with accessibility attributes */}
    </motion.form>
  );
};

The landing page incorporated several advanced features that enhanced user engagement and conversion optimization, directly impacting our startup's growth metrics.

Intelligent Geo-Targeting System

A sophisticated IP-based region detection system automatically routes users to their appropriate App Store, maximizing conversion potential across our global user base.

Example: Advanced Geo-Location API Integration

export async function getCountryCodeFromHeaders(headers: Headers): Promise<string> {
  const ip = extractIPFromHeaders(headers);
  
  if (ip) {
    console.log(`Attempting geo-IP lookup for IP: ${ip}`);
    return await getCountryCode(ip);
  } else {
    console.log("No IP found in headers, using API auto-detection");
    return await getCountryCode();
  }
}

const getCountryCode = async (ip?: string): Promise<string> => {
  try {
    const apiUrl = ip 
      ? `http://ip-api.com/json/${ip}?fields=status,country,countryCode,message`
      : "http://ip-api.com/json/?fields=status,country,countryCode,message";
    
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);
    
    const response = await fetch(apiUrl, {
      signal: controller.signal,
      cache: process.env.NODE_ENV === "production" ? "force-cache" : "no-store",
    });
    
    clearTimeout(timeoutId);
    const data = await response.json();
    
    return data.status === "success" && data.countryCode 
      ? data.countryCode.toUpperCase() 
      : "US";
  } catch (error) {
    return "US";
  }
};

Advanced Scroll-Based Animations

Implemented sophisticated parallax effects and scroll-triggered animations that enhance visual storytelling without compromising performance, crucial for maintaining user engagement and reducing bounce rates.

Server-Side Email Integration

Built a robust contact system using Nodemailer with comprehensive error handling and email template customization to support customer inquiries and business development.

Example: Production-Ready Email API

export async function POST(request: Request) {
  try {
    const data = await request.json();
    const { name, email, subject, message } = data;

    const transporter = nodemailer.createTransporter({
      host: process.env.EMAIL_HOST,
      port: Number(process.env.EMAIL_PORT) || 587,
      secure: process.env.EMAIL_SECURE === "true",
      auth: {
        user: process.env.EMAIL_USER,
        pass: process.env.EMAIL_PASSWORD,
      },
    });

    await transporter.sendMail({
      from: `"Dr-Acula Support" <${process.env.EMAIL_FROM}>`,
      to: process.env.EMAIL_TO,
      replyTo: email,
      subject: `Contact Form: ${subject}`,
      html: `
        <div style="font-family: Arial, sans-serif; max-width: 600px;">
          <h2 style="color: #0099e5;">New Contact Form Submission</h2>
          <p><strong>Name:</strong> ${name}</p>
          <p><strong>Email:</strong> ${email}</p>
          <div style="background: #f9f9f9; padding: 15px; border-radius: 5px;">
            <p><strong>Message:</strong></p>
            <p>${message.replace(/\n/g, "<br>")}</p>
          </div>
        </div>
      `,
    });

    return NextResponse.json({ success: true }, { status: 200 });
  } catch (error) {
    return NextResponse.json({ success: false }, { status: 500 });
  }
}

Comprehensive SEO and Metadata System

Implemented dynamic metadata generation with Open Graph and Twitter Card optimization for maximum social media engagement, essential for organic growth and viral marketing potential.

Building the Dr.Acula landing page as co-founder provided a unique perspective that combined technical leadership with strategic business thinking. The challenge of creating a web experience that would drive meaningful conversions for our health-focused mobile app required balancing cutting-edge technology with user psychology and market positioning.

Successfully implementing features like intelligent geo-targeting, advanced 3D animations, and accessibility-compliant interactions while maintaining sub-second load times was crucial for our startup's success. Every technical decision directly impacted our user acquisition costs and conversion rates.

This project represents the intersection of technical excellence and entrepreneurial vision - demonstrating my ability to deliver enterprise-grade solutions while maintaining the strategic perspective necessary for startup leadership and product success.