Skip to content

Commit a0b7753

Browse files
Aditya-eddyHermione2408
Aditya-eddy
authored and
Hermione2408
committed
feat: adding twitter mentions (#8)
* Adding twitter mentions Signed-off-by: Aditya-eddy <aditya282003@gmail.com> * pushing the changes Signed-off-by: Aditya-eddy <aditya282003@gmail.com> * adding above changes Signed-off-by: Aditya-eddy <aditya282003@gmail.com> * adding required changes Signed-off-by: Aditya-eddy <aditya282003@gmail.com> * adding the padding Signed-off-by: Aditya-eddy <aditya282003@gmail.com> * adding padding Signed-off-by: Aditya-eddy <aditya282003@gmail.com> --------- Signed-off-by: Aditya-eddy <aditya282003@gmail.com>
1 parent a2505b2 commit a0b7753

File tree

6 files changed

+266
-4
lines changed

6 files changed

+266
-4
lines changed

‎app/(default)/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Language from "@/components/language";
1313
import Community from "@/components/community";
1414
import { Testimonial } from "@/components/testimonial";
1515
import { testimonialData } from "@/components/utils/testimonial";
16+
import TwitterTestimonials from "@/components/TwitterTestimonials";
1617

1718
export default function Home() {
1819
return (
@@ -35,10 +36,9 @@ export default function Home() {
3536
image={testimonialData[1].image}
3637
/>
3738
<Language />
39+
<TwitterTestimonials/>
3840
<Newsletter />
39-
4041
<Footer />
4142
</>
4243
)
4344
}
44-

‎components/FeatureMoblieView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default function FeaturesMobileView() {
6565
</div>
6666

6767
{/* Section content */}
68-
<div className="pb-3 md:grid md:grid-cols-12 md:gap-6 md:pb-10 sm:pb-3">
68+
<div className="pb-3 pt-5 md:grid md:grid-cols-12 md:gap-6 md:pb-10 sm:pb-3">
6969
{/* Content */}
7070
<div
7171
className="max-w-xl mx-auto md:max-w-none md:w-full md:col-span-7 lg:col-span-6 md:mt-6"

‎components/TwitterTestimonials.tsx

+208
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
"use client"
2+
import React, { useEffect, useState } from "react";
3+
import Tweet from "./tweets";
4+
const tweets = [
5+
{
6+
avatar:
7+
"https://pbs.twimg.com/profile_images/837573171427487744/IGQLsM55_400x400.jpg",
8+
name: "やまもと@視力2.0",
9+
id: "yamamoto_febc",
10+
post: "https://x.com/yamamoto_febc/status/1755802346188390531?s=20",
11+
content:
12+
"It is quite easy to create normal tests. On the other hand, abnormal systems may be a little difficult. I think it's okay to use it only for normal systems.",
13+
},
14+
{
15+
avatar:
16+
"https://pbs.twimg.com/profile_images/1653250498127089665/x5RJbLq5_400x400.jpg",
17+
name: "きょん/kyong",
18+
id: "kyongshiii06",
19+
post: "https://x.com/kyongshiii06/status/1753030333128495470?s=20",
20+
content:
21+
"I tried keploy, but it was amazing. Just wrap and start docker, and then just hit the API with curl or the client and you'll be able to test more and more. This is the golden test.",
22+
},
23+
{
24+
avatar:
25+
"https://pbs.twimg.com/profile_images/1741543460115812352/8x4aAI9k_400x400.jpg",
26+
name: "Shivam Sourav Jha",
27+
id: "ShivamSouravJha",
28+
post: "https://x.com/ShivamSouravJha/status/1747517726749286713?s=20",
29+
content:
30+
"Why do I like keploy so much? Literally I see many tools and so hard to integrate. I mean update VScode , use the sdk , make this change make that change. With Keploy, don't worry buddy just run your application, we will literally do everything for you. You need to 0 efforts.",
31+
},
32+
{
33+
avatar:
34+
"https://pbs.twimg.com/profile_images/1653250498127089665/x5RJbLq5_400x400.jpg",
35+
name: "きょん/kyong",
36+
id: "kyongshiii06",
37+
post: "https://x.com/kyongshiii06/status/1746532217336250821?s=20",
38+
content:
39+
"Keploy can record and replay complex, distributed API flows as mocks and stubs. It's like having a time machine for your tests—saving you tons of time.",
40+
},
41+
{
42+
avatar:
43+
"https://pbs.twimg.com/profile_images/1422864637532332033/mC1Nx0vj_400x400.jpg",
44+
name: "matsuu@充電期間",
45+
id: "matsuu",
46+
post: "https://x.com/matsuu/status/1747448928575099236?s=20",
47+
content:
48+
"Based on the communication trace information that can be obtained using eBPF, it is possible to generate a test and a stub server to be used when executing the test.” / “The automated testing tool “Keploy” using eBPF is amazing.",
49+
},
50+
{
51+
avatar:
52+
"https://pbs.twimg.com/profile_images/1604797450124144640/6G7KytX8_400x400.jpg",
53+
name: "あんどーぼんばー",
54+
id: "AndooBomber",
55+
post: "https://x.com/AndooBomber/status/1747663021747691808?s=20",
56+
content:
57+
"I tried Keploy, but it might be a god tool. The automated testing tool “Keploy” using eBPF is amazing",
58+
},
59+
{
60+
avatar:
61+
"https://pbs.twimg.com/profile_images/1569793803313201154/Lso5fu1j_400x400.jpg",
62+
name: "Jay Vasant",
63+
id: "__alter123",
64+
post: "https://x.com/__alter123/status/1731985031521014236?s=20",
65+
content:
66+
"The point being, maintaining unit tests is terribly difficult, and in general requires more efforts than the actual development itself. I've hardly seen any startups even at good scale able to manage unit tests. If you really think it's a requirement you can try tools like Keploy. But I feel even if you honestly think, manual testing should be always feasible",
67+
},
68+
{
69+
avatar:
70+
"https://pbs.twimg.com/profile_images/1213737438830452736/5_5zXtXN_400x400.jpg",
71+
name: "mugi",
72+
id: "mugi_uno",
73+
post: "https://x.com/mugi_uno/status/1745726154924003502?s=20",
74+
content:
75+
"I want to try this. I think the problem with mock data is that it is difficult to maintain, so if it makes it easier, I think it would be a good idea. The automated testing tool “Keploy” using eBPF is amazing",
76+
},
77+
{
78+
avatar:
79+
"https://pbs.twimg.com/profile_images/1482259385959464960/1pQMXwj7_400x400.jpg",
80+
name: "yadon",
81+
id: "Seipann11",
82+
post: "https://x.com/Seipann11/status/1755989987039064103?s=20",
83+
content:
84+
"Keploy is seriously amazing, a genius Indian is crushing issues at lightning speed.",
85+
},
86+
{
87+
avatar:
88+
"https://pbs.twimg.com/profile_images/1763255658777120770/7SsuKwlS_400x400.jpg",
89+
name: "Akash Singh",
90+
id: "Kind_Of_Akash",
91+
post: "https://x.com/Kind_Of_Akash/status/1754207010470736165?s=20",
92+
content:
93+
"Hey people, I wanted to share about my first month as an open source contributor at Keploy -Picked up 10 issues including bugs, features, documentation and opened 3 issues. -Submitted 8 PR's, out of which 2 have been merged and rest are on review",
94+
},
95+
{
96+
avatar:
97+
"https://pbs.twimg.com/profile_images/1712175220176355329/sLXbk_PZ_400x400.jpg",
98+
name: "TadasG",
99+
id: "JustADude404",
100+
post: "https://x.com/JustADude404/status/1746888711491424681?s=20",
101+
content:
102+
"Keploy is a tool which can automatically generate tests based on data from your running app. It simply attaches to your app, reads the data being passed through, and generates tests with real data. Pretty cool, huh?",
103+
},
104+
{
105+
avatar:
106+
"https://pbs.twimg.com/profile_images/1701251291861712897/PiTZ0UO7_400x400.jpg",
107+
name: "Junichi.Y🐼@休職中",
108+
id: "ymnk_8752",
109+
post: "https://x.com/ymnk_8752/status/1745458928698450057?s=20",
110+
content:
111+
"Looks amazing. I hear about eBPF a lot, but I don't know what it is. The automated testing tool “Keploy” using eBPF is amazing",
112+
},
113+
];
114+
const TwitterTestimonials = () => {
115+
const [isMobile,setIsMobile] = useState(false);
116+
useEffect(()=>{
117+
const handleSize=()=>{
118+
setIsMobile(window.innerWidth>=1023);
119+
}
120+
handleSize();
121+
window.addEventListener("resize",handleSize);
122+
return()=>{
123+
window.removeEventListener("resize",handleSize)
124+
}
125+
},[])
126+
return (
127+
<>
128+
<div className="relative mt-20 mb-20">
129+
<div className=" relative mt-2 mb-8 z-10 max-w-5xl mx-auto flex flex-col justify-center">
130+
<h3 className=" text-center h2 px-10 text-secondary-300">
131+
We love when users talk about Keploy..
132+
</h3>
133+
{isMobile ? (
134+
<div className="flex flex-row max-lg:flex-col mt-10">
135+
<div className="flex flex-col">
136+
{tweets.slice(0, 4).map((tweet, index) => (
137+
<Tweet
138+
key={index}
139+
avatar={tweet.avatar}
140+
name={tweet.name}
141+
id={tweet.id}
142+
post={tweet.post}
143+
content={tweet.content}
144+
/>
145+
))}
146+
</div>
147+
<div className="flex flex-col">
148+
{tweets.slice(4, 8).map((tweet, index) => (
149+
<Tweet
150+
key={index}
151+
avatar={tweet.avatar}
152+
name={tweet.name}
153+
id={tweet.id}
154+
post={tweet.post}
155+
content={tweet.content}
156+
/>
157+
))}
158+
</div>
159+
<div className="flex flex-col">
160+
{tweets.slice(8, 12).map((tweet, index) => (
161+
<Tweet
162+
key={index}
163+
avatar={tweet.avatar}
164+
name={tweet.name}
165+
id={tweet.id}
166+
post={tweet.post}
167+
content={tweet.content}
168+
/>
169+
))}
170+
</div>
171+
</div>
172+
):(
173+
<div className="flex flex-row max-lg:flex-col mt-10 mx-10">
174+
<div className="flex flex-col">
175+
{tweets.slice(0, 4).map((tweet, index) => (
176+
<Tweet
177+
key={index}
178+
avatar={tweet.avatar}
179+
name={tweet.name}
180+
id={tweet.id}
181+
post={tweet.post}
182+
content={tweet.content}
183+
/>
184+
))}
185+
</div>
186+
<div className="flex flex-col">
187+
{tweets.slice(4, 6).map((tweet, index) => (
188+
<Tweet
189+
key={index}
190+
avatar={tweet.avatar}
191+
name={tweet.name}
192+
id={tweet.id}
193+
post={tweet.post}
194+
content={tweet.content}
195+
/>
196+
))}
197+
</div>
198+
199+
</div>
200+
)}
201+
202+
</div>
203+
</div>
204+
</>
205+
);
206+
};
207+
208+
export default TwitterTestimonials;

‎components/tweets.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from "react";
2+
import Image from "next/image";
3+
import XImage from "@/public/images/x-twitter.svg";
4+
const Tweets = ({
5+
avatar,
6+
name,
7+
id,
8+
post,
9+
content,
10+
}: {
11+
avatar: string;
12+
name: string;
13+
id: string;
14+
post: string;
15+
content: string;
16+
}) => {
17+
return (
18+
<>
19+
<a
20+
className="bg-gray-100 border p-6 rounded-md lg:hover:shadow-md transition m-1 hover:scale-101"
21+
href={post}
22+
target="_blank"
23+
>
24+
<div className="flex flex-row items-center justify-between">
25+
<div className="flex flex-row gap-2 items-center">
26+
<img
27+
src={avatar}
28+
alt="profile_image"
29+
className="rounded-full h-12"
30+
/>
31+
<div className="flex flex-col justify-center">
32+
<div className="font-bold">{name}</div>
33+
<div className="">@{id}</div>
34+
</div>
35+
</div>
36+
<Image
37+
src={XImage}
38+
width={20}
39+
height={20}
40+
alt="twitter icon"
41+
/>
42+
</div>
43+
<div className="pt-2">{content}</div>
44+
</a>
45+
</>
46+
);
47+
};
48+
49+
export default Tweets;

‎public/images/x-twitter.svg

+1
Loading

‎tailwind.config.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,8 @@ module.exports = {
181181
'90': '0.9',
182182
},
183183
scale: {
184-
'98': '.98'
184+
'98': '.98',
185+
'101': '1.01'
185186
},
186187
animation: {
187188
float: 'float 3s ease-in-out infinite',
@@ -205,6 +206,9 @@ module.exports = {
205206
zIndex: {
206207
'-1': '-1',
207208
},
209+
variants: {
210+
width: ["responsive", "hover", "focus"]
211+
},
208212
},
209213
},
210214
plugins: [

0 commit comments

Comments
 (0)