Emfinity Interactive Website

Modern and responsive corporate website. Developed using React, TypeScript, Tailwind CSS, and Framer Motion.

🚀 Features

• 🎨 Modern and minimal design
• 🌓 Light/Dark theme support
• 🌍 Multi-language support (English/Turkish)
• 📱 Fully responsive design

🛠️ Technologies

• React - UI library
• TypeScript - Type-safe JavaScript
• Vite - Build tool
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Lucide Icons - Icon library
• EmailJS - Email service

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/Emfinity-Interactive/Emfinity-Interactive-Website.git
cd Emfinity-Interactive-Website

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Build for Production

npm run build

Preview Production Build

npm run preview

🛠️ Tech Stack

• Frontend: React 18, TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Build Tool: Vite
• Language: English/Turkish (i18n)
• Theme: Dark/Light mode support

📁 Project Structure

src/
├── components/           # Reusable UI components
│   ├── sections/        # Page sections (Hero, About, Projects, Contact)
│   ├── Navigation.tsx   # Main navigation component
│   ├── Footer.tsx       # Footer component
│   ├── ThemeToggle.tsx  # Theme switcher
│   └── LanguageToggle.tsx # Language switcher
├── hooks/               # Custom React hooks
│   ├── useTheme.ts      # Theme management
│   └── useLanguage.tsx  # Language management
├── types/               # TypeScript type definitions
└── App.tsx             # Main application component

🌐 Deployment

This project is optimized for deployment on:

• Vercel (Recommended)
• Netlify
• GitHub Pages
• Any static hosting service

Deploy to Vercel

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically on every push

Deploy to Netlify

1. Build the project: npm run build
2. Upload the dist folder to Netlify
3. Configure redirects for SPA routing

🎨 Customization

Adding New Languages

1. Update the Language type in src/hooks/useLanguage.tsx
2. Add translations to the translations object
3. Update the interface LanguageContent with new fields

Theming

The project uses CSS custom properties for theming. Modify the theme colors in src/index.css:

:root {
  --primary-blue: #3b82f6;
  --primary-turquoise: #06b6d4;
  /* Add more custom properties */
}

Adding New Sections

1. Create a new component in src/components/sections/
2. Add it to the main App.tsx
3. Add navigation links in Navigation.tsx
4. Add translations to the language system

📝 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact

Emfinity Interactive

• Website: emfinity.com
• Email: [email protected]
• GitHub: @Emfinity-Interactive

---

Built with ❤️ by Emfinity Interactive