Skip to content

Commit 81c2899

Browse files
amitjimiwalamitjimiwal
committed
landing page ui
1 parent 01ba86b commit 81c2899

File tree

10 files changed

+386
-39
lines changed

10 files changed

+386
-39
lines changed

‎src/App.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
scroll-behavior: smooth;
6+
}

‎src/App.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import "./App.css";
33
import Navbar from "./components/Navbar";
44
import { Outlet } from "react-router-dom";
55
import ContentWrapper from "./components/ContentWrapper";
6+
import Footer from "./components/Footer";
67
function App() {
78
return (
8-
<div className="min-h-screen w-full">
9+
<div className="min-h-screen w-full ">
910
<Navbar />
1011
<ContentWrapper>
1112
<Outlet />
1213
</ContentWrapper>
14+
<Footer />
1315
</div>
1416
);
1517
}

‎src/assets/images/about.png

1.27 MB
Loading

‎src/components/ContactUS.tsx

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
export default function ContactUS() {
2+
return (
3+
<section
4+
id="contact"
5+
className="py-16 px-4 overflow-hidden sm:px-6 lg:px-8 lg:py-24"
6+
>
7+
<div className="relative max-w-xl mx-auto">
8+
<svg
9+
aria-hidden="true"
10+
className="absolute left-full transform translate-x-1/2"
11+
fill="none"
12+
height="404"
13+
viewBox="0 0 404 404"
14+
width="404"
15+
>
16+
<defs>
17+
<pattern
18+
height="20"
19+
id="85737c0e-0916-41d7-917f-596dc7edfa27"
20+
patternUnits="userSpaceOnUse"
21+
width="20"
22+
x="0"
23+
y="0"
24+
>
25+
<rect
26+
className="text-gray-200"
27+
fill="currentColor"
28+
height="4"
29+
width="4"
30+
x="0"
31+
y="0"
32+
/>
33+
</pattern>
34+
</defs>
35+
<rect
36+
fill="url(#85737c0e-0916-41d7-917f-596dc7edfa27)"
37+
height="404"
38+
width="404"
39+
/>
40+
</svg>
41+
<svg
42+
aria-hidden="true"
43+
className="absolute right-full bottom-0 transform -translate-x-1/2"
44+
fill="none"
45+
height="404"
46+
viewBox="0 0 404 404"
47+
width="404"
48+
>
49+
<defs>
50+
<pattern
51+
height="20"
52+
id="85737c0e-0916-41d7-917f-596dc7edfa27"
53+
patternUnits="userSpaceOnUse"
54+
width="20"
55+
x="0"
56+
y="0"
57+
>
58+
<rect
59+
className="text-gray-200"
60+
fill="currentColor"
61+
height="4"
62+
width="4"
63+
x="0"
64+
y="0"
65+
/>
66+
</pattern>
67+
</defs>
68+
<rect
69+
fill="url(#85737c0e-0916-41d7-917f-596dc7edfa27)"
70+
height="404"
71+
width="404"
72+
/>
73+
</svg>
74+
<div className="text-center">
75+
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
76+
Have Questions?
77+
</h2>
78+
<p className="mt-4 text-lg leading-6 tex dark:text-green-200">
79+
Please feel free to call or email us, or use our contact form to get
80+
in touch with us. We look forward to hearing from you!
81+
</p>
82+
</div>
83+
<div className="mt-12">
84+
<form
85+
action="#"
86+
className="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"
87+
method="POST"
88+
>
89+
<div>
90+
<label
91+
className="block text-sm font-medium text-gray-700"
92+
htmlFor="first-name"
93+
>
94+
Name
95+
</label>
96+
<div className="mt-1">
97+
<input
98+
autoComplete="given-name"
99+
className="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
100+
id="first-name"
101+
name="first-name"
102+
type="text"
103+
/>
104+
</div>
105+
</div>
106+
<div>
107+
<label
108+
className="block text-sm font-medium text-gray-700"
109+
htmlFor="email"
110+
>
111+
Email Address
112+
</label>
113+
<div className="mt-1">
114+
<input
115+
autoComplete="email"
116+
className="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
117+
id="email"
118+
name="email"
119+
type="email"
120+
/>
121+
</div>
122+
</div>
123+
<div className="sm:col-span-2">
124+
<label
125+
className="block text-sm font-medium text-gray-700"
126+
htmlFor="subject"
127+
>
128+
Subject
129+
</label>
130+
<div className="mt-1">
131+
<input
132+
className="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"
133+
id="subject"
134+
name="subject"
135+
type="text"
136+
/>
137+
</div>
138+
</div>
139+
<div className="sm:col-span-2">
140+
<label
141+
className="block text-sm font-medium text-gray-700"
142+
htmlFor="message"
143+
>
144+
Your Message
145+
</label>
146+
<div className="mt-1">
147+
<textarea
148+
className="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border border-gray-300 rounded-md"
149+
id="message"
150+
name="message"
151+
rows={4}
152+
/>
153+
</div>
154+
</div>
155+
<div className="sm:col-span-2">
156+
<button
157+
className="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
158+
type="submit"
159+
>
160+
Send Message
161+
</button>
162+
</div>
163+
</form>
164+
</div>
165+
</div>
166+
</section>
167+
);
168+
}

‎src/components/ContentWrapper.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ interface Props {
33
children: React.ReactNode;
44
}
55
const ContentWrapper: React.FC<Props> = ({ children }) => {
6-
return <div className="max-w-7xl mx-auto">{children}</div>;
6+
return <div className="max-w-7xl mx-auto px-8 py-12 min-h-screen">{children}</div>;
77
};
88

99
export default ContentWrapper;

‎src/components/Footer.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
3+
const Footer: React.FC = () => {
4+
return (
5+
<footer className="bg-white rounded-lg shadow dark:bg-gray-900 m-4">
6+
<div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
7+
<div className="sm:flex sm:items-center sm:justify-between">
8+
<a
9+
href="https://flowbite.com/"
10+
className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse"
11+
>
12+
<img
13+
src="https://flowbite.com/docs/images/logo.svg"
14+
className="h-8"
15+
alt="Flowbite Logo"
16+
/>
17+
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
18+
Flowbite
19+
</span>
20+
</a>
21+
<ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
22+
<li>
23+
<a href="#" className="hover:underline me-4 md:me-6">
24+
About
25+
</a>
26+
</li>
27+
<li>
28+
<a href="#license" className="hover:underline me-4 md:me-6">
29+
Licensing
30+
</a>
31+
</li>
32+
<li>
33+
<a href="#contact" className="hover:underline">
34+
Contact
35+
</a>
36+
</li>
37+
</ul>
38+
</div>
39+
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
40+
<span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">
41+
© 2024{" "}
42+
<a href="https://flowbite.com/" className="hover:underline">
43+
Typesight™
44+
</a>
45+
. All Rights Reserved.
46+
</span>
47+
</div>
48+
</footer>
49+
);
50+
};
51+
52+
export default Footer;

‎src/components/Navbar.tsx

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import FlagIcon from "../icons/Flagicon";
22
import React from "react";
3-
import { Link } from "react-router-dom";
43
import { Button } from "./ui/button";
54
import { ModeToggle } from "./ui/toggle-theme";
65
import {
@@ -12,9 +11,9 @@ import {
1211
import { Menu } from "lucide-react";
1312

1413
const routes = [
15-
{ name: "Services", path: "#", id: 1 },
16-
{ name: "About", path: "#", id: 2 },
17-
{ name: "Contact", path: "#", id: 3 },
14+
{ name: "Services", path: "#about", id: 1 },
15+
{ name: "About", path: "#about", id: 2 },
16+
{ name: "Contact", path: "#contact", id: 3 },
1817
];
1918
const Navbar = () => {
2019
return (
@@ -24,18 +23,20 @@ const Navbar = () => {
2423
<span className="font-bold text-xl">TYPESIGHT</span>
2524
</div>
2625
<div className="flex items-center space-x-6">
26+
{/* Desktop Navbar */}
2727
<div className="hidden sm:flex gap-4">
2828
{routes.map((route) => (
29-
<Link
29+
<a
3030
key={route.id}
31-
className="text-gray-600 hover:text-gray-900"
32-
to={route.path}
31+
className="text-gray-600 hover:text-gray-900 dark:text-gray-200"
32+
href={route.path}
3333
>
3434
{route.name}
35-
</Link>
35+
</a>
3636
))}
3737
</div>
3838
<ModeToggle />
39+
{/* Mobile Navbar */}
3940
<div className="sm:hidden">
4041
<DropdownMenu>
4142
<DropdownMenuTrigger asChild>
@@ -46,13 +47,13 @@ const Navbar = () => {
4647
<DropdownMenuContent align="center">
4748
{routes.map((route) => (
4849
<DropdownMenuItem key={route.id}>
49-
<Link
50+
<a
5051
key={route.id}
51-
className="text-gray-600 hover:text-gray-900"
52-
to={route.path}
52+
className="text-gray-600 hover:text-gray-900 dark:text-gray-200"
53+
href={route.path}
5354
>
5455
{route.name}
55-
</Link>
56+
</a>
5657
</DropdownMenuItem>
5758
))}
5859
</DropdownMenuContent>

‎src/icons/Checkicon.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { SVGProps } from "react";
2+
3+
export default function CheckCircleIcon(
4+
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
5+
) {
6+
return (
7+
<svg
8+
{...props}
9+
xmlns="http://www.w3.org/2000/svg"
10+
width="24"
11+
height="24"
12+
viewBox="0 0 24 24"
13+
fill="none"
14+
stroke="currentColor"
15+
strokeWidth="2"
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
>
19+
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
20+
<polyline points="22 4 12 14.01 9 11.01" />
21+
</svg>
22+
);
23+
}

‎src/icons/Flagicon.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { SVGProps } from "react";
2-
import { JSX } from "react/jsx-runtime";
32

43
export default function FlagIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
54
return (

0 commit comments

Comments
 (0)