Skip to content

Commit c097d40

Browse files
is-it-ayushis-it-ayush
committed
responsive addition
1 parent 4b7bf15 commit c097d40

24 files changed

+434
-0
lines changed

‎.vscode/settings.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"typescript.tsdk": ".\\node_modules\\typescript\\lib",
3+
"typescript.enablePromptUseWorkspaceTsdk": true
4+
}

‎app/(landing)/about/page.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Input} from "../../../components/ui/Input";
2+
3+
export default async function AboutPage() {
4+
return (
5+
<div className="flex font-poppins h-screen justify-center items-center">
6+
<main>
7+
<form>
8+
<div className="flex flex-col">
9+
<div className="flex flex-col my-2">
10+
<Input id="email" label="Email" type="text" intent="default" />
11+
<Input id="password" label="Password" type="password" intent="default" />
12+
</div>
13+
</div>
14+
</form>
15+
</main>
16+
</div>
17+
);
18+
}

‎app/(landing)/github/page.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Input} from "../../../components/ui/Input";
2+
3+
export default async function GithubPage() {
4+
return (
5+
<div className="flex font-poppins h-screen justify-center items-center">
6+
<main>
7+
<form>
8+
<div className="flex flex-col">
9+
<div className="flex flex-col my-2">
10+
<Input id="email" label="Email" type="text" intent="default" />
11+
<Input id="password" label="Password" type="password" intent="default" />
12+
</div>
13+
</div>
14+
</form>
15+
</main>
16+
</div>
17+
);
18+
}

‎app/(landing)/support/page.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Input} from "../../../components/ui/Input";
2+
3+
export default async function SupportPage() {
4+
return (
5+
<div className="flex font-poppins h-screen justify-center items-center">
6+
<main>
7+
<form>
8+
<div className="flex flex-col">
9+
<div className="flex flex-col my-2">
10+
<Input id="email" label="Email" type="text" intent="default" />
11+
<Input id="password" label="Password" type="password" intent="default" />
12+
</div>
13+
</div>
14+
</form>
15+
</main>
16+
</div>
17+
);
18+
}

‎app/(landing)/team/page.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Input} from "../../../components/ui/Input";
2+
3+
export default async function TeamPage() {
4+
return (
5+
<div className="flex font-poppins h-screen justify-center items-center">
6+
<main>
7+
<form>
8+
<div className="flex flex-col">
9+
<div className="flex flex-col my-2">
10+
<Input id="email" label="Email" type="text" intent="default" />
11+
<Input id="password" label="Password" type="password" intent="default" />
12+
</div>
13+
</div>
14+
</form>
15+
</main>
16+
</div>
17+
);
18+
}

‎app/globals.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600&display=swap');
2+
3+
4+
@tailwind base;
5+
@tailwind components;
6+
@tailwind utilities;

‎app/layout.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* eslint-disable @next/next/no-head-element */
2+
import "./globals.css";
3+
4+
export default function RootLayout({children}: {children: React.ReactNode}) {
5+
return (
6+
<html lang="en">
7+
<head>
8+
<meta charSet="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
</head>
11+
<body>
12+
{children}
13+
</body>
14+
</html>
15+
);
16+
}

‎app/loading.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {Loading} from "../components/ui/Loading";
2+
3+
export default function load() {
4+
return <Loading intent="default" />;
5+
}

‎app/page.tsx

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import {Card} from "../components/ui/Card";
2+
3+
import {RiGithubLine} from "react-icons/ri";
4+
import {MdOutlineDesignServices} from "react-icons/md";
5+
import {CgSortAz} from "react-icons/cg";
6+
import {BiSearch} from "react-icons/bi";
7+
8+
export default async function Home() {
9+
return (
10+
<div className="flex font-poppins min-h-screen w-full items-center">
11+
<main className="w-full">
12+
<div className="grid overflow-hidden grid-col-1 lg:grid-cols-4 grid-rows-auto lg:grid-rows-3 gap-2 grid-flow-row p-5">
13+
<div className=" flex flex-col prose p-5 lg:hidden">
14+
<h1 className="flex font-bold">Multi Email</h1>
15+
<p className="flex ">
16+
We made a tool for you to manage all your emails in one place. You can add multiple emails
17+
and switch between them with ease. We really worked hard. We are the best app for managing
18+
your emails. Fr Fr, No Cap.
19+
</p>
20+
</div>
21+
<div className="hidden lg:flex lg:col-start-1 lg:col-end-4">
22+
<Card>
23+
<div className="flex flex-col my-2 w-full justify-center">
24+
<article className="flex flex-row justify-evenly w-full items-center">
25+
<h1 className="flex text-4xl prose font-bold ml-5 mb-0">Multi Email</h1>
26+
<p className="flex m-0 prose">
27+
We made a tool for you to manage all your emails in one place. You can add
28+
multiple emails and switch between them with ease. We really worked hard. We are
29+
the best app for managing your emails. Fr Fr, No Cap.
30+
</p>
31+
</article>
32+
</div>
33+
</Card>
34+
</div>
35+
<div className="">
36+
<Card>
37+
<div className="flex flex-col my-2 w-full justify-center">
38+
<article className="flex flex-col justify-center items-center">
39+
<BiSearch className="w-[32px] h-[32px] m-2" />
40+
<h4 className="flex text-xl prose font-bold mb-0">Universal Search</h4>
41+
</article>
42+
</div>
43+
</Card>
44+
</div>
45+
<div className="">
46+
<Card>
47+
<div className="flex flex-col my-2 w-full justify-center">
48+
<article className="flex flex-col justify-center items-center">
49+
<CgSortAz className="w-[32px] h-[32px] m-2" />
50+
<h4 className="flex text-xl prose font-bold mb-0">How</h4>
51+
</article>
52+
</div>
53+
</Card>
54+
</div>
55+
<div className="">
56+
<Card>
57+
<div className="flex flex-col my-2 w-full justify-center">
58+
<article className="flex flex-col justify-center items-center">
59+
<MdOutlineDesignServices className="flex w-[32px] h-[32px] my-2" />
60+
<h4 className="flex text-xl prose font-bold mb-0">Customize</h4>
61+
</article>
62+
</div>
63+
</Card>
64+
</div>
65+
<div className=" flex flex-col prose p-5 lg:hidden">
66+
<h1 className="flex font-bold">How</h1>
67+
<p className="flex ">
68+
Just sign up. It's that simple. You can also host your own instance of the app. It's free
69+
and open source. We don't sell your data. You can literally verify it.
70+
</p>
71+
</div>
72+
<div className="hidden lg:flex lg:col-start-3 lg:col-end-5">
73+
<Card>
74+
<div className="flex flex-col my-2 w-full justify-center">
75+
<article className="flex flex-row justify-evenly w-full items-center">
76+
<p className="flex m-0 prose">
77+
Just sign up. It's that simple. You can also host your own instance of the app.
78+
It's free and open source. We don't sell your data. You can literally verify it.
79+
</p>
80+
<h1 className="flex text-4xl prose font-bold ml-5 mb-0">How</h1>
81+
</article>
82+
</div>
83+
</Card>
84+
</div>
85+
<div className="">
86+
<Card>
87+
<div className="flex flex-col my-2 w-full justify-center">
88+
<article className="flex flex-col justify-center items-center">
89+
<RiGithubLine className="flex w-[32px] h-[32px] my-2" />
90+
<h4 className="flex text-xl prose font-bold mb-0">Open Source</h4>
91+
</article>
92+
</div>
93+
</Card>
94+
</div>
95+
<div className=" flex flex-col prose p-5 lg:hidden">
96+
<h1 className="flex font-bold">Why</h1>
97+
<p className="flex ">
98+
We were tired of having to switch between multiple email accounts on various different
99+
websites. So forth came the need for a tool that would allow us to manage all our emails in
100+
one place.
101+
</p>
102+
</div>
103+
<div className="hidden lg:flex lg:col-start-2 lg:col-end-5 ">
104+
<Card>
105+
<div className="flex flex-col my-2 w-full justify-center">
106+
<article className="flex flex-row justify-evenly w-full items-center">
107+
<p className="flex m-0 prose">
108+
We were tired of having to switch between multiple email accounts on various
109+
different websites. So forth came the need for a tool that would allow us to
110+
manage all our emails in one place.
111+
</p>
112+
<h1 className="flex text-4xl prose font-bold ml-5 mb-0">Why</h1>
113+
</article>
114+
</div>
115+
</Card>
116+
</div>
117+
</div>
118+
</main>
119+
</div>
120+
);
121+
}

‎components/ui/ButtonOrLink.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {cva, VariantProps} from "class-variance-authority";
2+
3+
const ButtonOrLinkStyles = cva(
4+
"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
5+
{
6+
variants: {
7+
intent: {
8+
default: "bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500",
9+
error: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
10+
warning: "bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500",
11+
success: "bg-green-600 hover:bg-green-700 focus:ring-green-500",
12+
},
13+
size: {
14+
default: "px-4 py-2 text-sm",
15+
small: "px-2 py-1 text-xs",
16+
large: "px-6 py-3 text-base",
17+
},
18+
fullWidth: {
19+
default: "w-auto",
20+
true: "w-full",
21+
false: "w-auto",
22+
},
23+
},
24+
defaultVariants: {
25+
intent: "default",
26+
size: "default",
27+
fullWidth: "default",
28+
},
29+
}
30+
);
31+
32+
export interface ButtonProps extends VariantProps<typeof ButtonOrLinkStyles> {
33+
children: React.ReactNode;
34+
onClick?: () => void;
35+
href?: string;
36+
}
37+
38+
export const ButtonOrLink = ({children, onClick, href, ...props}: ButtonProps) => {
39+
return (
40+
<div className="flex flex-row">
41+
{href ? (
42+
<a href={href} className={ButtonOrLinkStyles(props)}>
43+
{children}
44+
</a>
45+
) : (
46+
<button onClick={onClick} className={ButtonOrLinkStyles(props)}>
47+
{children}
48+
</button>
49+
)}
50+
</div>
51+
);
52+
};

0 commit comments

Comments
 (0)