Added mobile styling

asusoda · Jul 2, 2024 · af92ea9 · af92ea9
1 parent 3a41f79
commit af92ea9
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 58 deletions.
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -5,11 +5,11 @@ function Hero() {
   return (
     <section className="hero">
       <div className="hero-container">
-        <div className="md:w-1/2 px-6 flex flex-col items-center justify-between">
-          <h1 className="text-4xl md:text-6xl font-bold leading-tight">
+        <div className="md:w-1/2 flex flex-col items-center justify-between">
+          <h1 className="text-4xl md:text-6xl font-bold leading-tight px-6">
             The Software Developers Association
           </h1>
-          <p className="mt-4 text-xl">
+          <p className="mt-4 text-xl px-6">
             The premiere software development club for Arizona State University
             students.
           </p>

diff --git a/src/components/Mobile/OpenedMobileNav.jsx b/src/components/Mobile/OpenedMobileNav.jsx
@@ -19,6 +19,9 @@ export default function OpenedMobileNav({ setIsOpen }) {
         </div>
         <hr className="w-[90%] mx-auto bg-soda-gray"></hr>
         <div className="flex flex-col gap-5 p-5">
+          <a href="#hero" onClick={() => setIsOpen(false)}>
+            <h1 className="text-[20px]">Home</h1>
+          </a>
           <a href="#info" onClick={() => setIsOpen(false)}>
             <h1 className="text-[20px]">Info</h1>
           </a>

diff --git a/src/components/Stats/Statistics.jsx b/src/components/Stats/Statistics.jsx
@@ -2,55 +2,55 @@ import AnimatedNumber from "../logic/AnimatedNumber";
 import { Statistic } from "semantic-ui-react";
 import teamsData from "../../assets/teams.json";
 import RoundedButton from "../Button/RoundedButton";
-import SocialMediaLinks from "../SocialMediaLinks";
 
-export default function Statistics() {
-  const dollarFormatter = new Intl.NumberFormat("US", {
-    style: "currency",
-    currency: "USD",
-  });
-  const teams = teamsData.teams;
-  const advisors = teamsData.advisors;
+const dollarFormatter = new Intl.NumberFormat("US", {
+  style: "currency",
+  currency: "USD",
+});
+const teams = teamsData.teams;
+const advisors = teamsData.advisors;
+
+const statistics = [
+  {
+    key: "pizza",
+    label: "worth of pizza served",
+    value: 22500,
+    steps: 1000,
+    formatter: (x) => dollarFormatter.format(x),
+  },
+  {
+    key: "sponsors",
+    label: "Sponsors",
+    value: 12,
+    steps: 1,
+    formatter: (x) => x,
+  },
+  {
+    key: "teams",
+    label: "Committees",
+    value: Object.keys(teams).length,
+    steps: 1,
+    formatter: (x) => x,
+  },
+  {
+    key: "officers",
+    label: "Officers",
+    value: Object.values(teams).reduce((total, team) => {
+      return total + team.length;
+    }, 0),
+    steps: 1,
+    formatter: (x) => x,
+  },
+  {
+    key: "advisors",
+    label: "Advisors",
+    value: Object.keys(advisors).length,
+    steps: 1,
+    formatter: (x) => x,
+  },
+];
 
-  const statistics = [
-    {
-      key: "pizza",
-      label: "worth of pizza served",
-      value: 22500,
-      steps: 50,
-      formatter: (x) => dollarFormatter.format(x),
-    },
-    {
-      key: "sponsors",
-      label: "Sponsors",
-      value: 12,
-      steps: 1,
-      formatter: (x) => x,
-    },
-    {
-      key: "teams",
-      label: "Committees",
-      value: Object.keys(teams).length,
-      steps: 1,
-      formatter: (x) => x,
-    },
-    {
-      key: "officers",
-      label: "Officers",
-      value: Object.values(teams).reduce((total, team) => {
-        return total + team.length;
-      }, 0),
-      steps: 1,
-      formatter: (x) => x,
-    },
-    {
-      key: "advisors",
-      label: "Advisors",
-      value: Object.keys(advisors).length,
-      steps: 1,
-      formatter: (x) => x,
-    },
-  ];
+export default function Statistics() {
   return (
     <div className="statistics">
       {statistics.map(({ key, label, value, steps, formatter }) => (

diff --git a/src/components/logic/AnimatedNumber.js b/src/components/logic/AnimatedNumber.js
@@ -3,10 +3,10 @@ import { useState, useEffect } from "react";
 const AnimatedNumber = ({ number, steps, formatter }) => {
   const [animatedNumber, setAnimatedNumber] = useState(0);
 
-  // Placeholder model function. Replace with actual logic.
+  // Adjusted model function for faster animation
   const model = (nextNumber, step) => {
-    // Example logic: delay increases as the number gets closer to the target
-    const baseDelay = 50; // Base delay in milliseconds
+    // Increase the base delay for faster animation
+    const baseDelay = 10; // Lower base delay for faster animation
     const delayFactor = Math.abs(number - nextNumber) / step;
     return baseDelay * delayFactor;
   };

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -5,9 +5,9 @@ import Hero from "../components/Hero";
 function Home() {
   return (
     <section className="home">
-      {/* <MemberCards />
-      <InfoCards /> */}
       <Hero />
+      <MemberCards />
+      <InfoCards />
     </section>
   );
 }

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -16,8 +16,8 @@ body {
 
 /* --------- STATS --------- */
 .statistics {
-  @apply bg-soda-white text-soda-black flex  
-  flex-row gap-5 py-6 px-2 my-5 justify-center flex-wrap rounded-full;
+  @apply bg-soda-white max-md:w-screen text-soda-black flex  
+  flex-row gap-5 py-6 max-lg:px-10 px-8 my-3 justify-center flex-wrap sm:rounded-full;
 }
 
 .stat-container {
@@ -34,7 +34,7 @@ body {
 /* --------- HERO --------- */
 
 .hero {
-  @apply my-[20vh] mx-[5vw];
+  @apply my-[20vh] mx-[5vw] max-md:my-[14vh];
 }
 
 .hero-container {