JK I card
Act as a senior full-stack web developer and professional UI/UX designer with proven experience in building real-world educational and institutional websites. Your task is to design and implement a complete Student ID Card Registration website by strictly following the provided reference image, which must be treated as the single and absolute source of truth for all content and structure. Your responsibility is not to redesign or reinterpret the content, but to faithfully recreate the same website while significantly improving layout quality, spacing, visual hierarchy, and usability so it meets modern web design standards suitable for deployment in a real school or educational institution. The frontend must be built using plain HTML and Tailwind CSS only. Do not use Bootstrap, React, Vue, Angular, jQuery, or any other frontend framework or library. Tailwind CSS must control the entire visual system, including layout, grid structure, spacing, typography, colors, responsiveness, hover effects, focus states, and accessibility-friendly contrast. The backend must be implemented using pure PHP and MySQL only, without Laravel, CodeIgniter, Symfony, or any PHP framework. The solution must be lightweight, efficient, and compatible with standard shared hosting environments. All content shown in the reference image must be preserved exactly as it appears. This includes every heading, label, paragraph, instruction, phone number, email address, logo, icon, image, and all English and Gujarati text. No text may be rewritten, translated, corrected, summarized, shortened, or removed. Only visual improvements such as repositioning elements, refining spacing, alignment, font sizing, and grouping are allowed. The wording, language, and meaning must remain unchanged under all circumstances. The website must use a modern card-based layout. The page background should be a soft blurred image or subtle gradient inspired by the reference image, while all functional content must appear inside floating cards with rounded corners and soft shadows. The design should feel clean, calm, premium, and trustworthy, with consistent spacing and a clear visual hierarchy that guides users naturally through the page. At the top of the page, create a minimal, professional header that centers the organization or school logo exactly as shown in the reference image. The logo must scale responsively without distortion. A thin horizontal divider must appear below the logo to separate the header from the main content. The header should feel light and unobtrusive. Below the header, create a prominent highlighted card using the same orange color theme shown in the reference image. This card must be centered horizontally and act as the main focal point of the page. Inside this card, place the “English Medium” text, school logo, contact phone numbers, the “Student Registration Form” heading, the “ID Card Registration” subtitle, and the “Batch 2025–2026” text. Typography must clearly show hierarchy, with the main heading visually dominant. Below this highlighted card, create the main content area using a two-column layout for desktop screens, which must collapse into a single-column vertical layout on tablets and mobile devices using Tailwind CSS responsive utilities. There must be no horizontal scrolling on any screen size. In the left column, create a clean instruction card titled “Important Instructions to Follow”. This card must display all instruction points exactly as shown, including both English and Gujarati text. Icons may be used only for visual clarity without changing meaning. At the bottom of this card, include the help section with calling time, phone number, and email address exactly as shown. In the right column, create the “Complete Registration Form” card. The form must include the full name section split into student name, father name, and surname fields; a class selection dropdown for the 2025–2026 academic year; father’s phone number; mother’s phone number; and a student photo upload field with white background instructions. Each input must have visible labels, proper spacing, accessible focus styles, and clear validation behavior. Required fields must be clearly indicated. The submit button must be modern, visually strong, and use the exact text shown in the reference image. The photo upload field must accept only JPG and PNG images and clearly state that the photo must have a white background. The upload process must be simple and intuitive for non-technical users. The website must be fully responsive. On mobile devices, cards must stack vertically, text must remain readable without zooming, input fields must span full width, and buttons must be large enough for touch interaction. On tablets, spacing and proportions must remain balanced using proper Tailwind CSS breakpoints. For backend functionality, implement a secure PHP form handler connected to a MySQL database.