orbit-instructions

As a user, I want to view the Home page (The Mark) so that I can explore KRAM Creative's hero, brand statement, agency snapshot, services teaser, process teaser, client strip, and footer CTA. Implement based on the existing 'The Mark (v2)' JSX design. Includes: animated KRAM letter reveal (K→R→A→M with meanings), dual CTA buttons ('Start Your Sequence →' linking to Let's Begin, 'See How We Work ↓' scrolling to process), full-width dark brand statement strip, stats row (8+ Services, 5+ Happy Clients, 1.5 Yrs, ∞ Ideas), services teaser grid (8 services), sequence step strip (01–04), client names strip, and footer CTA section.

As a user, I want to view the Our Story page so that I can learn about KRAM Creative's origins, brand philosophy, the four-layer meaning of KRAM, the founder Aashika Jain (with photo), and the mission & vision. Implement based on the existing 'Our Story (v1)' JSX design. Includes: hero section with headline and sub, four-layer name meaning (Hindi root, strategic blueprint K/R/A/M, reverse mark, family), founder section with photo placeholder and bio, brand philosophy (Clarity, Creativity, Consistency), and mission & vision block.

As a user, I want to view The Craft (Services) page so that I can browse all eight KRAM services organized under the K·R·A·M architecture phases. Implement based on the existing 'The Craft (v1)' JSX design. Includes: hero section, KRAM service architecture diagram (K=Knowledge→foundation, R=Reach→amplify, A=Acquire→convert, M=Multiply→scale), and individual service cards for all 8 services (Branding & Packaging Design, Web Development & UI/UX, Social Media Management, Influencer & UGC Marketing, Campaign & Product Shoots, Performance Marketing, Custom Invite Design, E-commerce Marketing) each with phase tag, headline, and description.

As a user, I want to view The Sequence (Work Process) page so that I can understand KRAM's step-by-step brand growth process. Implement based on the existing 'The Sequence (v1)' JSX design. Includes: hero section, detailed breakdown of the four phases (01 Knowledge, 02 Reach, 03 Acquire, 04 Multiply) with descriptions of what happens in each phase, visual process flow, and CTA linking to Let's Begin.

As a user, I want to view the Our Work (Clients) page so that I can browse KRAM's client portfolio and verify credibility. Implement based on the existing 'Our Work (v1)' JSX design. Includes: hero section, client showcase cards or grid (Cyber Shoppe, Saaj, The Gingum Club, Next Artha, Digitrades), any case study or result highlights, and CTA linking to Let's Begin.

As a user, I want to view and use the Let's Begin (Contact) page so that I can submit an inquiry or book a consultation with KRAM Creative. Implement based on the existing 'Let's Begin (v1)' JSX design. Includes: hero section, inquiry/contact form (name, business, service interest, message fields), consultation booking option, contact details (kramcreative.in, kramcreative@gmail.com, +91 93588 82677), and confirmation/success state after submission.

As a user, I want to experience smooth animations and micro-interactions across all pages so that the site feels premium and aligned with the KRAM 'sequence' philosophy. Includes: fade-in/scroll-triggered reveals, the KRAM letter-by-letter hero animation on The Mark page, sequential step animations on The Sequence page, hover effects on service cards and CTA buttons, smooth page transitions, and any parallax or entrance effects referenced in the design files.

As a user, I want the Let's Begin contact form to submit my inquiry to the backend API so that my message is received and I get a confirmation. Wire the frontend form on the Let's Begin page to the backend contact form API, handle loading/success/error states, and display appropriate user feedback after submission.

As a user, I want the KRAM Creative website to be fully responsive and consistent across devices and browsers so that any visitor has a great experience. Test all 6 pages (The Mark, Our Story, The Craft, The Sequence, Our Work, Let's Begin) on mobile, tablet, and desktop breakpoints. Verify typography, spacing, animations, and color fidelity on Chrome, Safari, and Firefox. Log and fix any visual regressions.