diff --git a/README.md b/README.md index 61066de..402fe23 100644 --- 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 index e0d1c84..3e3b4f6 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,13 @@ - + - Vite + React + TS + Sampark
diff --git a/package-lock.json b/package-lock.json index 8df2757..d2325a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,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" @@ -1296,6 +1296,11 @@ "react": ">=16.8.0" } }, + "node_modules/@mapbox/point-geometry": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", + "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -3661,6 +3666,11 @@ "node": ">=0.10.0" } }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" + }, "node_modules/events": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", @@ -4015,13 +4025,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/google-maps-react": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz", - "integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==", + "node_modules/google-map-react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.2.0.tgz", + "integrity": "sha512-UPiTwR3qNKJJizURXTuCbnBr8kLtLsiikj/KH1UTLGhadnU6fT+CE3CLw1lzZwk5zZIduQQODyIcEwNInECmUg==", + "dependencies": { + "@googlemaps/js-api-loader": "^1.7.0", + "@mapbox/point-geometry": "^0.1.0", + "eventemitter3": "^4.0.4", + "prop-types": "^15.7.2" + }, + "engines": { + "node": ">=10" + }, "peerDependencies": { - "react": "~0.14.8 || ^15.0.0 || ^16.0.0", - "react-dom": "~0.14.8 || ^15.0.0 || ^16.0.0" + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, "node_modules/gopd": { diff --git a/package.json b/package.json index 0f4ee6b..7e8dedd 100644 --- 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 new file mode 100644 index 0000000..e0b5ddf Binary files /dev/null and b/public/sampark-logo-transparent.png differ diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 02bbfd5..90d62b8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,7 @@ import Seeker from './Pages/Seeker'; function App() { return (
- + } /> } /> } /> diff --git a/src/Pages/Admin/index.tsx b/src/Pages/Admin/index.tsx index ddf5778..5552b3f 100644 --- a/src/Pages/Admin/index.tsx +++ b/src/Pages/Admin/index.tsx @@ -1,4 +1,10 @@ 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 ( @@ -6,6 +12,7 @@ const Admin = () => { Welcome to Admin side + {/* */} ); }; diff --git a/src/Pages/Home/index.tsx b/src/Pages/Home/index.tsx index 258183a..01193f7 100644 --- 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 (
- +
+ + +
- + + + +
); } diff --git a/src/Pages/Home/styles.ts b/src/Pages/Home/styles.ts new file mode 100644 index 0000000..6f200cb --- /dev/null +++ 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 index 6537eda..2a98278 100644 --- a/src/Pages/Provider/index.tsx +++ b/src/Pages/Provider/index.tsx @@ -14,7 +14,12 @@ const Provider = () => { navbar={} header={} 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], + }, })} > diff --git a/src/assets/Images/samparklogotransparent.png b/src/assets/Images/samparklogotransparent.png new file mode 100644 index 0000000..e0b5ddf Binary files /dev/null and b/src/assets/Images/samparklogotransparent.png differ diff --git a/src/components/Blogs/Blogs.tsx b/src/components/Blogs/Blogs.tsx new file mode 100644 index 0000000..1237806 --- /dev/null +++ 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) => ( + + + + + + {article.date} + + + {article.title} + {/* Read more */} + + {/* Read more */} + + )); + + return ( + + + + Read more about our work through our blogs... + + + + {cards} + + {/* */} + + {/* */} + + {/* {article.date} */} + + + {/* {article.title} */} + {/* Read more */} + + + {' '} + Read more articles... + + + + + ); +}; + +export default Blogs; diff --git a/src/components/Blogs/sampleData.ts b/src/components/Blogs/sampleData.ts new file mode 100644 index 0000000..cd683f2 --- /dev/null +++ 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 new file mode 100644 index 0000000..7fee300 --- /dev/null +++ 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; diff --git a/src/components/ContactUs/ContactUs.tsx b/src/components/ContactUs/ContactUs.tsx index bb06a2d..bf0390a 100644 --- a/src/components/ContactUs/ContactUs.tsx +++ b/src/components/ContactUs/ContactUs.tsx @@ -1,132 +1,145 @@ 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], - }, + 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%)`, + padding: theme.spacing.xl * 2.5, + + [`@media (max-width: ${theme.breakpoints.sm}px)`]: { + padding: theme.spacing.xl * 1.5, }, - - input: { - backgroundColor: theme.white, - borderColor: theme.colors.gray[4], - color: theme.black, - - '&::placeholder': { - color: theme.colors.gray[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%', }, - - inputLabel: { - color: theme.black, + }, + + form: { + backgroundColor: theme.white, + padding: theme.spacing.xl, + borderRadius: theme.radius.md, + boxShadow: theme.shadows.lg, + textAlign: 'left', + }, + + social: { + color: theme.white, + + '&:hover': { + color: theme.colors[theme.primaryColor][1], }, - - control: { - backgroundColor: theme.colors[theme.primaryColor][6], + }, + + input: { + backgroundColor: theme.white, + borderColor: theme.colors.gray[4], + color: theme.black, + + '&::placeholder': { + color: theme.colors.gray[5], }, - })); - - const social = [IconBrandTwitter, IconBrandYoutube, IconBrandInstagram]; - - export function ContactUs() { - const { classes } = useStyles(); - - const icons = social.map((Icon, index) => ( - - - - )); - - return ( -
- -
- Contact us - - Leave your email and we will get back to you within 24 hours - - - {/* */} - - {icons} -
-
- - -