Our Values

.eslintignore

@@ -0,0 +1 @@
+dist

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

.prettierignore

@@ -1,4 +1,5 @@
 package-lock.json
 yarn.lock
 node_modules
-# any other unwanted files or folders
+# any other unwanted files or folders
+dist

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@emotion/react": "^11.10.6",
+    "@googlemaps/react-wrapper": "^1.1.35",
     "@mantine/carousel": "^5.10.5",
     "@mantine/core": "^5.10.5",
     "@mantine/dates": "^5.10.5",
@@ -28,12 +29,16 @@
     "@tiptap/react": "^2.0.0-beta.218",
     "@tiptap/starter-kit": "^2.0.0-beta.218",
     "dayjs": "^1.11.7",
+    "dotenv-webpack": "^8.0.1",
     "embla-carousel-react": "^7.0.9",
+    "google-maps-react": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.2"
   },
   "devDependencies": {
+    "@types/google.maps": "^3.52.0",
+    "@types/node": "^18.14.2",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.53.0",

src/App.tsx

@@ -14,7 +14,7 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/login" element={<AuthenticationForm />} />
         <Route path="/admin" element={<Admin />} />
-        <Route path="/provider" element={<Provider />} />
+        <Route path="/provider/*" element={<Provider />} />
         <Route path="/seeker" element={<Seeker />} />
       </Routes>
     </div>

src/Pages/Home/index.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import HeroSection from '../../components/HeroSection/HeroSection';
-import { OurValues } from '../../components/OurValues';
+import  {ContactUs}  from '../../components/ContactUs/ContactUs';
+// import { OurValues}  from '../../components/HomeOurValues/OurValues';
+import OurValues1 from '../../components/HomeOurValues/OurValues1';
+
 function Home() {
   return (
     <div>
       <HeroSection />
-      <OurValues />
+      <OurValues1 />
+      <ContactUs/>
     </div>
   );
 }

src/Pages/Provider/index.tsx

@@ -1,12 +1,33 @@
-import { Box, Text } from '@mantine/core';
+import { AppShell } from '@mantine/core';
+import { Route, Routes } from 'react-router';
+import MainHeader from '../../components/MainHeader/MainHeader';
+import HomeNavbar from '../../components/Navbar/Navbar';
+import ProviderCollegeTeam from '../../components/ProviderCollegeTeam/ProviderCollegeTeam';
+import ProviderMain from '../../components/ProviderMain/ProviderMain';
 
 const Provider = () => {
+  // console.log(process.env.REACT_APP_GOOGLE_API_KEY);
+
   return (
-    <Box>
-      <Text color="teal" align="center">
-        Welcome to Provider side
-      </Text>
-    </Box>
+    <AppShell
+      padding="md"
+      navbar={<HomeNavbar />}
+      header={<MainHeader />}
+      styles={(theme) => ({
+        main: { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0] },
+      })}
+    >
+      <Routes>
+        {/* <Route path="/*" element={<ProviderMain />} /> */}
+        <Route path="home" element={<ProviderMain />} />
+        <Route path="team" element={<ProviderCollegeTeam />} />
+        {/* <Route path="assignments" element={<Assignments />} /> */}
+      </Routes>
+      {/* <ProviderMain /> */}
+
+      {/* <ProviderMain/> */}
+      {/* Your application here */}
+    </AppShell>
   );
 };
 

src/components/ContactUs/ContactUs.tsx

@@ -0,0 +1,132 @@
+import {
+    createStyles,
+    Text,
+    Title,
+    SimpleGrid,
+    TextInput,
+    Textarea,
+    Button,
+    Group,
+    ActionIcon,
+  } from '@mantine/core';
+  import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram } from '@tabler/icons';
+  // import { ContactIconsList } from '../ContactIcons/ContactIcons';
+
+  const useStyles = createStyles((theme) => ({
+    wrapper: {
+      minHeight: 400,
+      boxSizing: 'border-box',
+      backgroundImage: `linear-gradient(-60deg, ${theme.colors.gray[5]} 0%, ${
+        theme.colors.gray[8]
+      } 100%)`,
+      borderRadius: theme.radius.md,
+      padding: theme.spacing.xl * 2.5,
+
+      [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+        padding: theme.spacing.xl * 1.5,
+      },
+    },
+
+    title: {
+      fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+      color: theme.white,
+      lineHeight: 1,
+    },
+
+    description: {
+      color: theme.colors[theme.primaryColor][0],
+      maxWidth: 300,
+
+      [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
+        maxWidth: '100%',
+      },
+    },
+
+    form: {
+      backgroundColor: theme.white,
+      padding: theme.spacing.xl,
+      borderRadius: theme.radius.md,
+      boxShadow: theme.shadows.lg,
+    },
+
+    social: {
+      color: theme.white,
+
+      '&:hover': {
+        color: theme.colors[theme.primaryColor][1],
+      },
+    },
+
+    input: {
+      backgroundColor: theme.white,
+      borderColor: theme.colors.gray[4],
+      color: theme.black,
+
+      '&::placeholder': {
+        color: theme.colors.gray[5],
+      },
+    },
+
+    inputLabel: {
+      color: theme.black,
+    },
+
+    control: {
+      backgroundColor: theme.colors[theme.primaryColor][6],
+    },
+  }));
+
+  const social = [IconBrandTwitter, IconBrandYoutube, IconBrandInstagram];
+
+  export function ContactUs() {
+    const { classes } = useStyles();
+
+    const icons = social.map((Icon, index) => (
+      <ActionIcon key={index} size={28} className={classes.social} variant="transparent">
+        <Icon size={22} stroke={1.5} />
+      </ActionIcon>
+    ));
+
+    return (
+      <div className={classes.wrapper}>
+        <SimpleGrid cols={2} spacing={50} breakpoints={[{ maxWidth: 'sm', cols: 1 }]}>
+          <div>
+            <Title className={classes.title}>Contact us</Title>
+            <Text className={classes.description} mt="sm" mb={30}>
+              Leave your email and we will get back to you within 24 hours
+            </Text>
+
+            {/* <ContactIconsList variant="white" /> */}
+
+            <Group mt="xl">{icons}</Group>
+          </div>
+          <div className={classes.form}>
+            <TextInput
+              label="Email"
+              placeholder="your@email.com"
+              required
+              classNames={{ input: classes.input, label: classes.inputLabel }}
+            />
+            <TextInput
+              label="Name"
+              placeholder="John Doe"
+              mt="md"
+              classNames={{ input: classes.input, label: classes.inputLabel }}
+            />
+            <Textarea
+              required
+              label="Your message"
+              placeholder="I want to order your goods"
+              minRows={4}
+              mt="md"
+              classNames={{ input: classes.input, label: classes.inputLabel }}
+            />
+
+            <Group position="right" mt="md">
+              <Button className={classes.control}>Send message</Button>
+            </Group>
+          </div>
+        </SimpleGrid>
+      </div>
+    );
+  }

src/components/HeroSection/HeroSection.tsx

@@ -1,19 +1,14 @@
 
 import React from 'react';
-// import { NavbarMinimal } from './NavbarMinimal';
+// import NavBar from '../NavBar';
 // import homeImg from '../assets/Images/homeImg.jpg'
 import './styles.css';
-import NavBar from '../NavBar';
 
 
 function HeroSection() {
   return (
     <>
     <div className="hero-section">
-   <NavBar/>
-    {/* <NavbarMinimal/> */}
-
-
       <div className="container">
       <h1>SAMPARK</h1>
         <p>
@@ -22,7 +17,6 @@ function HeroSection() {
         </p>
         <button>Donate</button>
       </div>
-
     </div>
     </>
   );