Xtrawrkx Manufacturing Business Website

A modern, professional website for Xtrawrkx Manufacturing Business Pvt Ltd, built with Next.js, TypeScript, Tailwind CSS, and Framer Motion.

🚀 Features

• Single Page Application: Smooth scrolling between sections
• Modern Design: Clean, corporate aesthetic with beautiful animations
• Responsive: Fully responsive design for all devices
• Interactive: Smooth animations and hover effects using Framer Motion
• Professional: Manufacturing-focused content and design

🎯 Sections

1. Hero: Eye-catching introduction with call-to-action
2. About: Company overview and key specialties
3. Services: Detailed service offerings with features
4. Industries: Industry-specific solutions and capabilities
5. Insights: Blog, case studies, and resources
6. Contact: Contact form and company information
7. Footer: Comprehensive links and company details

🛠️ Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS with custom CSS variables
• Animations: Framer Motion
• Icons: Lucide React
• Fonts: Google Fonts (Poppins, Newsreader)

📦 Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd xtrawrkx-manufacturing

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

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

🏗️ Project Structure

├── app/
│   ├── layout.tsx          # Root layout with metadata
│   └── page.tsx            # Main page component
├── components/
│   ├── Navigation.tsx      # Navigation bar with dropdowns
│   ├── Hero.tsx           # Hero section with stats
│   ├── About.tsx          # About section with specialties
│   ├── Services.tsx       # Services showcase
│   ├── Industries.tsx     # Industry solutions
│   ├── Insights.tsx       # Blog and resources
│   ├── Contact.tsx        # Contact form and info
│   └── Footer.tsx         # Footer with links
├── globals.css             # Global styles and Tailwind config
├── tailwind.config.js      # Tailwind CSS configuration
├── next.config.js          # Next.js configuration
└── package.json            # Dependencies and scripts

🎨 Customization

Colors

The website uses a custom color scheme defined in globals.css:

• Primary: Pink/Red (#ff4a74)
• Secondary: Orange (#ff8b66)
• Accent: Yellow (#ffd166)
• Background: White and light variations

Content

• Update company information in each component
• Replace placeholder images with your own
• Modify contact details and social media links
• Customize service offerings and industry solutions

Styling

• Modify globals.css for global style changes
• Update tailwind.config.js for Tailwind customizations
• Adjust component-specific styles in each component file

📱 Responsive Design

The website is fully responsive with breakpoints:

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

🚀 Deployment

Build for Production

npm run build
npm start

Deploy to Vercel

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

Deploy to Other Platforms

• Netlify: Use npm run build and deploy the out folder
• AWS S3: Build and upload static files
• Custom Server: Use npm run build and serve the .next folder

🔧 Development

Available Scripts

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

Adding New Sections

1. Create a new component in components/
2. Import and add it to app/page.tsx
3. Add navigation link in components/Navigation.tsx

Styling Guidelines

• Use Tailwind CSS classes for styling
• Leverage custom CSS variables from globals.css
• Maintain consistent spacing and typography
• Follow the established color scheme

📄 License

This project is proprietary to Xtrawrkx Manufacturing Business Pvt Ltd.

🤝 Support

For technical support or customization requests, please contact the development team.

---

Built with ❤️ for Xtrawrkx Manufacturing Business Pvt Ltd