🛍️ SoftSell

SoftSell is a fictional, single-page marketing website for a software resale startup. Designed with a clean, modern interface, it highlights product resale benefits, user testimonials, and a simple contact form. A sleek, responsive AI-powered chat widget is integrated using React.js, Tailwind CSS, and the Gemini API. This floating chat interface mimics modern customer support bots, assisting users with queries and improving engagement through natural language interactions

🚀 Features Implemented

• 🧠 AI-Powered Responses
  Integrated with Google Gemini (v1beta) for generating intelligent responses.

• 💬 Interactive Chat UI
  Floating chat icon to toggle chat visibility with animated open/close transitions.

• ✍️ Typing Indicator
  Realistic three-dot typing animation while the AI generates a response.

• 📩 User Input Handling
  Enter messages via text input and press Enter or click "Send".

• 🎨 Responsive & Clean Design
  Fully responsive widget styled with basic CSS, optimized for small screen areas.

• 🎭 Animated Closing
  Smooth fade-and-slide-out animation when the widget is closed.

🧠 UI/UX Expectations

• 🟢 Immediate Visual Feedback: On opening the chat, a welcome message is automatically shown to reduce user friction.
• 💬 Typing Awareness: Typing dots simulate human-like delays, giving a sense of realism.
• 🎯 Minimalist Design: Compact layout, easily fits into any web app corner without distraction.
• 🔄 Smooth Transitions: No abrupt state changes — every interaction is wrapped in motion for an elegant experience.
• 📱 Mobile-First Feel: Designed to be finger-friendly and responsive across screen sizes.

🌙|☀️ Light/Dark Mode Toggle

• Implemented a user-friendly Light/Dark mode toggle to enhance accessibility and visual comfort.

• Users can switch between light and dark themes with a single click.

• State is maintained during the session using React's state and persisted with local storage (if implemented).

• The toggle dynamically updates the entire UI using Tailwind’s dark: classes and smooth transitions for better UX.

🎞️ Animation Framework

• 🛠️ Pure CSS Keyframes
  Used for entry/exit transitions (fade-in/out, slide-in/out) for the chat widget and typing indicator.

• 🎯 Why CSS-only?

  • Lightweight and performant
  • No additional animation libraries needed
  • Compatible with all modern browsers

🎨 Design Choices

Area	Choice
Framework	React.js + Vite, JavaScript (ES6+), Bootstrap 5, Framer Motion
API	Google Gemini API to fetch contextual, human-like responses
Icons	react-icons for a modern UI
Animations	CSS keyframe animations for open/close transitions
UX	Auto-greeting, smooth toggling, and typing animation for realism

⏱️ Time Spent

Task	Duration
Project Setup (Vite + React)	~30 min
Gemini API integration	~30 hour
Building Chat UI	~1 hrs
Typing animation	~30 min
Open/close transition logic	~45 hour
Testing and cleanup	~20 min
Total	~3 hours 35 min

🔗 Live Demo

👉 View SoftSell Website - https://softsellweb.netlify.app/