You are an award-winning UI/UX Designer and Senior Frontend Developer.
Your task is to create a premium landing page for TTGA (Thejo Tega Global Alliance).
Generate the COMPLETE landing page using ONLY HTML, CSS, and Vanilla JavaScript.
Do NOT use React, Tailwind CSS, Bootstrap, jQuery, or any external frameworks.
The output must be a SINGLE HTML file with CSS inside <style> and JavaScript inside <script>.
Return ONLY the HTML code. Do not explain anything.
======================================================
ABOUT TTGA
======================================================
TTGA is a leading industrial engineering company providing:
• Conveyor Systems
• Conveyor Components
• Material Handling Solutions
• Wear Protection Solutions
• Engineering Services
Industries Served:
• Mining
• Cement
• Steel
• Power
• Infrastructure
The website should communicate:
Engineering Excellence
Innovation
Precision
Global Scale
Trust
Industrial Leadership
======================================================
DESIGN DIRECTION
======================================================
I DO NOT want a traditional engineering website.
I want a clean, modern, light-themed, premium experience.
The website should feel inspired by:
• Apple
• Vercel
• Linear
• Stripe
• Rivian
• Notion
Imagine if Apple designed a website for an industrial engineering company.
The design must feel:
Elegant
Minimal
Premium
Editorial
Spacious
Modern
Luxury
Confident
======================================================
COLOR PALETTE
======================================================
Background:
#FFFFFF
Alternate Sections:
#F8F9FA
Text:
#1A1A1A
Secondary Text:
#666666
Accent:
#F58220
Borders:
#ECECEC
Use plenty of whitespace.
Avoid dark backgrounds.
Avoid heavy gradients.
Avoid excessive shadows.
======================================================
TYPOGRAPHY
======================================================
Use Google Font:
Manrope
Use large typography.
Hero heading:
64px
Section heading:
42px
Body:
18px
Large spacing between sections.
======================================================
HEADER
======================================================
Sticky navigation.
White background.
Minimal logo.
Menu:
About
Industries
Solutions
Projects
Contact
Orange button:
Get in Touch
======================================================
HERO SECTION
======================================================
Modern split layout.
Left side:
Large heading
Engineering Movement That Powers Industries.
Short paragraph.
Primary CTA
Secondary CTA
Right side:
Large premium industrial image.
Add subtle floating animation.
Include a small badge saying:
Trusted Engineering Partner
======================================================
ABOUT SECTION
======================================================
Minimal two-column layout.
Large heading.
Short description.
Three premium cards:
Engineering Excellence
Global Reach
Innovation
======================================================
INDUSTRIES
======================================================
Create six elegant cards.
Mining
Steel
Cement
Power
Infrastructure
Material Handling
Each card should contain:
Image
Title
Description
Minimal icon
Hover animation
======================================================
WHY TTGA
======================================================
Two-column layout.
Large image.
Checklist.
Premium Engineering
Custom Solutions
Reliable Performance
Experienced Team
Global Standards
======================================================
PROJECTS
======================================================
Three premium project cards.
Large images.
Hover zoom.
Minimal text.
======================================================
STATISTICS
======================================================
Four animated counters.
Years of Experience
Projects Completed
Countries Served
Industrial Clients
======================================================
CALL TO ACTION
======================================================
Large clean section.
Headline:
Let's Build the Future of Industrial Engineering
Orange CTA button.
======================================================
FOOTER
======================================================
Simple premium footer.
Company information.
Navigation.
Contact.
Social icons.
======================================================
ANIMATIONS
======================================================
Use elegant animations only.
Fade in on scroll.
Slide up.
Hover lift.
Button hover.
Smooth scrolling.
Floating hero image.
Animated counters.
Sticky navbar.
Everything should feel smooth and premium.
======================================================
RESPONSIVE
======================================================
Fully responsive.
Desktop
Tablet
Mobile
======================================================
IMPORTANT
======================================================
The design should NOT look like a typical engineering company.
It should look like an award-winning modern corporate website.
Use lots of whitespace.
Keep layouts clean.
Use premium proportions.
Make every section visually different.
Write clean, organized HTML with comments for each section.
Return ONLY the complete HTML code.
