Merge branch 'main' of https://github.com/Gaurav-Verma07/sampark into…

… provider
Gaurav-Verma07 · Mar 5, 2023 · 7209722 · 7209722
2 parents 9e97fe7 + 0ca0193
commit 7209722
Show file tree

Hide file tree

Showing 35 changed files with 926 additions and 413 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
-# sampark
+
+![Samplark Logo](https://github.com/Gaurav-Verma07/sampark/blob/main/public/sampark-logo-transparent.png?raw=true)
 
 A social platform to connect NGOs and orphanage to potential social suppliers including schools and colleges.
 

diff --git a/index.html b/index.html
@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/sampark-logo-transparent.png"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Sampark</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
+    "format": "prettier --write .",
     "configure-husky": "npx husky install && npx husky add .husky/pre-commit \"npx --no-install lint-staged\""
   },
   "dependencies": {
@@ -31,7 +32,7 @@
     "dayjs": "^1.11.7",
     "dotenv-webpack": "^8.0.1",
     "embla-carousel-react": "^7.0.9",
-    "google-maps-react": "^2.0.6",
+    "google-map-react": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.2"

diff --git a/public/sampark-logo-transparent.png b/public/sampark-logo-transparent.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,7 +10,7 @@ import Seeker from './Pages/Seeker';
 function App() {
   return (
     <div className="App">
-       <Routes>
+      <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/login" element={<AuthenticationForm />} />
         <Route path="/admin" element={<Admin />} />

diff --git a/src/Pages/Admin/index.tsx b/src/Pages/Admin/index.tsx
@@ -1,11 +1,18 @@
 import { Box, Text } from '@mantine/core';
+// import SimpleMap from '../../components/GoogleMap/GoogleMap';
+const location = {
+  address: '1600 Amphitheatre Parkway, Mountain View, california.',
+  lat: 37.42216,
+  lng: -122.08427,
+};
 
 const Admin = () => {
   return (
     <Box>
       <Text color="teal" align="center">
         Welcome to Admin side
       </Text>
+      {/* <SimpleMap location={location} zoomLevel={17} /> */}
     </Box>
   );
 };

diff --git a/src/Pages/Home/index.tsx b/src/Pages/Home/index.tsx
@@ -1,15 +1,27 @@
 import React from 'react';
 import HeroSection from '../../components/HeroSection/HeroSection';
-import  {ContactUs}  from '../../components/ContactUs/ContactUs';
+import { ContactUs } from '../../components/ContactUs/ContactUs';
 // import { OurValues}  from '../../components/HomeOurValues/OurValues';
 import OurValues1 from '../../components/HomeOurValues/OurValues1';
+import ImageGallery from '../../components/ImageGallery/ImageGallery';
+import Blogs from '../../components/Blogs/Blogs';
+import { Divider } from '@mantine/core';
+import HomeHeader from '../../components/HomeHeader/HomeHeader';
+import useStyles from './styles';
 
 function Home() {
+  const { classes } = useStyles();
   return (
     <div>
-      <HeroSection />
+      <div className={classes.main}>
+        <HomeHeader />
+        <HeroSection />
+      </div>
       <OurValues1 />
-      <ContactUs/>
+      <ImageGallery />
+      <Divider m={20} mx={70} size="xs" />
+      <Blogs />
+      <ContactUs />
     </div>
   );
 }

diff --git a/src/Pages/Home/styles.ts b/src/Pages/Home/styles.ts
@@ -0,0 +1,9 @@
+import { createStyles } from '@mantine/styles';
+
+const useStyles = createStyles((theme) => ({
+  main: {
+    position: 'relative',
+  },
+}));
+
+export default useStyles;
diff --git a/src/Pages/Provider/index.tsx b/src/Pages/Provider/index.tsx
@@ -14,7 +14,12 @@ const Provider = () => {
       navbar={<HomeNavbar />}
       header={<MainHeader />}
       styles={(theme) => ({
-        main: { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0] },
+        main: {
+          backgroundColor:
+            theme.colorScheme === 'dark'
+              ? theme.colors.dark[8]
+              : theme.colors.gray[0],
+        },
       })}
     >
       <Routes>

diff --git a/src/assets/Images/samparklogotransparent.png b/src/assets/Images/samparklogotransparent.png
diff --git a/src/components/Blogs/Blogs.tsx b/src/components/Blogs/Blogs.tsx
@@ -0,0 +1,98 @@
+import {
+  createStyles,
+  SimpleGrid,
+  Card,
+  Image,
+  Text,
+  Container,
+  AspectRatio,
+  Box,
+  Paper,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
+import { mockdata } from './sampleData';
+import useStyles from './styles';
+import Logo from '../../assets/Images/samparklogotransparent.png';
+
+const Blogs = () => {
+  const { classes } = useStyles();
+  const theme = useMantineTheme();
+
+  const cards = mockdata.map((article) => (
+    <Card
+      shadow="sm"
+      key={article.title}
+      p="md"
+      radius="md"
+      component="a"
+      href="#"
+      className={classes.card}
+    >
+      <AspectRatio ratio={1920 / 1080}>
+        <Image src={article.image} />
+      </AspectRatio>
+      <Text color="dimmed" size="xs" transform="uppercase" weight={700} mt="md">
+        {article.date}
+      </Text>
+      <Text className={classes.title} align="left" mt={5}>
+        {article.title}
+        {/* <Text component='span'color= {theme.colors.red[5]} td= "underline" weight= "200" > Read more</Text> */}
+      </Text>
+      {/* <Text color= {theme.colors.red[5]} td= "underline"  align= "left" weight= "200" > Read more</Text> */}
+    </Card>
+  ));
+
+  return (
+    <Paper m={20} px={70} mb={70}>
+      <Box>
+        <Title
+          order={3}
+          py={20}
+          tt="capitalize"
+          weight="400"
+          color="teal"
+          align="left"
+        >
+          Read more about our work through our blogs...
+        </Title>
+      </Box>
+      <SimpleGrid cols={3} breakpoints={[{ maxWidth: 'sm', cols: 1 }]}>
+        {cards}
+        <Card
+          shadow="lg"
+          //   align= "center"
+          p="md"
+          radius="md"
+          sx={{ backgroundColor: theme.colors.teal[0] }}
+          component="a"
+          href="#"
+          className={classes.card}
+        >
+          {/* <AspectRatio ratio={1920 / 1080} > */}
+          <Image pl={56} src={Logo} width={250} height={250} />
+          {/* </AspectRatio> */}
+          <Text
+            color="dimmed"
+            size="xs"
+            transform="uppercase"
+            weight={700}
+            mt="md"
+          >
+            {/* {article.date} */}
+          </Text>
+          <Text className={classes.title} align="left" mt={5}>
+            {/* {article.title}  */}
+            {/* <Text component='span'color= {theme.colors.red[5]} td= "underline" weight= "200" > Read more</Text> */}
+          </Text>
+          <Text color={theme.colors.red[5]} td="underline" weight="200">
+            {' '}
+            Read more articles...
+          </Text>
+        </Card>
+      </SimpleGrid>
+    </Paper>
+  );
+};
+
+export default Blogs;
diff --git a/src/components/Blogs/sampleData.ts b/src/components/Blogs/sampleData.ts
@@ -0,0 +1,27 @@
+export const mockdata = [
+  {
+    title:
+      'Clothes distribution to orphanage childrens by IET Lucknow students  ',
+    image:
+      'https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80',
+    date: 'August 18, 2022',
+  },
+  {
+    title: 'Best forests to visit in North America',
+    image:
+      'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80',
+    date: 'August 27, 2022',
+  },
+  {
+    title: 'Hawaii beaches review: better than you think',
+    image:
+      'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80',
+    date: 'September 9, 2022',
+  },
+  {
+    title: 'Mountains at night: 12 best locations to enjoy the view',
+    image:
+      'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80',
+    date: 'September 12, 2022',
+  },
+];
diff --git a/src/components/Blogs/styles.ts b/src/components/Blogs/styles.ts
@@ -0,0 +1,19 @@
+import { createStyles } from '@mantine/styles';
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    transition: 'transform 150ms ease, box-shadow 150ms ease',
+
+    '&:hover': {
+      transform: 'scale(1.01)',
+      boxShadow: theme.shadows.md,
+    },
+  },
+
+  title: {
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    fontWeight: 600,
+  },
+}));
+
+export default useStyles;