Modern Creative Agency Landing Page
A bold, motion-rich reimagining of the Samar creative agency template — rebuilt from scratch in React with a refined design system, premium typography, and rich Framer Motion animations throughout every section.
This project is a fully responsive, single-page marketing website
inspired by the original Samar HTML template (samar.dexignzone.com),
recreated with a modern front-end stack and elevated visual design.
While it preserves the structure and intent of the original layout,
every section has been redesigned with stronger typography, a warmer
and more distinctive color palette, and a heavy emphasis on motion
to create a premium, agency-grade feel.
The design system is built around a coral, peach, cream, and deep
navy (“ink”) palette, paired with Fraunces (display serif) and
Plus Jakarta Sans (body sans-serif) for an editorial, high-end
character. All colors are managed through HSL semantic tokens in
index.css and tailwind.config.ts — no hardcoded values — making
the entire theme easy to adjust globally.
Sections included:
• Sticky Navbar with scroll-depth detection and mobile menu
• Hero with staggered text reveals, floating UI cards, and an
animated SVG text-path seal
• Logo marquee of trusted brands
• Services grid with hover interactions
• About section with team imagery
• Stats counters animated on scroll (useInView)
• 3-step interactive Process section with blob backgrounds
• Work / portfolio showcase
• Pricing with Monthly / Yearly toggle
• Testimonials carousel
• Blog highlights
• Footer
• Floating glassmorphic “Demo Site” popup with developer
branding (pabitra.net & Brown Fox IT)
Motion is powered by Framer Motion: spring entrances, scroll-
triggered reveals, idle floating loops, hover micro-interactions,
and smooth page-level transitions. The result is a landing page
that feels alive without being noisy.
This is a DEMO project built purely for design and development
demonstration purposes. It is not affiliated with the original
Samar brand. The backend (forms, CMS, authentication, etc.) is
intentionally not implemented in this phase and will be added
in a future iteration.
Tech stack:
• React 18 + Vite 5 + TypeScript
• Tailwind CSS v3 with custom design tokens
• shadcn/ui component primitives
• Framer Motion for all animations
• Lucide icons
• AI-generated demo imagery
Developed by:
• pabitra.net — https://pabitra.net
• Brown Fox IT — https://brownfoxit.com
