Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Pricing Page for keploy #142

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

feat: Pricing Page for keploy #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
47d2354
#2382 Feature: Pricing Page
heyits-manan Nov 21, 2024
cfc6b9e
Merge branch 'main' into manan/issue2382
heyits-manan Nov 21, 2024
0ce0c06
feat: add event speaker (#136)
Sonichigo Nov 19, 2024
94c9586
#2382 Feature: Pricing Page
heyits-manan Nov 21, 2024
44ebb00
#2382 Feature: Pricing Page
heyits-manan Nov 21, 2024
722b916
Merge branch 'manan/issue2382' of https://github.com/heyits-manan/web…
heyits-manan Nov 21, 2024
b94733c
Update page.tsx
heyits-manan Nov 21, 2024
dd0cc7f
#2382 Feature: Pricing Page
heyits-manan Nov 21, 2024
1bc68c0
#2382 Feature: Pricing Page
heyits-manan Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions app/(default)/pricing/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
import React from "react";

const PricingPage: React.FC = () => {
return (
<div className="bg-gray-100 min-h-screen mt-24">
<header>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-5xl font-mono text-center font-black text-black py-12">
Find the Perfect Plan for You
</h1>
</div>
</header>

<main className="py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{/* Basic Plan */}
<div className="bg-white shadow rounded-3xl p-14 h-[700px]">
<h2 className="text-2xl font-bold text-gray-900">Basic Plan</h2>
<p className="mt-2 text-gray-600">
Perfect for individuals exploring Keploy
</p>
<div className="mt-14">
<span className="text-4xl font-bold text-gray-900">$0</span>
<span className="text-gray-600">/month</span>
</div>
<ul className="mt-10 space-y-4">
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-700">
Access to Open Source Features
</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-700">Community Support</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-700">Basic Data Mocking</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-700">10 Test Cases</span>
</li>
</ul>
<button className="mt-36 w-full bg-orange-500 text-white py-3 px-4 rounded hover:bg-orange-600">
Get Started
</button>
</div>

{/* Pro Plan */}
<div className="bg-gray-900 shadow rounded-3xl p-14 h-[700px]">
<h2 className="text-2xl font-bold text-white">Pro Plan</h2>
<p className="mt-2 text-gray-300">
Ideal for small teams and startups.
</p>
<div className="mt-14">
<span className="text-4xl font-bold text-white">$47</span>
<span className="text-gray-300">/month</span>
</div>
<ul className="mt-10 space-y-4">
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-300">
All Basic Plan Features
</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-300">
Advanced Data Mocking
</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-300">100 Test Cases</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-300">
Priority Community Support
</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-300">
Dashboard Analytics
</span>
</li>
</ul>
<button className="mt-32 w-full bg-orange-500 text-white py-3 px-4 rounded hover:bg-orange-600">
Choose Pro
</button>
</div>

{/* Enterprise Plan */}
<div className="bg-white shadow rounded-3xl p-14 h-[700px]">
<h2 className="text-2xl font-bold text-gray-900">
Enterprise Plan
</h2>
<p className="mt-2 text-gray-600">
Custom solutions tailored to your business needs.
</p>
<div className="mt-14">
<span className="text-4xl font-bold text-gray-900">
Contact
</span>
<span className="text-gray-600"> for pricing</span>
</div>
<ul className="mt-10 space-y-4">
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-700">
All Pro Plan Features
</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-700">
Unlimited Test Cases
</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-700">
Dedicated Account Manager
</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-700">
24/7 Priority Support
</span>
</li>
<li className="flex items-center">
<span className="text-green-500">✔</span>
<span className="ml-2 text-gray-700">
Custom Integration Support
</span>
</li>
</ul>
<button className="mt-28 w-full bg-orange-500 text-white py-3 px-4 rounded hover:bg-orange-600">
Contact Sales
</button>
</div>
</div>
</div>
</main>
</div>
);
};

export default PricingPage;
126 changes: 72 additions & 54 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import './css/style.css';
import '@/app/(default)/webstories/css/styles.css'
import { Inter } from 'next/font/google';
import Header from '@/components/ui/header';
import React, { ReactNode } from 'react';
import "./css/style.css";
import "@/app/(default)/webstories/css/styles.css";
import { Inter } from "next/font/google";
import Header from "@/components/ui/header";
import React, { ReactNode } from "react";

const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
display: 'swap',
subsets: ["latin"],
variable: "--font-inter",
display: "swap",
});

export interface Metadata {
Expand All @@ -18,19 +18,25 @@ export interface Metadata {
}

export const defaultMetadata: Metadata = {
title: 'Keploy | Open Source Stubs and API Test Generator for Developer',
keywords: "Integration testing, e2e Testing, ai testing, Unit Testing, API Testing, open source ai testing tool, Service Mocking, Dependency Mocking",
description: 'Keploy is AI based test case and stubs/mocks generator for integration and unit testing. 90% test coverage in minutes with open source testing tool',
title: "Keploy | Open Source Stubs and API Test Generator for Developer",
keywords:
"Integration testing, e2e Testing, ai testing, Unit Testing, API Testing, open source ai testing tool, Service Mocking, Dependency Mocking",
description:
"Keploy is AI based test case and stubs/mocks generator for integration and unit testing. 90% test coverage in minutes with open source testing tool",
image: "images/logo.svg",
};

interface RootLayoutProps {
children: ReactNode;
metadata?: Metadata;
HeaderDisplayed?:boolean;
HeaderDisplayed?: boolean;
}

export default function RootLayout({ children, metadata , HeaderDisplayed=true }: RootLayoutProps) {
export default function RootLayout({
children,
metadata,
HeaderDisplayed = true,
}: RootLayoutProps) {
const finalMetadata = {
title: metadata?.title || defaultMetadata.title,
keywords: metadata?.keywords || defaultMetadata.keywords,
Expand All @@ -44,8 +50,11 @@ export default function RootLayout({ children, metadata , HeaderDisplayed=true }
<meta name="keywords" content={finalMetadata.keywords} />
<meta name="description" content={finalMetadata.description} />
<meta property="og:image" name="image" content={finalMetadata.image} />
<meta name='twitter:card' content={finalMetadata.image} />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TLL6DW2H6N"></script>
<meta name="twitter:card" content={finalMetadata.image} />
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-TLL6DW2H6N"
></script>
<script
dangerouslySetInnerHTML={{
__html: `
Expand All @@ -54,11 +63,11 @@ export default function RootLayout({ children, metadata , HeaderDisplayed=true }
gtag('js', new Date());
gtag('config', 'G-TLL6DW2H6N');
`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:3609484,hjsv:6};
Expand All @@ -67,35 +76,41 @@ export default function RootLayout({ children, metadata , HeaderDisplayed=true }
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a.q=c[a.q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "iu0391ggta");
`,
}}
/>
<script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/43912677.js"></script>
}}
/>
<script
type="text/javascript"
id="hs-script-loader"
async
defer
src="//js-na1.hs-scripts.com/43912677.js"
></script>

<script
dangerouslySetInnerHTML={{
__html: `
<script
dangerouslySetInnerHTML={{
__html: `
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P7DBR4PH');
`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
function initApollo() {
var n = Math.random().toString(36).substring(7);
var o = document.createElement("script");
Expand All @@ -109,12 +124,12 @@ export default function RootLayout({ children, metadata , HeaderDisplayed=true }
}
initApollo();
`,
}}
/>
<link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com" />
<script
dangerouslySetInnerHTML={{
__html: `
}}
/>
<link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com" />
<script
dangerouslySetInnerHTML={{
__html: `
window._vwo_code || (function() {
var account_id=943043,
version=2.1,
Expand All @@ -124,22 +139,25 @@ export default function RootLayout({ children, metadata , HeaderDisplayed=true }
/* DO NOT EDIT BELOW THIS LINE */
f=false,w=window,d=document,v=d.querySelector('#vwoCode'),cK='_vwo_'+account_id+'_settings',cc={};try{var c=JSON.parse(localStorage.getItem('_vwo_'+account_id+'_config'));cc=c&&typeof c==='object'?c:{}}catch(e){}var stT=cc.stT==='session'?w.sessionStorage:w.localStorage;code={use_existing_jquery:function(){return typeof use_existing_jquery!=='undefined'?use_existing_jquery:undefined},library_tolerance:function(){return typeof library_tolerance!=='undefined'?library_tolerance:undefined},settings_tolerance:function(){return cc.sT||settings_tolerance},hide_element_style:function(){return'{'+(cc.hES||hide_element_style)+'}'},hide_element:function(){if(performance.getEntriesByName('first-contentful-paint')[0]){return''}return typeof cc.hE==='string'?cc.hE:hide_element},getVersion:function(){return version},finish:function(e){if(!f){f=true;var t=d.getElementById('_vis_opt_path_hides');if(t)t.parentNode.removeChild(t);if(e)(new Image).src='https://dev.visualwebsiteoptimizer.com/ee.gif?a='+account_id+e}},finished:function(){return f},addScript:function(e){var t=d.createElement('script');t.type='text/javascript';if(e.src){t.src=e.src}else{t.text=e.text}d.getElementsByTagName('head')[0].appendChild(t)},load:function(e,t){var i=this.getSettings(),n=d.createElement('script'),r=this;t=t||{};if(i){n.textContent=i;d.getElementsByTagName('head')[0].appendChild(n);if(!w.VWO||VWO.caE){stT.removeItem(cK);r.load(e)}}else{var o=new XMLHttpRequest;o.open('GET',e,true);o.withCredentials=!t.dSC;o.responseType=t.responseType||'text';o.onload=function(){if(t.onloadCb){return t.onloadCb(o,e)}if(o.status===200||o.status===304){_vwo_code.addScript({text:o.responseText})}else{_vwo_code.finish('&e=loading_failure:'+e)}};o.onerror=function(){if(t.onerrorCb){return t.onerrorCb(e)}_vwo_code.finish('&e=loading_failure:'+e)};o.send()}},getSettings:function(){try{var e=stT.getItem(cK);if(!e){return}e=JSON.parse(e);if(Date.now()>e.e){stT.removeItem(cK);return}return e.s}catch(e){return}},init:function(){if(d.URL.indexOf('__vwo_disable__')>-1)return;var e=this.settings_tolerance();w._vwo_settings_timer=setTimeout(function(){_vwo_code.finish();stT.removeItem(cK)},e);var t;if(this.hide_element()!=='body'){t=d.createElement('style');var i=this.hide_element(),n=i?i+this.hide_element_style():'',r=d.getElementsByTagName('head')[0];t.setAttribute('id','_vis_opt_path_hides');v&&t.setAttribute('nonce',v.nonce);t.setAttribute('type','text/css');if(t.styleSheet)t.styleSheet.cssText=n;else t.appendChild(d.createTextNode(n));r.appendChild(t)}else{t=d.getElementsByTagName('head')[0];var n=d.createElement('div');n.style.cssText='z-index: 2147483647 !important;position: fixed !important;left: 0 !important;top: 0 !important;width: 100% !important;height: 100% !important;background: white !important;';n.setAttribute('id','_vis_opt_path_hides');n.classList.add('_vis_hide_layer');t.parentNode.insertBefore(n,t.nextSibling)}var o=window._vis_opt_url||d.URL,s='https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(o)+'&vn='+version;if(w.location.search.indexOf('_vwo_xhr')!==-1){this.addScript({src:s})}else{this.load(s+'&x=true')}}};w._vwo_code=code;code.init();})();
`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
!function(e,r){try{if(e.vector)return void console.log("Vector snippet included more than once.");var t={};t.q=t.q||[];for(var o=["load","identify","on"],n=function(e){return function(){var r=Array.prototype.slice.call(arguments);t.q.push([e,r])}},c=0;c<o.length;c++){var a=o[c];t[a]=n(a)}if(e.vector=t,!t.loaded){var i=r.createElement("script");i.type="text/javascript",i.async=!0,i.src="https://cdn.vector.co/pixel.js";var l=r.getElementsByTagName("script")[0];l.parentNode.insertBefore(i,l),t.loaded=!0}}catch(e){console.error("Error loading Vector:",e)}}(window,document);
vector.load("95211152-727d-4d43-9512-592ca65a1401");
`,
}} />
</head>
<body className={`${inter.variable} font-inter antialiased bg-white text-gray-900 tracking-tight`}>
}}
/>
</head>
<body
className={`${inter.variable} font-inter antialiased bg-white text-gray-900 tracking-tight`}
>
<div className="flex flex-col overflow-hidden supports-[overflow:clip]:overflow-clip">
{HeaderDisplayed && <Header />}
{HeaderDisplayed && <Header />}
{children}
</div>
</body>
</html>
);
</body>
</html>
);
}
Loading