refactor: hero section

aulianza · Oct 15, 2023 · a573d96 · a573d96
1 parent e12e5e3
commit a573d96
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 37 deletions.
diff --git a/public/images/cover.webp b/public/images/cover.webp
diff --git a/public/images/payment/visa.png b/public/images/payment/visa.png
diff --git a/src/common/components/Footer.tsx b/src/common/components/Footer.tsx
@@ -1,6 +1,6 @@
 const Footer = () => {
   return (
-    <div className="text-center text-sm py-6 text-neutral-500">
+    <div className="text-center text-sm pb-6 text-neutral-500">
       <div>© {new Date().getFullYear()} by aulianza</div>
     </div>
   );

diff --git a/src/common/components/PageWrapper.tsx b/src/common/components/PageWrapper.tsx
@@ -15,7 +15,7 @@ const PageWrapper = ({ children }: { children: React.ReactNode }) => {
     });
   }, []);
 
-  return <main className="p-6 pb-0 space-y-5">{children}</main>;
+  return <main className="pb-0">{children}</main>;
 };
 
 export default PageWrapper;
diff --git a/src/common/constant/bank.ts b/src/common/constant/bank.ts
@@ -5,6 +5,7 @@ export const BANK_ACCOUNTS: BankAccountsProps[] = [
     number: "0431030216",
     holder: "Ryan Aulia",
     bank: "Bank BCA",
+    type: "mastercard",
     logo: "/images/payment/bca.png",
     color: "#0066ae",
     className: "border-[#0066ae] hover:bg-[#0066ae] hover:text-white",
@@ -13,6 +14,7 @@ export const BANK_ACCOUNTS: BankAccountsProps[] = [
     number: "003701108940505",
     holder: "Ryan Aulia",
     bank: "Bank BRI",
+    type: "mastercard",
     logo: "/images/payment/bri.png",
     color: "#005098",
     className: "border-[#005098] hover:bg-[#005098] hover:text-white",
@@ -21,6 +23,7 @@ export const BANK_ACCOUNTS: BankAccountsProps[] = [
     number: "4140023855",
     holder: "Ryan Aulia",
     bank: "Bank Permata",
+    type: "visa",
     logo: "/images/payment/permata.png",
     color: "#6e9123",
     className: "border-[#6e9123] hover:bg-[#6e9123] hover:text-white",
@@ -29,16 +32,18 @@ export const BANK_ACCOUNTS: BankAccountsProps[] = [
     number: "1050018525703",
     holder: "Ryan Aulia",
     bank: "Bank Mandiri",
+    type: "mastercard",
     logo: "/images/payment/mandiri.png",
     color: "#064c90",
     className: "border-[#064c90] hover:bg-[#064c90] hover:text-white",
   },
-  {
-    number: "4692304190",
-    holder: "Ryan Aulia",
-    bank: "Bank BSI",
-    logo: "/images/payment/bsi.png",
-    color: "#00A39D",
-    className: "border-[#00A39D] hover:bg-[#00A39D] hover:text-white",
-  },
+  // {
+  //   number: "4692304190",
+  //   holder: "Ryan Aulia",
+  //   bank: "Bank BSI",
+  //   type: "mastercard",
+  //   logo: "/images/payment/bsi.png",
+  //   color: "#00A39D",
+  //   className: "border-[#00A39D] hover:bg-[#00A39D] hover:text-white",
+  // },
 ];
diff --git a/src/common/constant/links.tsx b/src/common/constant/links.tsx
@@ -13,14 +13,14 @@ export const LINKS: LinkProps[] = [
     label: "Personal Website & Portfolio",
     icon: <WebsiteIcon size={21} className="text-neutral-600" />,
     href: "https://aulianza.id",
-    className: "bg-sky-600",
+    className: "bg-emerald-700",
     target: "_blank",
   },
   {
     label: "Resume & Curriculum Vitae",
     icon: <PDFIcon size={21} className="text-neutral-600" />,
     href: "https://bit.ly/cv-aulianza",
-    className: "bg-emerald-600",
+    className: "bg-sky-700",
     target: "_blank",
   },
   {

diff --git a/src/common/constant/socials.tsx b/src/common/constant/socials.tsx
@@ -27,7 +27,7 @@ export const SOCIAL_MEDIA: SocialItemProps[] = [
     isShow: true,
     isExternal: true,
     eventName: "Social: Linkedin",
-    className: "text-blue-600 hover:bg-blue-600",
+    className: "text-[#0b66c2] hover:bg-[#0b66c2]",
   },
   {
     title: "Instagram",

diff --git a/src/common/types/bank.ts b/src/common/types/bank.ts
@@ -2,6 +2,7 @@ export interface BankAccountsProps {
   number: string;
   holder: string;
   bank: string;
+  type: string;
   logo: string;
   color?: string;
   className?: string;

diff --git a/src/modules/homepage/components/Hero.tsx b/src/modules/homepage/components/Hero.tsx
@@ -3,11 +3,23 @@
 import Image from "@/common/components/Image";
 
 const Hero = () => {
+  const coverImage =
+    "url('/images/shiny_card_animated.svg'), url('/images/cover.webp')";
+
   return (
-    <header className="pt-5 space-y-4 flex flex-col items-center justify-center">
+    <header className="flex flex-col items-center justify-center">
+      <div
+        className="w-full h-28 md:h-40 md:rounded-t-lg bg-cover"
+        data-aos="fade-down"
+        data-aos-duration="1000"
+        style={{
+          backgroundImage: coverImage,
+          backgroundPosition: "center, bottom",
+        }}
+      ></div>
       <div
-        className="p-1 rounded-full border border-2"
-        data-aos="zoom-in"
+        className="rounded-full bg-white border border-2 -mt-[60px]"
+        data-aos="zoom-in-down"
         data-aos-duration="1000"
       >
         <Image
@@ -19,18 +31,25 @@ const Hero = () => {
           className="lg:hover:scale-105"
         />
       </div>
-      <div
-        className="flex flex-col justify-center items-center space-y-3"
-        data-aos="fade-up"
-        data-aos-duration="1000"
-      >
-        <div className="flex gap-2 items-center text-center">
-          <h1 className="text-2xl font-medium">Ryan Aulia</h1>
+      <div className="pt-5 px-8">
+        <div
+          className="flex flex-col justify-center items-center space-y-3"
+          data-aos="fade-up"
+          data-aos-duration="1000"
+        >
+          <div className="flex flex-col gap-1 items-center text-center">
+            <h1 className="text-2xl font-medium">Ryan Aulia</h1>
+            <div className="flex gap-2 text-[15px] text-neutral-500">
+              <span>Jakarta, Indonesia</span>
+              <span className="text-neutral-300">•</span>
+              <span>he/him</span>
+            </div>
+          </div>
+          <p className="text-center text-neutral-600 text-[15px] md:text-base mx-1.5 leading-relaxed">
+            Seasoned software engineer especially in frontend side, with a
+            passion for creating pixel-perfect web experiences.
+          </p>
         </div>
-        <p className="text-center text-neutral-700 text-[15px] md:text-base mx-1.5 leading-relaxed">
-          Seasoned software engineer especially in frontend side, with a passion
-          for creating pixel-perfect web experiences.
-        </p>
       </div>
     </header>
   );

diff --git a/src/modules/homepage/components/Home.tsx b/src/modules/homepage/components/Home.tsx
@@ -9,11 +9,13 @@ const Home = () => {
   return (
     <>
       <Hero />
-      <Socials />
-      <Breakline />
-      <Links />
-      <Breakline />
-      <Contact />
+      <div className="p-6 space-y-5">
+        <Socials />
+        <Breakline />
+        <Links />
+        <Breakline />
+        <Contact />
+      </div>
     </>
   );
 };

diff --git a/src/modules/payment/components/AccountCard.tsx b/src/modules/payment/components/AccountCard.tsx
@@ -12,6 +12,7 @@ const AccountCard = ({
   number,
   holder,
   logo,
+  type,
   color,
   className,
 }: BankAccountsProps) => {
@@ -43,7 +44,7 @@ const AccountCard = ({
       style={{
         backgroundImage: gradientCard,
         backgroundPosition: "right top, center",
-        backgroundSize: "85%, cover",
+        backgroundSize: "88%, cover",
       }}
     >
       <div className="flex justify-between items-start">
@@ -85,10 +86,10 @@ const AccountCard = ({
             <span className="text-base uppercase font-medium">{holder}</span>
           </div>
           <Image
-            src="/images/payment/mastercard.png"
+            src={`/images/payment/${type}.png`}
             alt={bank}
-            height={80}
-            width={60}
+            height={85}
+            width={65}
           />
         </div>
       </div>

diff --git a/src/modules/payment/components/Payment.tsx b/src/modules/payment/components/Payment.tsx
@@ -4,7 +4,7 @@ import BankTransfer from "./BankTransfer";
 
 const Payment = () => {
   return (
-    <section className="space-y-6">
+    <section className="p-6 space-y-6">
       <PageHeader title="Bank Transfer (IDR)" />
       <BankTransfer />
     </section>