Skip to content

Commit 5cd7fe2

Browse files
devarshishimpidevarshishimpi
authored
Completed New Tailwind Landing Page (#277)
2 parents 0b906f7 + 45402a4 commit 5cd7fe2

File tree

15 files changed

+806
-12527
lines changed

15 files changed

+806
-12527
lines changed

‎apps/web/frontendnew/package-lock.json

Lines changed: 478 additions & 12450 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/web/frontendnew/src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Pricing from "./pages/Pricing/Pricing";
44
import Contact from "./pages/Contact/Contact";
55
import TopNav from "./components/Navbar/TopNav";
66
import Notes from "./pages/Notes/Notes";
7+
import Login from "./pages/Login/Login";
78

89
function App() {
910
return (
@@ -15,6 +16,7 @@ function App() {
1516
<Route path="/pricing" element={<Pricing />} />
1617
<Route path="/contact" element={<Contact />} />
1718
<Route path="/notes" element={<Notes />} />
19+
<Route path="/login" element={<Login />} />
1820
</Routes>
1921
</Router>
2022
);

‎apps/web/frontendnew/src/components/Container/ContactContainer.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { useContext } from "react";
2+
import { ThemeContext } from "../../contexts/ThemeModeProvider";
3+
import Custom from "../Button/Custom";
4+
5+
const ContactContainer = () => {
6+
const { theme } = useContext(ThemeContext);
7+
const dark = theme === "dark";
8+
9+
return (
10+
<div className="relative px-6 lg:px-8">
11+
<div className="mx-auto max-w-3xl pt-20 pb-32">
12+
<div>
13+
<div className="hidden sm:mb-8 sm:flex sm:justify-center">
14+
<section >
15+
<div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
16+
<h2 className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">Contact Us</h2>
17+
<p className="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">Got a technical issue? Want to send feedback about a beta feature? Something else? Let us know.</p>
18+
<form action="#" className="space-y-8">
19+
<div>
20+
<label for="email" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label>
21+
<input type="email" id="email" className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="name@example.com" required />
22+
</div>
23+
<div>
24+
<label for="subject" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Subject</label>
25+
<input type="text" id="subject" className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="Let us know how we can help you" required />
26+
</div>
27+
<div className="sm:col-span-2">
28+
<label for="message" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your message</label>
29+
<textarea id="message" rows="6" className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Leave a comment..."></textarea>
30+
</div>
31+
<button type="submit" className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg sm:w-fit focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 bg-blue bg-blue-600 hover:bg-blue-700">Send message</button>
32+
</form>
33+
</div>
34+
</section>
35+
</div>
36+
<div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
37+
<svg
38+
className="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
39+
viewBox="0 0 1155 678"
40+
fill="none"
41+
xmlns="http://www.w3.org/2000/svg"
42+
>
43+
<path
44+
fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)"
45+
fillOpacity=".3"
46+
d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
47+
/>
48+
<defs>
49+
<linearGradient
50+
id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc"
51+
x1="1155.49"
52+
x2="-78.208"
53+
y1=".177"
54+
y2="474.645"
55+
gradientUnits="userSpaceOnUse"
56+
>
57+
<stop stopColor="#9089FC" />
58+
<stop offset={1} stopColor="#FF80B5" />
59+
</linearGradient>
60+
</defs>
61+
</svg>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
);
67+
};
68+
69+
export default ContactContainer;

‎apps/web/frontendnew/src/components/Container/Cost.js

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ const Cost = () => {
1414
<div className="w-full md:w-1/2 p-8">
1515
<div className="md:max-w-md">
1616
<h2 className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-blue-500 mb-14 lg:mb-52 text-6xl md:text-6xl xl:text-8xl font-bold font-heading tracking-px-n leading-none">Simple No-tricks Pricing</h2>
17-
<h3 className="mb-6 text-xl text-gray-900 font-semibold leading-normal">If you're not satisfied, contact us within the first 14 days and we'll send you a full refund.</h3>
18-
<p className="font-medium text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
17+
<h3 className="dark:text-gray-200 mb-6 text-xl text-gray-900 font-semibold leading-normal">If you're not satisfied, contact us within the first 14 days and we'll send you a full refund.</h3>
18+
<p className="dark:text-gray-400 font-medium text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
1919
</div>
2020
</div>
2121
<div className="w-full md:w-1/2 p-8 " >
@@ -27,47 +27,47 @@ const Cost = () => {
2727
<svg className="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2828
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
2929
</svg>
30-
<p className="font-semibold leading-normal">3 Team Members</p>
30+
<p className="font-semibold leading-normal">Coming soon..</p>
3131
</li>
3232
<li className="mb-4 flex items-center">
3333
<svg className="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
3434
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
3535
</svg>
36-
<p className="font-semibold leading-normal">1200+ UI Blocks</p>
36+
<p className="font-semibold leading-normal">Coming soon..</p>
3737
</li>
3838
<li className="mb-4 flex items-center">
3939
<svg className="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
4040
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
4141
</svg>
42-
<p className="font-semibold leading-normal">10 GB Cloud Storage</p>
42+
<p className="font-semibold leading-normal">Coming soon..</p>
4343
</li>
4444
<li className="mb-4 flex items-center">
4545
<svg className="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
4646
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
4747
</svg>
48-
<p className="font-semibold leading-normal">Individual Email Account</p>
48+
<p className="font-semibold leading-normal">Coming Soon..</p>
4949
</li>
5050
<li className="flex items-center">
5151
<svg className="mr-2" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
5252
<path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
5353
</svg>
54-
<p className="font-semibold leading-normal">Premium Support</p>
54+
<p className="font-semibold leading-normal">Coming Soon..</p>
5555
</li>
5656
</ul>
5757
</div>
58-
<div className="p-9 bg-white">
58+
<div className="p-9">
5959
<div className="flex flex-wrap -m-8">
6060
<div className="w-full sm:w-1/2 p-8">
61-
<span className="mb-2 inline-block text-sm text-gray-500 font-semibold uppercase tracking-px">Pro Package</span>
62-
<p className="text-gray-900 font-semibold leading-normal">Best for Startups &amp; Small Businesses</p>
61+
<span className="mb-2 inline-block text-sm dark:text-gray-400 text-gray-500 font-semibold uppercase tracking-px">Pro Package</span>
62+
<p className="dark:text-white text-gray-900 font-semibold leading-normal">Best for Startups &amp; Small Businesses</p>
6363
</div>
6464
<div className="w-full sm:w-1/2 p-8">
6565
<div className="sm:max-w-max ml-auto">
6666
<p className="font-bold">
67-
<span className="text-5xl leading-tight tracking-px-n">$49</span>
68-
<span className="text-lg text-gray-500 leading-snug tracking-px-n">/mo</span>
67+
<span className="text-5xl leading-tight tracking-px-n">$XX</span>
68+
<span className="dark:text-gray-400 text-lg text-gray-500 leading-snug tracking-px-n">/mo</span>
6969
</p>
70-
<p className="font-medium text-gray-500 leading-relaxed">Billed anually</p>
70+
<p className="font-medium dark:text-gray-400 text-gray-500 leading-relaxed">Billed anually</p>
7171
</div>
7272
</div>
7373
</div>
@@ -80,26 +80,22 @@ const Cost = () => {
8080
</div>
8181
</div>
8282
</section>
83-
<div class="container mx-auto">
83+
<div className="container mx-auto">
8484
<div
85-
class="xs:px-10 flex flex-wrap items-center justify-between rounded-lg border border-[#e7e7e7] py-8 px-6 md:px-8 lg:px-10"
85+
className="dark:border-gray-700 xs:px-10 flex flex-wrap items-center justify-between rounded-lg border border-[#e7e7e7] py-8 px-6 md:px-8 lg:px-10"
8686
>
87-
<div class="w-full md:w-7/12 lg:w-2/3">
88-
<div class="mb-6 md:mb-0">
89-
<h4
90-
class="xs:text-2xl mb-1 text-xl font-bold text-black md:text-2xl lg:text-2xl"
91-
>
92-
Free Plan
93-
</h4>
94-
<p class="text-body-color text-base font-medium">
95-
Please, accept these sweeties to continue enjoying our site!
87+
<div className="w-full md:w-7/12 lg:w-2/3">
88+
<div className="mb-6 md:mb-0">
89+
<h4 className="dark:text-white xs:text-2xl mb-1 text-xl font-bold text-black md:text-2xl lg:text-2xl">Free Forever</h4>
90+
<p className="dark:text-gray-300 text-body-color text-base font-medium">
91+
Open-source, free forever, and always will be.
9692
</p>
9793
</div>
9894
</div>
99-
<div class="w-full md:w-5/12 lg:w-1/3">
100-
<div class="flex items-center space-x-3 md:justify-end">
95+
<div className="w-full md:w-5/12 lg:w-1/3">
96+
<div className="flex items-center space-x-3 md:justify-end">
10197
<button
102-
class="focus:ring-blue-300 bg-blue-600 hover:bg-blue-700 inline-flex items-center justify-center rounded-md py-[10px] px-8 text-center text-base font-semibold text-white hover:bg-opacity-90"
98+
className="focus:ring-blue-300 bg-blue-600 hover:bg-blue-700 inline-flex items-center justify-center rounded-md py-[10px] px-8 text-center text-base font-semibold text-white hover:bg-opacity-90"
10399
>
104100
Start For Free
105101
</button>

0 commit comments

Comments
 (0)