ProjectsWeb Development
Craftly — AI Creative Marketplace Landing Page
A landing page for Craftly, a creative marketplace that connects brands with digital creators — designers, copywriters, videographers, and developers — with AI-assisted matching, live service search, and a modern animated UI.
My Role
- 01Designed the full landing page visually, from the design tokens (ink, accent, cloud palette and 45px card radius) to the responsive layout.
- 02Built the entire page with Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS v4 configured through @theme tokens in CSS.
- 03Implemented shared search state between the hero search bar and the category cards using a lightweight Zustand-style provider.
- 04Crafted the animated creator marquee with Framer Motion, including pause-on-hover and prefers-reduced-motion support.
- 05Composed all marketing sections: hero, categories, how-it-works, testimonials, pricing, FAQ accordion, CTA, and footer.
- 06Deployed the production build to Vercel with a clean npm run build / npm start workflow.
Features
- 01Hero section with a live search bar and popular keyword chips that instantly filter service cards across the page.
- 02Creator marquee strip that loops continuously, pauses on hover, and disables itself under prefers-reduced-motion.
- 03Service category explorer with chip-based filtering driven by shared search state between components.
- 04Three-step 'How It Works' flow explaining the brief, AI match, and delivery-plus-payment process.
- 05Complete marketing sections: testimonials, three-tier pricing (Basic, Pro Brand, Enterprise), FAQ accordion, final CTA with guarantee, and a full footer.
Impact
- Demonstrates a modern design-token workflow with Tailwind CSS v4, where the theme is declared via @theme tokens directly in CSS without a tailwind.config file.
- Shows component-level state sharing done cleanly with a lightweight search provider instead of prop drilling.
- Delivers a production-quality marketing page experience with meaningful motion that still respects accessibility preferences.
Stack
Next.jsReact 19TypeScriptTailwind CSS v4Framer Motion