Skip to content

Commit 6eecacc

Browse files
Srinu346Srinu346
committed
Fix: landing page responsiveness
1 parent 5f41812 commit 6eecacc

File tree

2 files changed

+69
-62
lines changed

2 files changed

+69
-62
lines changed

‎src/components/Product.js‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
44

55
function UTG() {
66
return (
7-
<div className="rounded-lg">
8-
<ul className="grid auto-cols-[300px] grid-flow-col gap-3 lg:gap-5">
9-
<li className="mt-5 flex flex-col space-y-3 text-lg">
7+
<div className="rounded-lg w-full">
8+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
9+
<div className="mt-5 flex flex-col space-y-3 text-lg">
1010
<Link
1111
className="text-foreground-light flex-grow text-sm"
1212
to={useBaseUrl("/running-keploy/unit-test-generator/")}
1313
>
14-
<div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)]">
14+
<div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 md:p-5 lg:p-6 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)] h-full">
1515
<div className="flex items-center space-x-4">
1616
<svg
1717
xmlns="http://www.w3.org/2000/svg"
18-
className="mb-4 h-10 w-10 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
18+
className="mb-4 h-8 w-8 md:h-10 md:w-10 lg:h-12 lg:w-12 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
1919
viewBox="0 0 64 64"
2020
width="13"
2121
height="16"
@@ -25,31 +25,31 @@ function UTG() {
2525
fill="#FF914D"
2626
/>
2727
</svg>
28-
<h2 className="mb-4 text-xl font-semibold">
28+
<h2 className="mb-4 text-lg md:text-xl font-semibold">
2929
Unit Testing Agent
3030
</h2>
3131
</div>
3232
<ul>
3333
<li>
34-
<p className="font">
34+
<p className="text-sm md:text-base leading-relaxed">
3535
Generate reliable, validated tests as you code, ensuring
3636
coverage and stability.
3737
</p>
3838
</li>
3939
</ul>
4040
</div>
4141
</Link>
42-
</li>
43-
<li className="mt-5 flex flex-col space-y-3 text-lg">
42+
</div>
43+
<div className="mt-5 flex flex-col space-y-3 text-lg">
4444
<Link
4545
className="text-foreground-light flex-grow text-sm"
4646
to={useBaseUrl("keploy-explained/introduction")}
4747
>
48-
<div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)]">
48+
<div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 md:p-5 lg:p-6 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)] h-full">
4949
<div className="flex items-center space-x-4">
5050
<svg
5151
xmlns="http://www.w3.org/2000/svg"
52-
className="mb-4 h-10 w-10 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
52+
className="mb-4 h-8 w-8 md:h-10 md:w-10 lg:h-12 lg:w-12 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
5353
viewBox="0 0 100 100"
5454
width="13"
5555
height="16"
@@ -75,31 +75,31 @@ function UTG() {
7575
d="M39.802 14.307l-.117 11.834c0 2.21-2.085 3.666-4.036 3.666-1.951 0-4.217-1.439-4.217-3.649l.037-12.58c0-1.307 1.607-2.451 2.801-2.451 1.194 0 2.345 1.149 2.345 2.456l.021 10.829c0 0-.083.667-1.005.645-.507-.012-1.145-.356-1.016-.906v-9.843h-.813l-.021 9.708c0 1.38.54 1.948 1.875 1.948s1.959-.714 1.959-2.094V13.665c0-2.271-1.36-3.5-3.436-3.5s-3.564 1.261-3.564 3.532l.032 12.11c0 3.04 2.123 4.906 4.968 4.906 2.845 0 5-1.71 5-4.75V14.307H39.802zM53.114 52.307h-23c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h23c.276 0 .5.224.5.5S53.391 52.307 53.114 52.307zM44.114 59.307h-14c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h14c.276 0 .5.224.5.5S44.391 59.307 44.114 59.307zM70.114 59.307h-24c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h24c.276 0 .5.224.5.5S70.391 59.307 70.114 59.307zM61.114 66.307h-11c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h11c.276 0 .5.224.5.5S61.391 66.307 61.114 66.307zM71.114 66.307h-8c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h8c.276 0 .5.224.5.5S71.391 66.307 71.114 66.307zM48.114 66.307h-18c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h18c.276 0 .5.224.5.5S48.391 66.307 48.114 66.307zM70.114 73.307h-13c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h13c.276 0 .5.224.5.5S70.391 73.307 70.114 73.307zM54.114 73.307h-24c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h24c.276 0 .5.224.5.5S54.391 73.307 54.114 73.307z"
7676
/>
7777
</svg>
78-
<h2 className="mb-4 text-xl font-semibold">
78+
<h2 className="mb-4 text-lg md:text-xl font-semibold">
7979
Integration Testing
8080
</h2>
8181
</div>
8282
<ul>
8383
<li>
84-
<p className="font">
84+
<p className="text-sm md:text-base leading-relaxed">
8585
Records and replays API calls with mocks for reliable
8686
integration testing and stability.
8787
</p>
8888
</li>
8989
</ul>
9090
</div>
9191
</Link>
92-
</li>
93-
<li className="mt-5 flex flex-col space-y-3 text-lg">
92+
</div>
93+
<div className="mt-5 flex flex-col space-y-3 text-lg">
9494
<Link
9595
className="text-foreground-light flex-grow text-sm"
9696
to={useBaseUrl("running-keploy/api-test-generator")}
9797
>
98-
<div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)]">
98+
<div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 md:p-5 lg:p-6 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)] h-full">
9999
<div className="flex items-center space-x-4">
100100
<svg
101101
xmlns="http://www.w3.org/2000/svg"
102-
className="mb-4 h-10 w-10 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
102+
className="mb-4 h-8 w-8 md:h-10 md:w-10 lg:h-12 lg:w-12 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
103103
viewBox="0 0 64 64"
104104
width="100"
105105
height="100"
@@ -216,40 +216,39 @@ function UTG() {
216216
</g>
217217
undefined
218218
</svg>
219-
<h2 className="mb-4 text-xl font-semibold">
219+
<h2 className="mb-4 text-lg md:text-xl font-semibold">
220220
API Testing Agent
221221
</h2>
222222
</div>
223223
<ul>
224224
<li>
225-
<p className="font">
225+
<p className="text-sm md:text-base leading-relaxed">
226226
Generates API tests from your docs, covering edge cases,
227227
ensuring coverage.
228228
</p>
229229
</li>
230230
</ul>
231231
</div>
232232
</Link>
233-
</li>
234-
</ul>
233+
</div>
234+
</div>
235235
</div>
236236
);
237237
}
238238

239239
export const Products = () => {
240240
return (
241-
<section className="mb-4 mt-12">
242-
<h2 className="mb-4 text-2xl font-semibold tracking-wide md:text-3xl">
243-
Products 🛠️
244-
</h2>
245-
<p className="text-l max-w-3xxl">
246-
Keploy provides three key products that help you streamline your testing
247-
workflow:
248-
</p>
249-
250-
<div className="grid gap-4 sm:grid-cols-3 xl:gap-6">
251-
<UTG />
241+
<section className="mb-4 mt-12 w-full">
242+
<div className="text-center mb-8 md:mb-12">
243+
<h2 className="mb-4 text-2xl md:text-3xl lg:text-4xl font-bold tracking-wide">
244+
Products 🛠️
245+
</h2>
246+
<p className="text-base md:text-lg max-w-3xl mx-auto leading-relaxed text-[color:var(--ifm-color-emphasis-700)]">
247+
Keploy provides three key products that help you streamline your testing
248+
workflow and ensure comprehensive test coverage.
249+
</p>
252250
</div>
251+
<UTG />
253252
</section>
254253
);
255254
};

‎src/components/QuickStart.js‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from "react";
22
import Link from "@docusaurus/Link";
33
import useBaseUrl from "@docusaurus/useBaseUrl";
4-
import {FaBook} from "react-icons/fa";
5-
import {FaRobot} from "react-icons/fa";
6-
import {FaWindows, FaLinux, FaApple} from "react-icons/fa";
4+
import { FaBook } from "react-icons/fa";
5+
import { FaRobot } from "react-icons/fa";
6+
import { FaWindows, FaLinux, FaApple } from "react-icons/fa";
77
export const QuickStart = () => {
88
return (
99
<section className="mt-1">
@@ -65,37 +65,45 @@ export const QuickStart = () => {
6565
testing.
6666
</p>
6767

68-
<div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
68+
<div >
6969
{/* Installation Card */}
70-
<Link
71-
className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
72-
to={useBaseUrl("/server/installation")}
73-
>
74-
<div class="flex gap-3">
75-
<FaWindows className="h-12 w-12 text-orange-500" />
76-
<FaLinux className="h-12 w-12 text-orange-500" />
77-
<FaApple className="h-12 w-12 text-orange-500" />
70+
<div className="grid gap-4 md:grid-cols-3 xl:gap-6 grid-cols-auto-fit">
71+
<div className="min-w-[30%]">
72+
<Link
73+
className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
74+
to={useBaseUrl("/server/installation")}
75+
>
76+
<div class="flex gap-3">
77+
<FaWindows className="h-12 w-12 text-orange-500" />
78+
<FaLinux className="h-12 w-12 text-orange-500" />
79+
<FaApple className="h-12 w-12 text-orange-500" />
80+
</div>
81+
<p className="pt-4 text-lg font-semibold">Installation</p>
82+
</Link>
7883
</div>
79-
<p className="pt-4 text-lg font-semibold">Installation</p>
80-
</Link>
8184

82-
{/* Quickstart Card */}
83-
<Link
84-
className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
85-
to={useBaseUrl("/docs/quickstart/quickstart-filter/")}
86-
>
87-
<FaBook className="h-12 w-12 text-orange-500" />
88-
<p className="pt-4 text-lg font-semibold">Quickstart Guide</p>
89-
</Link>
85+
{/* Quickstart Card */}
86+
<div className="min-w-[30%]">
87+
<Link
88+
className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
89+
to={useBaseUrl("/docs/quickstart/quickstart-filter/")}
90+
>
91+
<FaBook className="h-12 w-12 text-orange-500" />
92+
<p className="pt-4 text-lg font-semibold">Quickstart Guide</p>
93+
</Link>
94+
</div>
9095

91-
{/* AI-powered API Testing Card */}
92-
<Link
93-
className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
94-
to={useBaseUrl("/docs/running-keploy/generate-api-tests-using-ai/")}
95-
>
96-
<FaRobot className="h-12 w-12 text-orange-500" />
97-
<p className="pt-4 text-lg font-semibold">AI-powered API Testing</p>
98-
</Link>
96+
{/* AI-powered API Testing Card */}
97+
<div className="min-w-[30%]">
98+
<Link
99+
className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
100+
to={useBaseUrl("/docs/running-keploy/generate-api-tests-using-ai/")}
101+
>
102+
<FaRobot className="h-12 w-12 text-orange-500" />
103+
<p className="pt-4 text-lg font-semibold">AI-powered API Testing</p>
104+
</Link>
105+
</div>
106+
</div>
99107
</div>
100108
</div>
101109
</section>

0 commit comments

Comments
 (0)