Skip to content

Commit eebac60

Browse files
Bhavyajain21tusharmathmehulmathur001mehulmathur16
committed
feat: Redesign Home Page (#395)
Co-authored-by: Tushar Mathur <[email protected]> Co-authored-by: mehulmathur001 <[email protected]> Co-authored-by: mehulmathur16 <[email protected]>
1 parent de4d947 commit eebac60

22 files changed

+389
-128
lines changed

‎package-lock.json

Lines changed: 56 additions & 112 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/about/Founders.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Founder = ({founder}: Founder): JSX.Element => {
2424

2525
<div className="flex flex-col space-y-SPACE_02 items-start">
2626
<span className="text-content-small font-bold sm:text-title-small">{founder.name}</span>
27-
<span className="text-content-tiny sm:text-content-small text-tailCall-dark-100">{founder.title}</span>
27+
<span className="text-content-tiny sm:text-content-small text-tailCall-dark-500">{founder.title}</span>
2828
{/* <div className="flex items-center gap-x-SPACE_05">
2929
{founder.socialLinks.map((social) => (
3030
<SocialIcon key={social.id} social={social} />

‎src/components/home/Benefits.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from "react"
2+
import Heading from "@theme/Heading"
3+
import SectionTitle from "../shared/SectionTitle"
4+
import Partners from "./Partners"
5+
import BenefitsCard from "./BenefitsCard"
6+
7+
const Benefits = (): JSX.Element => {
8+
return (
9+
<section className="w-full pt-20 p-6 md:pb-20 lg:px-SPACE_16 bg-[#1C1D1F] grid-background">
10+
<div className="sm:max-w-7xl mx-SPACE_04 sm:mx-SPACE_10 lg:mx-auto py-SPACE_08 sm:py-SPACE_20">
11+
<div>
12+
<SectionTitle title="Benefits" />
13+
<div className=" h-fit sm:flex-row sm:items-center sm:space-x-SPACE_10 lg:space-x-SPACE_20">
14+
<Heading
15+
as="h3"
16+
className="text-title-large sm:text-display-tiny lg:text-display-small text-white md:w-[65%]"
17+
>
18+
Tailcall gives you a best-practice GraphQL backend that checks all the boxes.
19+
</Heading>
20+
</div>
21+
</div>
22+
<BenefitsCard />
23+
<Partners />
24+
</div>
25+
</section>
26+
)
27+
}
28+
29+
export default Benefits

‎src/components/home/BenefitsCard.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from "react"
2+
import {benefits} from "@site/src/constants"
3+
import {ArrowRight} from "lucide-react"
4+
5+
const BenefitsCard = (): JSX.Element => {
6+
const handleClick = (url: string) => {
7+
window.open(url, "_blank")
8+
}
9+
10+
return (
11+
<div className="mt-16 md:mb-0 mb-10">
12+
<div className="md:flex md:flex-wrap justify-center gap-10 w-[100%]">
13+
{benefits.map((item) => (
14+
<div
15+
className="group border border-solid border-tailCall-border-dark-300 rounded-3xl md:w-[40%] lg:w-[45%] md:px-10 px-4 py-2 pt-4 lg:flex benefits-drop-shadow hover:border-[#FDEA2E] md:mb-0 mb-6 cursor-pointer"
16+
key={item.id}
17+
onClick={() => handleClick(item.redirection_url)}
18+
>
19+
<div className="mr-4 md:mt-4">
20+
<img
21+
src={item.image}
22+
alt="Image Describing Why Tailcall"
23+
className="max-w-[72px] lg:w-[64px] sm:max-w-[110px]"
24+
/>
25+
</div>
26+
<div className="mt-4 flex flex-col">
27+
<p className="text-title-small text-white sm:text-title-large mb-SPACE_02 sm:mb-0 flex flex-start">
28+
{item.title}{" "}
29+
<span className="ml-4 md:text-gray-400 group-hover:text-white">
30+
<ArrowRight />
31+
</span>
32+
</p>
33+
<p className="text-content-tiny sm:text-content-small text-tailCall-light-600">{item.description}</p>
34+
</div>
35+
</div>
36+
))}
37+
</div>
38+
</div>
39+
)
40+
}
41+
42+
export default BenefitsCard

‎src/components/home/Configuration.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,15 @@ const Configuration = (): JSX.Element => {
1313
Get <span className="rounded-lg px-SPACE_02 bg-tailCall-yellow">Started</span>
1414
</Heading>
1515
<p className="text-content-small sm:text-content-medium mb-SPACE_11">
16-
Setup Tailcall via npm to build a high-performance <b>GraphQL API</b> on top of existing REST endpoints.
17-
Checkout our <Link href="/docs">docs</Link> for detailed tutorials and guides.
16+
Setup the Tailcall instantly via npm and unlock the power of high-performance API orchestration.
1817
</p>
18+
<div>
19+
<h5>More</h5>
20+
<p className="text-content-small sm:text-content-medium mb-SPACE_11">
21+
To dive deeper into TailCall checkout our <Link href="/docs">docs</Link> for detailed tutorials. Ideal for
22+
devs at any level, it's packed with advanced tips, powerful operators and best practices.
23+
</p>
24+
</div>
1925
</div>
2026
<div>
2127
<CodeBlock language="bash">npm i -g @tailcallhq/tailcall</CodeBlock>

‎src/components/home/CustomerFeedbackCard.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from "react"
2+
// @site/src/utils/index.ts
3+
4+
type CustomerFeedbackCardProps = {
5+
classNames?: string
6+
citation: string
7+
designation: string
8+
name?: string
9+
department?: string
10+
isCenterCard: boolean
11+
display: string
12+
}
13+
14+
const CustomerFeedbackCard: React.FC<CustomerFeedbackCardProps> = ({
15+
classNames,
16+
citation,
17+
designation,
18+
name,
19+
department,
20+
isCenterCard,
21+
display,
22+
}) => {
23+
return (
24+
<div
25+
className={`customer-feedback-card md:w-[33%] flex flex-col items-center justify-between bg-tailCall-dark-600 tailcall-light-100 text-white py-SPACE_06 px-SPACE_06 text-center text-content-small gap-y-SPACE_06 pb-10 ${classNames} ${
26+
isCenterCard && "md:!relative md:-top-10"
27+
}`}
28+
>
29+
{display === "Show" && department && (
30+
<>
31+
<span className={`sm:text-content-medium lg:text-content-large !font-bold !text-title-large`}>
32+
{`Loved by `}
33+
<span className={isCenterCard ? `text-tailCall-yellow` : ""}>{department}</span>
34+
</span>
35+
</>
36+
)}
37+
<span className="text-content-small sm:text-content-medium">{`“${citation}”`}</span>
38+
<span className="flex flex-col">
39+
{display === "Show" && name && (
40+
<span className="text-content-small sm:text-content-medium lg:text-content-large !font-bold">{name}</span>
41+
)}
42+
<span className="text-content-tiny sm:text-content-small">{designation}</span>
43+
</span>
44+
</div>
45+
)
46+
}
47+
48+
export default CustomerFeedbackCard

‎src/components/home/Partners.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,12 @@ import GreaterThanUnderscoreIcon from "@site/static/icons/basic/gt-undescore-gra
55
import {partnerImages} from "@site/src/constants"
66

77
const Partners = (): JSX.Element => {
8+
const handleClick = () => {
9+
window.open("/docs/deploy-graphql-github-actions/", "_blank")
10+
}
11+
812
return (
9-
<section className="mt-SPACE_08">
13+
<section className="md:mt-SPACE_16 mt-space_08 cursor-pointer" onClick={handleClick}>
1014
<div className="text-content-small font-bold sm:text-title-tiny lg:text-title-small text-tailCall-light-500 text-center space-x-1">
1115
<GreaterThanUnderscoreIcon className="h-4 w-6" />
1216
<span>Deploy Anywhere</span>

‎src/components/home/Testimonials.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from "react"
2+
import Heading from "@theme/Heading"
3+
import CustomerFeedbackCard from "./CustomerFeedbackCard"
4+
import {customerFeedbacks} from "@site/src/constants"
5+
6+
export enum TestimonialDisplay {
7+
Hide = "Hide",
8+
Show = "Show",
9+
Anon = "Anon",
10+
}
11+
12+
interface AppConfig {
13+
testimonials: TestimonialDisplay
14+
}
15+
16+
const config: AppConfig = {
17+
testimonials: TestimonialDisplay.Hide, // Default value
18+
}
19+
20+
const Testimonials = () => {
21+
if (config.testimonials === TestimonialDisplay.Hide) {
22+
return null
23+
}
24+
25+
return (
26+
<section className="customer-container !bg-tailCall-dark-600 h-full w-full text-tailCall-light-100 lg:px-SPACE_16 !bg-contain md:!bg-center">
27+
<div className="sm:max-w-7xl mx-SPACE_04 sm:mx-SPACE_10 lg:mx-auto sm:py-SPACE_20 py-SPACE_20 md:pt-SPACE_21 md:pb-SPACE_20">
28+
<div className="flex flex-row items-center justify-center">
29+
<Heading
30+
as="h5"
31+
className="text-title-large sm:text-display-tiny lg:text-display-medium flex flex-col items-center md:flex-row"
32+
>
33+
<span>Our Customers</span>
34+
<span className="bg-tailCall-yellow rounded-lg text-black px-SPACE_01 ml-SPACE_02">love us!</span>
35+
</Heading>
36+
</div>
37+
<div className="flex flex-col space-y-SPACE_10 md:flex-row md:space-x-SPACE_02 md:space-y-0 mt-SPACE_18">
38+
{customerFeedbacks.map((feedback) => (
39+
<CustomerFeedbackCard
40+
key={feedback.id}
41+
isCenterCard={feedback.id === 2}
42+
citation={feedback.citation}
43+
designation={feedback.designation}
44+
name={feedback?.name}
45+
department={feedback?.department}
46+
display={config.testimonials}
47+
/>
48+
))}
49+
</div>
50+
</div>
51+
</section>
52+
)
53+
}
54+
55+
export default Testimonials

‎src/components/home/index.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
11
import React from "react"
22

33
import Banner from "./Banner"
4-
import Features from "./Features"
54
import Graph from "./Graph"
6-
import LegacyGateway from "./TheProblem"
7-
import MoreFeatures from "./MoreFeatures"
8-
import Partners from "./Partners"
5+
import Benefits from "./Benefits"
96
import Discover from "../shared/Discover"
107
import Configuration from "./Configuration"
118
import Playground from "./Playground"
12-
9+
import Testimonials from "./Testimonials"
1310
const HomePage = (): JSX.Element => {
1411
return (
1512
<div className="">
1613
<Banner />
1714
<Configuration />
18-
<Partners />
19-
<LegacyGateway />
20-
<Features />
21-
<MoreFeatures />
15+
<Testimonials />
16+
<Benefits />
2217
<Graph />
2318
{/* <Playground /> */}
2419
<Discover />

‎src/components/shared/Discover.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ const Discover = (): JSX.Element => {
1111
return (
1212
<section>
1313
<div className="bg-tailCall-yellow relative flex items-center justify-center h-[208px] sm:h-[452px]">
14-
<BgTailcall className="sm:w-[90%] w-full absolute -bottom-36 sm:-bottom-28 lg:-bottom-SPA16" />
14+
<BgTailcall className="sm:w-[90%] w-full absolute -bottom-36 sm:-bottom-10 lg:-bottom-SPA16" />
1515

1616
<div className="flex flex-col items-center absolute max-w-3xl space-y-SPACE_04 sm:space-y-SPACE_06">
1717
<Heading as="h5" className="text-title-semi-large sm:text-display-medium text-center mb-0">
18-
Has this sparked your interest?
18+
Discover the power of enterprise solution.
1919
</Heading>
2020

2121
<div className="flex space-x-SPACE_03 sm:space-x-SPACE_06">

‎src/constants/index.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,65 @@ export const chooseTailcall: ChooseTailcall[] = [
223223
},
224224
]
225225

226+
export const benefits: Benefits[] = [
227+
{
228+
id: 1,
229+
title: "Secure",
230+
description:
231+
"Tailcaill has been validated against a comprehensive database of GraphQL vulnerabilities. Rest easy knowing your GraphQL backends are secure.",
232+
image: require("@site/static/images/home/secure-icon.png").default,
233+
redirection_url: "/docs/field-level-access-control-graphql-authentication/",
234+
},
235+
{
236+
id: 2,
237+
title: "High-Performance",
238+
description:
239+
"Tailcall performs ahead-of-time optimizations based on analysis of the schema and data dependencies. Deploy GraphQL without compromises.",
240+
image: require("@site/static/images/home/performance.png").default,
241+
redirection_url: "https://github.com/tailcallhq/graphql-benchmarks",
242+
},
243+
{
244+
id: 3,
245+
title: "Statically Verified",
246+
description:
247+
"Tailcall statically verifies that GraphQL schemas match resolvers and warns about N + 1 issues. Deploy new APIs with confidence.",
248+
image: require("@site/static/images/home/statically-verified-icon.png").default,
249+
redirection_url: "/docs/graphql-n-plus-one-problem-solved-tailcall/",
250+
},
251+
{
252+
id: 4,
253+
title: "Simple",
254+
description:
255+
"Tailcall simplifies GraphQL with a powerful configuration generator that can get thousands of APIs integrated in minutes. Configure with ease and deploy with confidence, knowing that complexities like batching, caching, error propagation and other forms of tuning are handled for you.",
256+
image: require("@site/static/images/home/simple-icon.png").default,
257+
redirection_url: "/docs/tailcall-dsl-graphql-custom-directives/",
258+
},
259+
{
260+
id: 5,
261+
title: "Customizable",
262+
description:
263+
"Write custom Javascript to customize any aspect of your GraphQL backend. Leverage this escape hatch to satisfy any requirement.",
264+
image: require("@site/static/images/home/customizable-icon.png").default,
265+
redirection_url: "/docs/graphql-javascript-customization/",
266+
},
267+
{
268+
id: 6,
269+
title: "Plug & Play",
270+
description:
271+
"Engineered to stay out of your way, shipping as a single executable with no dependencies or requirements. Get started quickly and easily.",
272+
image: require("@site/static/images/home/plug-play-icon.png").default,
273+
redirection_url: "/docs/",
274+
},
275+
{
276+
id: 7,
277+
title: "Open Source",
278+
description:
279+
"Tailcall is developed and released under the Apache 2 open source license, the gold standard for OSS. Embrace a vendor-neutral solution.",
280+
image: require("@site/static/images/home/open-source-icon.png").default,
281+
redirection_url: "https://github.com/tailcallhq/tailcall",
282+
},
283+
]
284+
226285
export const enterpriseFeatures: EnterpriseFeature[] = [
227286
{
228287
id: 1,
@@ -404,3 +463,27 @@ export enum Theme {
404463
Dark = "dark",
405464
Gray = "gray",
406465
}
466+
467+
export const customerFeedbacks: CustomerFeedback[] = [
468+
{
469+
id: 1,
470+
citation: `I stopped writing orchestration code, and now I get low-latency GraphQL APIs quickly, which let me ship low-latency apps.`,
471+
designation: `Sr. Frontend Engineer - Big Co. Inc.`,
472+
name: "John Doe",
473+
department: "Front-end",
474+
},
475+
{
476+
id: 2,
477+
citation: `I save so much time building APIs that are better than I could write by hand. Front-end engineers finally leave me alone!`,
478+
designation: `Sr. Backend Engineer - Big Co. Inc.`,
479+
name: "John Doe",
480+
department: "Backend",
481+
},
482+
{
483+
id: 3,
484+
citation: `I get the telemetry I need to monitor our GraphQL APIs  with a runtime that’s easy to scale, which doesn’t surprise me in production.`,
485+
designation: `Sr. Frontend Engineer - Big Co. Inc.`,
486+
name: "John Doe",
487+
department: "Ops",
488+
},
489+
]

0 commit comments

Comments
 (0)