From 58767c6eb2a5bcbcdaddda7f0d35ad46c5f3819a Mon Sep 17 00:00:00 2001 From: boshyxd Date: Tue, 20 Aug 2024 23:01:23 -0600 Subject: [PATCH] update to landing page and quiz page --- src/components/FeatureSection.js | 266 +++++++++++++++++++++++++++---- src/components/Hero.js | 70 ++++---- src/components/Login.js | 55 ++++--- src/components/Register.js | 249 +++++++++++++++-------------- src/pages/index.js | 21 ++- src/styles/globals.css | 10 +- 6 files changed, 451 insertions(+), 220 deletions(-) diff --git a/src/components/FeatureSection.js b/src/components/FeatureSection.js index 2453aa6..6686040 100644 --- a/src/components/FeatureSection.js +++ b/src/components/FeatureSection.js @@ -1,9 +1,12 @@ import React from 'react'; -import { Box, Container, Heading, Text, SimpleGrid, Icon, VStack, useColorModeValue } from "@chakra-ui/react"; -import { motion } from "framer-motion"; -import { FaClock, FaChartLine, FaShieldAlt } from 'react-icons/fa'; +import { Box, Container, Heading, Text, SimpleGrid, Icon, VStack, useColorModeValue, Button, Flex, Badge } from "@chakra-ui/react"; +import { motion, useAnimation } from "framer-motion"; +import { FaClock, FaChartLine, FaShieldAlt, FaPalette, FaUsers, FaMobileAlt, FaCompass, FaUserCircle, FaShareAlt, FaSave } from 'react-icons/fa'; +import { useInView } from 'react-intersection-observer'; +import Link from 'next/link'; const MotionBox = motion(Box); +const MotionFlex = motion(Flex); const Feature = ({ title, text, icon, color }) => { return ( @@ -29,47 +32,250 @@ const Feature = ({ title, text, icon, color }) => { }; const FeatureSection = () => { + const controls = useAnimation(); + const [ref, inView] = useInView({ + threshold: 0.1, + triggerOnce: true, + }); + + React.useEffect(() => { + if (inView) { + controls.start('visible'); + } + }, [controls, inView]); + + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.2, + }, + }, + }; + + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.5, + }, + }, + }; + return ( - - + + - Discover Your Style with Ease! + Discover Your Style with Ease AestheticAxis provides you with cutting-edge tools to explore and define your unique aesthetic. + + {/* Create Your Style Profile */} + + + + + + + + Create Your Style Profile + + + + Sign up to save your quiz results, track your style evolution, and connect with like-minded individuals. + + + + + + + + New Feature! + + + + + + + {/* Explore Trending Aesthetics and New Section */} + + {/* Explore Trending Aesthetics */} + + + + + Explore Trending Aesthetics + + + + Stay up-to-date with the latest style trends and discover new aesthetics that resonate with you. + + + + + {/* Track Your Style Evolution */} + + + + + Track Your Style Evolution + + + + Visualize how your style preferences change over time and gain insights into your aesthetic journey. + + + + + + {/* Three Panels */} - - - + {[ + { + icon: FaClock, + title: "Quick and Engaging Quiz", + color: "teal.500", + text: "Our interactive quiz uses advanced algorithms to assess your style preferences efficiently." + }, + { + icon: FaChartLine, + title: "Detailed Style Analysis", + color: "purple.500", + text: "Get comprehensive insights into your aesthetic profile with our state-of-the-art analysis tools." + }, + { + icon: FaShieldAlt, + title: "Personalized Recommendations", + color: "pink.500", + text: "Receive tailored style suggestions powered by machine learning and trend forecasting." + } + ].map((feature, index) => ( + + + + ))} + + {/* Two Panels */} + + + + + Community Insights + + + Connect with like-minded individuals and share your style journey with our vibrant community. + + + + + + Mobile-Friendly Experience + + + Access your style profile and recommendations on-the-go with our responsive mobile design. + + + + + + + Ready to Discover Your Unique Style? + + + + + ); }; -export default FeatureSection; +export default FeatureSection; \ No newline at end of file diff --git a/src/components/Hero.js b/src/components/Hero.js index 36b2625..7bb47c0 100644 --- a/src/components/Hero.js +++ b/src/components/Hero.js @@ -1,16 +1,21 @@ import React from 'react'; -import { Box, Heading, Text, Button, VStack, Container, Flex } from "@chakra-ui/react"; +import { Box, Heading, Text, Button, VStack, Container, useColorModeValue } from "@chakra-ui/react"; import Link from 'next/link'; import Image from 'next/image'; import { useRouter } from 'next/router'; -import LetterPullup from "@/components/ui/letter-pullup"; import { motion } from "framer-motion"; +import LetterPullup from "@/components/ui/letter-pullup"; const MotionBox = motion(Box); export default function Hero() { const router = useRouter(); + const bgGradient = useColorModeValue( + "linear(to-b, green.300, green.600)", + "linear(to-b, green.700, green.900)" + ); + return ( - {/* Background animated shapes */} - - + + AestheticAxis Logo - - - + Discover your unique style through our interactive quiz. Explore popular aesthetics and find where you fit on the style spectrum. @@ -153,10 +159,9 @@ const Login = () => { )} - @@ -181,4 +186,4 @@ const Login = () => { ); }; -export default Login; +export default Login; \ No newline at end of file diff --git a/src/components/Register.js b/src/components/Register.js index 3b87c53..7ff37d7 100644 --- a/src/components/Register.js +++ b/src/components/Register.js @@ -1,14 +1,12 @@ import React, { useState } from 'react'; import { signInWithPopup, GoogleAuthProvider, GithubAuthProvider } from 'firebase/auth'; -import { FaGoogle, FaGithub } from 'react-icons/fa'; - +import { FaGoogle, FaGithub, FaEye, FaEyeSlash, FaInfoCircle } from 'react-icons/fa'; import { Box, VStack, Heading, Text, Input, Button, FormControl, FormLabel, InputGroup, InputRightElement, Progress, - useToast, HStack, Icon, Checkbox, Tooltip + useToast, HStack, Icon, Checkbox, Tooltip, useColorModeValue } from "@chakra-ui/react"; import { motion } from "framer-motion"; -import { FaEye, FaEyeSlash, FaInfoCircle } from 'react-icons/fa'; import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'; import { auth } from '../firebase/config'; @@ -24,6 +22,16 @@ const Register = () => { const [agreeTerms, setAgreeTerms] = useState(false); const toast = useToast(); + // Theme-aware colors + const bgColor = useColorModeValue("light.bg", "dark.bg"); + const textColor = useColorModeValue("light.text", "dark.text"); + const inputBgColor = useColorModeValue("gray.100", "gray.700"); + const buttonBgColor = useColorModeValue("green.500", "green.200"); + const buttonTextColor = useColorModeValue("white", "gray.800"); + const buttonHoverBgColor = useColorModeValue("green.600", "green.300"); + const labelColor = useColorModeValue("gray.700", "gray.300"); + const placeholderColor = useColorModeValue("gray.500", "gray.400"); + const handleRegister = async (e) => { e.preventDefault(); if (password !== confirmPassword) { @@ -103,126 +111,127 @@ const Register = () => { }; return ( - - - - Join AestheticAxis - - - Create your account to start your aesthetic journey - -
- - - Name - setName(e.target.value)} - placeholder="Your full name" - bg="gray.700" - color="white" - _placeholder={{ color: "gray.400" }} - /> - - - Email - setEmail(e.target.value)} - placeholder="your@email.com" - bg="gray.700" - color="white" - _placeholder={{ color: "gray.400" }} - /> - - - Password - + + + + + Join AestheticAxis + + + Create your account to start your aesthetic journey + + + + + Name + setName(e.target.value)} + placeholder="Your full name" + bg={inputBgColor} + color={textColor} + _placeholder={{ color: placeholderColor }} + /> + + + Email setEmail(e.target.value)} + placeholder="your@email.com" + bg={inputBgColor} + color={textColor} + _placeholder={{ color: placeholderColor }} /> - - - - - - {password && ( - + + Password + + + + + + + + {password && ( + + )} + + Confirm Password + setConfirmPassword(e.target.value)} + placeholder="Confirm your password" + bg={inputBgColor} + color={textColor} + _placeholder={{ color: placeholderColor }} + /> + + + setAgreeTerms(e.target.checked)} colorScheme="green"> + I agree to the Terms and Conditions + + + + + + + +
+ + Or register with + + + + - - - - Or register with - - - - - - - + + + + ); }; -export default Register; +export default Register; \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index fad6311..9bd90cd 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,9 +6,7 @@ import Navbar from '../components/Navbar'; import FeatureSection from '../components/FeatureSection'; import Footer from '../components/Footer'; import Link from 'next/link'; - -// Use dynamic import for Hero, but allow SSR -const Hero = dynamic(() => import('../components/Hero'), { ssr: true }); +import Hero from '../components/Hero'; // Use dynamic import for IconCloud, with loading fallback const IconCloud = dynamic(() => import('../components/ui/icon-cloud'), { @@ -31,6 +29,8 @@ const IconCloudDemo = () => ( ); export default function Home() { + const bgColor = useColorModeValue("green.700", "green.900"); + return ( <> @@ -45,8 +45,13 @@ export default function Home() { - - + +
+
+
+
+
+ - - + +