Auto Text - Copy this React, Tailwind Component to your project
Create a React component named AboutUs that showcases various aspects of a web development company, incorporating interactive and visually appealing features using Tailwind CSS and React. The component should include the following sections: Header: Create a full width header with a background color of blue (bg blue 600) and white text. Display a large title "About Us" with a dynamic SVG underline effect in orange (text orange 400). Include a brief introductory paragraph about the company's services or mission. Who We Are: Display an image on one side and a description on the other. The description should emphasize the team's dedication to creating robust and user friendly web solutions. Include icons representing core technologies used (e.g., HTML, CSS, JavaScript) with specific colors for each icon (e.g., orange for HTML, blue for CSS, yellow for JavaScript). Core Services: Present a grid of services with three columns on larger screens. Each service should have an icon, a title, and a brief description. Use react icons for service icons and style the service cards with white backgrounds, rounded corners, and shadows. Our Story: Display company milestones in a timeline format. Milestones should be displayed alternately on the left and right sides of a central vertical line. Use Tailwind CSS classes to style the timeline and milestones, ensuring a responsive layout. Meet Our Team: Showcase team members in a grid layout with profiles including a photo, name, title, and bio. Ensure each profile card has a white background, rounded corners, and shadows. Connect With Us: Provide social media links with icons for Facebook, Twitter, Instagram, and LinkedIn. Use appropriate colors for each icon and include hover effects. Join Our Team: Include a call to action section for potential job applicants. Provide a link to view open positions with a prominent button. Get Started: Implement a contact form for user inquiries with fields for name, email, and message. Style the form with a white background, border, and rounded corners. Include a submit button with hover effects. Additionally, integrate an AutoText component into the AboutUs page. This AutoText component should simulate a typing and erasing animation for a list of words such as ["Awesome", "Fun", "Cool", "Life", "Famous", "Weird"]. The AutoText component should: Use React hooks (useState, useEffect, useRef) to manage the typing effect and cursor visibility. Implement typing where each character appears every 200ms and erasing at the same speed. Pause for 2 seconds after typing a word before starting to erase it. Cycle through words in the list, moving to the next word after erasing. Include a blinking cursor effect toggling its visibility every 500ms. Style the text with a green color (text green 500) and the cursor with a yellow color (text yellow 500), ensuring smooth transitions between visible and hidden states using opacity changes. Ensure the overall design is visually appealing and consistent with modern web design principles, using Tailwind CSS for responsive and clean styling. The component should be well structured, maintainable, and responsive across various devices.
