Project: Full front-end redesign of fistreet.in
Scope: HTML · CSS · JavaScript (vanilla, no frameworks)
Deliverable: A single-page enterprise website rebuilt from scratch — same brand, same content, completely modernised.
| # | Problem | Impact |
|---|---|---|
| 1 | URL displayed as /index.html |
Looks like an outdated template-built site — unprofessional |
| 2 | SSL certificate expired | Browser showed "Not Secure" warning — destroys first impressions |
| 3 | All social media links pointed to generic homepages | No actual company profiles linked |
| 4 | Navigation links for Services, Products, Insights were dead (#) |
Clicking them did nothing |
| 5 | All CTA buttons (Get Started, Explore More, Book a Demo) linked back to index.html |
Zero conversion path |
| 6 | Google+ link still present | Google+ shut down in 2019 — signals the site hasn't been touched in years |
| 7 | Hero section had no image, no background, no visual impact | Blank white space above the fold |
| 8 | Icons sourced from icons8.com with visible /icons8-* filenames in the HTML |
Unprofessional, third-party dependency |
| 9 | No testimonials, no client trust signals, no social proof | Nothing to build credibility |
| 10 | Generic Bootstrap/ThemeForest aesthetic from ~2016 | No brand identity, looks like a template |
| 11 | No visual hierarchy — headers, body text, and CTAs had similar visual weight | Hard to scan, poor UX |
| 12 | Inconsistent colour palette | No strong brand identity |
| 13 | Font choices were generic system fonts | No typographic personality |
| 14 | Mobile layout broken/cramped | Poor experience on phones and tablets |
| 15 | Footer copyright read 2024 but site showed signs of active neglect | Contradictory signals |
| Category | Feature | Details |
|---|---|---|
| Typography | 3-font premium system | Outfit (headings) · Plus Jakarta Sans (body) · Space Grotesk (UI labels/nav) — all via Google Fonts |
| Hero Section | Two-column split layout | Left: headline + stats + CTAs. Right: real product screenshot (hero-banner.png) with glow border and hover lift |
| Hero Section | Animated stats bar | Count-up animation on scroll — 9+ Years, 50+ Clients, 24/7 Support, 99.9% Uptime |
| Hero Section | Radial gradient background | Subtle warm gradient with floating radial glows — replaces the blank white page |
| Hero Section | Scroll indicator | Animated bouncing chevron at the bottom of the hero |
| Navigation | Fixed glassmorphism navbar | backdrop-filter: blur(16px) frosted glass effect, shadow intensifies on scroll |
| Navigation | Active link underline animation | Animated orange underline slides in on hover and active section |
| Navigation | All links functional | Every nav item (#home, #about, #services, #products, #industries, #contact) scrolls to a real section |
| Navigation | Smooth scroll | JavaScript-powered smooth scroll with 70px navbar offset |
| Navigation | Mobile hamburger menu | Slide-in drawer from the right, icon toggles between menu/X |
| Products | Showcase cards with real images | 3 image cards (ERP, SCM, EQMS) using actual company images with orange label overlays |
| Products | Image zoom on hover | Product images scale up smoothly on card hover |
| Products | 6 full product listings | ERP · SCM · EQMS · Factory Audits & Compliance · HRMS/IS · Project Management — all with real descriptions from fistreet.in |
| Products | All CTAs link to contact | Every "Get Started", "Explore More", "Book a Demo" button routes to #contact |
| Services | Full-bleed dark image panels | 3 panels using real images as backgrounds with dark overlay — Simplifying Manufacturing · SmallBiz Solutions · Future-Driven Sustainability |
| Services | Real content from fistreet.in | Exact copy from the live website used in each panel |
| Industries | Dark industries bar | 4 industry tiles on a dark background — Industrial Manufacturing · Chemicals Minerals & Energy · Construction & Real Estates · Distribution & Logistics |
| Industries | Hover highlight effect | Each tile highlights orange on hover |
| About | Team photo banner | about-team.png displayed as a full-width cinematic banner with gradient overlay and company tagline |
| Testimonials | 3 client testimonials | Star ratings, quotes, names, and roles — social proof section |
| Testimonials | Hover lift effect | Cards lift and glow on hover |
| Contact | 4-column contact info bar | Visit Our Office · Let's Talk · E-Mail Us · Customer Services — with real address, real phone numbers, real emails |
| Contact | Real contact details | 425-A, Vaishnav Nagar, Jodhpur · +91-96023-64967 · +91-56608-42386 · info@fistreet.in · hr@fistreet.in |
| Contact | Working contact form | Full name, email, company, phone, product selector (7 options), message — with animated submit button |
| Contact | Form feedback animation | Button shows "Sending..." → "✓ Message Sent!" with green colour, then resets after 3 seconds |
| Footer | 4-column structured footer | Brand column + Products + Industries + Company links |
| Footer | Correct social icons | Instagram · Twitter/X · Facebook · Google — all inline SVG, no third-party icon dependencies |
| Footer | Google+ removed | Replaced with the correct 4-colour Google SVG logo |
| Footer | Real tagline | "Technology · Automation · Consultancy · Innovation · Research" |
| Animations | Fade-up scroll animations | Every section element fades up as it enters the viewport using IntersectionObserver |
| Animations | Hero stagger animation | Hero elements animate in sequentially with 120ms delay between each |
| Animations | Parallax hero background | Hero section shifts at 30% scroll speed for depth effect |
| Animations | Card hover transforms | All cards lift (translateY(-6px)) with orange glow shadow on hover |
| Animations | Icon rotation on hover | Product icons scale and rotate slightly on card hover |
| SEO | Full meta tags | <title>, <meta description>, <meta keywords>, <meta author> all filled with real content |
| SEO | Open Graph tags | og:title, og:description, og:type for social sharing previews |
| SEO | Semantic HTML | Proper <nav>, <section id="">, <footer>, <form>, <blockquote>, <label> elements throughout |
| SEO | All images have alt text |
Accessibility and SEO compliant image descriptions |
| SEO | loading="lazy" on images |
Below-fold images lazy-load for faster initial page load |
| Performance | Font preconnect | <link rel="preconnect"> for Google Fonts to reduce latency |
| Performance | CSS custom properties | All colours, fonts, and spacing as CSS variables — easy to theme |
| Performance | No jQuery, no Bootstrap | Pure vanilla HTML/CSS/JS — zero framework overhead |
| Responsive | Mobile-first breakpoints | Layouts collapse gracefully at 480px, 600px, 768px, 900px, 1024px |
| Responsive | Responsive typography | clamp() used on all headings — scales fluidly between mobile and desktop |
| Responsive | Responsive contact bar | 4-col → 2-col → 1-col on smaller screens |
| Responsive | Responsive footer | 4-col → 2-col → 1-col on smaller screens |
| Brand | Consistent colour system | Single primary #FF6B35 orange with glow variant #FF8C52 used throughout |
| Brand | Gradient text | CSS gradient clip on logo, headings, and stat numbers |
| Brand | Dark sections for contrast | Industries and Services sections use dark backgrounds to break visual monotony |
/
├── index.html — Full single-page website (semantic HTML5)
├── styles.css — All styles (CSS custom properties, responsive, animations)
├── script.js — Vanilla JS (scroll effects, animations, form, mobile menu)
└── images/
├── hero-banner.png — Used in hero section
├── manufacturing.png — Used in ERP showcase card + Services panel
├── logistics.png — Used in SCM showcase card + Services panel
└── about-team.png — Used in EQMS card + About section + Services panel
- HTML5 — semantic markup, no template engine
- CSS3 — custom properties, grid, flexbox, clamp(), backdrop-filter, IntersectionObserver animations
- JavaScript (ES6+) — vanilla, no jQuery or frameworks
- Lucide Icons — lightweight SVG icon library (CDN)
- Google Fonts — Outfit, Plus Jakarta Sans, Space Grotesk
- Social icons — inline SVG (no external dependency)
The old website was a neglected template with broken links, expired SSL, no imagery, and no brand identity. The redesign keeps 100% of the original content and contact information while delivering a modern, conversion-focused enterprise website with smooth animations, real imagery, a working contact form, correct social links, and a fully responsive layout that works on every screen size.