<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sujith Kutty — Official Summit Brochure</title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet" /> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --gold: #C9A84C; --gold-light: #E8C97A; --gold-dim: #7A6230; --ink: #0E0E0E; --ink-soft: #1C1A17; --paper: #F5F0E8; --paper-warm: #EDE6D6; --rule: #C9A84C44; --accent-red: #8B2020; --text-body: #2A2520; --text-muted: #6B6055; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--text-body); font-family: 'DM Sans', sans-serif; font-weight: 400; line-height: 1.6; min-height: 100vh; } /* COVER */ .cover { background: var(--ink); color: var(--paper); min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; position: relative; overflow: hidden; } .cover::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 79px, #C9A84C18 80px), repeating-linear-gradient(0deg, transparent, transparent 79px, #C9A84C18 80px); pointer-events: none; } .cover::after { content: ''; position: absolute; bottom: -120px; right: -120px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, #C9A84C22 0%, transparent 70%); pointer-events: none; } .cover-header { border-bottom: 1px solid #C9A84C44; padding: 20px 48px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; animation: fadeDown 0.8s ease both; } .org-badge { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; } .edition-badge { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; } .cover-body { display: flex; flex-direction: column; justify-content: center; padding: 64px 48px; position: relative; z-index: 2; } .event-type { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.35em; color: var(--gold); text-transform: uppercase; margin-bottom: 24px; animation: fadeUp 0.8s 0.2s ease both; } .event-type::before { content: '▶ '; color: var(--gold-dim); } .cover-title { font-family: 'Playfair Display', serif; font-size: clamp(52px, 8vw, 96px); font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; color: var(--paper); margin-bottom: 8px; animation: fadeUp 0.8s 0.35s ease both; } .cover-title span { color: var(--gold); font-style: italic; } .cover-subtitle { font-family: 'Playfair Display', serif; font-size: clamp(22px, 3.5vw, 38px); font-weight: 400; font-style: italic; color: #C9A84Caa; margin-bottom: 48px; animation: fadeUp 0.8s 0.5s ease both; } .cover-meta { display: flex; gap: 40px; flex-wrap: wrap; animation: fadeUp 0.8s 0.65s ease both; } .meta-item { display: flex; flex-direction: column; gap: 4px; } .meta-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--gold-dim); text-transform: uppercase; } .meta-value { font-size: 14px; color: var(--paper); font-weight: 500; } .cover-footer { border-top: 1px solid #C9A84C44; padding: 20px 48px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; animation: fadeUp 0.8s 0.8s ease both; } .cover-contacts { display: flex; gap: 32px; } .cover-contact { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); } .cover-contact a { color: var(--gold); text-decoration: none; } .scroll-hint { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold-dim); letter-spacing: 0.1em; animation: pulse 2s ease-in-out infinite; } /* SECTIONS */ .section { max-width: 960px; margin: 0 auto; padding: 80px 48px; opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .section.visible { opacity: 1; transform: translateY(0); } .section-divider { border: none; border-top: 1px solid var(--rule); margin: 0 48px; } .section-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.35em; color: var(--gold); text-transform: uppercase; margin-bottom: 32px; display: flex; align-items: center; gap: 12px; } .section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); } /* SUMMARY */ .summary-text { font-family: 'Playfair Display', serif; font-size: clamp(20px, 3vw, 28px); font-weight: 400; font-style: italic; line-height: 1.55; color: var(--ink); max-width: 720px; border-left: 3px solid var(--gold); padding-left: 28px; } /* SPEAKER PROFILE */ .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--rule); border: 1px solid var(--rule); } .profile-cell { background: var(--paper); padding: 24px; } .profile-cell-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--gold-dim); text-transform: uppercase; margin-bottom: 8px; } .profile-cell-value { font-size: 15px; font-weight: 500; color: var(--ink); } /* AGENDA / SESSIONS */ .session-list { display: flex; flex-direction: column; gap: 0; } .session { display: grid; grid-template-columns: 120px 1fr; gap: 0; border-bottom: 1px solid var(--rule); padding: 28px 0; position: relative; } .session:first-child { padding-top: 0; } .session-period { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold); letter-spacing: 0.05em; padding-top: 4px; } .session-period .year { display: block; font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: 0; margin-bottom: 2px; font-family: 'Playfair Display', serif; } .session-content {} .session-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 2px; } .session-org { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold-dim); letter-spacing: 0.1em; margin-bottom: 14px; } .session-points { list-style: none; display: flex; flex-direction: column; gap: 8px; } .session-points li { font-size: 14px; color: var(--text-muted); line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; } .session-points li::before { content: '—'; color: var(--gold-dim); flex-shrink: 0; margin-top: 0; } /* SKILLS / AGENDA TOPICS */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px; background: var(--rule); border: 1px solid var(--rule); } .skill-card { background: var(--paper); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; transition: background 0.2s; } .skill-card:hover { background: var(--ink); } .skill-card:hover .skill-name { color: var(--paper); } .skill-card:hover .skill-cat { color: var(--gold); } .skill-cat { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.25em; color: var(--gold-dim); text-transform: uppercase; transition: color 0.2s; } .skill-name { font-size: 15px; font-weight: 600; color: var(--ink); transition: color 0.2s; } /* CERTIFICATIONS */ .cert-list { display: flex; flex-direction: column; gap: 0; } .cert-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); gap: 20px; } .cert-name { font-size: 15px; font-weight: 500; color: var(--ink); } .cert-year { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold); white-space: nowrap; } /* ACHIEVEMENTS */ .achievement-list { display: flex; flex-direction: column; gap: 20px; } .achievement { padding: 22px 24px; background: var(--paper-warm); border-left: 3px solid var(--gold); font-size: 14px; color: var(--text-body); line-height: 1.6; } /* REGISTER / CONTACT */ .register-block { background: var(--ink); color: var(--paper); padding: 64px 48px; text-align: center; position: relative; overflow: hidden; } .register-block::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent 79px, #C9A84C10 80px), repeating-linear-gradient(0deg, transparent, transparent 79px, #C9A84C10 80px); pointer-events: none; } .register-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase; margin-bottom: 20px; position: relative; } .register-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 5vw, 48px); font-weight: 700; color: var(--paper); margin-bottom: 12px; position: relative; } .register-sub { font-size: 15px; color: #8a8070; margin-bottom: 40px; position: relative; } .contact-chips { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; } .chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gold-dim); padding: 12px 24px; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--gold); letter-spacing: 0.1em; text-decoration: none; transition: all 0.2s; } .chip:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); } /* FOOTER */ .brochure-footer { background: var(--ink-soft); padding: 24px 48px; display: flex; justify-content: space-between; align-items: center; } .footer-brand { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold-dim); letter-spacing: 0.1em; } .footer-langs { font-family: 'DM Mono', monospace; font-size: 11px; color: #4a4540; letter-spacing: 0.1em; } /* ANIMATIONS */ @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* RESPONSIVE */ @media (max-width: 640px) { .cover-header, .cover-body, .cover-footer { padding: 20px 24px; } .section { padding: 60px 24px; } .section-divider { margin: 0 24px; } .profile-grid { grid-template-columns: 1fr; } .session { grid-template-columns: 1fr; gap: 8px; } .brochure-footer { padding: 20px 24px; flex-direction: column; gap: 8px; text-align: center; } .register-block { padding: 48px 24px; } .cover-contacts { flex-direction: column; gap: 8px; } .cover-meta { gap: 24px; } } </style> </head> <body> <!-- COVER PAGE --> <section class="cover"> <div class="cover-header"> <span class="org-badge">Official Career Brochure</span> <span class="edition-badge">2026 Edition</span> </div> <div class="cover-body"> <p class="event-type">Revenue Growth & Sponsorship Sales</p> <h1 class="cover-title">Sujith<br><span>Kutty</span></h1> <p class="cover-subtitle">Business Manager, B2B Events & Partnership Sales</p> <div class="cover-meta"> <div class="meta-item"> <span class="meta-label">Current Role</span> <span class="meta-value">Business Manager — Inventicon</span> </div> <div class="meta-item"> <span class="meta-label">Location</span> <span class="meta-value">Pune, India</span> </div> <div class="meta-item"> <span class="meta-label">Specialisation</span> <span class="meta-value">Sponsorship Sales · Partnership Strategy</span> </div> </div> </div> <div class="cover-footer"> <div class="cover-contacts"> <span class="cover-contact">✉ <a href="mailto:sujithnk666@gmail.com">sujithnk666@gmail.com</a></span> <span class="cover-contact">☏ <a href="tel:7387588518">+91 73875 88518</a></span> </div> <span class="scroll-hint">↓ SCROLL TO EXPLORE</span> </div> </section> <!-- EXECUTIVE SUMMARY --> <hr class="section-divider" /> <section class="section"> <p class="section-label">Executive Summary</p> <p class="summary-text"> A commercially driven sales professional with a track record of building high-value corporate partnerships across B2B events, healthtech, and ed-tech. Combines data-led market research with a consultative relationship approach — turning cold outreach into long-term client value. </p> </section> <!-- SPEAKER PROFILE --> <hr class="section-divider" /> <section class="section"> <p class="section-label">Speaker Profile</p> <div class="profile-grid"> <div class="profile-cell"> <div class="profile-cell-label">Domain Focus</div> <div class="profile-cell-value">B2B Event Sponsorship & Partnership Sales</div> </div> <div class="profile-cell"> <div class="profile-cell-label">Industry Verticals</div> <div class="profile-cell-value">Finance, Treasury, GRC, Procurement, HealthTech, EdTech</div> </div> <div class="profile-cell"> <div class="profile-cell-label">Career Span</div> <div class="profile-cell-value">2016 – Present · 8+ Years</div> </div> <div class="profile-cell"> <div class="profile-cell-label">Education</div> <div class="profile-cell-value">B.E. Electronics & Telecommunication — VIIT, Pune</div> </div> </div> </section> <!-- CAREER AGENDA --> <hr class="section-divider" /> <section class="section"> <p class="section-label">Career Journey</p> <div class="session-list"> <div class="session"> <div class="session-period"> <span class="year">2024</span> Nov – Present </div> <div class="session-content"> <div class="session-title">Business Manager — Sponsorship Sales</div> <div class="session-org">INVENTICON BUSINESS INTELLIGENCE PVT. LTD.</div> <ul class="session-points"> <li>Developed and executed strategic sponsorship sales plans resulting in a 30% increase in annual revenue.</li> <li>Cultivated corporate partnerships and sponsor relationships, improving client retention by 25%.</li> <li>Conducted market research to identify emerging sponsorship opportunities across finance, treasury, and procurement verticals.</li> <li>Negotiated and closed high-value partnership deals consistently within tight event timelines.</li> <li>Analyzed sponsorship performance metrics and delivered actionable insights to clients post-event.</li> <li>Represented the organisation at industry conferences, expanding the company's sponsor network.</li> </ul> </div> </div> <div class="session"> <div class="session-period"> <span class="year">2022</span> Apr – Jun 2023 </div> <div class="session-content"> <div class="session-title">Account Manager — Doctor Relations</div> <div class="session-org">BLACKTAIL MINDHOUSE PVT. LTD. (SHYFT)</div> <ul class="session-points"> <li>Managed a team of 3 account managers ensuring SLA adherence and client satisfaction.</li> <li>Executed a public relations campaign that significantly raised brand visibility in the health & wellness space.</li> <li>Developed a proactive account management strategy driving increased renewals and partner engagement.</li> </ul> </div> </div> <div class="session"> <div class="session-period"> <span class="year">2019</span> Sep – Dec 2020 </div> <div class="session-content"> <div class="session-title">Senior Business Development Associate</div> <div class="session-org">BYJU'S</div> <ul class="session-points"> <li>Built and maintained relationships with ******** needs and providing tailored learning solutions.</li> <li>Conducted market research to identify new business opportunities and stay ahead of EdTech trends.</li> <li>Collaborated cross-functionally to ensure smooth execution and exceptional customer experience.</li> </ul> </div> </div> <div class="session"> <div class="session-period"> <span class="year">2018</span> Aug – Mar 2019 </div> <div class="session-content"> <div class="session-title">Quality Analyst</div> <div class="session-org">CAPITA</div> <ul class="session-points"> <li>Developed and executed test plans to verify service quality, reliability, and performance.</li> <li>Identified and remedied defects in call agent processes; investigated customer complaints.</li> <li>Developed quality metrics dashboards enabling informed, fast decision-making by management.</li> </ul> </div> </div> <div class="session"> <div class="session-period"> <span class="year">2016</span> Nov – 2018 </div> <div class="session-content"> <div class="session-title">Technical Support Executive</div> <div class="session-org">CONCENTRIX</div> <ul class="session-points"> <li>Provided technical support to Virgin Media UK customers, managing complex queries over voice channels.</li> <li>Contributed to training materials and network monitoring processes.</li> <li>Part of the team that successfully transitioned a UK-based onshore process to offshore India — 2018.</li> </ul> </div> </div> </div> </section> <!-- SKILLS --> <hr class="section-divider" /> <section class="section"> <p class="section-label">Areas of Expertise</p> <div class="skills-grid"> <div class="skill-card"><span class="skill-cat">Core</span><span class="skill-name">Sponsorship Sales</span></div> <div class="skill-card"><span class="skill-cat">Core</span><span class="skill-name">Partnership Strategy</span></div> <div class="skill-card"><span class="skill-cat">Core</span><span class="skill-name">Revenue Growth</span></div> <div class="skill-card"><span class="skill-cat">Core</span><span class="skill-name">Client Retention</span></div> <div class="skill-card"><span class="skill-cat">Research</span><span class="skill-name">Market Research</span></div> <div class="skill-card"><span class="skill-cat">Research</span><span class="skill-name">Data Analytics</span></div> <div class="skill-card"><span class="skill-cat">Digital</span><span class="skill-name">Digital Marketing</span></div> <div class="skill-card"><span class="skill-cat">Digital</span><span class="skill-name">A/B Testing</span></div> <div class="skill-card"><span class="skill-cat">Leadership</span><span class="skill-name">Team Management</span></div> <div class="skill-card"><span class="skill-cat">Core</span><span class="skill-name">Communication</span></div> <div class="skill-card"><span class="skill-cat">Analytics</span><span class="skill-name">Google Analytics</span></div> <div class="skill-card"><span class="skill-cat">Digital</span><span class="skill-name">HubSpot · CRM</span></div> </div> </section> <!-- NOTABLE ACHIEVEMENTS --> <hr class="section-divider" /> <section class="section"> <p class="section-label">Notable Achievements</p> <div class="achievement-list"> <div class="achievement"> Selected as a key member of the team responsible for transitioning a UK-based onshore process to offshore India operations — one of the organisation's most complex operational migrations. <em>(Capita, 2018)</em> </div> <div class="achievement"> Presented research paper <strong>"Low Cost Voice Controlled Home Automation"</strong> at the IEEE International Conference during Vishwacon 2018 — VIIT, Pune. </div> <div class="achievement"> Completed a 4-week <strong>Advanced Telecom Training</strong> programme with BSNL, building a strong technical foundation that informs a data-driven approach to commercial roles. <em>(2016)</em> </div> </div> </section> <!-- CERTIFICATIONS --> <hr class="section-divider" /> <section class="section"> <p class="section-label">Certifications & Credentials</p> <div class="cert-list"> <div class="cert-row"> <span class="cert-name">Digital Marketing: Lead Generation & Sales Conversion</span> <span class="cert-year">2020</span> </div> <div class="cert-row"> <span class="cert-name">Technology Entrepreneurship: Lab to Market</span> <span class="cert-year">2020</span> </div> <div class="cert-row"> <span class="cert-name">Google Analytics Certification</span> <span class="cert-year">—</span> </div> <div class="cert-row"> <span class="cert-name">HubSpot Content Marketing Certification</span> <span class="cert-year">—</span> </div> </div> </section> <!-- REGISTER / CONTACT --> <section class="register-block"> <p class="register-eyebrow">Open to Opportunities</p> <h2 class="register-title">Let's Build Something Together</h2> <p class="register-sub">Sponsorship sales · B2B partnerships · Revenue strategy · Pune, India</p> <div class="contact-chips"> <a class="chip" href="mailto:sujithnk666@gmail.com">✉ sujithnk666@gmail.com</a> <a class="chip" href="tel:7387588518">☏ +91 73875 88518</a> <a class="chip" href="https://www.linkedin.com/in/sujith-kutty-1a630715a" target="_blank">in LinkedIn</a> </div> </section> <footer class="brochure-footer"> <span class="footer-brand">SUJITH KUTTY · OFFICIAL CAREER BROCHURE · 2026</span> <span class="footer-langs">English · Hindi · Malayalam</span> </footer> <script> // Intersection Observer for scroll reveals const sections = document.querySelectorAll('.section'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, { threshold: 0.1 }); sections.forEach(s => observer.observe(s)); </script> </body> </html>
I'll convert this beautiful career brochure HTML into a Next.js application. Let me set up the fonts and styles, then build the components.
Now I'll update the layout with the proper fonts and create the brochure page with all its components.
I've successfully converted your HTML career brochure into a fully modular Next.js application. The design has been preserved with:
The brochure is split into 10 reusable components under /components/brochure/ for clean organization and easy maintenance.