From 2f15b0b8e5dc93ead20374dd698871c763818706 Mon Sep 17 00:00:00 2001 From: hardik Date: Wed, 12 Feb 2025 04:23:41 +0530 Subject: [PATCH 1/2] Refactored homepage layout: Replaced box positioning with grid layout for improved structure. --- package-lock.json | 63 +++ package.json | 2 + src/components/homepage.tsx | 525 ++++++++----------- src/components/imageandgif/full.png | Bin 0 -> 56863 bytes src/components/imageandgif/fullwith.png | Bin 0 -> 178688 bytes src/components/imageandgif/newbackground.png | Bin 0 -> 38277 bytes src/components/imageandgif/newbacktwo.png | Bin 0 -> 49192 bytes src/components/imageandgif/newfullwid.png | Bin 0 -> 68823 bytes src/components/ourteam.tsx | 147 +++--- src/components/ourwork.tsx | 167 +++--- yarn.lock | 28 +- 11 files changed, 496 insertions(+), 436 deletions(-) create mode 100644 src/components/imageandgif/full.png create mode 100644 src/components/imageandgif/fullwith.png create mode 100644 src/components/imageandgif/newbackground.png create mode 100644 src/components/imageandgif/newbacktwo.png create mode 100644 src/components/imageandgif/newfullwid.png diff --git a/package-lock.json b/package-lock.json index 5f59dcc..b0fbc4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,9 +19,11 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "framer-motion": "^12.4.2", "react": "^19.0.0", "react-dom": "^19.0.0", "react-scripts": "5.0.1", + "swiper": "^11.2.2", "typescript": "^4.4.2", "web-vitals": "^2.1.0" } @@ -9145,6 +9147,33 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "12.4.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz", + "integrity": "sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.0.0", + "motion-utils": "^12.0.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -12367,6 +12396,21 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/motion-dom": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz", + "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.0.0" + } + }, + "node_modules/motion-utils": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz", + "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -16729,6 +16773,25 @@ "node": ">=4" } }, + "node_modules/swiper": { + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.2.tgz", + "integrity": "sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 41958e0..92b48b6 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,11 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "framer-motion": "^12.4.2", "react": "^19.0.0", "react-dom": "^19.0.0", "react-scripts": "5.0.1", + "swiper": "^11.2.2", "typescript": "^4.4.2", "web-vitals": "^2.1.0" }, diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx index a0497aa..5379fd4 100644 --- a/src/components/homepage.tsx +++ b/src/components/homepage.tsx @@ -19,6 +19,10 @@ import loopgreenback from "../components/imageandgif/loopgreenbackground.png" import OurTeam from "./ourteam"; import mobileLogo from "../components/imageandgif/loopsMoblogo.png" import { createTheme, ThemeProvider } from "@mui/material/styles"; +import newbackground from "../components/imageandgif/full.png" +import newbackgroundtwo from "../components/imageandgif/newbacktwo.png" + + const HomePage: React.FC = () => { @@ -112,40 +116,31 @@ const HomePage: React.FC = () => { - - {/* Grid 2 */} + + {/* Grid 2 */} + - + { alignItems: "center", padding: "10px", textAlign: 'center', - marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing - }} - > - - Gif - - - Mine from nature -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque

- - - - - - Manufacture -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto

- - - Gif - - - - - - Assemble -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis!

- - - Gif - - - - - {/* Grid 3 */} - - - - Use -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !

- - - Gif - - - - - {/* Grid 4 */} - - - - Reuse -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !

- - - Gif + + Gif + + + Mine from nature +

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 

+ - + + - - + + - - Repair -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !

- - - Gif - - + textAlign: 'center', + marginBottom: { xs: "20px", md: "0" }, + }}> + + Manufacturing +

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

+ + + Gif + - + + + {/* ROW 3 */} + + + + + Gif + + + Assemble +

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

+ + + + + + + {/* ROW 4 */} + + + + + Use +

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

+ + + Gif + + + + + {/* new2 */} + + + + + {/* newnew */} + + + + Reuse +

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

+ + + Gif + + + + + + + + Repair +

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

+ + + Gif + + + + + {/* newnewnwe */} + + + + Gif + + + Disintegrate +

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

+ - }} - > - - Disintegrate -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !

- - - Gif - - - + + + - - Gif + textAlign: 'center', + marginBottom: { xs: "20px", md: "0" }, + }}> + + Gif + + + Remine +

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

+ + + - - Remine -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !

- - + + + + {/* + + - {/* Grid 5 */} - - - + */} + + + +