diff --git a/package-lock.json b/package-lock.json index 58aba03..f9d4508 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,10 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-multi-carousel": "^2.8.4", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", + "scroll-carousel": "^1.2.7", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -14690,6 +14692,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-multi-carousel": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.4.tgz", + "integrity": "sha512-7Is5Wr+m2ebkR+oq2Su2tjUdBwpVtB2O6Tjb74KDNfxWe/FrsTQwezTJTk/r9cKCrRp9Li308v822/5bZm7XKg==", + "engines": { + "node": ">=8" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -15358,6 +15368,11 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/scroll-carousel": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/scroll-carousel/-/scroll-carousel-1.2.7.tgz", + "integrity": "sha512-tiXdee3QJgyaUXVA5cW4s1qUNdpPG3jGFsoJ1Jc2kDS4X8ipIvwkPwgZSF9SYszCvF9BRxGduJDQunMWBzavdw==" + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", diff --git a/package.json b/package.json index 3389381..10d3f89 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,10 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-multi-carousel": "^2.8.4", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", + "scroll-carousel": "^1.2.7", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index a26bcf0..c96985b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,25 @@ import React from "react"; -import "./App.css"; + import { BrowserRouter, Routes, Route } from "react-router-dom"; import RegisterScreen from "./components/RegisterScreen"; import LoginScreen from './components/LoginScreen'; + +import './App.css'; +import LandingScreen from "./components/LandingScreen"; + function App() { + return (
}/> }/> + }/>
); } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/LandingScreen.js b/src/components/LandingScreen.js new file mode 100644 index 0000000..f30fe18 --- /dev/null +++ b/src/components/LandingScreen.js @@ -0,0 +1,434 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +import navbar_git_logo from "../images/navbar-github-logo.png"; +import img_1 from "../images/Rectangle_181.png"; +import img_2 from "../images/Rectangle_182.png"; +import footer_github_logo from "../images/navbar-github-logo.png"; +import foward_right from "../images/Forward_right.png"; +import insta_icon from "../images/insta_icon.svg"; +import facebook_icon from "../images/facebook_icon.svg"; +import whatsapp_icon from "../images/whatsapp_icon.svg"; +import linkedin_icon from "../images/linkedin_icon.svg"; +import twitter_icon from "../images/twitter_icon.svg"; +import Carousel from "react-multi-carousel"; +import "react-multi-carousel/lib/styles.css"; +import People from "./People"; +import { PeopleData, responsive } from "./data"; +export default function LandingScreen() { + function scrollToSection(event) { + event.preventDefault(); + const sectionId = event.target.getAttribute("href").slice(1); + const section = document.getElementById(sectionId); + + if (section) { + section.scrollIntoView({ + behavior: "smooth", + }); + } + } + return ( +
+
+
+ + Home + + + Discover + +
+ img +
+ + Trending + + + About Us + +
+
+ Login/Register +
+
+
+
+
+ Welcome to G-Projects. +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est + laborum +
+
+
+
+ {/* +
+ +
+ +
+ +
+ */} +
+ +
+
+ Discover + +
+
+ Discover the Projects from various enthusiasts around the globe. +
+
+
+ + {PeopleData.map((item) => ( + + ))} + + ; + +
+
+ About Us +
+
+ Our GitHub community is a vibrant and collaborative space where + developers, enthusiasts, and innovators from around the world come + together to share, learn, and build amazing projects. We're passionate + about technology, open source, and the power of collaboration. +
+
+
Ready to be part of something exciting? Join our GitHub + community today! Whether you're a seasoned developer or just starting + your coding journey, there's a place for you here. Get started by + exploring our repositories, participating in discussions, or attending + one of our upcoming events. Together, we'll code, create, and make a + difference in the tech world. +
Join us in shaping the future of technology, one commit at a + time. +
+

+






+
+ +
+
+ ); +} diff --git a/src/components/LoginScreen.js b/src/components/LoginScreen.js index d4369e6..0515c44 100644 --- a/src/components/LoginScreen.js +++ b/src/components/LoginScreen.js @@ -44,7 +44,7 @@ function LoginScreen() {
- Don't have an account? Register + Don't have an account? Register
diff --git a/src/components/People.js b/src/components/People.js new file mode 100644 index 0000000..21c64f8 --- /dev/null +++ b/src/components/People.js @@ -0,0 +1,23 @@ +import React from 'react'; + +export default function People(props) { + return ( +
+ img +
+

{props.name}

+

{props.roll}

+

{props.loc}

+

{props.domain}

+

Skills: +

+ {props.skills} +
+

+
+ +
+ ) +} diff --git a/src/components/RegisterScreen.js b/src/components/RegisterScreen.js index 3a4fe81..40f74e5 100644 --- a/src/components/RegisterScreen.js +++ b/src/components/RegisterScreen.js @@ -60,7 +60,7 @@ export default function RegisterScreen() {
- Already have an account? Login + Already have an account? Login
diff --git a/src/components/data.js b/src/components/data.js new file mode 100644 index 0000000..c902126 --- /dev/null +++ b/src/components/data.js @@ -0,0 +1,73 @@ +import person_1 from "../images/person_1.png"; + +export const responsive = { + superLargeDesktop: { + // the naming can be any, depends on you. + breakpoint: { max: 4000, min: 3000 }, + items: 5, + }, + desktop: { + breakpoint: { max: 3000, min: 1024 }, + items: 3, + }, + tablet: { + breakpoint: { max: 1024, min: 464 }, + items: 2, + }, + mobile: { + breakpoint: { max: 464, min: 0 }, + items: 1, + }, + }; +export const PeopleData = [ + { + id: 1, + imageUrl: person_1, + name: "John Snow", + roll_no: 1220103161561, + location: "Bangalore", + Domain: "Web Development", + year:"2020-2024", + skills: "Reactjs" + }, + { + id: 2, + imageUrl: person_1, + name: "John Snow", + roll_no: 1220103161561, + location: "Bangalore", + Domain: "Web Development", + year:"2020-2024", + skills:"Angular" + }, + { + id: 3, + imageUrl: person_1, + name: "John Snow", + roll_no: 1220103161561, + location: "Bangalore", + Domain: "Web Development", + year:"2020-2024", + skills:"HTML" + }, + { + id: 4, + imageUrl: person_1, + name: "John Snow", + roll_no: 1220103161561, + location: "Bangalore", + Domain: "Web Development", + year:"2020-2024", + skills:"Vuejs" + }, + { + id: 5, + imageUrl: person_1, + name: "John Snow", + roll_no: 1220103161561, + location: "Bangalore", + Domain: "Web Development", + year:"2020-2024", + skills:"Reactjs" + }, + ]; diff --git a/src/images/Forward_right.png b/src/images/Forward_right.png new file mode 100644 index 0000000..cac5003 Binary files /dev/null and b/src/images/Forward_right.png differ diff --git a/src/images/Rectangle_181.png b/src/images/Rectangle_181.png new file mode 100644 index 0000000..996721a Binary files /dev/null and b/src/images/Rectangle_181.png differ diff --git a/src/images/Rectangle_182.png b/src/images/Rectangle_182.png new file mode 100644 index 0000000..675bd72 Binary files /dev/null and b/src/images/Rectangle_182.png differ diff --git a/src/images/Rectangle_183.png b/src/images/Rectangle_183.png new file mode 100644 index 0000000..675bd72 Binary files /dev/null and b/src/images/Rectangle_183.png differ diff --git a/src/images/facebook_icon.svg b/src/images/facebook_icon.svg new file mode 100644 index 0000000..4d52f2b --- /dev/null +++ b/src/images/facebook_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/forward.png b/src/images/forward.png new file mode 100644 index 0000000..3ec551f Binary files /dev/null and b/src/images/forward.png differ diff --git a/src/images/globe.mp4 b/src/images/globe.mp4 new file mode 100644 index 0000000..7759740 Binary files /dev/null and b/src/images/globe.mp4 differ diff --git a/src/images/insta_icon.svg b/src/images/insta_icon.svg new file mode 100644 index 0000000..5a073e5 --- /dev/null +++ b/src/images/insta_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/linkedin_icon.svg b/src/images/linkedin_icon.svg new file mode 100644 index 0000000..26514a8 --- /dev/null +++ b/src/images/linkedin_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/navbar-github-logo.png b/src/images/navbar-github-logo.png new file mode 100644 index 0000000..081612f Binary files /dev/null and b/src/images/navbar-github-logo.png differ diff --git a/src/images/person_1.png b/src/images/person_1.png new file mode 100644 index 0000000..e654d6f Binary files /dev/null and b/src/images/person_1.png differ diff --git a/src/images/twitter_icon.svg b/src/images/twitter_icon.svg new file mode 100644 index 0000000..fbc021c --- /dev/null +++ b/src/images/twitter_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/vector-20.png b/src/images/vector-20.png new file mode 100644 index 0000000..93cf04c Binary files /dev/null and b/src/images/vector-20.png differ diff --git a/src/images/whatsapp_icon.svg b/src/images/whatsapp_icon.svg new file mode 100644 index 0000000..43c8787 --- /dev/null +++ b/src/images/whatsapp_icon.svg @@ -0,0 +1,3 @@ + + +