diff --git a/public/assets/ellipsis.svg b/public/assets/ellipsis.svg
new file mode 100644
index 0000000..7626cd8
--- /dev/null
+++ b/public/assets/ellipsis.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/App.tsx b/src/App.tsx
index 2ee2151..6ac16e1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ import Mock from './scenes/Mock';
import Shop from './scenes/Shop';
import Contact from './scenes/Contact';
import Error from './scenes/Error';
+import Checkout from './scenes/Checkout';
const App = () => {
const mode = useAppSelector((state) => state.global.mode) as PaletteMode;
@@ -27,6 +28,7 @@ const App = () => {
} />
} />
} />
+ } />
} />
} />
diff --git a/src/components/CustomFormInputs/index.tsx b/src/components/CustomFormInputs/index.tsx
index 2c7c6e9..6c6959b 100644
--- a/src/components/CustomFormInputs/index.tsx
+++ b/src/components/CustomFormInputs/index.tsx
@@ -11,14 +11,13 @@ type FormInputProps = {
export const FormInputText = ({ name, control, label }: FormInputProps) => {
const classes = {
textField: {
- height: '75px',
borderRadius: '10px',
background: '#FFF',
color: '#000',
border: '1px solid #9F9F9F',
- padding: '1rem',
'& .MuiInputBase-input': {
border: 'none',
+ height: '100%',
},
'&:hover': {
border: '1px solid #9F9F9F',
diff --git a/src/scenes/Checkout/index.tsx b/src/scenes/Checkout/index.tsx
new file mode 100644
index 0000000..a512896
--- /dev/null
+++ b/src/scenes/Checkout/index.tsx
@@ -0,0 +1,149 @@
+import { Box, Button, Divider, Grid, Typography, useTheme } from '@mui/material';
+import FlexBetween from '../../components/FlexBetween';
+import Header from '../../components/Header';
+import { useForm } from 'react-hook-form';
+import { FormInputText } from '../../components/CustomFormInputs';
+import useStyles from './useStyles';
+
+const Checkout = () => {
+ const { classes } = useStyles();
+
+ const { handleSubmit, control, reset } = useForm({
+ defaultValues: {
+ name: '',
+ email: '',
+ subject: '',
+ message: '',
+ },
+ });
+
+ const onSubmit = (data: any) => console.log(data);
+
+ return (
+
+
+
+ {/* LEFT */}
+
+
+
+ Billing details
+
+
+
+
+
+
+
+
+ {/* RIGHT */}
+
+
+
+
+
+ Product
+
+
+ Asgaard sofa X 1
+
+ Subtotal
+ Total
+
+
+ Subtotal
+ Rs 250,000.00
+ Rs 250,000.00
+ Rs 250,000.00
+
+
+
+
+
+
+
+ Direct Bank Transfer
+
+
+ Make your payment directly into our bank account. Please use your Order ID as the
+ payment reference. Your order will not be shipped until the funds have cleared in our
+ account.
+
+
+
+ Your personal data will be used to support your experience throughout this website, to
+ manage access to your account, and for other purposes described in our privacy policy.
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Checkout;
diff --git a/src/scenes/Checkout/useStyles.tsx b/src/scenes/Checkout/useStyles.tsx
new file mode 100644
index 0000000..490f1fa
--- /dev/null
+++ b/src/scenes/Checkout/useStyles.tsx
@@ -0,0 +1,63 @@
+import { useTheme } from '@mui/material';
+
+const useStyles = () => {
+ const theme = useTheme();
+
+ const classes = {
+ title: {
+ fontSize: '24px',
+ fontStyle: 'normal',
+ fontWeight: '500',
+ lineHeight: 'normal',
+ },
+ subtitle: {
+ color: '#9F9F9F',
+ fontSize: '16px',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ lineHeight: 'normal',
+ },
+ body: {
+ color: '#000',
+ fontSize: '16px',
+ fontStyle: 'normal',
+ fontWeight: '400',
+ lineHeight: 'normal',
+ },
+ orderBtn: {
+ border: '1px solid #000',
+ padding: '0.5rem 1.5rem',
+ color: '#000',
+ letterSpacing: '1.25px',
+ },
+ highlightPrice: {
+ color: 'var(--primary, #B88E2F)',
+ fontFamily: 'Poppins',
+ fontSize: '24px',
+ fontStyle: 'normal',
+ fontWeight: '700',
+ lineHeight: 'normal',
+ },
+ justifyContent: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ justifyContentCol: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '1.5rem',
+ },
+ submitBtn: {
+ background: theme.palette.secondary.main,
+ padding: '0.5rem 2.5rem',
+ '&:hover': {
+ background: theme.palette.secondary[400],
+ },
+ },
+ };
+ return { classes };
+};
+
+export default useStyles;
diff --git a/src/scenes/Contact/fragments/ContactForm.tsx b/src/scenes/Contact/fragments/ContactForm.tsx
index 3490d34..165e505 100644
--- a/src/scenes/Contact/fragments/ContactForm.tsx
+++ b/src/scenes/Contact/fragments/ContactForm.tsx
@@ -84,7 +84,7 @@ const ContactForm = () => {
-
+