Skip to content

Commit

Permalink
🎉 Initial Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
sbiswas2209 committed Jun 16, 2021
1 parent e7b684d commit e4004c5
Show file tree
Hide file tree
Showing 16 changed files with 1,712 additions and 106 deletions.
23 changes: 23 additions & 0 deletions components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";
import Image from 'next/image';
import styles from "../styles/Home.module.css";
export interface FooterProps {}

const Footer: React.FC<FooterProps> = () => {
return (
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{" "}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
);
};

export default Footer;
2 changes: 2 additions & 0 deletions next-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
13 changes: 12 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,20 @@
"lint": "next lint"
},
"dependencies": {
"@chakra-ui/icons": "^1.0.13",
"@chakra-ui/react": "^1.6.3",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@types/node": "^15.12.2",
"@types/react": "^17.0.11",
"autoprefixer": "^10.2.6",
"framer-motion": "^4",
"next": "11.0.0",
"postcss": "^8.3.4",
"react": "17.0.2",
"react-dom": "17.0.2"
"react-dom": "17.0.2",
"tailwindcss": "^2.1.4",
"typescript": "^4.3.2"
},
"devDependencies": {
"eslint": "7.28.0",
Expand Down
7 changes: 0 additions & 7 deletions pages/_app.js

This file was deleted.

23 changes: 23 additions & 0 deletions pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ChakraProvider } from "@chakra-ui/react";
import Head from "next/head";
import React from "react";
import Footer from "../components/Footer";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
return (
<div>
<Head>
<title>Certificates @ Tech Analogy</title>
<meta name="description" content="Reap the rewards of your hard work" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ChakraProvider>
<Component {...pageProps} />s
</ChakraProvider>
<Footer />
</div>
);
}

export default MyApp;
69 changes: 0 additions & 69 deletions pages/index.js

This file was deleted.

98 changes: 98 additions & 0 deletions pages/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import Image from "next/image";
import React, { useState } from "react";
import { Button } from "@chakra-ui/button";
import { useToast } from "@chakra-ui/toast";
import styles from "../styles/Home.module.css";
import { Select, Tooltip } from "@chakra-ui/react";
import { ArrowUpDownIcon } from "@chakra-ui/icons";

export interface HomeProps {}

const Home: React.FC<HomeProps> = () => {
const [email, setEmail] = useState("");
const [event, setEvent] = useState("");
const [responseMessage, setResponseMessage] = useState("");
const [error, setError] = useState("");
const toast = useToast();

async function handleSubmit(e: React.FormEvent<EventTarget>) {
e.preventDefault();
toast({
title: "Fetching Data",
description: "Our minions are getting your certificate",
status: "info",
duration: 9000,
isClosable: true,
});
}

return (
<div className="min-h-screen flex items-center justify-center bg-black py-12 px-4 sm:px-6 lg:px-8">
<div className="group max-w-md w-full border-2 border-white rounded-lg space-y-8 p-11 transition duration-700 ease-in-out hover:bg-gray-200 hover:scale-15 0 cursor-pointer">
<div>
<img
className="mx-auto h-24 w-auto"
src="./Logotech.png"
alt="Workflow"
/>
<h2 className="mt-6 text-center text-3xl font-extrabold text-white group-hover:text-black">
Reap the rewards of your hard work
</h2>
</div>
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
<input type="hidden" name="remember" value="true" />
<div className="rounded-md shadow-sm -space-y-px">
<div>
<p className="sr-only">Email address</p>
<Tooltip label="Enter the email id you registered with" aria-label="email">
<input
id="email-address"
name="emailID"
type="email"
required
className="appearance-none relative block w-full px-3 py-2 mb-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Email address"
onChange={(e) => setEmail(e.target.value)}
/>
</Tooltip>
</div>
<div className="justify-content-center w-full bg-white rounded-md">
<Select placeholder="Select Event" icon={<ArrowUpDownIcon />}>
<option>Autogenix</option>
<option>Mechenzie</option>
</Select>
</div>
</div>
<div>
{responseMessage && (
<div>
{error ? (
<h4
className={["mb-4 font-medium", "text-red-500"].join(" ")}
>
{responseMessage}
</h4>
) : (
<h4
className={["mb-4 font-medium", "text-green-500"].join(" ")}
>
{responseMessage}
</h4>
)}
</div>
)}
<div className="text-center">
<Button colorScheme="blue" type="submit">
Get Certificate
</Button>
</div>
</div>
</form>
</div>
</div>
);
};

export default Home;
6 changes: 6 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Binary file added public/Logotech.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 modified public/favicon.ico
Binary file not shown.
76 changes: 76 additions & 0 deletions sample.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
const [email, setEmail] = useState("");
const [event, setEvent] = useState("");
const [responseMessage, setResponseMessage] = useState("");
const [error, setError] = useState("");
return (
<div className="min-h-screen flex items-center justify-center bg-black py-12 px-4 sm:px-6 lg:px-8">
<div className="group max-w-md w-full border-2 border-white rounded-lg space-y-8 p-11 transition duration-700 ease-in-out hover:bg-gray-200 hover:scale-15 0 cursor-pointer">
<div>
<img
className="mx-auto h-24 w-auto"
src="./Logotech.png"
alt="Workflow"
/>
<h2 className="mt-6 text-center text-3xl font-extrabold text-white group-hover:text-black">
Intern With Us
</h2>
</div>
<form
className="mt-8 space-y-6"
>
<input type="hidden" name="remember" value="true" />
<div className="rounded-md shadow-sm -space-y-px">
<div>
<p className="sr-only">Email address</p>
<input
id="email-address"
name="emailID"
type="email"
required
className="appearance-none relative block w-full px-3 py-2 mb-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="Email address"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="justify-content-center w-full">
<select
className="appearance-none relative block w-full px-3 py-2 mb-2 border border-gray-300 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
onChange={(e) => setEvent(e.target.value)}
placeholder="Choose Domain"
required={true}
>
<option>Choose Domain</option>
<option>Industry Automation</option>
<option>Electrical and Electronics</option>
<option>Mechanical and Robotics</option>
</select>
</div>
</div>
<div>
{responseMessage && (
<div>
{error ? (
<h4
className={["mb-4 font-medium", "text-red-500"].join(" ")}
>
{responseMessage}
</h4>
) : (
<h4
className={["mb-4 font-medium", "text-green-500"].join(" ")}
>
{responseMessage}
</h4>
)}
</div>
)}
<button
type="submit"
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Apply Now
</button>
</div>
</form>
</div>
</div>
6 changes: 6 additions & 0 deletions styles/Home.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@
justify-content: center;
align-items: center;
height: 100vh;
background-image: url(https://images.unsplash.com/photo-1621243804936-775306a8f2e3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
}

.has-mask {
position: absolute;
clip: rect(10px, 150px, 130px, 10px);
}

.main {
Expand Down
3 changes: 3 additions & 0 deletions styles/globals.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
padding: 0;
Expand Down
11 changes: 11 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
29 changes: 29 additions & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Loading

0 comments on commit e4004c5

Please sign in to comment.