Edit services

src/Components/Sections/Services/Services.jsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { Wallet, Zap, Users, PieChart, Sparkles } from "lucide-react";
-// import { useTranslation } from "react-i18next";
 import { withTranslation } from "react-i18next";
 
-const Services = ({ t, i18n })=> {
+const Services = ({ t, i18n }) => {
   
   const features = [
     {
@@ -33,47 +32,46 @@ const Services = ({ t, i18n })=> {
   ];
 
   return (
-    <section id="services" >
-    <div className="min-h-screen bg-transparent font-sans overflow-hidden relative" dir="rtl">
-    <div className="min-h-screen bg-transparent font-sans overflow-hidden relative">
-      <div className="absolute inset-0 z-0 overflow-hidden">
-        <div className="absolute inset-0 bg-transparent"></div>
-      </div>
-      <div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center">
-        <div className="flex flex-col justify-center max-h-screen">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-10 max-w-4xl mx-auto p-6">
-            {features.map((feature) => (
-              <div 
-                key={feature.id} 
-                className="group relative overflow-hidden"
-              >
-                <div className="absolute inset-0 bg-gradient-to-br from-white to-[#47718b] rounded-2xl shadow-lg group-hover:shadow-2xl transition-all duration-500 border border-gray-200 group-hover:border-[#47718b]"></div>
-                
-                <div className="relative p-6 z-10">
-                  <div className="flex items-start space-x-5 rtl:space-x-reverse">
-                    <div className="p-3 bg-gradient-to-br from-white to-[#47718b] rounded-xl group-hover:from-[#47718b] group-hover:to-[#063e5b] group-hover:text-white transition-all duration-500 shadow-sm group-hover:shadow-lg">
-                      {feature.icon}
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-[#47718b] transition-colors duration-500">
-                        {feature.title}
-                      </h3>
-                      <p className="text-gray-600 leading-relaxed text-sm">
-                        {feature.description}
-                      </p>
+    <section id="services">
+      <div className="min-h-screen bg-transparent font-sans overflow-hidden relative w-full" dir="rtl">
+        <div className="relative z-10 flex flex-col lg:flex-row min-h-screen items-center w-full">
+          {/* Left side - Features Cards */}
+          <div className="w-full lg:w-1/2 flex flex-col justify-center px-4 sm:px-6 md:px-8 py-12 lg:py-0">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4 sm:gap-6 md:gap-8 max-w-7xl mx-auto w-full">
+              {features.map((feature) => (
+                <div 
+                  key={feature.id} 
+                  className="group relative overflow-hidden w-full"
+                >
+                  <div className="absolute inset-0 bg-gradient-to-br from-white to-[#47718b] rounded-2xl shadow-lg group-hover:shadow-2xl transition-all duration-500 border border-gray-200 group-hover:border-[#47718b]"></div>
+                  
+                  <div className="relative p-4 sm:p-5 md:p-6 z-10">
+                    <div className="flex items-start space-x-4 rtl:space-x-reverse">
+                      <div className="p-3 bg-gradient-to-br from-white to-[#47718b] rounded-xl group-hover:from-[#47718b] group-hover:to-[#063e5b] group-hover:text-white transition-all duration-500 shadow-sm group-hover:shadow-lg flex-shrink-0">
+                        {feature.icon}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h3 className="text-lg sm:text-xl md:text-xl font-bold text-gray-800 mb-2 sm:mb-3 group-hover:text-[#47718b] transition-colors duration-500 break-words">
+                          {feature.title}
+                        </h3>
+                        <p className="text-gray-600 leading-relaxed text-sm sm:text-sm md:text-base break-words">
+                          {feature.description}
+                        </p>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
-        </div>
-        <div className="relative lg:w-1/2 lg:min-h-screen flex items-center justify-center py-16 lg:py-0">
-          <div className="absolute inset-0 lg:inset-y-0 lg:right-0 lg:left-auto lg:w-[100%]">
-            <div className="absolute inset-0">
-              <div className="hidden lg:block absolute inset-0">
+
+          {/* Right side - Content with Gradient Background */}
+          <div className="w-full lg:w-1/2 relative min-h-[60vh] lg:min-h-screen flex items-center justify-center py-12 sm:py-16 lg:py-0">
+            <div className="absolute inset-0 w-full h-full">
+              {/* Desktop Gradient Background */}
+              <div className="hidden lg:block absolute inset-0 w-full h-full">
                 <div 
-                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
+                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl w-full h-full"
                   style={{
                     clipPath: 'circle(150% at 0% 50%)',
                     borderTopLeftRadius: '0',
@@ -81,12 +79,13 @@ const Services = ({ t, i18n })=> {
                     borderTopRightRadius: '9999px',
                     borderBottomRightRadius: '9999px'
                   }}
-                > 
-                </div>
+                ></div>
               </div>
-              <div className="lg:hidden absolute inset-0">
+              
+              {/* Mobile/Tablet Gradient Background */}
+              <div className="lg:hidden absolute inset-0 w-full h-full">
                 <div 
-                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl"
+                  className="absolute inset-0 bg-gradient-to-br from-[#57acd9] via-gray-700/85 to-[#47718b] backdrop-blur-xl w-full h-full"
                   style={{
                     clipPath: 'ellipse(150% 100% at 50% 0%)',
                     borderBottomLeftRadius: '9999px',
@@ -97,56 +96,57 @@ const Services = ({ t, i18n })=> {
                   <div className="absolute inset-0 border-2 border-white/20"></div>
                 </div>
               </div>
+              
+              {/* Decorative Elements */}
+              <div className="absolute inset-0 overflow-hidden">
+                <div className="absolute top-1/4 -left-8 sm:-left-16 w-48 h-48 sm:w-64 sm:h-64 bg-white/10 rounded-full backdrop-blur-md"></div>
+                <div className="absolute bottom-1/3 -left-4 sm:-left-8 w-32 h-32 sm:w-48 sm:h-48 bg-purple-400/20 rounded-full backdrop-blur-lg"></div>
+                <div className="absolute top-1/2 right-1/4 w-24 h-24 sm:w-32 sm:h-32 bg-indigo-400/15 rounded-full backdrop-blur-md animate-pulse"></div>
+              </div>
+              
+              <div className="absolute top-0 left-0 w-24 sm:w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
             </div>
-            <div className="absolute inset-0 overflow-hidden">
-              <div className="absolute top-1/4 -left-16 w-64 h-64 bg-white/10 rounded-full backdrop-blur-md"></div>
-              <div className="absolute bottom-1/3 -left-8 w-48 h-48 bg-purple-400/20 rounded-full backdrop-blur-lg"></div>
-              <div className="absolute top-1/2 right-1/4 w-32 h-32 bg-indigo-400/15 rounded-full backdrop-blur-md animate-pulse"></div>
-            </div>
-            <div className="absolute top-0 left-0 w-32 h-full bg-gradient-to-r from-white/5 to-transparent"></div>
-          </div>
-          {/* <div className="relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto"> */}
-         <div 
-  className={`relative z-20 text-white p-8 md:p-12 lg:p-16 max-w-2xl mx-auto lg:mr-16 lg:ml-auto ${
-    i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
-  }`}
->
-            <div className="space-y-8 lg:space-y-10">
-              <div className="relative">
-                <div className="flex items-center space-x-3 mb-2 rtl:space-x-reverse">
-                  <span className="text-sm font-semibold tracking-widest text-white">
-                    {t("services.summary")}
-                  </span>
-                  <Sparkles className="w-6 h-6 text-[#57acd9]" />
+            
+            {/* Content */}
+            <div 
+              className={`relative z-20 text-white p-6 sm:p-8 md:p-12 lg:p-16 max-w-full sm:max-w-2xl mx-auto w-full ${
+                i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+              }`}
+            >
+              <div className="space-y-6 sm:space-y-8 lg:space-y-10">
+                <div className="relative">
+                  <div className="flex items-center space-x-3 mb-2 rtl:space-x-reverse flex-wrap">
+                    <span className="text-sm sm:text-base font-semibold tracking-widest text-white">
+                      {t("services.summary")}
+                    </span>
+                    <Sparkles className="w-5 h-5 sm:w-6 sm:h-6 text-[#57acd9]" />
+                  </div>
+                  <h1 className={`text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4] leading-tight ${
+                    i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+                  }`}>
+                    {t("services.pageTitle")}
+                  </h1>
                 </div>
-                {/* <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4]"> */}
-                <h1 className={`text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-[#539cc4] ${
-  i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
-}`}>
-                  {t("services.pageTitle")}
-                </h1>
+                
+                <div className="space-y-4">
+                  <h2 className={`text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl ${
+                    i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
+                  }`}>
+                    {t("services.mainHeading")}
+                  </h2>
+                  <div className="w-16 sm:w-20 h-1 bg-gradient-to-r from-white to-[#57acd9] rounded-full"></div>
+                </div>
+                
+                <p className="text-base sm:text-lg md:text-xl text-purple-100/90 font-light leading-relaxed max-w-full sm:max-w-lg">
+                  {t("services.description")}
+                </p>
               </div>
-              <div className="space-y-4">
-                {/* <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl"> */}
-<h2 className={`text-2xl md:text-3xl lg:text-4xl font-bold leading-tight drop-shadow-xl ${
-  i18n && i18n.language === 'ar' ? 'text-right' : 'text-left'
-}`}>
-                  {t("services.mainHeading")}
-                </h2>
-                <div className="w-20 h-1 bg-gradient-to-r from-white to-[#57acd9] rounded-full"></div>
-              </div>
-              <p className="text-lg md:text-xl text-purple-100/90 font-light leading-relaxed max-w-lg">
-                {t("services.description")}
-              </p>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    </div>
-</section>
+    </section>
   );
 };
 
-// export default Services;
 export default withTranslation()(Services);