From 9d5e6278192ea0c66842ea6087db9731a29f26a2 Mon Sep 17 00:00:00 2001
From: Jesus Ordosgoitty <jesuodz@gmail.com>
Date: Fri, 24 Oct 2025 11:21:47 -0400
Subject: [PATCH] Update Hero and About components for improved layout and
 styling consistency

---
 src/components/Hero.tsx        | 62 +++++++++++++++-------------------
 src/components/views/About.tsx |  2 +-
 2 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 4fd1e4a..209c9ef 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -14,45 +14,39 @@ const Hero = () => {
   };
 
   return (
-    <section className="min-h-screen h-full overflow-hidden">
+    <section className="min-h-[600px] h-[100vh] overflow-hidden relative">
       <Video />
-      <div className="absolute z-2 inset-0 bg-black opacity-25 w-full h-full"></div>
+      <div className="absolute inset-0 bg-black opacity-25 w-full h-full z-0"></div>
 
-      <div className="absolute container lg:ml-36 px-4 z-10 py-24 lg:py-48">
-        <div className="max-w-6xl mx-auto">
-          <div className="grid lg:grid-cols-2 gap-12 items-center">
-            <div className="text-white space-y-8 animate-fade-in">
-              <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold leading-tight bg-gradient-to-r from-blue-50 to-blue-400 bg-clip-text text-transparent">
-                {t('hero.line1', 'Transform Your')}
-                <span className="block">{t('hero.line2', 'Digital Presence')}</span>
-              </h1>
+      <div className="flex z-10 lg:ml-36 px-4 py-24 lg:py-48 w-full h-full relative">
+        <div className="flex items-start w-full">
+          <div className="text-white space-y-8 animate-fade-in">
+            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold leading-tight bg-gradient-to-r from-blue-50 to-blue-400 bg-clip-text text-transparent">
+              {t('hero.line1', 'Transform Your')}
+              <span className="block">{t('hero.line2', 'Digital Presence')}</span>
+            </h1>
 
-              <p className="text-xl md:text-2xl text-white/90 leading-relaxed max-w-2xl">
-                {t(
-                  'hero.description',
-                  'We create innovative and cutting-edge digital products, developing personalized solutions, websites, and extraordinary applications that offer unique experiences and maximize success in the market.'
-                )}
-              </p>
+            <p className="text-xl md:text-2xl text-white/90 leading-relaxed max-w-2xl">
+              {t(
+                'hero.description',
+                'We create innovative and cutting-edge digital products, developing personalized solutions, websites, and extraordinary applications that offer unique experiences and maximize success in the market.'
+              )}
+            </p>
 
-              <div className="flex flex-col sm:flex-row gap-4 pt-4">
-                <Button
-                  variant="hero"
-                  size="xl"
-                  onClick={() => scrollToSection('contact')}
-                  className="group"
-                >
-                  {t('hero.ctaPrimary', 'Start Your Project')}
-                  <span className="group-hover:translate-x-1 transition-transform">→</span>
-                </Button>
+            <div className="flex flex-col sm:flex-row gap-4 pt-4">
+              <Button
+                variant="hero"
+                size="xl"
+                onClick={() => scrollToSection('contact')}
+                className="group"
+              >
+                {t('hero.ctaPrimary', 'Start Your Project')}
+                <span className="group-hover:translate-x-1 transition-transform">→</span>
+              </Button>
 
-                <Button
-                  variant="outline-hero"
-                  size="xl"
-                  onClick={() => scrollToSection('services')}
-                >
-                  {t('hero.ctaSecondary', 'Learn More')}
-                </Button>
-              </div>
+              <Button variant="outline-hero" size="xl" onClick={() => scrollToSection('services')}>
+                {t('hero.ctaSecondary', 'Learn More')}
+              </Button>
             </div>
           </div>
         </div>
diff --git a/src/components/views/About.tsx b/src/components/views/About.tsx
index 671ab01..b403dd5 100644
--- a/src/components/views/About.tsx
+++ b/src/components/views/About.tsx
@@ -16,7 +16,7 @@ const AboutView = () => {
 
   return (
     <section
-      className="relative min-h-screen h-full overflow-hidden bg-slate-900 bg-cover bg-center "
+      className="relative min-h-[800px] h-screen overflow-hidden bg-slate-900 bg-cover bg-center "
       style={{ backgroundImage: `url(${Hero})` }}
     >
       <div className="absolute z-2 inset-0 bg-black opacity-50 w-full h-full"></div>