ui: responsive tweaks for homepage hero height and index sections

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: actions-user

src/app/page.tsx

@@ -37,7 +37,7 @@ export default function Home() {
 
   return (
     <div className="font-[family-name:var(--font-geist-sans)]">
-      <div className="h-[450px] md:h-[550px] relative z-10">
+      <div className="h-[400px] md:h-[550px] relative z-10">
         <div className="preload-images"></div>
         <HeroCarousel />
       </div>

src/components/index/accordion-tabs.tsx

@@ -72,14 +72,20 @@ const AccordionTabsSection: React.FC = () => {
   const activeTabData = tabs.find((t) => t.id === activeTab) || tabs[0]
 
   return (
-    <section className={`${raleway.className} bg-gray-100 py-4 md:py-6`}>
+    <section className={`${raleway.className} bg-gray-100 py-4 md:py-6 pt-2`}>
       <div className="container mx-auto py-4 px-8 md:px-20 lg:px-32">
         <h1
-          className={`mb-2 text-[24px] text-[#333] font-normal tracking-normal ${raleway.className}`}
+          className={`mb-2 text-[20px] md:text-[24px] text-[#333] font-normal tracking-normal ${raleway.className} hidden md:block`}
           style={{ fontFamily: "'Raleway', sans-serif" }}
         >
           Enlist the Expertise of our Professional <strong>Software Engineers</strong> for your Project!
         </h1>
+        <h1
+          className={`mb-2 text-[20px] text-[#333] font-normal tracking-normal ${raleway.className} md:hidden`}
+          style={{ fontFamily: "'Raleway', sans-serif" }}
+        >
+          Hire Professional <strong>Software Engineers</strong> for Your Project
+        </h1>
         {/* separator-2 matching Laravel */}
         <div
           className="w-full h-px mb-2.5"
@@ -88,7 +94,7 @@ const AccordionTabsSection: React.FC = () => {
               'linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.12) 35%, rgba(0,0,0,0.05) 70%, transparent 100%)',
           }}
         />
-        <p className="text-[#777] text-lg mb-4" style={{ fontFamily: "'Raleway', sans-serif" }}>
+        <p className="text-[#999] text-lg mb-4" style={{ fontFamily: "'Raleway', sans-serif" }}>
           Opt for our services when seeking professional software solutions; let our{' '}
           <Link href="/portfolio" className="text-[#777] underline hover:text-[#555]">
             portfolio
@@ -125,7 +131,7 @@ const AccordionTabsSection: React.FC = () => {
                       transition={{ duration: 0.3, ease: 'easeInOut' }}
                       className="overflow-hidden"
                     >
-                      <div className="py-4 text-[14px] text-[#777] font-light leading-relaxed">{item.content}</div>
+                      <div className="py-4 text-[14px] text-[#999] font-light leading-relaxed">{item.content}</div>
                     </motion.div>
                   </div>
                 )

src/components/index/feature-section.tsx

@@ -65,14 +65,14 @@ const FeatureSection = () => {
   }, [])
 
   return (
-    <section className="bg-gray-100 py-4 md:py-8">
+    <section className="bg-gray-100 pb-2 py-4 md:py-8">
       <div className="container mx-auto px-8 md:px-20 lg:px-32">
         <div className="z-5 grid grid-cols-1 md:grid-cols-3 gap-2 items-stretch">
           {features.map((feature, index) => (
             <div
               key={index}
               data-index={index}
-              className={`feature-box transition-opacity duration-300 flex flex-col h-full rounded-lg mx-2 ${
+              className={`feature-box transition-opacity duration-300 flex flex-col h-full rounded-lg mx-2 pt-4 ${
                 visibleSections.includes(index) ? 'animate__animated animate__slideInDown' : 'opacity-0'
               }`}
               style={{
@@ -84,10 +84,14 @@ const FeatureSection = () => {
                   <FontAwesomeIcon icon={feature.icon} {...feature.iconProps} />
                 </span>
                 <div className="flex flex-col flex-1 h-full">
-                  <h4 className={`${Raleway.className} text-[#333333] leading-[1.2] text-[19px] font-normal`}>
+                  <h4
+                    className={`${Raleway.className} text-[#333333] leading-[1.2] text-[19px] font-normal whitespace-nowrap`}
+                  >
                     {feature.title}
                   </h4>
-                  <p className="mt-2 mb-3 text-[#999999] text-[16px] font-light flex-grow">{feature.description}</p>
+                  <p className="mt-2 mb-3 text-[#999999] text-[15px] leading-relaxed flex-grow ">
+                    {feature.description}
+                  </p>
                   <CustomButton
                     text="Read More"
                     link={feature.link}