\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {content.carousel.map((img, index) => \r\n
\r\n \r\n 
\r\n
)}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {/* */}\r\n \r\n \r\n \r\n {/*
\r\n Vernacular is an Australian commercial development property company with a track record of over 15 years of industry experience.
\r\nOur primary focus is on conceptualising and delivering real estate projects that not only meet the immediate needs of our tenants but also partners and investors. Our commitment to excellence has led us to success in diverse sectors, including retail, commercial, and mixed-use properties.
*/}\r\n\r\n ![]({content.image1}className=\"img\"/)
\r\n
\r\n\r\n \r\n
;\r\n}\r\n\r\n\r\nexport default Toggle;","import Toggle from \"./toggle\";\r\n\r\nconst Grid = ({cls,obj}) => {\r\n return \r\n {title}handleToggle(e)}>![](\"/images/buttons/arrow.svg\"/)
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {children}\r\n
\r\n \r\n 
\r\n {obj.ProjectSizeType}}>\r\n\r\n \r\n {obj.ProjectValue && }\r\n {/* {obj.ProjectSizeType && } */}\r\n {obj.Completed && }\r\n {obj.CurrentTenants && }\r\n \r\n \r\n\r\n
;\r\n}\r\n\r\nexport default Grid;","import Toggle from \"./toggle\";\r\n\r\nconst Row = ({ cls, obj }) => {\r\n return {obj.Name}, {obj.StateAbbr}
\r\n{obj.address}
\r\nPROJECT VALUE
{obj.ProjectValue}
Size / Type
{obj.ProjectSizeType}
Completion Date
{obj.Completed}
Current Tenants
{obj.CurrentTenants}
\r\n\r\n\r\n
}>\r\n {obj.Name}
{obj.Suburb}, {obj.StateAbbr}
\r\n
\r\n \r\n\r\n ;\r\n}\r\n\r\nexport default Row;","import { useEffect } from \"react\";\r\nimport Grid from \"./grid\";\r\nimport Row from \"./row\";\r\n\r\n\r\n\r\nconst Projects = ({ projects ,content}) => {\r\n \r\n return <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {obj.Granline && }\r\n \r\n {obj.ProjectValue && }\r\n {obj.CurrentTenants && }\r\n {/* {obj.ProjectSizeType && } */}\r\n {obj.completed && }\r\n
\r\n {obj.Granline}
PROJECT VALUE
{obj.ProjectValue}
Current Tenants
{obj.CurrentTenants}
Size / Type
{obj.ProjectSizeType}
completed
{obj.completed}
\r\n
\r\n Our Projects
\r\n \r\n \r\nCurrent PROJECTS - under construction
\r\n\r\n {\r\n projects.filter(s => s.Status=='Current').map(prj =>\r\n
\r\n PAST PROJECTS
\r\n {\r\n projects.filter(s => s.Status!='Current').map(prj =>\r\n |
)\r\n }\r\n\r\n
\r\n \r\n {/* ![](\"/images/projects/4.jpg\")
*/}\r\n
\r\n\r\n {/* */}\r\n \r\n */}\r\n \r\n
\r\n Our Partners
\r\n \r\n\r\n {\r\n logos.map((l,index)=>
\r\n \r\n \r\n \r\n
)\r\n }\r\n\r\n\r\n \r\n \r\n {errName &&
\r\n \r\n }\r\n \r\n {state === 'SUBMITED' && {errName}
}\r\n \r\n {errFamily &&{errFamily}
}\r\n \r\n {errEmail &&{errEmail}
}\r\n handlekeyUp(e)} placeholder=\"Phone*\">\r\n {errPhone &&{errPhone}
}\r\n \r\n\r\n
\r\n \r\n \r\n {state === 'FETCHING' && {errRec}
}\r\n \r\n\r\n \r\n \r\n \r\n
\r\n }\r\n \r\n
}\r\n {state === 'ERROR' && Thank you for getting in touch with us.
\r\nOne of our friendly staff will get back to you shortly.
\r\nThere was an issue processing your request. Please try again later.
\r\n
\r\n \r\n
\r\n \r\n {content.heading1}
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n
\r\n {/* \r\n \r\n info@vernacular.com.au\r\n
*/}\r\n \r\n \r\n \r\n
;\r\n}\r\n\r\nexport default Privacy;","\r\nimport { useRef } from \"react\";\r\nimport Privacy from \"./privacy\";\r\n\r\n\r\nconst Footer = ({privacy}) => {\r\n\r\n const refPrivacy = useRef()\r\n const openModal = (ref) => {\r\n ref.current.style.display = 'block'\r\n setTimeout(() => {\r\n ref.current.style.opacity = '1'\r\n }, 0)\r\n\r\n }\r\n const closeModal = (ref) => {\r\n ref.current.style.opacity = '0'\r\n\r\n setTimeout(() => {\r\n ref.current.style.display = 'none'\r\n }, 700)\r\n\r\n }\r\n\r\n\r\n return <>\r\n\r\n \r\n closeModal(refPrivacy)}>\r\n
\r\n \r\n}\r\n\r\n\r\n\r\nexport default Footer;","export const scroll = () => {\r\n let lastScrollTop = 0;\r\n let logoChange = false\r\n const logo = document.getElementById('logo')\r\n const sections = document.querySelectorAll('section')\r\n const breaks = document.querySelectorAll('.break')\r\n const links = document.querySelectorAll('.link')\r\n const body = document.body\r\n const ancher = document.getElementById('ancher')\r\n const rate = 400\r\n\r\n const handleChange = (cls) => {\r\n\r\n links.forEach(l => {\r\n if (l.classList.contains(cls))\r\n l.classList.add('active-page')\r\n else\r\n l.classList.remove('active-page')\r\n\r\n })\r\n }\r\n\r\n let ticking = false\r\n const checkElements = () => {\r\n const t = ancher.getBoundingClientRect().top;\r\n const m = (0.85 * t) / window.innerHeight //was 1.44\r\n const w = window.innerWidth \r\n \r\n if (t <= 0) {\r\n logo.style.width = rate+'px';\r\n if(!logo.classList.contains('faded')) \r\n logo.classList.add('faded')\r\n \r\n }\r\n else if(t>0)\r\n {\r\n logo.style.width = (m * w) + rate + 'px'; \r\n if(logo.classList.contains('faded')) \r\n logo.classList.remove('faded')\r\n \r\n }\r\n\r\n\r\n if (!logoChange && logo.getBoundingClientRect().bottom < 0) {\r\n logoChange = true\r\n // smlLogo.style.opacity=1\r\n }\r\n else if (logoChange && logoChange && logo.getBoundingClientRect().bottom >= 0) {\r\n logoChange = false\r\n // smlLogo.style.opacity=0\r\n }\r\n breaks.forEach((br, index) => {\r\n const top = br.getBoundingClientRect().top,\r\n bottom = br.getBoundingClientRect().bottom;\r\n\r\n if (top <= window.innerHeight && bottom > window.innerHeight) {\r\n const cls = br.dataset.cls\r\n if (!body.classList.contains(cls)) {\r\n if (cls === \"bg-white\") {\r\n body.classList.remove('bg-blue')\r\n }\r\n else\r\n body.classList.remove('bg-white')\r\n body.classList.add(cls)\r\n }\r\n\r\n\r\n }\r\n\r\n })\r\n sections.forEach(sec => {\r\n const top = sec.getBoundingClientRect().top,\r\n bottom = sec.getBoundingClientRect().bottom;\r\n\r\n if (top > 0 && bottom < window.innerHeight && sec.dataset.cls && !body.classList.contains(sec.dataset.cls)) {\r\n body.classList.add(sec.dataset.cls)\r\n }\r\n\r\n if (top <= 3 && bottom > 0 && !sec.classList.contains('active-page')) {\r\n handleChange(sec.getAttribute('id'))\r\n }\r\n\r\n })\r\n }\r\n document.addEventListener(\"scroll\", (event) => {\r\n\r\n if (!ticking) {\r\n window.requestAnimationFrame(() => {\r\n\r\n checkElements();\r\n lastScrollTop = window.scrollY\r\n ticking = false;\r\n });\r\n\r\n ticking = true;\r\n }\r\n });\r\n}","\nimport { useState, useEffect ,useRef} from 'react';\nimport Header from './components/header';\nimport Home from './components/home';\nimport About from './components/about';\nimport Projects from './components/projects';\nimport Partners from './components/partners';\nimport Contact from './components/contact';\nimport Footer from './components/footer';\nimport { scroll } from './fns/scroll';\nfunction App() {\n const [projects, setProjects] = useState([])\n const [homeContent, setHomeContent] = useState({})\n const [contactConent, setContactContent] = useState(null)\n const [logos, setLogos] = useState(null)\n const [privacy, setPrivacy] = useState(null)\n const refLoader=useRef()\n \n const fetchData = async () => {\n try {\n const [_projects, _homeContent, _contactContent, logos, privacy] = await Promise.all([ \n fetch(`${process.env.REACT_APP_API}projects`),\n fetch(`${process.env.REACT_APP_API}content/home`),\n fetch(`${process.env.REACT_APP_API}content/contact`),\n fetch(`${process.env.REACT_APP_API}logos`),\n fetch(`${process.env.REACT_APP_API}content/privacy`),\n ]);\n \n const [projectsJson, homeJson, contactJson, logosJson, privacyJson] = await Promise.all([\n _projects.json(),\n _homeContent.json(),\n _contactContent.json(),\n logos.json(),\n privacy.json(),\n ]); \n setProjects(projectsJson);\n setHomeContent(homeJson);\n setContactContent(contactJson);\n setLogos(logosJson);\n setPrivacy(privacyJson);\n\n } catch (error) {\n // Handle the error (e.g., log it or show a user-friendly message)\n console.error(\"Error fetching data:\", error);\n }\n };\n\n useEffect(() => { \n fetchData()\n\n\n }, [])\n \n useEffect(() => { \n if(projects.length>0)\n {\n refLoader.current.style.opacity=0;\n setTimeout(()=>{ refLoader.current.style.display='none';},1001)\n scroll()\n }\n\n\n }, [projects])\n return (\n <>\n \n \r\n
\r\n \n \n
\n \n
\n \n
\n \n
\n \n}\n