Skip to content

Commit

Permalink
feat: landing page
Browse files Browse the repository at this point in the history
Create landing website
  • Loading branch information
rajdip-b authored Dec 28, 2023
2 parents 89b0d71 + 77f8a84 commit e1ec4d1
Show file tree
Hide file tree
Showing 15 changed files with 189 additions and 107 deletions.
32 changes: 32 additions & 0 deletions apps/web/app/components/Killers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import Image from "next/image"
import { Inter } from "next/font/google"
const inter = Inter({ subsets: ['latin'] })

type KillersProps = {
image: string
twitterUserName: string
}
const Killers = ({ image, twitterUserName }: KillersProps) => {
return (
<div className="flex items-center justify-cente gap-2">
<div className="flex justify-center items-center h-[48px] w-[48px] rounded-full border-[#3a3e41] border-solid border-[2px] bg-gradient-to-br from-[#181c20] to-[#282d31]">
<Image
src={`/./${image}.png`}
height={36}
width={37}
alt={`${image}`}
className='unselectable'
draggable='false'
/>
</div>
<div className={`flex flex-col justify-center items-center gap-1 ${inter.className}`}>
<p className="text-white text-sm">{image}</p>
<a href={`https://twitter.com/${twitterUserName}`} target="_blank">
<p className="text-[#727576] text-xs">@{twitterUserName}</p>
</a>
</div>
</div>
)
}

export default Killers
34 changes: 34 additions & 0 deletions apps/web/app/components/Links.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import Image from "next/image"
import { Inter } from "next/font/google"
const inter = Inter({ subsets: ['latin'] })
type LinksProps = {
icon: string
description: string
link: string
}


const Links = ({ icon, description, link }: LinksProps) => {
return (
<a
href={`${link}`}
target="_blank"
>
<div
className={`flex place-items-center gap-2 justify-center rounded-full border-[#3a3e41] border-solid border-[1px] bg-gradient-to-b from-[#0d1215]/45 to-[#323638]/45 px-4 py-2 ${inter.className} cursor-pointer transition-all ease-in-out duration-200 hover:scale-105`}
>
<Image
src={`./${icon}.svg`}
alt={`${icon}`}
height={12}
width={13}
className='unselectable'
draggable='false'
/>
<p className="text-white text-sm">{description}</p>
</div>
</a>
)
}

export default Links
9 changes: 9 additions & 0 deletions apps/web/app/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,12 @@
margin: 0;
padding: 0;
}

.unselectable {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
74 changes: 70 additions & 4 deletions apps/web/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,76 @@
import './global.css';
import { Metadata } from "next";

export const metadata = {
title: 'keyshade.xyz',
description: 'Distribute your secrets with ease',
};
const description = "Manage all your secrets securely with public key encryption and realtime based tools, that seamlessly fits into your codebase";
const name = "keyshade";

export const metadata: Metadata = {
metadataBase: new URL("https://keyshade.xyz/"),
title: {
default: name,
template: `%s | ${name}`,
},
description: description,
keywords: [
"Keyshade",
"secrets integration",
"codebase security",
"Public Key Encryption",
"secret rotation",
"auto revoke",
"collaboration",
"data security",
"secrets management",
"secure code secrets",
"realtime secrets integration",
"encryption for secrets",
"automated secret rotation",
"team collaboration secrets",
"secure runtime environment",
"secrets management tool",
"codebase security solution",
"cybersecurity for secrets",
"API security",
"key management",
"secure data transfer",
"secure secrets sharing",
"effortless secrets management",
"Keyshade features",
"cybersecurity solution",
"secure software development",
"automated access revocation",
"secure secrets storage",
"developer tools security",
"API key security",
"codebase encryption",
"team-based secrets management"
],
applicationName: name,
openGraph: {
title: name,
description: description,
type: "website",
locale: "en_US",
images: "https://keyshade.xyz/thumbnail.png",
},
twitter: {
card: "summary_large_image",
title: name,
description: description,
creator: "@keyshade_xyz",
creatorId: "1738929014016966656",
},
robots: {
index: true,
follow: true,
noarchive: true,
nocache: true,
googleBot: {
index: true,
follow: true,
},
},
};
export default function RootLayout({
children,
}: {
Expand Down
82 changes: 13 additions & 69 deletions apps/web/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import Image from 'next/image'
import { Inter, Poppins } from 'next/font/google'
// import { RiGitRepositoryLine } from "react-icons/ri";
const inter = Inter({ subsets: ['latin'] })

import { Poppins } from 'next/font/google'
import Links from './components/Links'
import Killers from './components/Killers'
import { Logo, Grid, Stars } from '../public'
const poppins = Poppins({
subsets: ['latin'],
weight: ['400', '500', '600', '700']
Expand All @@ -11,19 +11,15 @@ export default async function Index() {
return (
<div className="relative">
<div className="absolute z-10 opacity-25">
<section className="h-[100vh] w-screen bg-[radial-gradient(ellipse_at_top_center,_#999797_38.7%,#060b0e_80%)]"></section>
<section className="h-[100vh] w-screen bg-[radial-gradient(ellipse_at_top_center,_#fff_20%,#ff03080B_80%)] opacity-50" />
</div>
<div className="bg-[#0a0a0a] w-full min-h-screen flex justify-center items-center absolute">
<div>
<Image src="./grid.svg" alt="grid" fill></Image>
</div>
<div>
<Image src="./stars.svg" alt="stars" fill></Image>
</div>
<div className="bg-[#03080B] w-full min-h-screen flex justify-center items-center absolute">
<Grid className="h-[69.16vh] w-[61.23vw] absolute " />
<Stars className='h-[47.51vh] w-[87.92vw] absolute overflow-hidden' />
<div className="bg-transparent w-fit h-[75%] flex flex-col p-1 mt-20 gap-10 z-20">
<div className="flex flex-col items-center justify-center gap-10 min-w-screen">
<div className="flex items-center justify-center">
<Image src="./logo.svg" height={60} width={61} alt="logo" />
<Logo />
<h1
className={`px-4 bg-gradient-to-br from-[#727576] to-[#fafafb] inline-block text-transparent bg-clip-text text-6xl ${poppins.className} py-1 md:text-5xl lg:text-7xl`}
>
Expand All @@ -39,65 +35,13 @@ export default async function Index() {
</div>

<div className="flex gap-10 items-center justify-center">
<a href="https://docs.keyshade.xyz/" target="_blank">
<div
className={`flex place-items-center gap-2 justify-center rounded-full border-[#3a3e41] border-solid border-[1px] bg-gradient-to-b from-[#0d1215]/35 to-[#323638]/35 px-4 py-2 ${inter.className} cursor-pointer transition-all ease-in-out duration-200 hover:scale-105 `}
>
{/* <RiGitRepositoryLine className="text-white" /> */}
<p className="text-white text-sm">Documentation</p>
</div>
</a>
<a
href="https://github.com/keyshade-xyz/keyshade"
target="_blank"
>
<div
className={`flex place-items-center gap-2 justify-center rounded-full border-[#3a3e41] border-solid border-[1px] bg-gradient-to-b from-[#0d1215]/45 to-[#323638]/45 px-4 py-2 ${inter.className} cursor-pointer transition-all ease-in-out duration-200 hover:scale-105`}
>
<Image
src="./github.svg"
alt="x logo"
height={13}
width={13}
></Image>
<p className="text-white text-sm">Star on GitHub</p>
</div>
</a>
<Links icon='docs' description='Documentation' link='https://docs.keyshade.xyz/' />
<Links icon='github' description='Star on Github' link='https://github.com/keyshade-xyz/keyshade' />
</div>

<div className="flex items-center justify-center gap-24 mt-20">
<div className="flex items-center justify-cente gap-2">
<div className="flex justify-center items-center h-[48px] w-[48px] rounded-full border-[#3a3e41] border-solid border-[2px] bg-gradient-to-br from-[#181c20] to-[#282d31]">
<Image
src="./sawan.svg"
height={36}
width={36}
alt="sawan_bhattacharjee"
></Image>
</div>
<div className="flex flex-col justify-center items-center">
<p className="text-white text-sm">kriptonian</p>
<a href="https://twitter.com/kriptonian8" target="_blank">
<p className="text-[#727576] text-xs">@kriptonian8</p>
</a>
</div>
</div>
<div className="flex items-center justify-center gap-2">
<div className="flex justify-center items-center h-[48px] w-[48px] rounded-full border-[#3a3e41] border-solid border-[2px] bg-gradient-to-br from-[#181c20] to-[#282d31]">
<Image
src="./rajdip.svg"
height={36}
width={36}
alt="sawan_bhattacharjee"
></Image>
</div>
<div className="flex flex-col justify-center items-center">
<p className="text-white text-sm">rajdip-b</p>
<a href="https://twitter.com/RajB47" target="_blank">
<p className="text-[#727576] text-xs">@RajB47</p>
</a>
</div>
</div>
<Killers image='kriptonian' twitterUserName='kriptonian8' />
<Killers image='rajdip-b' twitterUserName='RajB47' />
</div>
</div>
</div>
Expand Down
34 changes: 20 additions & 14 deletions apps/web/next.config.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');
const { composePlugins, withNx } = require('@nx/next')
const path = require('path')

/**
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
**/
/** @type {import('next').NextConfig} */
const nextConfig = {
nx: {
// Set this to true if you would like to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
};
webpack(config, { isServer }) {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack']
})

if (!isServer) {
config.resolve.alias['@public'] = path.join(__dirname, 'public')
}

return config
}
}

module.exports = nextConfig

const plugins = [
// Add more Next.js plugins to this list if needed.
withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);
withNx
]
4 changes: 4 additions & 0 deletions apps/web/public/docs.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified apps/web/public/favicon.ico
Binary file not shown.
5 changes: 5 additions & 0 deletions apps/web/public/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export { default as GitHub } from './github.svg'
export { default as Grid } from './grid.svg'
export { default as Logo } from './logo.svg'
export { default as XSvg } from './x_svg.svg'
export { default as Stars } from './stars.svg'
Binary file added apps/web/public/kriptonian.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/web/public/rajdip-b.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 0 additions & 9 deletions apps/web/public/rajdip.svg

This file was deleted.

9 changes: 0 additions & 9 deletions apps/web/public/sawan.svg

This file was deleted.

Binary file added apps/web/public/thumbnail.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"autoprefixer": "^10.4.16",
"babel-jest": "^29.4.1",
"eslint": "~8.48.0",
"eslint-config-next": "13.4.4",
"eslint-config-next": "14.0.4",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
Expand Down Expand Up @@ -100,7 +100,7 @@
"dotenv": "^16.3.1",
"express": "^4.18.2",
"moment": "^2.29.4",
"next": "13.4.4",
"next": "14.0.4",
"passport-jwt": "^4.0.1",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand Down

0 comments on commit e1ec4d1

Please sign in to comment.