Skip to content

Commit 8a7c6cc

Browse files
sixtusdevelopersixtusdeveloper
committed
commiton few newly created files
1 parent 3b47bba commit 8a7c6cc

File tree

8 files changed

+1137
-47
lines changed

8 files changed

+1137
-47
lines changed

‎package-lock.json

+975-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"firebase": "^10.12.3",
1314
"react": "^18.3.1",
1415
"react-dom": "^18.3.1"
1516
},

‎src/App.css

+4-42
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,4 @@
1-
#root {
2-
max-width: 1280px;
3-
margin: 0 auto;
4-
padding: 2rem;
5-
text-align: center;
6-
}
7-
8-
.logo {
9-
height: 6em;
10-
padding: 1.5em;
11-
will-change: filter;
12-
transition: filter 300ms;
13-
}
14-
.logo:hover {
15-
filter: drop-shadow(0 0 2em #646cffaa);
16-
}
17-
.logo.react:hover {
18-
filter: drop-shadow(0 0 2em #61dafbaa);
19-
}
20-
21-
@keyframes logo-spin {
22-
from {
23-
transform: rotate(0deg);
24-
}
25-
to {
26-
transform: rotate(360deg);
27-
}
28-
}
29-
30-
@media (prefers-reduced-motion: no-preference) {
31-
a:nth-of-type(2) .logo {
32-
animation: logo-spin infinite 20s linear;
33-
}
34-
}
35-
36-
.card {
37-
padding: 2em;
38-
}
39-
40-
.read-the-docs {
41-
color: #888;
42-
}
1+
/* index.css */
2+
@tailwind base;
3+
@tailwind components;
4+
@tailwind utilities;

‎src/assets/apple-laptop.png

29.3 KB
Loading

‎src/assets/sixtus-logo.png

33.8 KB
Loading

‎src/components/Footer.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// import React from 'react';
2+
3+
const Footer = () => {
4+
return (
5+
<footer className="bg-aliceblue w-full mx-auto py-3 text-center">
6+
<div className="flex justify-center items-center py-4">
7+
<a className="social-link" href="https://www.facebook.com/sixtusushrey" target="_blank" rel="noopener noreferrer">
8+
<i className="fab fa-facebook text-gray-700 m-3 text-lg"></i>
9+
</a>
10+
<a className="social-link" href="https://www.instagram.com/sixtusushrey" target="_blank" rel="noopener noreferrer">
11+
<i className="fab fa-instagram text-gray-700 m-3 text-lg"></i>
12+
</a>
13+
<a className="social-link" href="https://twitter.com/SixtusUshahemba" target="_blank" rel="noopener noreferrer">
14+
<i className="fab fa-twitter text-gray-700 m-3 text-lg"></i>
15+
</a>
16+
<a className="social-link" href="https://github.com/Sixtusdeveloper/" target="_blank" rel="noopener noreferrer">
17+
<i className="fab fa-github text-gray-700 m-3 text-lg"></i>
18+
</a>
19+
<a className="social-link" href="https://www.linkedin.com/in/sixtusushrey" target="_blank" rel="noopener noreferrer">
20+
<i className="fab fa-linkedin text-gray-700 m-3 text-lg"></i>
21+
</a>
22+
<a className="social-link" href="https://www.pinterest.com/sixtusushrey" target="_blank" rel="noopener noreferrer">
23+
<i className="fab fa-pinterest text-gray-700 m-3 text-lg"></i>
24+
</a>
25+
</div>
26+
<div className="text-center py-4 text-gray-600 text-sm">
27+
<div className="flex-copyright">
28+
Copyright&copy; - 2024 Created By&nbsp;
29+
<span className="text-green-500">Sixtusdev</span>&nbsp;| &nbsp;All Rights Reserved | Terms & Policy
30+
</div>
31+
</div>
32+
</footer>
33+
);
34+
}
35+
36+
export default Footer;

‎src/components/UserRegistration/UserRegistration.tsx

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React, { useState } from 'react';
2+
import Footer from '../Footer';
3+
4+
const UserRegistration: React.FC = () => {
5+
const [name, setName] = useState('');
6+
const [email, setEmail] = useState('');
7+
const [password, setPassword] = useState('');
8+
const [confirmPassword, setConfirmPassword] = useState('');
9+
10+
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
11+
e.preventDefault();
12+
// Handle form submission logic here (e.g., register user with Firebase)
13+
console.log('Form submitted:', { name, email, password, confirmPassword });
14+
};
15+
16+
return (
17+
<section className="bg-gradient-to-r from-primary-color-dark to-secondary-color min-h-screen">
18+
<div className="container mx-auto px-4 py-8">
19+
<div className="flex justify-center items-center gap-10">
20+
<div className="w-full md:w-1/2">
21+
<div className="text-center my-12">
22+
<img src="./assets/sixtus-logo.png" alt="Logo" className="w-30" />
23+
</div>
24+
<div className="bg-white shadow-lg rounded-lg px-8 py-14">
25+
<form className="form" id="signupForm" onSubmit={handleSubmit}>
26+
<h1 className="text-2xl font-bold text-primary-color mb-6">Create Account</h1>
27+
<div className="form-message form-message-error"></div>
28+
<div className="mb-4">
29+
<input
30+
type="text"
31+
className="input-item block bg-aliceblue border-2 border-gray-300 rounded-md p-3 outline-none w-full transition duration-200"
32+
id="name"
33+
autoFocus
34+
autoComplete="on"
35+
placeholder="Name"
36+
value={name}
37+
onChange={(e) => setName(e.target.value)}
38+
required
39+
/>
40+
<span id="nameError" className="text-red-500 text-sm mt-1"></span>
41+
</div>
42+
<div className="mb-4">
43+
<input
44+
type="email"
45+
className="input-item block bg-aliceblue border-2 border-gray-300 rounded-md p-3 outline-none w-full transition duration-200"
46+
id="email"
47+
autoComplete="on"
48+
placeholder="Email Address"
49+
value={email}
50+
onChange={(e) => setEmail(e.target.value)}
51+
required
52+
/>
53+
<span id="emailError" className="text-red-500 text-sm mt-1"></span>
54+
</div>
55+
<div className="mb-4">
56+
<input
57+
type="password"
58+
className="input-item block bg-aliceblue border-2 border-gray-300 rounded-md p-3 outline-none w-full transition duration-200"
59+
id="password"
60+
autoComplete="on"
61+
placeholder="Password"
62+
value={password}
63+
onChange={(e) => setPassword(e.target.value)}
64+
required
65+
/>
66+
<span id="passwordError" className="text-red-500 text-sm mt-1"></span>
67+
</div>
68+
<div className="mb-4">
69+
<input
70+
type="password"
71+
className="input-item block bg-aliceblue border-2 border-gray-300 rounded-md p-3 outline-none w-full transition duration-200"
72+
id="confirmPassword"
73+
autoComplete="on"
74+
placeholder="Confirm Password"
75+
value={confirmPassword}
76+
onChange={(e) => setConfirmPassword(e.target.value)}
77+
required
78+
/>
79+
<span id="confirmPasswordError" className="text-red-500 text-sm mt-1"></span>
80+
</div>
81+
<button className="bg-primary-color text-white font-bold text-lg cursor-pointer w-full py-4 px-8 rounded transition duration-200 my-4 hover:bg-primary-color-dark active:scale-98" type="submit">Sign up</button>
82+
<p className="text-gray-600 text-center">
83+
Already have an Account? <a href="#" className="text-secondary-color hover:underline">Login in</a>
84+
</p>
85+
</form>
86+
</div>
87+
</div>
88+
<div className="w-0 md:w-1/2">
89+
<div className="flex justify-center items-center w-full">
90+
<img src="./assets/apple-laptop.png" width="450" height="300" alt="Laptop Image" className="mx-auto my-10" />
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
{/* Footer section */}
96+
<Footer />
97+
</section>
98+
);
99+
};
100+
101+
export default UserRegistration;

‎src/firebase.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// src/firebase.ts
2+
import { initializeApp } from 'firebase/app';
3+
import { getAuth } from 'firebase/auth';
4+
5+
// Your Firebase configuration
6+
const firebaseConfig = {
7+
apiKey: 'YOUR_API_KEY',
8+
authDomain: 'YOUR_AUTH_DOMAIN',
9+
projectId: 'YOUR_PROJECT_ID',
10+
storageBucket: 'YOUR_STORAGE_BUCKET',
11+
messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
12+
appId: 'YOUR_APP_ID',
13+
measurementId: 'YOUR_MEASUREMENT_ID', // Optional
14+
};
15+
16+
// Initialize Firebase
17+
const app = initializeApp(firebaseConfig);
18+
const auth = getAuth(app);
19+
20+
export { auth };

0 commit comments

Comments
 (0)