diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 3c3629e6..00000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules diff --git a/package-lock.json b/package-lock.json index 50e1c1a9..1ad70603 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,18 @@ { - "name": "mobillio-online-store", + "name": "mobillio-", "version": "1.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "mobillio-online-store", + "name": "mobillio-", "version": "1.0.0", "dependencies": { "@craco/craco": "^7.1.0", "@react-oauth/google": "^0.12.1", + "i": "^0.3.7", "jwt-decode": "^4.0.0", + "lucide-react": "^0.460.0", "next": "^12.1.10", "prop-types": "15.7.2", "react": "^17.0.2", @@ -8565,6 +8567,14 @@ "node": ">=10.17.0" } }, + "node_modules/i": { + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/i/-/i-0.3.7.tgz", + "integrity": "sha512-FYz4wlXgkQwIPqhzC5TdNMLSE5+GS1IIDJZY/1ZiEPCT2S3COUVZeT5OW4BmW4r5LHLQuOosSwsvnroG9GR59Q==", + "engines": { + "node": ">=0.4" + } + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -10513,6 +10523,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.460.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.460.0.tgz", + "integrity": "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/magic-string": { "version": "0.25.9", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", diff --git a/package.json b/package.json index dce46a72..46138faa 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,13 @@ { - "name": "mobillio-online-store", + "name": "mobillio-", "version": "1.0.0", "private": true, "dependencies": { "@craco/craco": "^7.1.0", "@react-oauth/google": "^0.12.1", + "i": "^0.3.7", "jwt-decode": "^4.0.0", + "lucide-react": "^0.460.0", "next": "^12.1.10", "prop-types": "15.7.2", "react": "^17.0.2", diff --git a/src/components/features1.js b/src/components/features1.js index 78c4c10e..73061465 100644 --- a/src/components/features1.js +++ b/src/components/features1.js @@ -31,7 +31,7 @@ const Features1 = (props) => { {props.sectionDescription ?? ( - Discover the unique features that set Mobilio apart from the + Discover the unique features that set apart from the rest. diff --git a/src/components/hero8.js b/src/components/hero8.js index b394f9b7..f2a3ab06 100644 --- a/src/components/hero8.js +++ b/src/components/hero8.js @@ -13,7 +13,7 @@ const Hero8 = (props) => {

{props.heading1 ?? ( - Welcome to Mobilio + Welcome )}

diff --git a/src/components/hero9.js b/src/components/hero9.js index 0f15291e..55b105be 100644 --- a/src/components/hero9.js +++ b/src/components/hero9.js @@ -18,7 +18,7 @@ const Hero9 = (props) => {

{props.heading1 ?? ( - Welcome to Mobilio + Welcome to )}

diff --git a/src/components/navbar.js b/src/components/navbar.js index 64dcff35..7e102ac7 100644 --- a/src/components/navbar.js +++ b/src/components/navbar.js @@ -112,4 +112,4 @@ Navbar.propTypes = { rootClassName: PropTypes.string, }; -export default Navbar; +export default Navbar; \ No newline at end of file diff --git a/src/components/team1.js b/src/components/team1.js index 8eff4de6..5fd70665 100644 --- a/src/components/team1.js +++ b/src/components/team1.js @@ -82,7 +82,7 @@ const Team1 = (props) => { {props.member1Content ?? ( - John is the visionary behind Mobilio, with a passion + John is the visionary behind , with a passion for modern design and quality craftsmanship. @@ -449,7 +449,7 @@ const Team1 = (props) => { {props.member8Content ?? ( - Olivia handles the financial aspects of Mobilio with + Olivia handles the financial aspects of with precision and expertise. diff --git a/src/components/testimonial18.js b/src/components/testimonial18.js index 1806d17d..ed008ead 100644 --- a/src/components/testimonial18.js +++ b/src/components/testimonial18.js @@ -23,7 +23,7 @@ const Testimonial18 = (props) => { {props.content1 ?? ( - I have been buying furniture from Mobilio for years, and I + I have been buying furniture from for years, and I am always impressed by the quality and unique designs they offer. @@ -141,7 +141,7 @@ const Testimonial18 = (props) => { {props.review2 ?? ( - Mobilio's products have transformed my living space + 's products have transformed my living space into a modern and stylish home. I highly recommend their furniture and decorations. @@ -196,7 +196,7 @@ const Testimonial18 = (props) => { {props.review3 ?? ( - As someone who appreciates good design, Mobilio is my + As someone who appreciates good design, is my go-to place for all things furniture. Their pieces never disappoint. @@ -253,9 +253,9 @@ const Testimonial18 = (props) => { {props.review4 ?? ( - I furnished my office with Mobilio's desks and lamps, + I furnished my office with 's desks and lamps, and my clients always compliment the elegant decor. Thank - you, Mobilio! + you, ! )} diff --git a/src/views/model.css b/src/views/model.css index 213beee2..1db7cad8 100644 --- a/src/views/model.css +++ b/src/views/model.css @@ -1,12 +1,3 @@ -.footerroot-class-name1 { - border-top: none; - margin-top: 0; -} - -.model-hero.section-container { - margin-bottom: 100px; -} - .model-text36, .model-text39/*... other text classes */ { margin-bottom: 10px; /* Adjust as necessary */ diff --git a/src/views/model.js b/src/views/model.js index 5014aced..c703f920 100644 --- a/src/views/model.js +++ b/src/views/model.js @@ -4,12 +4,12 @@ import { Helmet } from 'react-helmet'; import Navbar from '../components/navbar'; import Footer from '../components/footer'; -import ThreeDModelViewer from './threed'; // Ensure this is the correct path to your 3D model viewer component +import ThreeDModelViewer from './threed'; import './model.css'; const Model = (props) => { - const [modelUrl, setModelUrl] = useState(`${process.env.PUBLIC_URL}/modern_house1/scene.gltf`); // Default URL + const [modelUrl, setModelUrl] = useState(`${process.env.PUBLIC_URL}/modern_house1/scene.gltf`); useEffect(() => { const surveyData = JSON.parse(localStorage.getItem('surveyData')); @@ -22,84 +22,25 @@ const Model = (props) => { return (
- Model - Mobillio Online Store - + Crafting Comfort + - - HOME -

- - - } - text1={ - - ABOUT US - - } - text2={ - - WISHLIST - - } - text3={ - - CONTACT - - } - text4={ - - SHOP - - } - text5={ - - LOOKBOOK - - } - text6={ - - SPECIAL - - } - text7={ - - ABOUT - - } - text8={ - - BLOG - - } - text9={ - - CONTACT - - } - button={ - - Register/Login - - } - imageSrc="/butterfly-200h.jpg" - logoCenter={ - - - CRAFTING COMFORT -

- - - } - logoCenter1={ - - MOBILLIO - - } - rootClassName="navbarroot-class-name3" - > + text={HOME} + text1={ABOUT US} + text2={WISHLIST} + text3={CONTACT} + text4={SHOP} + text5={LOOKBOOK} + text6={SPECIAL} + text7={ABOUT} + text8={BLOG} + text9={CONTACT} + button={Register/Login} + logoCenter={CRAFTING COMFORT} + logoCenter1={MOBILLIO} + rootClassName="navbarroot-class-name2" + />
@@ -151,40 +92,30 @@ const Model = (props) => {
-
4517 Washington Ave. Manchester, Kentucky 39495, United States} - text1={584135} - text2={ - - Ph: +91 6363996166 -
- E-mail: info@iiitr.ac.in - - } - text3={Categories} - text4={Bungalow} - text5={Wooden villa} - text6={Villa} - text7={Home} - text8={Apartments} - text9={Duplex} - text10={Company} - text11={Shop} - text12={Lookbook} - text13={Specials} - text14={About Us} - text15={Blog} - text16={Resources} - text17={Contact us} - text18={Survey} - text19={Material pricing} - text20={ - - View page - - } - heading={CONTACT US} - rootClassName="footerroot-class-name1" +
4517 Washington Ave. Manchester, Kentucky 39495, United States} + text1={584135} + text2={Ph: +91 6363996166
E-mail: info@iiitr.ac.in} + text3={Categories} + text4={Bungalow} + text5={Wooden villa} + text6={Villa} + text7={Home} + text8={Apartments} + text9={Duplex} + text10={Company} + text11={Shop} + text12={Lookbook} + text13={Specials} + text14={About Us} + text15={Blog} + text16={Resources} + text17={Contact us} + text18={Survey} + text19={Material pricing} + text20={View page} + heading={CONTACT US} + rootClassName="footerroot-class-name" />
); diff --git a/src/views/survey.css b/src/views/survey.css index 0d99d26f..eb2a51ea 100644 --- a/src/views/survey.css +++ b/src/views/survey.css @@ -7,7 +7,8 @@ justify-content: flex-start; } -.survey-housetypes .button { +.survey-housetypes .button, +.survey-choicerooms .button { padding: 10px 20px; margin: 5px; font-size: 16px; @@ -22,46 +23,6 @@ text-align: left; /* Align text left for better readability */ } -.survey-choicerooms .button { - padding: 10px 20px; - margin: 5px; - font-size: 16px; - border-radius: 8px; - border: 2px solid #4CAF50; - cursor: pointer; - background-color: white; - color: #4CAF50; - transition: background-color 0.3s ease; - width: 100%; - max-width: 80px; - justify-content: center; -} - -.survey-choicesofrooms-question { - margin-left: 70px; - height: 80px; -} - -.survey-choicesofrooms-question .button { - padding: 10px 20px; - margin: 5px; - font-size: 16px; - border-radius: 8px; - border: 2px solid #4CAF50; - cursor: pointer; - background-color: white; - color: #4CAF50; - transition: background-color 0.3s ease; - width: 100%; - max-width: 80px; - justify-content: center; -} - -.survey-choicesofrooms-question .button:hover { - background-color: #4CAF50; - color: white; -} - .survey-housetypes .button:hover, .survey-choicerooms .button:hover { background-color: #4CAF50; @@ -208,8 +169,6 @@ width: 100%; display: flex; align-self: center; - margin-top: 140px; - margin-bottom: 30px; margin-left: var(--dl-space-space-sixunits); padding-left: var(--dl-space-space-sixunits); flex-direction: column; @@ -357,7 +316,7 @@ .survey-choicerooms { flex: 0 0 auto; width: 100%; - height: 80px; + height: auto; display: flex; align-items: flex-start; margin-left: 70px; diff --git a/src/views/survey.js b/src/views/survey.js index f6ba7efd..c5a472de 100644 --- a/src/views/survey.js +++ b/src/views/survey.js @@ -71,9 +71,10 @@ const Survey = (props) => { }; // Generate the model URL based on user input - let modelUrl = '/001/scene.gltf'; // default model + let modelUrl = '/002/scene.gltf'; // default model if(houseType=='Quadruplex') { + modelUrl = '/002/scene.gltf'; } else if((houseType=='Single Storey' && balcony=='Yes' && parking=='Yes') || (houseType=='Single Storey' && pool=='No' && balcony=='Yes' && garage=='No' && parking=='No')) { diff --git a/src/views/threed.js b/src/views/threed.js index 9573239e..d78ae589 100644 --- a/src/views/threed.js +++ b/src/views/threed.js @@ -2,98 +2,198 @@ import React, { useEffect, useRef } from 'react'; import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; +import { Maximize } from 'lucide-react'; const ThreeDModelViewer = ({ modelUrl }) => { - const containerRef = useRef(null); // Ref for the container + const containerRef = useRef(null); - useEffect(() => { - if (!containerRef.current) return; + useEffect(() => { + if (!containerRef.current) return; + // Renderer setup + const renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.outputColorSpace = THREE.SRGBColorSpace; + renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight); + renderer.setClearColor(0x000000); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.shadowMap.enabled = true; + renderer.shadowMap.type = THREE.PCFSoftShadowMap; + containerRef.current.appendChild(renderer.domElement); + + // Scene setup + const scene = new THREE.Scene(); + const camera = new THREE.PerspectiveCamera( + 45, + containerRef.current.clientWidth / containerRef.current.clientHeight, + 1, + 1000 + ); + camera.position.set(0, 10, 20); + + // OrbitControls setup + const controls = new OrbitControls(camera, renderer.domElement); + controls.enableDamping = true; + controls.dampingFactor = 0.05; + controls.enablePan = true; + controls.enableZoom = true; + + // Lighting setup + const spotLight = new THREE.SpotLight(0xffffff, 2, 200, 0.5, 0.5); + spotLight.position.set(10, 30, 10); + spotLight.castShadow = true; + scene.add(spotLight); + scene.add(new THREE.AmbientLight(0xffffff, 0.5)); + + // Model loading + const loader = new GLTFLoader(); + loader.load( + modelUrl, + (gltf) => { + const model = gltf.scene; + scene.add(model); + + // Center model + const box = new THREE.Box3().setFromObject(model); + const center = box.getCenter(new THREE.Vector3()); + model.position.sub(center); + controls.target.copy(center); + controls.update(); + }, + undefined, + (error) => console.error(error) + ); + + // Window resize handler + const handleResize = () => { + renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight); + camera.aspect = containerRef.current.clientWidth / containerRef.current.clientHeight; + camera.updateProjectionMatrix(); + }; + window.addEventListener('resize', handleResize); + + // Animation loop + const animate = () => { + requestAnimationFrame(animate); + controls.update(); + renderer.render(scene, camera); + }; + animate(); + + return () => { + window.removeEventListener('resize', handleResize); + renderer.dispose(); + }; + }, [modelUrl]); + + const openFullScreen = () => { + const fullScreenWindow = window.open('', '_blank', 'width=800,height=600'); + if (fullScreenWindow) { + // Write initial structure to the new window + fullScreenWindow.document.write(` + + + + 3D Model Viewer + + + +
+ + + `); + fullScreenWindow.document.close(); + + // Wait for the new window to load its DOM + fullScreenWindow.onload = () => { + const container = fullScreenWindow.document.getElementById('threeD-container'); + + // Full-screen Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.outputColorSpace = THREE.SRGBColorSpace; - renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight); - renderer.setClearColor(0x000000); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.shadowMap.enabled = true; - renderer.shadowMap.type = THREE.PCFSoftShadowMap; - containerRef.current.appendChild(renderer.domElement); + renderer.setSize(container.clientWidth, container.clientHeight); + renderer.setPixelRatio(fullScreenWindow.devicePixelRatio); + container.appendChild(renderer.domElement); + // Full-screen Scene and Camera const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( - 45, - containerRef.current.clientWidth / containerRef.current.clientHeight, - 1, - 1000 + 45, + container.clientWidth / container.clientHeight, + 1, + 1000 ); camera.position.set(0, 10, 20); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; - controls.dampingFactor = 0.05; // Smoother damping - controls.enablePan = true; // Enable panning - controls.enableZoom = true; - controls.zoomSpeed = 1.0; - controls.rotateSpeed = 0.8; // Adjusted for smoother rotation - controls.panSpeed = 0.8; // Adjusted pan speed - controls.minDistance = 5; - controls.maxDistance = 50; - controls.minPolarAngle = 0; // Allow full vertical rotation - controls.maxPolarAngle = Math.PI; // Allow full vertical rotation - controls.autoRotate = false; - controls.target.set(0, 0, 0); - - const spotLight = new THREE.SpotLight(0xffffff, 3000, 200, 0.5, 0.5); + controls.dampingFactor = 0.05; + + // Lighting + const spotLight = new THREE.SpotLight(0xffffff, 2, 200, 0.5, 0.5); spotLight.position.set(10, 30, 10); spotLight.castShadow = true; - spotLight.shadow.bias = -0.0001; - spotLight.shadow.mapSize.width = 2048; - spotLight.shadow.mapSize.height = 2048; - scene.add(spotLight) - - const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); - scene.add(ambientLight); - + scene.add(spotLight); + scene.add(new THREE.AmbientLight(0xffffff, 0.5)); + + // Load the Model const loader = new GLTFLoader(); loader.load( - modelUrl, - (gltf) => { - const mesh = gltf.scene; - scene.add(mesh); - const box = new THREE.Box3().setFromObject(mesh); - const center = box.getCenter(new THREE.Vector3()); - mesh.position.sub(center); - controls.target.copy(center); - controls.update(); - }, - undefined, - (error) => { - console.error(error); - } + modelUrl, + (gltf) => { + const model = gltf.scene; + scene.add(model); + + const box = new THREE.Box3().setFromObject(model); + const center = box.getCenter(new THREE.Vector3()); + model.position.sub(center); + controls.target.copy(center); + controls.update(); + }, + undefined, + (error) => console.error(error) ); + // Handle Resizing const handleResize = () => { - renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight); - camera.aspect = containerRef.current.clientWidth / containerRef.current.clientHeight; - camera.updateProjectionMatrix(); + renderer.setSize(container.clientWidth, container.clientHeight); + camera.aspect = container.clientWidth / container.clientHeight; + camera.updateProjectionMatrix(); }; + fullScreenWindow.addEventListener('resize', handleResize); - window.addEventListener('resize', handleResize); - + // Animation Loop const animate = () => { + if (!fullScreenWindow.closed) { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); + } }; - animate(); + }; + } + }; - return () => { - window.removeEventListener('resize', handleResize); - renderer.dispose(); - }; - }, [modelUrl]); - - return
; + return ( +
+
+ +
+
+ ); }; -export default ThreeDModelViewer; +export default ThreeDModelViewer; \ No newline at end of file