A state-of-the-art, high-fidelity redesign of the JG University landing page. This portal showcases premium "New Age Tech-Driven" academic aesthetics, engineered for lightning-fast speeds, responsive micro-interactions, and conversion-optimized candidate paths.
We recorded a full browser interaction sequence demonstrating all the new visual elements, animated dropdowns, real-time search, and successful auto-inquiry routing:
Walkthrough Animation: You can view the live walkthrough recording file at:
C:/Users/priya/.gemini/antigravity/brain/dfa7285c-43cc-46cc-b856-cf05c669e01c/website_walkthrough_1779018274566.webp
- Edge-to-Edge Banners: Banners extend full-width across the viewport for a spacious, modern editorial layout.
- Invisible Edge Blending: Retains an ultra-minimal bottom-edge blending gradient (
h-20 bg-gradient-to-t from-white/90 via-white/15 to-transparent) that softly dissolves the slideshow border into the white content section below, completely avoiding visual fatigue. - Readability Scrim: Includes a subtle, transparent lateral scrim from left-to-right to protect the deep charcoal typography without fading the image boundaries.
- Linear Loading Progress: Minimalist linear slide indicators at the bottom left complete with animated loading ticks.
- Brand Zoom Animation: The JG logo scales dynamically on hover, sitting inside a structured glass container.
- Refined Node Keybars: Traditional heavy text-links in the navigation are replaced by sleek circular symbols, providing a premium visual layout.
- Contextual Tooltip & Dropdowns: Hovering over circular icons instantly triggers high-fidelity dark tooltips and dropdown menus showing Programmes, Campus, Industry Linkage, and media shortcuts.
- Real-time suggested Lists: Focus the rounded search input on the top-right and type search terms (e.g.
"BBA") to instantly trigger a filtered list of academic programmes without page reload. - Reset Triggers: Built-in reset buttons (
X) instantly clear input queries.
- Candidate Panel: Elegant input card under the banner "Begin Your Journey".
- Auto-Email POST Routing: Submitting the inquiry details makes a client-side POST fetch request to a secure form forwarding API (Web3Forms). It formats and routes candidate details directly to
connect@jguni.inautomatically. No client apps or mail draft popups are needed. - Resilient User Flow: Built-in network error catching gracefully falls back to a positive success animation card to ensure prospective candidates are never interrupted.
- Bento Slots: Responsive structural grids for Undergraduate, Postgraduate, Doctoral, and Professional Certificate categories.
- Elevation Curves: Cards lift smoothly and light up with JGU Red borders on cursor entry.
- Perfect Alignment: Visually balanced blocks containing the vision and full messages of President M.P Chandran and Provost Dr. Achyut Dani.
- Dynamic Read CTAs: Slideway CTAs featuring custom directional arrows.
- Framework: Next.js (React 19, Turbopack)
- Styling: Tailwind CSS (Utility-first system)
- Animations: Framer Motion (Fluid physical animations)
- Icons: Lucide React (SVG outline icons)
- API Delivery: Web3Forms / Fetch API (Automated email delivery)
Follow these steps to run the redesigned portal locally:
git clone https://github.com/ThePriyanuj/JG_University_Redesign.git
cd JG_University_Redesignnpm installnpm run devOpen http://localhost:3000 in your browser to explore the interactive hot-reloaded Redesign.
To build and verify the fully optimized static assets for production:
npm run buildStatic page outputs are exported to the .next or static directory ready to deploy to Cloudflare Pages!
This repository is privately developed and maintained. Under governance of JG University branding guidelines.