clever-lead

byHarrish John

# Project: Harrish John, Performance Marketing Landing Page ## Overview A single page, personal brand website for Harrish John, a freelance performance marketer based in Chennai. The goal is to convert visiting brand owners and agencies into inbound leads who message or book a call. The tone is bold, energetic, and proof driven, built around real campaign numbers, not generic marketing speak. ## Tech Stack Use your best judgment for a modern, production ready stack. Output should be a single responsive page (plain HTML/CSS/JS is fine, or React if that is your default). No backend required except a working contact form submission (use a form service like Formspree, or a mailto fallback if no backend is available). ## Brand & Design System - Style direction: Bold and energetic performance marketer aesthetic. High contrast, confident, a little punchy, feels like someone who runs winning ad campaigns, not a soft corporate freelancer page. - Primary color: Electric orange or coral (#FF4B2B or similar high energy warm tone) used for CTAs, highlights, and key numbers - Secondary/base: Near black background sections (#0D0D0D or #111111) paired with clean white/off white (#F5F5F5) sections, alternating for rhythm - Accent: One supporting color for charts/badges, a lime or electric green (#B6FF3C) works well against the black - Font, Headings: A bold, condensed, high impact sans serif (example: Space Grotesk, Archivo Black, or similar). Big oversized numbers for stats. - Font, Body: A clean readable sans serif (example: Inter or Manrope) - Tone of copy: Confident, direct, results first. Lead with numbers (cost per lead, followers gained, leads generated), not adjectives. ## Pages to Build This is a single scrolling landing page. Build the following sections in this exact order. Complete each section fully before moving to the next. ### Section 1: Hero - Full viewport height, dark background - Large bold headline: "I turn ad spend into leads." (or similar, keep it punchy, first person, results focused) - Subheadline: One line stating who he is, "Performance Marketer, Chennai. Meta Ads, Google Ads, and organic growth for education, wellness, and D2C brands." - Two CTA buttons: "Book a Free Strategy Call" (primary, filled, accent color) and "See My Work" (secondary, outline, scrolls to case studies section) - Small trust line under the buttons: "Managing 300+ leads generated, cost per lead as low as ₹88" ### Section 2: Proof Bar (Stats Strip) Immediately after the hero, a horizontal strip with 4 large animated counters (count up on scroll into view): - "300+" Leads Generated (CADD Centre) - "₹88" Lowest Cost Per Lead - "500K+" Impressions Per Cycle - "17K+" Organic Followers Grown (She-fit + Petz Hub combined) ### Section 3: What I Do Three or four service cards in a row (stack on mobile): - Meta Ads & Lead Generation: campaign strategy, targeting, budget optimization, A/B testing - Content & Creative: script writing, video shooting and editing (CapCut), organic content strategy - SEO: on page and off page SEO, audits, blog optimization, link building - AI Assisted Marketing & Automation: using Claude, n8n, and Antigravity to speed up research, reporting, and campaign builds Each card has an icon, a short title, and 2 to 3 lines describing what he delivers, written in first person confident tone. ### Section 4: Case Studies (Results) This is the core conversion section. Build it as 4 case study cards, each with a client name, industry tag, and the specific result. Use real data below, do not invent numbers: 1. CADD Centre, Simmakkal (Madurai), Education, CAD/AEC/IT training. Generated 300+ leads with cost per lead as low as ₹88. Ran awareness campaigns reaching 500K+ impressions per cycle across AutoCAD, Revit MEP, Python AI, and Mechanical Design courses. 2. She-fit (GetFitWithShefitt), Wellness, women's weight loss program. Achieved ₹100 cost per lead over a 2 month Meta Ads campaign. Grew Instagram organically to 10,000+ followers. 3. Petz Hub, Pet Care, D2C/social growth. Grew Instagram to 7,000+ followers with zero paid promotion. Drove 35+ product sales in 2 months through organic content alone. 4. Kaira Technologies, Digital Marketing Agency (client work). Generated 40 leads at ₹110 cost per lead. Each card should show the result number in large bold text first, then the story in one or two lines below it. Add a subtle hover effect that lifts the card slightly. ### Section 5: Tools I Work With A simple horizontal row or grid of tool logos/badges (text based is fine if logos are not available): Meta Ads Manager, Google Ads, Google Analytics, WordPress, Canva, CapCut, n8n, Apify, Antigravity, Claude. Label this section "Powered By" or "My Stack". ### Section 6: Background / Credibility A short two column section: - Left: A brief bio paragraph in first person. Mention he is pursuing an MBA in Digital Marketing at Woolf University via Digital Scholar, holds a B.Com in Computer Applications from The American College Madurai, and is certified in Search Engine Marketing, Instagram Management, Social Media Management, AI Content, and WordPress Management (all Digital Scholar, 2025). - Right: A simple timeline or badge list of the 5 certifications with their names. ### Section 7: Final CTA Full width, dark background, high contrast section. - Headline: "Ready to lower your cost per lead?" (or similar, direct, benefit led) - Subtext: One line inviting a conversation, no pressure tone. - Contact form with fields: Name, Email, Company/Brand Name, What do you need help with (dropdown: Meta Ads, Google Ads, SEO, Content/Organic Growth, Something else), Message (optional) - Also show direct contact: email harrishji2404@gmail.com, phone 7339144261, and a LinkedIn button linking to linkedin.com/in/harrishjohn ### Section 8: Footer - Simple footer with name, location (Chennai, Tamil Nadu), copyright line, and small links to email, phone, and LinkedIn again. ## Interactions & Buttons Define every interactive element explicitly: - **"Book a Free Strategy Call" button (hero)**: Scrolls smoothly to the contact form in Section 7 and auto focuses the Name field. - **"See My Work" button (hero)**: Scrolls smoothly to Section 4, Case Studies. - **Stat counters (Section 2)**: Numbers animate counting up from 0 to their final value when the section scrolls into view. Animation runs once per page load, does not replay on scroll up and down repeatedly. - **Case study cards (Section 4)**: On hover (desktop) or tap (mobile), the card lifts slightly with a shadow and the accent color border appears. Cards are not clickable links, they are display only. - **Contact form (Section 7)**: On submit, validate that Name, Email, and "What do you need help with" are filled. Email must be a valid email format. On successful submit, show a success message in place of the form: "Thanks, I will get back to you within 24 hours." If using a form backend, wire it to send an email notification. If no backend is available, fall back to opening the user's email client with a pre filled mailto link to harrishji2404@gmail.com. - **Navigation (if a sticky nav is added)**: Sticky top nav appears after scrolling past the hero, with links to Services, Work, and Contact, each smooth scrolling to their section. Highlight the active section link as the user scrolls. - **LinkedIn buttons**: Open linkedin.com/in/harrishjohn in a new tab. ## Global Rules - Every section must be fully responsive (mobile, tablet, desktop). On mobile, stack all multi column layouts vertically, and reduce hero headline size so it never wraps awkwardly. - Use the real content and numbers provided above, do not use lorem ipsum or placeholder stats. - Keep copy punchy and short. Avoid generic marketing filler like "passionate about results" or "synergy". Every claim should be backed by a real number from above. - Do not use em dashes anywhere in any copy on the page. Use commas, periods, or separate sentences instead. - Use smooth scroll behavior for all in page navigation and CTA links. - Add subtle scroll triggered fade in or slide up animations on each section as it enters the viewport, keep it tasteful and fast, not distracting. ## Do Not - Do not skip any section listed above - Do not leave the contact form non functional - Do not use stock photography of generic "business people", if imagery is needed use abstract shapes, gradients, or icon based illustration instead - Do not invent case study numbers beyond what is listed above - Do not use em dashes in any text on the page