feat: enhance HeroSection and CTA components with project estimator link, update login page styles, and improve contact form prefill functionality

Author: infinitedim

src/app/(public)/HeroSection.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { Heading, ScrollDownButton } from "@/components";
 import { SlideUp } from "@/components/animations/SlideUp";
 import { FadeIn } from "@/components/animations/FadeIn";
@@ -52,18 +53,27 @@ export function HeroSection() {
             We design and build high-performance custom websites to grow your
             business online.
           </p>
-          <SmoothScrollLink
-            href="#cta"
-            className="group text-black-1 hover:text-accent inline-flex items-center gap-x-2 text-sm font-medium transition-colors duration-300"
-          >
-            <span className="relative">
-              Get in touch
-              <span className="bg-accent absolute bottom-0 left-0 h-[1px] w-full origin-left scale-x-0 transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-x-100" />
-            </span>
-            <span className="text-lg">→</span>
-          </SmoothScrollLink>
+          <div className="flex flex-wrap items-center gap-6">
+            <Link
+              href="/estimator"
+              className="hover:text-white inline-flex items-center border border-black-1/20 px-8 py-3 text-sm font-medium tracking-[0.15em] text-black uppercase transition-all duration-300 hover:bg-black-1"
+            >
+              Estimate Project
+            </Link>
+            <SmoothScrollLink
+              href="#cta"
+              className="group text-zinc-500 hover:text-black-1 inline-flex items-center gap-x-2 text-sm font-medium transition-colors duration-300"
+            >
+              <span className="relative">
+                Get in touch
+                <span className="bg-accent absolute bottom-0 left-0 h-[1px] w-full origin-left scale-x-0 transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-x-100" />
+              </span>
+              <span className="text-lg">→</span>
+            </SmoothScrollLink>
+          </div>
         </SlideUp>
 
+
         {/* Scroll indicator */}
         <FadeIn
           delay={1.5}

src/app/(public)/estimator/page.tsx

@@ -0,0 +1,27 @@
+import ProjectEstimator from "@/components/organisms/estimator/ProjectEstimator";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Interactive Project Estimator | Devix",
+  description:
+    "Answer a few questions to get an instant cost estimation for your E-Commerce, Web App, or Company Profile project.",
+  alternates: {
+    canonical: "/estimator",
+  },
+};
+
+export default function EstimatorPage() {
+  return (
+    <div className="grain-overlay relative min-h-screen bg-white text-black-1">
+      {/* Decorative Glows */}
+      <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
+        <div className="absolute -top-[10%] left-[10%] h-[600px] w-[600px] rounded-full bg-accent/10 blur-[150px]" />
+        <div className="absolute top-[30%] right-[5%] h-[500px] w-[500px] rounded-full bg-blue-500/5 blur-[120px]" />
+      </div>
+
+      <div className="relative z-10 flex flex-col pt-28 pb-16 md:pt-36 md:pb-24">
+        <ProjectEstimator />
+      </div>
+    </div>
+  );
+}

src/app/admin/login/page.tsx

@@ -2,6 +2,7 @@
 
 import { Suspense, useState, useTransition, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
 import { loginAdmin } from "@/actions/admin/auth";
 function LoginContent() {
   const router = useRouter();
@@ -53,20 +54,29 @@ function LoginContent() {
   };
 
   return (
-    <div className="relative w-full max-w-md border border-zinc-800 bg-[#0F0F0F] p-8 transition-all duration-300 md:p-12">
+    <div className="relative w-full max-w-md border border-zinc-200 bg-white p-8 pt-16 transition-all duration-300 md:p-12 md:pt-16 shadow-sm">
+      {/* Back to Home Button */}
+      <Link
+        href="/"
+        className="group absolute top-6 left-6 inline-flex items-center gap-x-1.5 text-xs text-zinc-500 hover:text-black-1 transition-colors duration-300"
+      >
+        <span className="text-[14px] font-medium transition-transform duration-300 group-hover:-translate-x-0.5">←</span>
+        <span>Back to Site</span>
+      </Link>
+
       {/* Header */}
       <div className="mb-8 text-center">
         <span className="mb-3 block text-[11px] font-medium tracking-[0.25em] text-zinc-500 uppercase">
           Devix Operations
         </span>
-        <h1 className="font-display text-2xl font-light tracking-wide text-zinc-100 md:text-3xl">
+        <h1 className="font-display text-2xl font-light tracking-wide text-zinc-900 md:text-3xl">
           Control Panel Login
         </h1>
       </div>
 
       {/* Error Alert */}
       {errorMessage && (
-        <div className="mb-6 border-l border-red-500 bg-red-950/20 p-4 font-sans text-xs leading-relaxed text-red-400">
+        <div className="mb-6 border-l border-red-500 bg-red-50 p-4 font-sans text-xs leading-relaxed text-red-600">
           {errorMessage}
         </div>
       )}
@@ -79,7 +89,7 @@ function LoginContent() {
         <div className="space-y-2">
           <label
             htmlFor="email"
-            className="block text-[11px] font-medium tracking-wider text-zinc-400 uppercase"
+            className="block text-[11px] font-medium tracking-wider text-zinc-500 uppercase"
           >
             Email Address
           </label>
@@ -91,14 +101,14 @@ function LoginContent() {
             disabled={isPending}
             placeholder="name@company.com"
             required
-            className="w-full rounded-none border border-zinc-800 bg-[#141414] px-4 py-3 text-sm text-white placeholder-zinc-600 transition-colors duration-300 focus:border-[#C8A96E] focus:outline-none"
+            className="w-full rounded-none border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-900 placeholder-zinc-400 transition-all duration-300 focus:border-[#C8A96E] focus:bg-white focus:outline-none"
           />
         </div>
 
         <div className="space-y-2">
           <label
             htmlFor="password"
-            className="block text-[11px] font-medium tracking-wider text-zinc-400 uppercase"
+            className="block text-[11px] font-medium tracking-wider text-zinc-500 uppercase"
           >
             Password
           </label>
@@ -110,14 +120,14 @@ function LoginContent() {
             disabled={isPending}
             placeholder="••••••••"
             required
-            className="w-full rounded-none border border-zinc-800 bg-[#141414] px-4 py-3 text-sm text-white placeholder-zinc-600 transition-colors duration-300 focus:border-[#C8A96E] focus:outline-none"
+            className="w-full rounded-none border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-900 placeholder-zinc-400 transition-all duration-300 focus:border-[#C8A96E] focus:bg-white focus:outline-none"
           />
         </div>
 
         <button
           type="submit"
           disabled={isPending}
-          className="flex w-full items-center justify-center gap-2 bg-[#C8A96E] py-4 font-sans text-xs font-medium tracking-[0.2em] text-black uppercase transition-colors duration-300 hover:bg-[#B6965C] disabled:bg-zinc-800 disabled:text-zinc-500"
+          className="flex w-full items-center justify-center gap-2 bg-[#C8A96E] py-4 font-sans text-xs font-medium tracking-[0.2em] text-black uppercase transition-colors duration-300 hover:bg-[#B6965C] disabled:bg-zinc-100 disabled:text-zinc-400"
         >
           {isPending ? "Verifying..." : "Authenticate"}
         </button>
@@ -128,12 +138,12 @@ function LoginContent() {
 
 export default function AdminLoginPage() {
   return (
-    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-[#0A0A0A] px-6 text-white selection:bg-[#C8A96E]/30 selection:text-white">
+    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-zinc-50 px-6 text-zinc-900 selection:bg-[#C8A96E]/30 selection:text-zinc-900">
       {/* Background Decorative Grain/Gradient */}
-      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-zinc-700 via-zinc-900 to-black opacity-20" />
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-zinc-200 via-zinc-100 to-white opacity-40" />
       <Suspense
         fallback={
-          <div className="text-xs tracking-widest text-zinc-500 uppercase">
+          <div className="text-xs tracking-widest text-zinc-400 uppercase">
             Loading interface...
           </div>
         }
@@ -143,3 +153,4 @@ export default function AdminLoginPage() {
     </div>
   );
 }
+

src/components/molecules/CTA.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { Heading } from "@/components/atoms";
 import { SlideUp } from "@/components/animations/SlideUp";
 import { FadeIn } from "@/components/animations/FadeIn";
@@ -57,14 +58,27 @@ export default function CTA() {
           delay={0.3}
           duration={0.6}
         >
-          <SmoothScrollLink
-            href="#contact"
-            className="hover:text-black-1 inline-flex items-center border border-white/30 px-10 py-4 text-sm font-medium tracking-[0.15em] text-white uppercase transition-all duration-400 hover:bg-white"
-          >
-            Contact us
-          </SmoothScrollLink>
+          <div className="flex flex-wrap items-center justify-center gap-6">
+            <Link
+              href="/estimator"
+              className="hover:text-black-1 inline-flex items-center border border-white/30 px-10 py-4 text-sm font-medium tracking-[0.15em] text-white uppercase transition-all duration-400 hover:bg-white"
+            >
+              Estimate Project
+            </Link>
+            <SmoothScrollLink
+              href="#contact"
+              className="group inline-flex items-center gap-x-2 text-sm font-medium text-zinc-400 transition-colors duration-300 hover:text-white"
+            >
+              <span className="relative">
+                Contact us
+                <span className="bg-accent absolute bottom-0 left-0 h-[1px] w-full origin-left scale-x-0 transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-x-100" />
+              </span>
+              <span className="text-lg">→</span>
+            </SmoothScrollLink>
+          </div>
         </FadeIn>
       </div>
     </section>
   );
 }
+

src/components/molecules/ContactForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useTransition } from "react";
+import { useState, useTransition, useEffect } from "react";
 import { submitContactForm } from "@/actions/contact";
 import { m, AnimatePresence } from "framer-motion";
 import { Loader2, Check } from "lucide-react";
@@ -13,6 +13,23 @@ export function ContactForm() {
   const [success, setSuccess] = useState(false);
   const [isPending, startTransition] = useTransition();
 
+  useEffect(() => {
+    // Safely parse URL params on client mount to prefill form from estimator
+    if (typeof window !== "undefined") {
+      const params = new URLSearchParams(window.location.search);
+      const type = params.get("type") || "Not specified";
+      const scope = params.get("scope") || "Not specified";
+      const complexity = params.get("complexity") || "Not specified";
+      const timeline = params.get("timeline") || "Not specified";
+      const budget = params.get("budget");
+
+      if (type !== "Not specified" || budget) {
+        const prefilledMessage = `Hi Devix Team,\n\nI would like to inquire about a new project based on my estimator results:\n\n- Project Type: ${type}\n- Scope: ${scope}\n- Complexity: ${complexity}\n- Timeline: ${timeline}\n- Estimated Budget: ${budget || "Not specified"}\n\nHere are some additional details about my project: `;
+        setMessage(prefilledMessage);
+      }
+    }
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setErrorMsg("");

src/components/molecules/estimator/StepComplexity.tsx

@@ -0,0 +1,91 @@
+import type { EstimatorState, ProjectComplexity } from "@/types/estimator";
+import { LayoutTemplate, Sparkles, Gem } from "lucide-react";
+import type { ReactNode } from "react";
+
+interface StepComplexityProps {
+  state: EstimatorState;
+  updateState: (updates: Partial<EstimatorState>) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+const COMPLEXITY_OPTIONS: { id: ProjectComplexity; label: string; icon: ReactNode; description: string }[] = [
+  {
+    id: "basic",
+    label: "Basic",
+    icon: <LayoutTemplate className="h-8 w-8" />,
+    description: "Clean, minimal design with standard components and fast loading times.",
+  },
+  {
+    id: "standard",
+    label: "Standard",
+    icon: <Sparkles className="h-8 w-8" />,
+    description: "Modern design with smooth transitions and engaging micro-interactions.",
+  },
+  {
+    id: "premium",
+    label: "Premium",
+    icon: <Gem className="h-8 w-8" />,
+    description: "Award-winning level design, complex 3D animations, and bespoke UI.",
+  },
+];
+
+export function StepComplexity({ state, updateState, onNext, onBack }: StepComplexityProps) {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="mb-8">
+        <h2 className="text-2xl font-light text-zinc-900">What level of design & animation?</h2>
+        <p className="mt-2 text-zinc-500">Choose the complexity of the user interface and animations.</p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-3 mb-8">
+        {COMPLEXITY_OPTIONS.map((option) => {
+          const isSelected = state.complexity === option.id;
+          return (
+            <button
+              key={option.id}
+              onClick={() => updateState({ complexity: option.id })}
+              className={`group relative flex flex-col items-start rounded-xl border p-6 text-left transition-all duration-300 ${
+                isSelected
+                  ? "border-accent bg-accent/10 shadow-[0_0_20px_rgba(var(--color-accent),0.05)]"
+                  : "border-zinc-200 bg-white hover:border-zinc-300 hover:bg-zinc-50"
+              }`}
+            >
+              <div className={`mb-4 rounded-lg p-3 transition-colors ${isSelected ? "bg-accent text-white" : "bg-zinc-100 text-zinc-500 group-hover:text-zinc-700"}`}>
+                {option.icon}
+              </div>
+              <h3 className={`text-lg font-medium ${isSelected ? "text-accent" : "text-zinc-900"}`}>
+                {option.label}
+              </h3>
+              <p className="mt-2 text-sm text-zinc-500 leading-relaxed">
+                {option.description}
+              </p>
+              
+              {isSelected && (
+                <div className="absolute top-4 right-4 h-3 w-3 rounded-full bg-accent animate-pulse" />
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="mt-auto flex justify-between">
+        <button
+          onClick={onBack}
+          className="group relative inline-flex items-center gap-x-2 rounded-full border border-zinc-200 bg-transparent px-8 py-3 text-sm font-medium text-zinc-600 transition-colors hover:bg-zinc-50 hover:text-black"
+        >
+          <span className="transition-transform duration-300 group-hover:-translate-x-1">←</span>
+          <span>Back</span>
+        </button>
+        <button
+          onClick={onNext}
+          disabled={!state.complexity}
+          className="group relative inline-flex items-center gap-x-2 rounded-full bg-black px-8 py-3 text-sm font-medium text-white transition-transform disabled:opacity-50 disabled:cursor-not-allowed hover:scale-105 active:scale-95 hover:bg-zinc-800"
+        >
+          <span>Continue</span>
+          <span className="transition-transform duration-300 group-hover:translate-x-1">→</span>
+        </button>
+      </div>
+    </div>
+  );
+}