standardize styling; remove unneeded content; add more text in places

rshewitt · Jan 15, 2025 · e5ac971 · e5ac971
1 parent c1b52f2
commit e5ac971
Show file tree

Hide file tree

Showing 15 changed files with 235 additions and 247 deletions.
diff --git a/src/app/components/Agenda.tsx b/src/app/components/Agenda.tsx
@@ -11,7 +11,7 @@ const AgendaItem = ({ title, date, idx }: AgendaProps) => {
   return (
     <div
       key={idx}
-      className="grid grid-cols-2 gap-4 text-center text-2xl px-4 py-4 md:py-16 md:px-0"
+      className="grid grid-cols-2 gap-4 text-center text-2xl px-4 py-4 md:px-0"
     >
       <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold">
         {title}
@@ -42,7 +42,7 @@ const Agenda = () => {
       <h3 className="font-normalBold font-black mb-6 text-center text-gray-700">
         March 8, 2025
       </h3>
-      <div className="px-12 flex max-w-md mx-auto mb-10">
+      <div className="px-12 flex max-w-md mx-auto">
         <a
           href={CALENDAR_URL}
           target={"_blank"}
@@ -53,8 +53,8 @@ const Agenda = () => {
         </a>
       </div>
 
-      <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-10 pt-10 text-gray-700 px-2">
-        <h4 className="mb-1">Festivities</h4>
+      <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center pt-10 text-gray-700 px-2">
+        <h4>Festivities</h4>
       </div>
 
       {agendaItems.map((item, idx) => (

diff --git a/src/app/components/BridalParty.tsx b/src/app/components/BridalParty.tsx
@@ -51,11 +51,11 @@ const peopleMinorGroom = [
 
 const BridalParty = () => {
   return (
-    <div id="bridal_party_div" className="pt-10 pb-4">
-      <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center pt-10 text-gray-700 px-2">
-        <h4 className="mb-1">Bridal Party</h4>
+    <div id="bridal_party_div">
+      <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center text-gray-700 px-2">
+        <h4>Bridal Party</h4>
       </div>
-      <div className="w-full flex flex-wrap justify-center pb-10">
+      <div className="w-full flex flex-wrap justify-center">
         {peopleMain.map((person, idx) => (
           <Profile
             pic={person.pic}
@@ -68,13 +68,13 @@ const BridalParty = () => {
         ))}
       </div>
       <div className="max-w-3xl mx-auto text-center">
-        <div className="grid grid-cols-1 gap-4 text-center text-2xl px-4 py-8 md:px-0 md:text-3xl font-black">
+        <div className="grid grid-cols-1 gap-4 text-center text-2xl px-4 md:px-0 md:text-3xl font-black">
           {peopleMinorBride.map((person, idx) => (
             <ProfileMinor name={person.name} role={person.role} key={idx} />
           ))}
         </div>
         <div className="text-xl text-black">~ ~</div>
-        <div className="grid grid-cols-1 gap-4 text-center text-2xl px-4 py-8 md:py-10 md:px-0 md:text-3xl font-black">
+        <div className="grid grid-cols-1 gap-4 text-center text-2xl px-4 md:px-0 md:text-3xl font-black">
           {peopleMinorGroom.map((person, idx) => (
             <ProfileMinor name={person.name} role={person.role} key={idx} />
           ))}

diff --git a/src/app/components/BrideAndGroom.tsx b/src/app/components/BrideAndGroom.tsx
@@ -3,39 +3,39 @@ import groom from "../images/groom.jpg";
 import Profile from "./Utils/Profile";
 
 const people = [
-    {
-        pic: bride,
-        altVal: "bride",
-        name: "Brittany Morgan McMahon",
-        role: "Bride",
-        desc: "Born on August 25th, 1992 in San Diego, CA to James Glenn McMahon and Michelle Ford Toleos.",
-    },
-    {
-        pic: groom,
-        altVal: "groom",
-        name: "Reid Samuel Hewitt",
-        role: "Groom",
-        desc: "Born on June 10th 1992 in Sacramento, CA to Robbin Van Herr Waarden Hewitt and Ann Marie Hewitt.",
-    },
+  {
+    pic: bride,
+    altVal: "bride",
+    name: "Brittany Morgan McMahon",
+    role: "Bride",
+    desc: "Born on August 25th, 1992 in San Diego, CA to James Glenn McMahon and Michelle Ford Toleos.",
+  },
+  {
+    pic: groom,
+    altVal: "groom",
+    name: "Reid Samuel Hewitt",
+    role: "Groom",
+    desc: "Born on June 10th 1992 in Sacramento, CA to Robbin Van Herr Waarden Hewitt and Ann Marie Hewitt.",
+  },
 ];
 
 const BrideAndGroom = () => {
-    return (
-        <div id="bride_and_groom_div" className="pt-10 pb-4">
-            <div className="w-full flex flex-wrap pb-20">
-                {people.map((person, idx) => (
-                    <Profile
-                        pic={person.pic}
-                        altVal={person.altVal}
-                        name={person.name}
-                        role={person.role}
-                        desc={person.desc}
-                        key={idx}
-                    />
-                ))}
-            </div>
-        </div>
-    );
+  return (
+    <div id="bride_and_groom_div">
+      <div className="w-full flex flex-wrap">
+        {people.map((person, idx) => (
+          <Profile
+            pic={person.pic}
+            altVal={person.altVal}
+            name={person.name}
+            role={person.role}
+            desc={person.desc}
+            key={idx}
+          />
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export default BrideAndGroom;
diff --git a/src/app/components/Countdown.tsx b/src/app/components/Countdown.tsx
@@ -4,79 +4,76 @@ const EVENT_DATE = "March 8, 2025 15:00:00";
 const COUNTDOWN_DATE = new Date(EVENT_DATE).getTime();
 
 interface COUNTDOWNTYPE {
-    days: number;
-    hours: number;
-    minutes: number;
-    seconds: number;
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
 }
 
 const countdownBase: COUNTDOWNTYPE = {
-    days: 0,
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
+  days: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
 };
 
 const Countdown = memo(() => {
-    const [countdown, setCountdown] = useState<COUNTDOWNTYPE>(countdownBase);
-
-    useEffect(() => {
-        const interval = setInterval(() => {
-            const now = new Date().getTime();
-
-            const delta = COUNTDOWN_DATE - now;
-
-            const days = Math.floor(delta / (1000 * 60 * 60 * 24));
-            const hours = Math.floor(
-                (delta % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
-            );
-            const minutes = Math.floor(
-                (delta % (1000 * 60 * 60)) / (1000 * 60)
-            );
-            const seconds = Math.floor((delta % (1000 * 60)) / 1000);
-
-            setCountdown({ days, hours, minutes, seconds });
-
-            if (delta < 0) {
-                clearInterval(interval);
-                setCountdown(countdownBase);
-            }
-        }, 1000);
-    }, []);
-
-    return (
-        <div className="w-full px-1 md:px-4">
-            <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-10 pt-10 text-gray-700 px-2">
-                <h4 className="mb-1">See you there in...</h4>
-            </div>
-
-            <div className="flex justify-center pb-20">
-                <NumberCard number={countdown.days} label="Days" />
-                <NumberCard number={countdown.hours} label="Hours" />
-                <NumberCard number={countdown.minutes} label="Minutes" />
-                <NumberCard number={countdown.seconds} label="Seconds" />
-            </div>
-        </div>
-    );
+  const [countdown, setCountdown] = useState<COUNTDOWNTYPE>(countdownBase);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = new Date().getTime();
+
+      const delta = COUNTDOWN_DATE - now;
+
+      const days = Math.floor(delta / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(
+        (delta % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      const minutes = Math.floor((delta % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((delta % (1000 * 60)) / 1000);
+
+      setCountdown({ days, hours, minutes, seconds });
+
+      if (delta < 0) {
+        clearInterval(interval);
+        setCountdown(countdownBase);
+      }
+    }, 1000);
+  }, []);
+
+  return (
+    <div className="w-full px-1 md:px-4">
+      <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center text-gray-700 px-2">
+        <h4 className="mb-1">See you there in...</h4>
+      </div>
+
+      <div className="flex justify-center">
+        <NumberCard number={countdown.days} label="Days" />
+        <NumberCard number={countdown.hours} label="Hours" />
+        <NumberCard number={countdown.minutes} label="Minutes" />
+        <NumberCard number={countdown.seconds} label="Seconds" />
+      </div>
+    </div>
+  );
 });
 
 Countdown.displayName = "Countdown";
 
 interface NumberCardProps {
-    number: number;
-    label: string;
+  number: number;
+  label: string;
 }
 
 const NumberCard = memo(({ number, label }: NumberCardProps) => {
-    const numberString =
-        number < 100 ? ("0" + number).slice(-2) : String(number);
-
-    return (
-        <div className="rounded-lg bg-white py-7 px-2 w-24 text-center mx-2 text-xl-wel font-normalBold text-gray-800">
-            <div className="text-3xl mb-2">{numberString}</div>
-            <div>{label}</div>
-        </div>
-    );
+  const numberString = number < 100 ? ("0" + number).slice(-2) : String(number);
+
+  return (
+    <div className="rounded-lg bg-white py-7 px-2 w-24 text-center mx-2 text-xl-wel font-normalBold text-gray-800">
+      <div className="text-3xl mb-2">{numberString}</div>
+      <div>{label}</div>
+    </div>
+  );
 });
 
 NumberCard.displayName = "NumberCard";

diff --git a/src/app/components/Credit.tsx b/src/app/components/Credit.tsx
@@ -1,19 +1,19 @@
 const Credit = () => {
-    const thisYear = new Date().getFullYear();
-    return (
-        <div className="py-20 bg-background text-gray-700 relative text-center text-xl-wel font-normalBold">
-            © {thisYear} forked from
-            <a
-                className="font-semibold"
-                href="https://github.com/fauzialz/amifauzi.com-open"
-                target={"_blank"}
-                rel="noreferrer"
-            >
-                {" "}
-                Fauzi
-            </a>
-        </div>
-    );
+  const thisYear = new Date().getFullYear();
+  return (
+    <div className="py-10 bg-background text-gray-700 relative text-center text-xl-wel font-normalBold">
+      © {thisYear} forked from
+      <a
+        className="font-semibold"
+        href="https://github.com/fauzialz/amifauzi.com-open"
+        target={"_blank"}
+        rel="noreferrer"
+      >
+        {" "}
+        Fauzi
+      </a>
+    </div>
+  );
 };
 
 export default Credit;
diff --git a/src/app/components/GalleryCarousel.tsx b/src/app/components/GalleryCarousel.tsx
@@ -28,8 +28,8 @@ const photos = [
 
 const GalleryCarousel = () => {
   return (
-    <div id="carousel_div" className="w-full px-1 md:px-4 pb-10">
-      <h4 className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-14 pt-10 text-gray-700">
+    <div id="carousel_div" className="w-full px-1 md:px-4">
+      <h4 className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center text-gray-700">
         Gallery
       </h4>
       <Carousel showThumbs={false}>

diff --git a/src/app/components/Lodging.tsx b/src/app/components/Lodging.tsx
diff --git a/src/app/components/Message.tsx b/src/app/components/Message.tsx
@@ -32,8 +32,8 @@ const Message = () => {
 
   // TODO: update the events to a loop create
   return (
-    <div id="rsvp_div" className="py-14">
-      <h4 className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-10 md:mb-16 text-gray-700 px-4">
+    <div id="rsvp_div">
+      <h4 className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center text-gray-700 px-4">
         RSVP
       </h4>
       <div className="flex justify-center px-4">
@@ -49,6 +49,9 @@ const Message = () => {
               >
                 <fieldset disabled={loading}>
                   <div className="mb-6" style={{ textAlign: "center" }}>
+                    <p className="text-fcxl-wel font-normalBold text-black text-center mb-6 mx-3">
+                      We can&apos;t wait to celebrate with you!
+                    </p>
                     <p className="text-xl-wel font-normalBold text-black text-center mb-6 mx-3">
                       What are your arrival and departure dates?
                     </p>