diff --git a/.prettierrc.json b/.prettierrc.json index ed6e9ff..54c8ad1 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,15 +1,15 @@ { - "quoteProps": "as-needed", - "singleQuote": true, - "arrowParens": "avoid", - "tabWidth": 2, - "useTabs": false, - "printWidth": 100, - "proseWrap": "always", - "bracketSpacing": true, - "trailingComma": "es5", - "semi": true, - "jsxSingleQuote": false, - "bracketSameLine": false, - "endOfLine": "auto" - } \ No newline at end of file + "quoteProps": "as-needed", + "singleQuote": true, + "arrowParens": "avoid", + "tabWidth": 2, + "useTabs": false, + "printWidth": 100, + "proseWrap": "always", + "bracketSpacing": true, + "trailingComma": "es5", + "semi": true, + "jsxSingleQuote": false, + "bracketSameLine": false, + "endOfLine": "auto" +} diff --git a/public/assets/Room3Crack.svg b/public/assets/Room3Crack.svg new file mode 100644 index 0000000..66d07f5 --- /dev/null +++ b/public/assets/Room3Crack.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/Room3Decor.svg b/public/assets/Room3Decor.svg new file mode 100644 index 0000000..7d80d24 --- /dev/null +++ b/public/assets/Room3Decor.svg @@ -0,0 +1,794 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/Shelf.svg b/public/assets/Shelf.svg deleted file mode 100644 index 06a7a88..0000000 --- a/public/assets/Shelf.svg +++ /dev/null @@ -1,421 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/cauldron-steaming.svg b/public/assets/cauldron-steaming.svg deleted file mode 100644 index f6ece30..0000000 --- a/public/assets/cauldron-steaming.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/material-symbols_arrow-right-alt.svg b/public/assets/material-symbols_arrow-right-alt.svg new file mode 100644 index 0000000..2fecd7e --- /dev/null +++ b/public/assets/material-symbols_arrow-right-alt.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/questions.json b/public/assets/questions.json index 6cc3ab0..70d32ab 100644 --- a/public/assets/questions.json +++ b/public/assets/questions.json @@ -1 +1,207 @@ -[{"question": "What would your friends say is your best quality?", "options": [{"text": "My energy and enthusiasm", "scores": {"S": 50, "R": 50}}, {"text": "My adaptability and good nature", "scores": {"T": 100}}, {"text": "My thoughtfulness and excellent planning abilities", "scores": {"G": 100}}, {"text": "My creativity and boldness", "scores": {"S": 50, "R": 50}}]}, {"question": "If you could choose a familiar, what would it be?", "options": [{"text": "Dog or cat \u2014 practical and cuddly", "scores": {"G": 70, "R": 30}}, {"text": "Dragon \u2014 big and chaotic!", "scores": {"S": 70, "R": 30}}, {"text": "Falcon or raven \u2014 sharp and focused", "scores": {"G": 70, "S": 30}}, {"text": "Capybara \u2014 social and chill", "scores": {"T": 70, "R": 30}}]}, {"question": "Pick a treat!", "options": [{"text": "Panna Cotta or cr\u00e8me br\u00fbl\u00e9e", "scores": {"T": 100}}, {"text": "Matcha crepe cake", "scores": {"G": 100}}, {"text": "Funfetti cupcake", "scores": {"R": 100}}, {"text": "Dark chocolate lava cake", "scores": {"S": 100}}]}, {"question": "What would you wish for?", "options": [{"text": "World peace", "scores": {"R": 40, "T": 60}}, {"text": "More time", "scores": {"G": 70, "R": 30}}, {"text": "To excel at something", "scores": {"S": 50, "G": 50}}, {"text": "Superpowers", "scores": {"R": 70, "G": 30}}]}, {"question": "Pick a magical artifact:", "options": [{"text": "A gold sword that grants me the aura of a king", "scores": {"S": 100}}, {"text": "A pair of silver sneakers that let me dash across the sky", "scores": {"R": 100}}, {"text": "An onyx pen that can write down my thoughts as fast as they flow", "scores": {"G": 100}}, {"text": "A pair of white glasses that let me see the emotions of those around me", "scores": {"T": 100}}]}, {"question": "What kind of field would you like to pursue?", "options": [{"text": "Some kind of management where I can let my leadership skills shine", "scores": {"S": 100}}, {"text": "A role where I can use my adaptability to support my entire team", "scores": {"T": 100}}, {"text": "A field that allows me to try all my crazy ideas", "scores": {"R": 100}}, {"text": "Something technical where I can crack puzzles and find the answers", "scores": {"G": 100}}]}, {"question": "Where do you spend your free time?", "options": [{"text": "I love being around my friends the most, no matter where that brings me", "scores": {"T": 50, "R": 30, "S": 20}}, {"text": "I want to be somewhere new and exciting, like a festival, museum, or makerspace", "scores": {"R": 60, "G": 40}}, {"text": "A cozy nook or quiet corner", "scores": {"T": 30, "G": 70}}, {"text": "Wherever there\u2019s a challenge, like the gym or an amusement park", "scores": {"S": 60, "G": 20, "R": 20}}]}, {"question": "Pick a color:", "options": [{"text": "Crimson red", "scores": {"G": 100}}, {"text": "Dandelion yellow", "scores": {"T": 50, "R": 50}}, {"text": "Sage green", "scores": {"G": 40, "T": 60}}, {"text": "Sky blue", "scores": {"T": 60, "G": 40}}, {"text": "Bright purple", "scores": {"R": 100}}]}, {"question": "What motivates you to learn?", "options": [{"text": "I want to understand and connect with the people around me", "scores": {"T": 70, "R": 30}}, {"text": "I want to solve problems and figure out complex ideas", "scores": {"G": 70, "S": 30}}, {"text": "I want to bounce ideas off others and try new things to satisfy my curiosity", "scores": {"R": 70, "T": 30}}, {"text": "I want to lead and create with confidence \u2014 knowledge is power", "scores": {"S": 70, "G": 30}}]}, {"question": "What motivates you to fight?", "options": [{"text": "To protect and support the people I care about", "scores": {"T": 70, "S": 30}}, {"text": "When something\u2019s inefficient or just wrong", "scores": {"G": 70, "T": 30}}, {"text": "To inspire, energize, and shake things up", "scores": {"R": 70, "S": 30}}, {"text": "To win", "scores": {"S": 70, "G": 30}}]}, {"question": "What would you say is your biggest personality flaw?", "options": [{"text": "I get so caught up in helping others that I forget to take care of myself", "scores": {"T": 100}}, {"text": "I can start overthinking things", "scores": {"G": 100}}, {"text": "I bounce between too many ideas or commitments and struggle to finish things", "scores": {"R": 100}}, {"text": "I can come off as impatient or too intense when I really care about something", "scores": {"S": 100}}]}, {"question": "What\u2019s your idea of a perfect day?", "options": [{"text": "A slow morning, meaningful conversations, and a long walk by the beach", "scores": {"T": 100}}, {"text": "Working late into the night on my favorite project", "scores": {"G": 80, "R": 20}}, {"text": "Waking up somewhere new and hanging out with my friends", "scores": {"R": 100}}, {"text": "Crushing a big goal I\u2019ve been working towards for weeks and treating my friends to dinner after", "scores": {"S": 80, "T": 20}}]}, {"question": "What\u2019s your ideal room decor?", "options": [{"text": "Soft lights, cozy blankets, my favorite vinyls and books", "scores": {"T": 100}}, {"text": "Clean lines, shelves full of books and gadgets, and a high-tech setup", "scores": {"G": 100}}, {"text": "Colorful art, vivid and bright lighting, and a box of snacks by my desk", "scores": {"R": 100}}, {"text": "Dark furniture, a huge whiteboard, and workout gear in the corner", "scores": {"S": 100}}]}, {"question": "If you were to end up on a deserted island, what would you take?", "options": [{"text": "A survival handbook", "scores": {"G": 100}}, {"text": "A fire starter", "scores": {"S": 100}}, {"text": "A tent", "scores": {"T": 100}}, {"text": "A huge box of snacks", "scores": {"R": 100}}]}, {"question": "Choose a Stuart art exhibit!", "options": [{"text": "The Silent, Whispering and Talking Trees", "scores": {"G": 100}}, {"text": "What Hath God Wrought", "scores": {"S": 100}}, {"text": "The Bear", "scores": {"R": 100}}, {"text": "Fallen Star", "scores": {"T": 100}}]}] \ No newline at end of file +[ + { + "question": "What would your friends say is your best quality?", + "options": [ + { "text": "My energy and enthusiasm", "scores": { "S": 50, "R": 50 } }, + { "text": "My adaptability and good nature", "scores": { "T": 100 } }, + { "text": "My thoughtfulness and excellent planning abilities", "scores": { "G": 100 } }, + { "text": "My creativity and boldness", "scores": { "S": 50, "R": 50 } } + ] + }, + { + "question": "If you could choose a familiar, what would it be?", + "options": [ + { "text": "Dog or cat \u2014 practical and cuddly", "scores": { "G": 70, "R": 30 } }, + { "text": "Dragon \u2014 big and chaotic!", "scores": { "S": 70, "R": 30 } }, + { "text": "Falcon or raven \u2014 sharp and focused", "scores": { "G": 70, "S": 30 } }, + { "text": "Capybara \u2014 social and chill", "scores": { "T": 70, "R": 30 } } + ] + }, + { + "question": "Pick a treat!", + "options": [ + { "text": "Panna Cotta or cr\u00e8me br\u00fbl\u00e9e", "scores": { "T": 100 } }, + { "text": "Matcha crepe cake", "scores": { "G": 100 } }, + { "text": "Funfetti cupcake", "scores": { "R": 100 } }, + { "text": "Dark chocolate lava cake", "scores": { "S": 100 } } + ] + }, + { + "question": "What would you wish for?", + "options": [ + { "text": "World peace", "scores": { "R": 40, "T": 60 } }, + { "text": "More time", "scores": { "G": 70, "R": 30 } }, + { "text": "To excel at something", "scores": { "S": 50, "G": 50 } }, + { "text": "Superpowers", "scores": { "R": 70, "G": 30 } } + ] + }, + { + "question": "Pick a magical artifact:", + "options": [ + { "text": "A gold sword that grants me the aura of a king", "scores": { "S": 100 } }, + { + "text": "A pair of silver sneakers that let me dash across the sky", + "scores": { "R": 100 } + }, + { + "text": "An onyx pen that can write down my thoughts as fast as they flow", + "scores": { "G": 100 } + }, + { + "text": "A pair of white glasses that let me see the emotions of those around me", + "scores": { "T": 100 } + } + ] + }, + { + "question": "What kind of field would you like to pursue?", + "options": [ + { + "text": "Some kind of management where I can let my leadership skills shine", + "scores": { "S": 100 } + }, + { + "text": "A role where I can use my adaptability to support my entire team", + "scores": { "T": 100 } + }, + { "text": "A field that allows me to try all my crazy ideas", "scores": { "R": 100 } }, + { + "text": "Something technical where I can crack puzzles and find the answers", + "scores": { "G": 100 } + } + ] + }, + { + "question": "Where do you spend your free time?", + "options": [ + { + "text": "I love being around my friends the most, no matter where that brings me", + "scores": { "T": 50, "R": 30, "S": 20 } + }, + { + "text": "I want to be somewhere new and exciting, like a festival, museum, or makerspace", + "scores": { "R": 60, "G": 40 } + }, + { "text": "A cozy nook or quiet corner", "scores": { "T": 30, "G": 70 } }, + { + "text": "Wherever there\u2019s a challenge, like the gym or an amusement park", + "scores": { "S": 60, "G": 20, "R": 20 } + } + ] + }, + { + "question": "Pick a color:", + "options": [ + { "text": "Crimson red", "scores": { "G": 100 } }, + { "text": "Dandelion yellow", "scores": { "T": 50, "R": 50 } }, + { "text": "Sage green", "scores": { "G": 40, "T": 60 } }, + { "text": "Sky blue", "scores": { "T": 60, "G": 40 } }, + { "text": "Bright purple", "scores": { "R": 100 } } + ] + }, + { + "question": "What motivates you to learn?", + "options": [ + { + "text": "I want to understand and connect with the people around me", + "scores": { "T": 70, "R": 30 } + }, + { + "text": "I want to solve problems and figure out complex ideas", + "scores": { "G": 70, "S": 30 } + }, + { + "text": "I want to bounce ideas off others and try new things to satisfy my curiosity", + "scores": { "R": 70, "T": 30 } + }, + { + "text": "I want to lead and create with confidence \u2014 knowledge is power", + "scores": { "S": 70, "G": 30 } + } + ] + }, + { + "question": "What motivates you to fight?", + "options": [ + { "text": "To protect and support the people I care about", "scores": { "T": 70, "S": 30 } }, + { "text": "When something\u2019s inefficient or just wrong", "scores": { "G": 70, "T": 30 } }, + { "text": "To inspire, energize, and shake things up", "scores": { "R": 70, "S": 30 } }, + { "text": "To win", "scores": { "S": 70, "G": 30 } } + ] + }, + { + "question": "What would you say is your biggest personality flaw?", + "options": [ + { + "text": "I get so caught up in helping others that I forget to take care of myself", + "scores": { "T": 100 } + }, + { "text": "I can start overthinking things", "scores": { "G": 100 } }, + { + "text": "I bounce between too many ideas or commitments and struggle to finish things", + "scores": { "R": 100 } + }, + { + "text": "I can come off as impatient or too intense when I really care about something", + "scores": { "S": 100 } + } + ] + }, + { + "question": "What\u2019s your idea of a perfect day?", + "options": [ + { + "text": "A slow morning, meaningful conversations, and a long walk by the beach", + "scores": { "T": 100 } + }, + { + "text": "Working late into the night on my favorite project", + "scores": { "G": 80, "R": 20 } + }, + { "text": "Waking up somewhere new and hanging out with my friends", "scores": { "R": 100 } }, + { + "text": "Crushing a big goal I\u2019ve been working towards for weeks and treating my friends to dinner after", + "scores": { "S": 80, "T": 20 } + } + ] + }, + { + "question": "What\u2019s your ideal room decor?", + "options": [ + { + "text": "Soft lights, cozy blankets, my favorite vinyls and books", + "scores": { "T": 100 } + }, + { + "text": "Clean lines, shelves full of books and gadgets, and a high-tech setup", + "scores": { "G": 100 } + }, + { + "text": "Colorful art, vivid and bright lighting, and a box of snacks by my desk", + "scores": { "R": 100 } + }, + { + "text": "Dark furniture, a huge whiteboard, and workout gear in the corner", + "scores": { "S": 100 } + } + ] + }, + { + "question": "If you were to end up on a deserted island, what would you take?", + "options": [ + { "text": "A survival handbook", "scores": { "G": 100 } }, + { "text": "A fire starter", "scores": { "S": 100 } }, + { "text": "A tent", "scores": { "T": 100 } }, + { "text": "A huge box of snacks", "scores": { "R": 100 } } + ] + }, + { + "question": "Choose a Stuart art exhibit!", + "options": [ + { "text": "The Silent, Whispering and Talking Trees", "scores": { "G": 100 } }, + { "text": "What Hath God Wrought", "scores": { "S": 100 } }, + { "text": "The Bear", "scores": { "R": 100 } }, + { "text": "Fallen Star", "scores": { "T": 100 } } + ] + } +] diff --git a/public/assets/results.json b/public/assets/results.json index 3a3fb6d..a2775ec 100644 --- a/public/assets/results.json +++ b/public/assets/results.json @@ -1 +1,22 @@ -{"G":{"name":"Geisel","nature":"Analytical, Independent, Precise","description":"The Geisel House is full of thoughtful observers and precise planners. We’re analytical, introspective visionaries — we want to know how things work and why they matter. Whether it’s a system, a theory, or a puzzle, we approach it with sharp logic and relentless curiosity. We pride ourselves in our high standards for competence, strategic thinking that turns ideas into actions, and unmatched focus. Though we enjoy thinking deeply by ourselves, we love working with fellow scholars even more — why have a breakthrough in silence, when we could do it in half the time with another equally brilliant mind? You can find us in the depths of Geisel Library with our headphones in and notebooks out, leaning over to share our thoughts with friends when we have an insight."},"R":{"name":"Raccoon","nature":"Mischievous, Ingenious, Joyful","description":"Hi there, fellow bandit! Are you ready to have some fun? We Raccoons are the sparks of joy, teeming with boundless creativity and energy, with a serious love for new experiences. We’re always on the lookout for new friends, wild projects, and the next spontaneous adventure. We often bring the energy to the room — and the ideas, too. We thrive the most when we’re surrounded by possibility, people, and chaos. We pride ourselves on our optimism, creative sparks, and social instincts — you won’t find anyone as capable of bringing together a team as us! You can find us in the middle of Price Center or at MOMs, juggling three projects, brainstorming a dozen ideas, and learning hands-on all before breakfast."},"S":{"name":"Sun God","nature":"Expressive, Energetic, Bold","description":"Sun Gods are natural-born leaders, fueled by passion, courage, and determination. We’re here to make things happen, whether that’s starting a new tradition or leading a team to the finish line. We pride ourselves on our drive and clarity — we don’t just have a vision, we pursue it until perfection. Beyond bringing out the best in ourselves, we look for the best in others, too. We know how to appreciate those who can match our enthusiasm and exhibit spectacular performance. You can find us in DIB, CSE, SME, or by Sun God, looking to start something new!"},"T":{"name":"Triton","nature":"Calm, Adaptable, Empathic","description":"Here at the Triton House, we pride ourselves on our ability to listen deeply, emphasize naturally, and remain grounded even in the most dire of situations. We know there’s no need to rush to the finish line, because it’s only through careful examination that we can achieve thorough understanding and excellent work. Don’t mistake our conscientious support for passiveness, however — once we finish analyzing a task, we can use all of our abilities and resources to quickly and successfully complete it. No matter what, where, or who we’re working with, we’ll be the first to find our footing. You can find us in Birch Aquarium, at a quiet corner on the beach, or sitting on the steps of Price Center next to King Triton, thinking about our next project!"}} \ No newline at end of file +{ + "G": { + "name": "Geisel", + "nature": "Analytical, Independent, Precise", + "description": "The Geisel House is full of thoughtful observers and precise planners. We’re analytical, introspective visionaries — we want to know how things work and why they matter. Whether it’s a system, a theory, or a puzzle, we approach it with sharp logic and relentless curiosity. We pride ourselves in our high standards for competence, strategic thinking that turns ideas into actions, and unmatched focus. Though we enjoy thinking deeply by ourselves, we love working with fellow scholars even more — why have a breakthrough in silence, when we could do it in half the time with another equally brilliant mind? You can find us in the depths of Geisel Library with our headphones in and notebooks out, leaning over to share our thoughts with friends when we have an insight." + }, + "R": { + "name": "Raccoon", + "nature": "Mischievous, Ingenious, Joyful", + "description": "Hi there, fellow bandit! Are you ready to have some fun? We Raccoons are the sparks of joy, teeming with boundless creativity and energy, with a serious love for new experiences. We’re always on the lookout for new friends, wild projects, and the next spontaneous adventure. We often bring the energy to the room — and the ideas, too. We thrive the most when we’re surrounded by possibility, people, and chaos. We pride ourselves on our optimism, creative sparks, and social instincts — you won’t find anyone as capable of bringing together a team as us! You can find us in the middle of Price Center or at MOMs, juggling three projects, brainstorming a dozen ideas, and learning hands-on all before breakfast." + }, + "S": { + "name": "Sun God", + "nature": "Expressive, Energetic, Bold", + "description": "Sun Gods are natural-born leaders, fueled by passion, courage, and determination. We’re here to make things happen, whether that’s starting a new tradition or leading a team to the finish line. We pride ourselves on our drive and clarity — we don’t just have a vision, we pursue it until perfection. Beyond bringing out the best in ourselves, we look for the best in others, too. We know how to appreciate those who can match our enthusiasm and exhibit spectacular performance. You can find us in DIB, CSE, SME, or by Sun God, looking to start something new!" + }, + "T": { + "name": "Triton", + "nature": "Calm, Adaptable, Empathic", + "description": "Here at the Triton House, we pride ourselves on our ability to listen deeply, emphasize naturally, and remain grounded even in the most dire of situations. We know there’s no need to rush to the finish line, because it’s only through careful examination that we can achieve thorough understanding and excellent work. Don’t mistake our conscientious support for passiveness, however — once we finish analyzing a task, we can use all of our abilities and resources to quickly and successfully complete it. No matter what, where, or who we’re working with, we’ll be the first to find our footing. You can find us in Birch Aquarium, at a quiet corner on the beach, or sitting on the steps of Price Center next to King Triton, thinking about our next project!" + } +} diff --git a/public/assets/room 3 bkgd.svg b/public/assets/room 3 bkgd.svg deleted file mode 100644 index 7b02cab..0000000 --- a/public/assets/room 3 bkgd.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/components/FAQAccordion/index.tsx b/src/components/FAQAccordion/index.tsx index fc7f6df..82b6d1e 100644 --- a/src/components/FAQAccordion/index.tsx +++ b/src/components/FAQAccordion/index.tsx @@ -39,7 +39,7 @@ export default function FAQ({ data }: FAQAccordionProps) { expandIcon={} className={styles.accordionSummary} > - + {questionObject.question} diff --git a/src/components/FAQAccordion/style.module.scss b/src/components/FAQAccordion/style.module.scss index 5949aea..0ee982a 100644 --- a/src/components/FAQAccordion/style.module.scss +++ b/src/components/FAQAccordion/style.module.scss @@ -72,7 +72,7 @@ color: vars.$white; @media screen and (max-width: vars.$breakpoint-md) { - font-size: 0.75rem !important; + padding: 1rem 0; } } diff --git a/src/components/LandingText/style.module.scss b/src/components/LandingText/style.module.scss index de6241b..cdfea43 100644 --- a/src/components/LandingText/style.module.scss +++ b/src/components/LandingText/style.module.scss @@ -15,17 +15,26 @@ } .subheadingMobile { display: none; - font-size: 1rem !important; - line-height: 1.5rem !important; + font-size: 1.5rem !important; flex-direction: column; } - @media screen and (max-width: vars.$breakpoint-md) { + + @media screen and (max-width: vars.$breakpoint-xl) { .subheadingDesktop { display: none; + font-size: 1rem !important; } .subheadingMobile { display: flex; + line-height: 2.25rem !important; + } + } + + @media screen and (max-width: vars.$breakpoint-md) { + .subheadingMobile { + font-size: 1rem !important; + line-height: 1.5rem !important; } } @@ -41,6 +50,11 @@ background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; + + @media screen and (max-width: vars.$breakpoint-xl) { + font-size: 3rem !important; + } + @media screen and (max-width: vars.$breakpoint-md) { font-size: 1.75rem !important; } @@ -67,11 +81,11 @@ flex-direction: column; gap: 1rem; - .subtitle { - @media screen and (max-width: vars.$breakpoint-md) { - font-size: 1rem !important; - } - } + // .subtitle { + // @media screen and (max-width: vars.$breakpoint-md) { + // font-size: 1rem !important; + // } + // } .buttonContainer { display: flex; diff --git a/src/components/SortingQuizSection/index.tsx b/src/components/SortingQuizSection/index.tsx index 08ac771..210d405 100644 --- a/src/components/SortingQuizSection/index.tsx +++ b/src/components/SortingQuizSection/index.tsx @@ -1,6 +1,8 @@ import Typography from '@/components/Typography'; import styles from './style.module.scss'; import Link from 'next/link'; +import Image from 'next/image'; +// import Arrow from '../../../public/assets/material-symbols_arrow-right-alt.svg'; const SortingQuizSection: React.FC = () => { return (
@@ -16,6 +18,7 @@ const SortingQuizSection: React.FC = () => {
Take the Sorting Quiz + {/* */}
diff --git a/src/components/SortingQuizSection/style.module.scss b/src/components/SortingQuizSection/style.module.scss index 2540c87..4ff7626 100644 --- a/src/components/SortingQuizSection/style.module.scss +++ b/src/components/SortingQuizSection/style.module.scss @@ -7,13 +7,17 @@ align-items: flex-end; gap: 2.5rem; position: absolute; - bottom: 6.25rem; - right: 3rem; + bottom: 7.5%; + right: 10%; z-index: 1000; - @media screen and (max-width: vars.$breakpoint-lg) { - bottom: 10%; - right: 10%; + @media screen and (max-width: vars.$breakpoint-xl) { + bottom: 2.5%; + gap: 0.5rem; + } + + @media screen and (max-width: vars.$breakpoint-md) { + bottom: 5%; gap: 0.5rem; } } @@ -29,6 +33,9 @@ line-height: 2.25rem; letter-spacing: -0.01563rem; + @media screen and (max-width: vars.$breakpoint-xl) { + font-size: 2rem !important; + } @media screen and (max-width: vars.$breakpoint-lg) { font-size: 1.5rem !important; } @@ -44,14 +51,30 @@ border-radius: 0.95rem; background: var(--White, #fff); color: var(--black, #000); + line-height: 1; - @media screen and (max-width: vars.$breakpoint-lg) { + @media screen and (max-width: vars.$breakpoint-xl) { font-size: 0.75rem !important; padding: 0.5rem 1rem; } - @media screen and (max-width: vars.$breakpoint-md) { + @media screen and (max-width: vars.$breakpoint-sm) { font-size: 0.5rem !important; padding: 0.5rem 1rem; } + + // TODO: add back later? + // .arrow { + // width: 31px; + // height: 31px; + // vertical-align: middle; + // margin-left: 10px; + + // @media screen and (max-width: vars.$breakpoint-md) { + // width: 15.5px; + // height: 15.5px; + // margin-left: 5px; + // display: inline-block; + // } + // } } diff --git a/src/sections/Hero/index.tsx b/src/sections/Hero/index.tsx index e5b90b9..95b718d 100644 --- a/src/sections/Hero/index.tsx +++ b/src/sections/Hero/index.tsx @@ -5,9 +5,10 @@ const Hero = () => { return (
-
+
+ +
-
); diff --git a/src/sections/Hero/style.module.scss b/src/sections/Hero/style.module.scss index 9845f27..b2a4875 100644 --- a/src/sections/Hero/style.module.scss +++ b/src/sections/Hero/style.module.scss @@ -59,16 +59,16 @@ .landingText { position: absolute; - top: 40%; + top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 80%; + width: 100%; height: auto; text-align: center; z-index: 500; + white-space: nowrap; @media screen and (max-width: vars.$breakpoint-lg) { - top: 70%; - width: 100%; + top: 65%; } } diff --git a/src/sections/Room3/index.tsx b/src/sections/Room3/index.tsx index dbec9ba..437bfc1 100644 --- a/src/sections/Room3/index.tsx +++ b/src/sections/Room3/index.tsx @@ -1,17 +1,18 @@ import { QUESTIONS } from './questions'; import styles from './style.module.scss'; import FAQAccordion from '@/components/FAQAccordion'; -import Room3Background from '/public/assets/room 3 bkgd.svg'; -import Shelf from '/public/assets/Shelf.svg'; -import Cauldron from '/public/assets/cauldron-steaming.svg'; +import Room3Decor from '/public/assets/Room3Decor.svg'; +import Room3Crack from '/public/assets/Room3Crack.svg'; import Typography from '@/components/Typography'; const Room3: React.FC = () => { return (
-
- - - +
+ +
+ +
+
Frequently asked questions diff --git a/src/sections/Room3/style.module.scss b/src/sections/Room3/style.module.scss index d5b87cb..4de1956 100644 --- a/src/sections/Room3/style.module.scss +++ b/src/sections/Room3/style.module.scss @@ -19,64 +19,79 @@ display: flex; justify-content: center; align-items: center; + @media screen and (max-width: vars.$breakpoint-lg) { + height: 62.5rem; + } } -.trapezoidClipPath { +.trapezoidOuter { + top: 0%; width: 88%; height: 100%; - background-color: #22272d; + background: #22272d; + position: absolute; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%); - position: relative; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; @media screen and (max-width: vars.$breakpoint-md) { width: 100%; } } -.room3Background { +.trapezoidInner { position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) scaleX(1.1) scaleY(0.95); - width: 100%; - height: 100%; + inset: 20px; + background: radial-gradient(circle 700px at 85% 90%, #5c677bbb, #40454b); + clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%); + z-index: 1; + + @media screen and (max-width: vars.$breakpoint-xl) { + background: radial-gradient(circle 600px at 90% 90%, #5c677bbb, #40454b); + } @media screen and (max-width: vars.$breakpoint-lg) { - transform: translate(-50%, -50%) scaleX(0.9) scaleY(1.5); + background: radial-gradient(circle 500px at 90% 90%, #5c677bbb, #40454b); } @media screen and (max-width: vars.$breakpoint-md) { - transform: translate(-50%, -50%) scaleX(0.9) scaleY(2.7); + background: radial-gradient(circle 400px at 85% 90%, #5c677bbb, #40454b); } } -.shelf { +.gradient { + inset: 20px; + clip-path: polygon(10% 0, 90% 0, 90% 100%, 10% 100%); position: absolute; - bottom: 1rem; - right: 10%; - z-index: 2; - width: 30%; - @media screen and (max-width: vars.$breakpoint-md) { - width: 50%; - max-width: 300px; - } + background: #696f78; + z-index: 0; +} + +.crack { + top: 0%; + left: 70%; + width: 65px; + height: 298px; + position: absolute; } -.cauldron { +.decor { position: absolute; - bottom: 1rem; - right: 30%; + bottom: 0; + left: 65%; + transform: translateX(-50%); z-index: 2; - width: 25%; + width: 50%; + + @media screen and (max-width: vars.$breakpoint-lg) { + width: 60%; + left: 60%; + } @media screen and (max-width: vars.$breakpoint-md) { - width: 50%; - max-width: 300px; + bottom: 2%; + left: 50%; + width: 88%; + transform: translateX(-55%); } } @@ -87,10 +102,12 @@ align-items: flex-start; position: absolute; top: 5rem; + left: 15%; gap: 1rem; width: 65%; @media screen and (max-width: vars.$breakpoint-md) { - top: 1rem; + top: 2rem; + left: 20%; } } diff --git a/src/styles/vars.scss b/src/styles/vars.scss index 8d1ad3e..f3e0626 100644 --- a/src/styles/vars.scss +++ b/src/styles/vars.scss @@ -13,9 +13,10 @@ $white: #ffffff; $neutral: #a1acbd; // Media Query Standard Breakpoints -$breakpoint-sm: 425px; // +$breakpoint-sm: 425px; $breakpoint-md: 870px; // Use this breakpoint for most mobile-first CSS designs $breakpoint-lg: 1024px; +$breakpoint-xl: 1280px; $breakpoint-navbar: 1000px; $background-border: linear-gradient( diff --git a/tsconfig.json b/tsconfig.json index 5d5d7e9..62c557b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -23,19 +19,10 @@ } ], "paths": { - "@/*": [ - "./src/*" - ] + "@/*": ["./src/*"] }, "forceConsistentCasingInFileNames": true }, - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx", - ".next/types/**/*.ts" - ], - "exclude": [ - "node_modules" - ] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] }