TEW - Thirumala Engineering Works Website

A premium Angular-based website clone of the Figma design for Thirumala Engineering Works (TEW), an OEM manufacturing company.

🎨 Design Features

• Modern Hero Section with 3D glass hammer and floating credential cards
• Stats Section displaying company achievements (500+ clients, 10,000+ tons/year, 100+ machines)
• About Section with manufacturing imagery and floating badges
• Client Logos showcase of major industrial partners
• Capabilities Section featuring Hot Forging, CNC Machining, and Custom Manufacturing
• Testimonials Section with customer feedback cards
• Quote Request Form with dynamic manufacturing requirement selection
• ** FAQ Section** with accordion-style questions
• Comprehensive Footer with company information and links
• Premium Design with glassmorphism, animations, and modern aesthetics

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm (v9 or higher)
• Angular CLI

Installation

The project has already been set up with all dependencies installed.

Running the Development Server

cd tew-website
npm start

The application will automatically open in your browser at http://localhost:4201 (or the next available port).

Building for Production

cd tew-website
npm run build

The build artifacts will be stored in the dist/ directory.

📁 Project Structure

tew-website/
├── src/
│   ├── app/
│   │   ├── app.ts           # Main component with business logic
│   │   ├── app.html         # Component template
│   │   ├── app.css          # Component styles
│   │   └── app.config.ts    # App configuration
│   ├── assets/
│   │   └── images/          # Generated premium images
│   ├── styles.css           # Global styles and design system
│   └── index.html           # Main HTML file
├── public/
│   └── assets/
│       └── images/          # Public images
├── angular.json             # Angular configuration
├── package.json             # Dependencies
└── README.md               # This file

🎨 Design System

The application uses a comprehensive design system with:

• Color Palette: Orange (#FF6B35) as primary color with dark backgrounds
• Typography: Inter font family with responsive sizes
• Components: Reusable button, card, and badge components
• Animations: Smooth transitions, fade-ins, and hover effects
• Responsive: Mobile-first design with breakpoints at 768px and 1024px

🖼️ Images

All images have been generated to match the premium industrial manufacturing aesthetic:

• Hero section glass hammer with neon lighting
• Industrial forge and manufacturing scenes
• Hot forging process imagery
• CNC machining with blue industrial lighting
• Custom manufacturing facilities

✨ Features Implemented

Navigation

• Fixed navbar with smooth scrolling
• Mobile-responsive hamburger menu
• Active link highlighting

Hero Section

• Animated 3D glass hammer
• Floating credential cards with glassmorphism
• Gradient text effects
• Call-to-action button

Stats Section

• Three-column grid layout
• Animated counters
• Icon-based statistics

About Section

• Two-column grid with image and content
• Floating badges (employees, experience, locations)
• Rotating experience seal animation

Capabilities Section

• Three service cards with overlay effects
• Hover animations
• Background images with gradient overlays

Testimonials

• Grid layout with customer reviews
• Quote styling
• Company logo integration

Quote Form

• Radio button selection for manufacturing type
• Responsive form layout
• Dark themed inputs with orange accents

FAQ Section

• Accordion-style expandable items
• Smooth animations
• Eight common questions answered

Footer

• Four-column grid layout
• Contact information
• Navigation links
• Legal links

🛠️ Technologies Used

• Angular 19 - Latest version with standalone components
• TypeScript - Type-safe development
• CSS3 - Modern styling with CSS variables
• HTML5 - Semantic markup
• Google Fonts - Inter font family

📱 Responsive Design

The website is fully responsive with three breakpoints:

• Desktop: 1024px and above (full multi-column layouts)
• Tablet: 768px - 1023px (two-column layouts)
• Mobile: Below 768px (single-column stacked layouts)

🎯 SEO Optimization

• Semantic HTML5 elements
• Meta tags for description and keywords
• Open Graph tags for social sharing
• Proper heading hierarchy
• Descriptive alt text for images

📝 Notes

• All images are AI-generated to match the premium industrial aesthetic
• The design follows modern web design principles with glassmorphism and dark mode
• Animations are performance-optimized
• Forms are functional with Angular's FormsModule
• Component-based architecture for maintainability

🔧 Customization

To customize the website:

1. Colors: Edit CSS variables in src/styles.css
2. Content: Update text in src/app/app.html
3. Images: Replace files in public/assets/images/
4. FAQ Data: Modify the faqs array in src/app/app.ts

📄 License

This project was created for Thirumala Engineering Works.

---

Built with ❤️ using Angular