Skip to content

Commit

Permalink
Merge pull request #249 from COS301-SE-2024/chore/occupi-tech
Browse files Browse the repository at this point in the history 
Chore/occupi tech
  • Loading branch information
@u21631532
u21631532 authored Jul 30, 2024
2 parents 25f4b2e + 6d38270 commit 6a0b657
Show file tree
Hide file tree
Showing 24 changed files with 7,656 additions and 279 deletions.
132 changes: 122 additions & 10 deletions frontend/occupi/components/ui/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,126 @@
import { motion } from "framer-motion";
import Link from "next/link";
import { FaTwitter, FaLinkedin, FaGithub } from "react-icons/fa";

const Footer = () => {
const currentYear = new Date().getFullYear();

const footerVariants = {
hidden: { opacity: 0, y: 50 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
when: "beforeChildren",
staggerChildren: 0.1,
},
},
};

const itemVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: { type: "spring", stiffness: 100 },
},
};

return (
<footer className="mt-20">
<div className="custom-screen">
<div className="mt-10 py-8 border-t border-gray-800 items-center justify-between sm:flex">
<p className="text-gray-400 text-center">MIT {new Date().getFullYear()} © Occupi.</p>
</div>
return (
<motion.footer
className="bg-gray-900 text-white py-12"
variants={footerVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
>
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<motion.div variants={itemVariants}>
<h3 className="text-xl font-bold mb-4">About Occupi</h3>
<p className="text-gray-400">
Occupi is an innovative office capacity management solution,
leveraging AI to optimize workspace utilization and enhance
productivity.
</p>
</motion.div>
<motion.div variants={itemVariants}>
<h3 className="text-xl font-bold mb-4">Quick Links</h3>
<ul className="space-y-2">
<li>
<Link href="/about" className="text-gray-400 hover:text-white transition-colors">
About Us
</Link>
</li>
<li>
<Link href="/features" className="text-gray-400 hover:text-white transition-colors">
Features
</Link>
</li>
<li>
<Link href="/faq" className="text-gray-400 hover:text-white transition-colors">
FAQ
</Link>
</li>
<li>
<Link href="/contact" className="text-gray-400 hover:text-white transition-colors">
Contact
</Link>
</li>
</ul>
</motion.div>
<motion.div variants={itemVariants}>
<h3 className="text-xl font-bold mb-4">Connect With Us</h3>
<div className="flex space-x-4">
<motion.a
href="https://twitter.com/occupi"
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.2 }}
whileTap={{ scale: 0.9 }}
>
<FaTwitter className="text-2xl text-gray-400 hover:text-white transition-colors" />
</motion.a>
<motion.a
href="https://linkedin.com/company/occupi"
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.2 }}
whileTap={{ scale: 0.9 }}
>
<FaLinkedin className="text-2xl text-gray-400 hover:text-white transition-colors" />
</motion.a>
<motion.a
href="https://github.com/occupi"
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.2 }}
whileTap={{ scale: 0.9 }}
>
<FaGithub className="text-2xl text-gray-400 hover:text-white transition-colors" />
</motion.a>
</div>
</footer>
)
}
</motion.div>
</div>
<motion.div
className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400"
variants={itemVariants}
>
<p>&copy; {currentYear} Occupi. All rights reserved.</p>
<p className="mt-2">
<Link href="/privacy" className="hover:text-white transition-colors">
Privacy Policy
</Link>{" "}
|{" "}
<Link href="/terms" className="hover:text-white transition-colors">
Terms of Service
</Link>
</p>
</motion.div>
</div>
</motion.footer>
);
};

export default Footer
export default Footer;
130 changes: 97 additions & 33 deletions frontend/occupi/components/ui/Hero/Hero.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,104 @@
import { motion } from "framer-motion"
import GradientWrapper from "@/components/GradientWrapper"
import Image from "next/image"
import HeroImg from "@/public/images/hero.png"
import HeroImg from "@/public/images/Group.svg"
import LayoutEffect from "@/components/LayoutEffect"

const Hero = () => (
<section>
<div className="custom-screen py-28">
<LayoutEffect className="duration-1000 delay-300"
isInviewState={{
trueState: "opacity-1",
falseState: "opacity-0"
}}
>
<div>
<div className="space-y-5 max-w-3xl mx-auto text-center">
<h1 className="text-4xl bg-clip-text text-transparent bg-gradient-to-r font-extrabold mx-auto sm:text-6xl"
style={{
backgroundImage: "linear-gradient(179.1deg, #FFFFFF 0.77%, rgba(255, 255, 255, 0) 182.09%)"
}}
const Hero = () => {
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
delay: 0.3,
duration: 1,
when: "beforeChildren",
staggerChildren: 0.2
}
}
}

const itemVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.5 }
}
}

const buttonVariants = {
hover: { scale: 1.05, transition: { duration: 0.2 } },
tap: { scale: 0.95, transition: { duration: 0.1 } }
}

const imageVariants = {
hidden: { opacity: 0, x: 100 },
visible: {
opacity: 1,
x: 0,
transition: { duration: 0.8, ease: "easeOut" }
}
}

return (
<section>
<div className="custom-screen py-28">
<LayoutEffect
className="duration-1000 delay-300"
isInviewState={{
trueState: "opacity-1",
falseState: "opacity-0"
}}
>
<motion.div
className="flex flex-col md:flex-row items-center justify-between"
variants={containerVariants}
initial="hidden"
animate="visible"
>
<GradientWrapper wrapperClassName="max-w-3xl h-[250px] top-12 inset-0 sm:h-[300px] lg:h-[650px]">
<motion.div className="md:w-1/2 md:pr-8 mb-8 md:mb-0 md:ml-20">
<motion.h1
variants={itemVariants}
className="text-4xl font-bold text-white-800 mb-4 sm:text-5xl"
>
Analyse and Predict your office capacity
</motion.h1>
<motion.p
variants={itemVariants}
className="text-xl text-white-600 mb-6"
>
Predict. Plan. Perfect
</motion.p>
<motion.p
variants={buttonVariants}
whileHover="hover"
whileTap="tap"
className="inline-block bg-gray-900 text-white px-6 py-3 rounded-full font-medium hover:bg-gray-800 transition-colors cursor-pointer"
>
Get Access →
</motion.p>
</motion.div>
</GradientWrapper>

<motion.div
className="md:w-1/2"
variants={imageVariants}
>
Predict. Plan. Perfect.
</h1>
<p className="max-w-xl mx-auto text-gray-300">
Gain control of your business's growth with Occupi's comprehensive office analystics, capacity prediction, and ocuppancy prediction platform.
</p>
</div>
<GradientWrapper className="mt-16 sm:mt-28" wrapperClassName="max-w-3xl h-[250px] top-12 inset-0 sm:h-[300px] lg:h-[650px]">
<Image
src={HeroImg}
alt="occupi hero image"
/>
</GradientWrapper>
</div>
</LayoutEffect>
</div>
</section>
)
<Image
src={HeroImg}
alt="Occupi App Screenshot"
width={350}
height={100}
className="rounded-lg shadow-lg"
/>
</motion.div>
</motion.div>
</LayoutEffect>
</div>
</section>
)
}

export default Hero
Loading

0 comments on commit 6a0b657

Please sign in to comment.