2-DR1.TP3.14

Author: mattolivr

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/App.jsx

@@ -2,6 +2,7 @@ import './global.css';
 import './styles.css';
 import './App.css';
 import Menu from './components/Menu/Menu';
+import Hero from './components/Hero/Hero';
 
 function App() {
   return (
@@ -15,6 +16,8 @@ function App() {
 
       <Menu />
 
+      <Hero />
+
       <main className="app-main">
         <div className="container">
           <section id="sobre" className="app-section">

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/components/Hero/Hero.jsx

@@ -0,0 +1,40 @@
+import './hero.css';
+
+function Hero() {
+  return (
+    <section className="hero">
+      <div className="hero-container">
+        <div className="hero-content">
+          <h1 className="hero-title">Bem-vindo ao Futuro do Desenvolvimento</h1>
+          <p className="hero-subtitle">
+            Construa aplicações modernas com React, CSS e as melhores práticas
+            de desenvolvimento web. Responsive, elegante e profissional.
+          </p>
+          <div className="hero-actions">
+            <button className="primary">Começar Agora</button>
+            <button>Saiba Mais</button>
+          </div>
+        </div>
+        <div className="hero-image">
+          <picture>
+            <source 
+              media="(min-width: 992px)" 
+              srcSet="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&h=600&fit=crop"
+            />
+            <source 
+              media="(min-width: 576px)" 
+              srcSet="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&h=450&fit=crop"
+            />
+            <img 
+              src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400&h=300&fit=crop"
+              alt="Desenvolvedor trabalhando em código"
+              className="hero-img"
+            />
+          </picture>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Hero;

2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP3.11~3.16/src/components/Hero/hero.css

@@ -0,0 +1,119 @@
+/* Estilos do componente Hero - Mobile First */
+
+.hero {
+  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
+  border-bottom: 1px solid var(--border-color);
+  padding: 40px 0;
+}
+
+.hero-container {
+  max-width: 1128px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.hero-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.2;
+  margin: 0;
+  letter-spacing: -0.5px;
+}
+
+.hero-subtitle {
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.hero-image {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero-img {
+  width: 100%;
+  max-width: 400px;
+  height: auto;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--border-color);
+}
+
+/* Tablets - 576px até 992px */
+@media (min-width: 576px) and (max-width: 992px) {
+  .hero {
+    padding: 60px 0;
+  }
+
+  .hero-title {
+    font-size: 2.5rem;
+  }
+
+  .hero-subtitle {
+    font-size: 1.2rem;
+  }
+
+  .hero-img {
+    max-width: 600px;
+  }
+}
+
+/* Desktop - acima de 992px */
+@media (min-width: 992px) {
+  .hero {
+    padding: 80px 0;
+  }
+
+  .hero-container {
+    flex-direction: row;
+    align-items: center;
+    gap: 60px;
+  }
+
+  .hero-content {
+    flex: 1;
+    text-align: left;
+  }
+
+  .hero-title {
+    font-size: 3rem;
+  }
+
+  .hero-subtitle {
+    font-size: 1.25rem;
+  }
+
+  .hero-actions {
+    justify-content: flex-start;
+  }
+
+  .hero-image {
+    flex: 1;
+  }
+
+  .hero-img {
+    max-width: 100%;
+  }
+}