diff --git a/public/images/coreX-logo.svg b/public/images/coreX-logo.svg new file mode 100644 index 00000000..0f13b63a --- /dev/null +++ b/public/images/coreX-logo.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.css b/src/index.css index daf698ac..1ad7927c 100644 --- a/src/index.css +++ b/src/index.css @@ -1,10 +1,11 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;1,700&family=Poppins&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:ital,wght@0,700;1,700&family=Poppins&display=swap'); @import 'tailwindcss'; :root { /* Accent Fonts */ --font-montserrat: 'Montserrat', sans-serif; --font-poppins: 'Poppins', sans-serif; + --font-inter: 'Inter', sans-serif; /* Custom Font Sizes */ --text-heading-xxl: 4rem; /* 64px */ diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx new file mode 100644 index 00000000..86bda982 --- /dev/null +++ b/src/pages/Register.jsx @@ -0,0 +1,173 @@ +import { useState } from 'react'; +import { Link } from 'react-router-dom'; + +const Register = () => { + const [formData, setFormData] = useState({ + name: '', + email: '', + password: '', + }); + const handleSubmit = (e) => { + e.preventDefault(); + // Placeholder for form submission logic + + // Reset form + setFormData({ name: '', email: '', password: '' }); + }; + + return ( +
+ {/* Logo */} +
+ CoreX Logo +
+ + {/* Form */} +
+ {/* Header */} +

+ LOGIN / {' '} + + REGISTER + +

+ +

+ Choose how you'd like to sign in +

+ + {/* Google Sign In Button */} + + + {/* Divider */} +
+
+ + or + +
+
+ + {/* Form */} +
+ setFormData({ ...formData, name: e.target.value })} + value={formData.name} + /> + + + setFormData({ ...formData, email: e.target.value }) + } + value={formData.email} + /> + + + setFormData({ ...formData, password: e.target.value }) + } + value={formData.password} + /> + + +
+ + {/* Login Link */} +
+ Already have an account?{' '} + + Login + +
+ + {/* Footer Links */} +
+ + Privacy Policy + + + Terms of Service + +
+
+
+ ); +}; + +export default Register; diff --git a/src/routes/RouterConfig.jsx b/src/routes/RouterConfig.jsx index 13eda69b..12b5899a 100755 --- a/src/routes/RouterConfig.jsx +++ b/src/routes/RouterConfig.jsx @@ -12,25 +12,33 @@ const PrivacyPolicy = lazy( ); const ReturnPolicy = lazy(() => import('../pages/ReturnPolicy/ReturnPolicy')); const About = lazy(() => import('../pages/About/About')); -const ShippingPolicy = lazy(()=>import('../pages/ShippingPolicy/ShippingPage') ); +const ShippingPolicy = lazy( + () => import('../pages/ShippingPolicy/ShippingPage') +); const Products = lazy(() => import('../pages/Products/Products')); const ProductPage = lazy(() => import('../pages/Products/ProductPage')); const TermsOfService = lazy( () => import('../pages/TermsOfService/TermsOfService') ); + +const Register = lazy(() => import('../pages/Register')); + // Router configuration export const RouterConfig = () => createRoutesFromElements( - }> - } /> - } /> - } /> - } /> - } /> - } />{' '} - {/* changed to singular for clarity */} - } /> - } /> - } /> - + <> + } /> + }> + } /> + } /> + } /> + } /> + } /> + } />{' '} + {/* changed to singular for clarity */} + } /> + } /> + } /> + + );