A
Anonymous

Engineering Website - Copy this React, Tailwind Component to your project

First, create a header with the title "Benvenuto su STP Ingegneria S R L B". Use a large, bold font (such as Montserrat or Roboto Slab) in blue to make it stand out. The title should appear immediately when the user enters the site. Below the title, add a brief welcome message in smaller text, in the same font family but lighter weight: "Siamo un'azienda leader in ingegneria con oltre 30 anni di esperienza. Offriamo soluzioni innovative e sostenibili per ogni progetto." 2. Founder Section: Immediately below the header, create a "Founder" section. Use a medium sized font for the title: "Fondatore: Antonio Lembo" in blue. Include a portrait of Antonio Lembo (image optional but suggested), and next to it, write this description: "Antonio Lembo, fondatore di STP Ingegneria S R L B, ha una carriera di oltre 30 anni nel settore dell'ingegneria edile. Grazie alla sua visione e competenza, ha contribuito a realizzare progetti di successo in tutta Italia, sempre con un occhio alla sostenibilità e all'innovazione." Add a small, professional signature or name font at the bottom: "Antonio Lembo, Fondatore". 3. Website Credits Section: At the bottom of the page, create a small section for credits. Use a smaller font, centered, and add: "Progetto e sviluppo del sito web a cura di Emanuele Lembo" Below, add a brief line: "Il sito web è stato progettato e sviluppato da Emanuele Lembo, collaboratore nella digitalizzazione e nella promozione online di STP Ingegneria." 4. Add Color Scheme and Typography: Apply a professional, minimalistic color scheme. Dominant colors should be blue (for professionalism and stability) and gray (for elegance and contrast). Accent color: green for sustainability elements. Background color should be a light gray or white, with blue and green accents used for buttons, headings, and borders. Use sans serif fonts for titles (like Roboto or Open Sans), and serif fonts for body text (like Georgia or Times New Roman) to create a contrast in style. Set font size for headings to 20px or larger, and body text to 16px for clarity. 5. Main Navigation Menu: Create a fixed navigation menu at the top. The menu should include links to the following sections: Home Progetti Realizzati Contatti Ensure that the links are in blue and turn to a slightly darker shade when hovered over. The font should be simple and easy to read. 6. Progetti Realizzati Section (Main Topics): Display the three main topics in separate sections: "Impiantistica" Text: "Progettazione e realizzazione di impianti tecnologici per edifici residenziali, commerciali e industriali. Ogni progetto è pensato per ottimizzare l'efficienza energetica e rispettare le normative ambientali." Add a high quality image related to this topic, with a caption below: "Progetto in impiantistica: soluzioni innovative per edifici sostenibili." "Verifica Progettistica" Text: "Controllo della conformità progettistica rispetto alle normative vigenti. Garantiamo che ogni progetto rispetti gli standard di sicurezza e qualità." Add a high quality image with a caption: "Verifica progettistica: qualità e sicurezza garantite." "Consulenza con Pubblica Amministrazione" Text: "Offriamo consulenze specialistiche per enti pubblici nella gestione di progetti di infrastrutture e opere pubbliche. Siamo esperti nel navigare le normative e le procedure burocratiche." Add an image with a caption: "Consulenza con Pubblica Amministrazione: gestione efficace e normativa." Each section must have a hover effect where the image slightly zooms in when the user hovers over it. Additionally, the description should appear below the image with a smooth fade in transition. 7. Interactive Map of Mount Down: Add an interactive map of Mount Down where all projects are located. Ensure that the map is clickable and each location on the map should pop up with detailed information about the project (such as description, images, and endoscalie). The map must blend into the design using the blue and gray color scheme. Create pop up windows for each project with text like: "Progetto completato: edificio commerciale, durata: 6 mesi, area coinvolta: 5000mq." 8. Contact Section (Contatti): Create a "Contatti" section at the bottom of the page. Add all necessary contact information: Telefono Email Indirizzo (via, città, CAP) Below the contact information, add clickable social media icons (Facebook, LinkedIn, Instagram, Twitter) aligned with the color scheme. Make the contact section clean and professional, with blue icons and text for easy visibility. The section should include a call to action button: "Contattaci Ora" in blue. 9. Footer: Create a footer at the very bottom of the page with a small text section saying: "STP Ingegneria S R L B | Tutti i diritti riservati." Keep the footer simple, with gray text on a light gray or white background. 10. Mobile Responsiveness: Ensure the website is fully responsive. The layout should adjust for mobile devices by stacking sections vertically. Ensure that the navigation menu is collapsible for smaller screens, and all text and images are easily readable on mobile devices.

Prompt
Component Preview

About

EngineeringWebsite - A professional site with a blue-gray scheme, featuring a bold header, founder section, project details, interactive. Access free code!

Share

Last updated 1 month ago