Merge branch 'create-landing-website'

apps/web/app/components/Killers.tsx

@@ -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

apps/web/app/components/Links.tsx

@@ -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

apps/web/app/global.css

@@ -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;
+}

apps/web/app/layout.tsx

@@ -1,10 +1,76 @@
 import './global.css';
+import { Metadata } from "next";
 
-export const metadata = {
-  title: 'Welcome to apps/web',
-  description: 'Generated by create-nx-workspace',
-};
+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,
 }: {

apps/web/app/page.tsx

@@ -1,3 +1,51 @@
+
+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']
+})
 export default async function Index() {
-  return <div>Workspace</div>
+  return (
+    <div className="relative">
+      <div className="absolute z-10 opacity-25">
+        <section className="h-[100vh] w-screen bg-[radial-gradient(ellipse_at_top_center,_#fff_20%,#ff03080B_80%)] opacity-50" />
+      </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">
+              <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`}
+              >
+                keyshade.xyz
+              </h1>
+            </div>
+
+            <div className="flex items-center justify-center py-4">
+              <p className="p-1 min-w-[55%] sm:w-full md:w-[50%] lg:w-[35%] items-center justify-center bg-gradient-to-br from-[#727576] to-[#fafafb] inline-block text-transparent bg-clip-text text-wrap  text-center text-md">
+                Manage all your secrets securely with public key encryption and
+                realtime based tools, that seamlessly fits into your codebase
+              </p>
+            </div>
+
+            <div className="flex gap-10 items-center justify-center">
+              <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">
+              <Killers image='kriptonian' twitterUserName='kriptonian8' />
+              <Killers image='rajdip-b' twitterUserName='RajB47' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }

apps/web/next.config.js

@@ -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
+]