fix:theme alignment,margin,padding

Signed-off-by: Hermione Dadheech <[email protected]>
keploy · Mar 31, 2024 · a2505b2 · a2505b2
1 parent 6faafc4
commit a2505b2
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 83 deletions.
diff --git a/app/(default)/stub-generation/layout.tsx b/app/(default)/stub-generation/layout.tsx
diff --git a/app/(default)/stub-generation/page.tsx b/app/(default)/stub-generation/page.tsx
@@ -22,13 +22,13 @@ export default function Home() {
           image={testimonialData[1].image}
         />
         <SocialLinks/>
-        <Language />
         <Testimonial
           content={testimonialData[0].content}
           author={testimonialData[0].author}
           company={testimonialData[0].company}
           image={testimonialData[0].image}
         />
+        <Language />
         <Banner />
         <Footer />
     </>

diff --git a/components/FeatureMoblieView.tsx b/components/FeatureMoblieView.tsx
@@ -12,7 +12,7 @@ import deDuplication from '@/public/images/CaptureAndReplayV2.json';
 import { Player, Controls } from '@lottiefiles/react-lottie-player';
 import CopyButton from '@/public/images/icons8-copy-96.png';
 import ClipboardJS from 'clipboard';
-
+import Link from 'next/link';
 export default function FeaturesMobileView() {
   const [tab, setTab] = useState<number>(1);
 
@@ -83,18 +83,21 @@ export default function FeaturesMobileView() {
               </div>
               {/* Tabs buttons */}
               <div className="mb-8 md:mb-0 ">
-                <a
+                <div
                   className={`flex items-center text-lg p-5 rounded border ease-in-out mb-3  transition duration-300 hover:shadow-lg ${
                     tab !== 1
                       ? 'bg-white shadow-md border-gray-200 hover:shadow-lg '
                       : 'bg-gray-200 border-transparent shadow-lg '
                   }`}
-                  href="#0"
                   onClick={(e) => {
                     e.preventDefault();
                     setTab(1);
                   }}
                 >
+                  <div className="flex flex-col">
+
+                    <div className="flex items-center">
+
                   <div>
                     <div className="mb-1 font-bold leading-snug tracking-tight text-secondary-300 ">
                       Test and Stubs Generation
@@ -113,7 +116,13 @@ export default function FeaturesMobileView() {
                       <path d="M11.953 4.29a.5.5 0 00-.454-.292H6.14L6.984.62A.5.5 0 006.12.173l-6 7a.5.5 0 00.379.825h5.359l-.844 3.38a.5.5 0 00.864.445l6-7a.5.5 0 00.075-.534z" />
                     </svg>
                   </div>
-                </a>
+                    </div>
+                    <div>
+                      <Link className="btn mt-4 text-secondary-300 bg-primary-300 hover:text-white w-full mb-4 sm:w-auto sm:mb-0" href="/stub-generation">Explore More</Link>
+                    </div>
+                  </div>
+
+                </div>
                 <a
                   className={`flex items-center text-lg p-5 rounded border ease-in-out mb-3 transition duration-300 hover:shadow-lg ${
                     tab !== 2

diff --git a/components/features.tsx b/components/features.tsx
@@ -12,7 +12,7 @@ import deDuplication from "@/public/images/CaptureAndReplayV2.json";
 import { Player, Controls } from "@lottiefiles/react-lottie-player";
 import CopyButton from "@/public/images/icons8-copy-96.png";
 import ClipboardJS from "clipboard";
-
+import Link from "next/link";
 import gsap from "gsap"; // <-- import GSAP
 import { useGSAP } from "@gsap/react"; // <-- import the hook
 import { ScrollTrigger } from "gsap/all";
@@ -129,10 +129,12 @@ const TextSection = ({
   svg,
   heading,
   description,
+  btnDescription
 }: {
   svg: any;
   heading: string;
   description: string;
+  btnDescription?:string;
 }) => {
   return (
     <div className="flex flex-col items-center pl-4 mt-6 mb-8 text-center md:block md:mb-0 h-min md:text-left md:mt-0 text-details">
@@ -143,6 +145,9 @@ const TextSection = ({
         {heading}
       </div>
       <div className="text-gray-600 md:text-lg">{description}</div>
+      {btnDescription && <div>
+        <Link className="btn mt-8 text-secondary-300 bg-primary-300 hover:text-white w-full mb-4 sm:w-auto sm:mb-0" href="/stub-generation">{btnDescription}</Link>
+      </div>}
     </div>
   );
 };
@@ -236,6 +241,7 @@ export default function Features() {
                 }
                 heading={" Test and Stubs Generation"}
                 description=" Record and replay complex, distributed API flows as mocks and stubs. It's like time machine for tests!"
+                btnDescription="Explore More"
               />
             </div>
             <div className="flex items-center detail">

diff --git a/components/stub-generation/banner.tsx b/components/stub-generation/banner.tsx
@@ -25,13 +25,13 @@ export default function Banner() {
                     </a>
                   </div>
                   <div>
-                    <a className="btn text-white bg-secondary-300 hover:text-primary-300 w-full border-white sm:w-auto sm:ml-4" href="https://www.github.com/keploy/keploy">Try Locally</a>
+                    <a className="btn text-white bg-secondary-300 hover:text-primary-300 w-full border-white sm:w-auto sm:ml-4 sm:mt-4 lg:mt-0" href="https://www.github.com/keploy/keploy">Try Locally</a>
                   </div>
                 </div>
               </div>
             </div>
 
-            <div className="absolute right-0 bottom-0 hidden md:block ">
+            <div className="absolute right-0 bottom-0 hidden lg:block ">
               <Image src={BannerBunny} alt="Image" />
             </div>
           </div>

diff --git a/components/stub-generation/block.tsx b/components/stub-generation/block.tsx
@@ -26,7 +26,7 @@ export default function ProblemBlocks() {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
                   </svg>
                 </span>
-                &nbsp; Employ &nbsp;
+                &nbsp; Say Hi to &nbsp;
                 <span className="inline-block transform rotate-180">
                   <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />

diff --git a/components/stub-generation/community.tsx b/components/stub-generation/community.tsx
@@ -6,7 +6,7 @@ import { socialLinks } from '../utils/stub-generation';
 const SocialCloud: React.FC = () => {
   const [value, setValue] = useState("Where Code Meets Community!")
   return (
-    <section className='bg-neutral-100 '>
+    <section className='bg-neutral-100 py-8'>
       <div className="max-w-3xl mx-auto text-center ">
         <h2 className="h2 text-secondary-300 ">
           🐰 Join the Keploy community ✨
@@ -30,7 +30,7 @@ const SocialCloud: React.FC = () => {
         ))}
 
       </div>
-      <p className='text-center text-xl text-gray-700 mb-4'>{value}</p>
+      <p className='text-center text-xl text-gray-700 '>{value}</p>
 
     </section>
 

diff --git a/components/stub-generation/feature.tsx b/components/stub-generation/feature.tsx
@@ -3,17 +3,17 @@ import { featuresData } from "../utils/stub-generation";
 
 export default function Features() {
   return (
-    <section className="bg-neutral-100 text-gray-900 pt-20 px-4 sm:px-6">
+    <section className="bg-neutral-100 text-gray-900 pt-12 px-4 mb-20 sm:px-6">
       <div className="container mx-auto px-4">
 
         {/* Section Heading */}
         <div className="text-center mb-12">
-          <h2 className="text-2xl text-center  text-accent-200 mb-4">Transforming interactions into realistic, diverse, and customizable stubs for precise testing</h2>
+          <h2 className="text-xl text-center text-gray-600 pb-12 md:mt-12">Transforming interactions into realistic, diverse, and customizable stubs for precise testing</h2>
           <h2 className="h2 font-bold text-secondary-300">
             With Keploy's stub generation{" "}
-            <span className="relative inline-block pl-1 border-l-2 border-primary-400" data-aos="fade-right" data-aos-delay="200">{" "}
+            <span className="relative inline-block pl-1 border-l-2 border-primary-400 mt-3" data-aos="fade-right" data-aos-delay="200">{" "}
               <span
-                className="absolute inset-0 bg-gradient-to-r from-primary-300 to-primary-50 opacity-50"
+                className="absolute inset-0 bg-gradient-to-r from-primary-300 to-primary-50 opacity-50 "
                 aria-hidden="true"
               />
               <span className="relative text-orange-500 " data-aos="fade-in" data-aos-delay="500">eliminate&nbsp;</span></span>

diff --git a/components/stub-generation/hero.tsx b/components/stub-generation/hero.tsx
@@ -9,13 +9,25 @@ export default function Hero() {
   return (
     <section className="relative bg-neutral-100  text-gray-800 overflow-hidden">
       <div className="max-w-6xl mx-auto px-4 sm:px-6">
-        <div className="pt-20 md:pt-32 pb-5 md:pt-40">
+        <div className="pt-32 pb-5 md:pt-40">
           <div >
-            <p className="text-xl md:text-2xl text-center  text-accent-200 mb-4 md:mb-20">
+            <p className="text-2xl text-center  text-accent-200 mb-4 md:mb-20">
               Transforming User Scenarios into Reliable Test Data Instantly!
             </p>
           </div>
-          <div className="flex flex-wrap justify-center items-start gap-16 md:flex-row-reverse ">
+          <div className="flex flex-wrap justify-center items-start md:gap-8 md:flex-row ">
+          <div className="md:flex-1">
+              <div className="text-center md:text-left">
+                <h1 className="text-4xl md:text-5.5xl text-secondary-300 font-extrabold leading-tighter tracking-tighter mb-4 md:mb-24 ">
+                  Effortless Stub Generation
+                  <span className="bg-clip-text text-transparent bg-gradient-to-r from-gradient-500 to-gradient-200"> for Comprehensive Test Coverage!</span>
+                </h1>
+
+                <p className="text-xl text-accent-200 mb-8">
+                  Seamlessly Convert User Interactions into Precise Test Cases and Data Stubs 🚀
+                </p>
+              </div>
+            </div>
           <div className="md:flex-1 ">
               <Player
                 autoplay
@@ -31,17 +43,7 @@ export default function Hero() {
                 />
               </Player>
             </div>
-            <div className="md:flex-1">
-              <div className="text-center md:text-left">
-                <h1 className="text-3xl md:text-5.5xl text-secondary-300 font-extrabold leading-tighter tracking-tighter mb-24">
-                  Effortless Stub Generation
-                  <span className="bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-orange-200"> for Comprehensive Test Coverage!</span>
-                </h1>
-                <p className="text-xl text-gray-700 mb-8">
-                  Seamlessly Convert User Interactions into Precise Test Cases and Data Stubs 🚀
-                </p>
-              </div>
-            </div>
+
 
           </div>
         </div>