# Vasundhara Infotech Website — UI/UX Change Specification

## 1. Document Purpose

This document defines the section-by-section UI/UX changes required for the Vasundhara Infotech website.

### Primary Objective

Transform the website into a modern, premium, professional **product-based IT company website** that clearly communicates:

> Vasundhara Infotech designs, builds, launches, and continuously improves digital products.

The redesign should focus on both:
- Strong product-company positioning
- A richer, more visual portfolio presentation

The website should not feel like a generic IT services/agency website.

---

# 2. Homepage Section Structure

The new homepage should follow this order:

1. Header
2. Intro / Hero
3. Our Goal / Mission
4. Trusted
5. What We Do
6. Foundation
7. Industries
8. Our Process
9. Selected Work — Apps & Websites
10. Reviews
11. Why Choose Us
12. CTA Banner
13. FAQ
14. Footer

---

# 3. HEADER

## Objective

Create a clean, premium and sticky navigation system.

## Navigation

Use:

- Home
- Products
- About
- What We Do
- Industries
- Our Process
- Careers
- Contact

## Right-side CTA

**Let's Talk →**

## UI Changes

- Use the existing Vasundhara Infotech logo.
- Keep the header minimal.
- Use a transparent/clean appearance at the top.
- On scroll, transition to a white/glass sticky header.
- Add a subtle border or shadow after scrolling.
- Add smooth section navigation.
- Add responsive mobile hamburger navigation.
- Animate the mobile menu smoothly.

## Notes

Do not overcrowd the header.

---

# 4. INTRO / HERO

## Objective

Create a strong first impression and immediately communicate the product-company positioning.

## Eyebrow

**PRODUCTS • TECHNOLOGY • INNOVATION**

## Main Heading

**We Build Digital Products That Make a Difference.**

## Supporting Text

From idea to launch and beyond, we design, build and continuously improve products that solve real problems.

## CTA

Primary:
**Explore Our Products →**

Secondary:
**Let's Build Something →**

## Visual Changes

Replace a code-only hero visual with a product ecosystem visual.

Show:

- Web application screenshot
- Mobile application screens
- Browser window
- Dashboard UI
- Product analytics card
- Notification cards
- Abstract gradient shapes
- Subtle grid

## Animation

- Product cards gently float.
- UI elements fade in sequentially.
- Dashboard numbers animate.
- Small notification cards appear with staggered animation.
- Background gradients move subtly.
- Keep animation smooth and professional.

## Notes

The hero should visually communicate **products**, not just software development.

---

# 5. OUR GOAL / MISSION

## Objective

Explain the company's product philosophy.

## Eyebrow

**OUR GOAL**

## Heading

**Build technology that people actually want to use.**

## Content

Explain that Vasundhara focuses on meaningful user problems through product design, engineering and continuous improvement.

## Three Pillars

### 01 — Solve Real Problems
Start with user needs and real-world problems.

### 02 — Build With Purpose
Every feature should have a clear reason to exist.

### 03 — Improve Continuously
Products evolve through feedback, data and iteration.

## Visual

Add one large supporting image:

- Product team
- Product design workspace
- Laptop with product interface
- Product-development environment

## UI

Use a split layout:
- Text/content on one side
- Large rounded image on the other

Add subtle image reveal animation.

---

# 6. TRUSTED

## Objective

Build credibility without using unverified claims.

## Heading

**Built on trust. Driven by results.**

## Content

Use genuine:

- Client/partner logos
- Product platform logos
- Technology ecosystem logos
- App Store / Google Play badges

## Alternative

If genuine logos are unavailable, use trust statements:

- Product-first approach
- Secure engineering
- Scalable architecture
- Continuous improvement

## Metrics

Possible metric cards:

- Products
- Users
- Downloads
- Years of experience

## Important Rule

Only display verified numbers.

Do not display:
- Fake statistics
- Placeholder `0+`
- Unverified client counts
- Unverified ratings

---

# 7. WHAT WE DO

## Objective

Explain the capabilities required to create and operate digital products.

## Heading

**Everything needed to turn an idea into a product.**

## Service / Capability Cards

### Product Strategy
Research, discovery, validation and product planning.

### UI/UX Design
User journeys, interfaces, prototypes and design systems.

### Web Products
Modern and scalable web applications and platforms.

### Mobile Products
iOS and Android applications.

### Cloud & Infrastructure
Reliable, scalable and secure product infrastructure.

### AI & Intelligent Products
AI-powered features, automation and intelligent experiences.

## Card UI

Each card should contain:

- Number
- Icon
- Title
- Description
- Arrow

## Hover

- Card moves upward slightly.
- Border/gradient becomes visible.
- Icon animates.
- Arrow moves right.

---

# 8. FOUNDATION

## Objective

Explain the principles that guide product development.

## Eyebrow

**OUR FOUNDATION**

## Heading

**The principles behind every product we build.**

## Four Principles

### Product First
Every decision begins with the user and the problem.

### Design Driven
Simple, intuitive experiences are built into the product.

### Engineering Excellence
Build scalable, secure and maintainable technology.

### Continuous Improvement
Launch is not the finish line.

## Visual

Add a large supporting image or product visual.

Use a 2×2 card layout or split visual/content layout.

---

# 9. INDUSTRIES

## Objective

Show where the company's products and technology can create impact.

## Eyebrow

**INDUSTRIES**

## Heading

**Products built for real-world industries.**

## Industry Cards

- Finance & FinTech
- Healthcare
- Education
- E-commerce
- Productivity
- Lifestyle
- Media & Entertainment
- Business & Enterprise

## Card Content

Each card should contain:

- Visual
- Icon
- Industry name
- Short description
- Arrow

## Image Direction

Prefer:

1. Product screenshots
2. Industry-specific UI
3. Custom illustrations
4. Abstract 3D visuals
5. High-quality contextual photography

Avoid generic stock-photo-heavy layouts.

---

# 10. OUR PROCESS

## Objective

Present the product development lifecycle clearly.

## Eyebrow

**OUR PROCESS**

## Heading

**From first idea to continuous improvement.**

## Four Steps

### 01 — Discover
Understand users, problems and opportunities.

### 02 — Design
Create flows, prototypes and product experiences.

### 03 — Build
Develop, test and refine the product.

### 04 — Improve
Launch, measure, learn and continuously evolve.

## Animation

Create a connected timeline.

Animation sequence:

**01 → 02 → 03 → 04**

When each step becomes active:

- Number enlarges.
- Active circle/card highlights.
- Connecting line fills.
- Description fades/slides in.
- Previous step becomes completed.

## Mobile

Convert the horizontal timeline into a vertical timeline.

---

# 11. SELECTED WORK — APPS & WEBSITES

## Objective

Make this one of the strongest sections of the website.

This section must prove that Vasundhara is a product company through actual products and portfolio work.

## Eyebrow

**SELECTED WORK**

## Heading

**Products we've built for the real world.**

## Supporting Text

Explore the apps and digital products created, designed and developed by our team.

## Portfolio Card Information

Every product card should include:

- Product screenshot
- Product logo
- Product name
- Short description
- Category
- Platform
- Product link
- App Store / Google Play link where applicable
- View Product CTA

## Featured Product

Make the first/primary product visually larger.

Show:

- Desktop UI
- Mobile screens
- Product logo
- Product description
- Key features
- Platform badges

## Portfolio Filters

Use only relevant categories:

- All
- Mobile Apps
- Web Products
- SaaS
- AI
- Consumer Products

## Card Animation

On hover:

- Screenshot slightly zooms.
- Card moves upward.
- Gradient overlay appears.
- View Product CTA becomes visible.

## Critical Requirement

Use actual products and actual screenshots.

Do not invent:
- Products
- Product metrics
- Client logos
- App ratings
- User counts
- Testimonials

---

# 12. REVIEWS

## Objective

Add social proof in a premium format.

## Eyebrow

**WHAT PEOPLE SAY**

## Heading

**Built with people. Trusted by people.**

## Review Card

Each genuine testimonial may contain:

- Quote
- Name
- Position
- Company
- Avatar
- Company logo

## UI

Use a testimonial carousel.

Controls:

- Previous
- Next
- Pagination

## Animation

- Smooth horizontal slide
- Optional auto-rotation
- Pause on hover

## Important

Only use genuine testimonials and authorized names/company information.

---

# 13. WHY CHOOSE US

## Objective

Clearly communicate the company's product-focused differentiators.

## Heading

**Why teams choose Vasundhara.**

## Cards

### Product Ownership
Think beyond individual features and releases.

### User-Centered Design
Design around real user needs.

### One Product Team
Product, design and engineering work together.

### Scalable Technology
Architecture designed for long-term growth.

### Continuous Improvement
Continue improving products after launch.

### Long-Term Thinking
Build for sustainable product value.

## UI

Use a clean grid with:

- Icon
- Short heading
- Description
- Subtle hover effect

---

# 14. CTA BANNER

## Objective

Create a strong conversion point before the FAQ/footer.

## Background

Use a dark premium background.

Add:

- Soft blue gradients
- Abstract product UI shapes
- Subtle grid
- Floating interface cards

## Heading

**Have an idea worth building?**

## Supporting Text

**Let's turn it into a product people love to use.**

## Buttons

**Start a Conversation →**

**Explore Our Products →**

## Animation

Use subtle background movement and floating product elements.

---

# 15. FAQ

## Eyebrow

**FAQ**

## Heading

**Questions, answered.**

## Questions

### What does Vasundhara Infotech build?

Explain the company's product-focused approach.

### Do you build both web and mobile products?

Explain supported platforms.

### Do you build products from scratch?

Explain discovery, design, engineering and launch.

### Can you improve an existing product?

Explain product modernization and continuous improvement.

### What technologies do you use?

Link to the technology section.

### How does your product development process work?

Explain Discover → Design → Build → Improve.

### How can I discuss a product idea with your team?

Link to Contact.

## UI

Use an accordion.

Only one or a small number of questions should be open at a time.

Animate expansion/collapse smoothly.

---

# 16. FOOTER

## Objective

Create a premium product-company footer.

## Main Statement

**We build products for a smarter tomorrow.**

## Supporting Text

**Product strategy, design and engineering under one roof.**

## CTA

**Let's Talk →**

## Footer Columns

### Products
- Our Products
- Selected Work

### Company
- About
- Mission
- Careers

### Capabilities
- Product Design
- Web Products
- Mobile Products
- Cloud & AI

### Resources
- FAQ
- Contact
- Privacy Policy
- Terms & Conditions

## Bottom Row

- © 2026 Vasundhara Infotech
- Social media
- Email
- Location

---

# 17. IMAGE & VISUAL UPDATE

## Problem

The current website feels visually empty because many sections rely primarily on text and simple cards.

## Required Improvement

Increase visual content throughout the homepage.

### Priority 1 — Actual Product Screenshots

Use:
- Mobile app screenshots
- Website screenshots
- Dashboard screenshots
- Product UI
- Browser mockups

### Priority 2 — Real Company/Product Photography

Use:
- Team collaboration
- Product design
- Engineering workspace
- Product development

### Priority 3 — Supporting Visuals

Use:
- Custom illustrations
- Abstract 3D shapes
- Technology graphics
- Product UI compositions

## Do Not

Do not add random stock photos merely to fill empty space.

Every visual should support the story:

**Product → People → Technology → Innovation**

---

# 18. VISUAL DESIGN SYSTEM

## Brand Color

Primary:

`#1295E6`

Supporting colors:

- Deep navy
- White
- Very light blue
- Soft gray
- Dark charcoal

## Background Strategy

Alternate sections between:

- White
- Very light blue
- Soft gray
- Dark navy

Avoid making every section look like the same white card layout.

## Cards

Use:

- Large border radius
- Thin borders
- Subtle shadows
- Strong typography
- Generous internal spacing

Avoid excessive glassmorphism.

---

# 19. DECORATIVE DESIGN ELEMENTS

Add visual depth using:

- Soft gradient blobs
- Subtle grid patterns
- Thin connecting lines
- Floating product cards
- Device frames
- Browser frames
- UI overlays
- Small animated dots
- Abstract 3D shapes

Keep these elements subtle.

The website must remain professional and corporate.

---

# 20. ANIMATION SYSTEM

Use a consistent animation language across the website.

## Use

- Fade-up on scroll
- Staggered card reveal
- Image parallax
- Product screenshot floating
- Number counters
- Hover transformations
- Process timeline animation
- FAQ accordion animation
- Portfolio image zoom
- CTA background movement

## Timing

Typical duration:

**300–700ms**

Use smooth easing.

## Accessibility

Respect:

`prefers-reduced-motion`

Do not animate every element simultaneously.

---

# 21. RESPONSIVE REQUIREMENTS

## Desktop

- Large typography
- Wide product screenshots
- Multi-column layouts
- Horizontal process timeline
- Large featured portfolio cards

## Tablet

- 2-column grids
- Reduced typography
- Responsive portfolio layout

## Mobile

- Single-column sections
- Mobile navigation
- Vertical process timeline
- Responsive product screenshots
- No horizontal overflow
- Touch-friendly buttons
- Proper spacing between sections

---

# 22. PRODUCT-COMPANY POSITIONING

The entire website should consistently communicate:

**Who we are**
→ Product-focused technology company

**What we believe**
→ Build useful products for real problems

**What we build**
→ Web, mobile and digital products

**How we work**
→ Discover → Design → Build → Improve

**What proves it**
→ Real apps, websites and product portfolio

**Why work with us**
→ Product ownership + design + engineering

**Next step**
→ Start a conversation

Avoid positioning the company primarily as:

- Generic IT outsourcing
- Staff augmentation company
- Traditional software agency
- Technology vendor

If services are actually offered, describe them in the context of **product development and product engineering**.

---

# 23. CONTENT & CREDIBILITY RULES

Only use factual information that can be verified.

Do not create fake:

- Customer logos
- Testimonials
- Ratings
- Project statistics
- User numbers
- Download numbers
- Revenue figures
- Awards
- Certifications
- Years of experience

If a statistic is unavailable, remove the metric instead of showing a placeholder.

Replace existing placeholder metrics such as `0+` with verified values or remove them.

---

# 24. FINAL HOMEPAGE EXPERIENCE

The final homepage should feel like a premium product-company presentation.

The visual narrative should be:

**INTRO**
↓
**MISSION**
↓
**TRUST**
↓
**WHAT WE DO**
↓
**FOUNDATION**
↓
**INDUSTRIES**
↓
**PROCESS**
↓
**REAL PRODUCTS / SELECTED WORK**
↓
**REVIEWS**
↓
**WHY CHOOSE US**
↓
**CTA**
↓
**FAQ**
↓
**FOOTER**

The most important visual priorities are:

1. Strong product-company hero
2. Real product screenshots
3. Strong Selected Work portfolio
4. Rich but controlled imagery
5. Clear product development process
6. Premium typography and spacing
7. Subtle professional animation
8. Consistent product-first messaging

The final website should answer one question immediately:

> **“What products does Vasundhara build?”**

and then provide enough visual evidence throughout the site to support the answer.