Finished testimonial section

README.md

@@ -1,36 +1,12 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Welcome to my First Next.js Project
 
-## Getting Started
+I hope you find this project to look at. Been coding in Reactjs for sometime now, and just wondered how Next.js would be like?!!
 
-First, run the development server:
+# Here's what I found
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+- Next.js is exceptional [nothing kike I've seen before]
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- The new `app` router be something else
+- I wish I started using it earlier (isn't so late though)
+- Has in built optimization for images using `<Image />` from `next/image`
+- Same for links using `<Link />` from `next/link`

next.config.js

@@ -5,7 +5,7 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        hostname: "www.pexels.com",
+        hostname: "images.pexels.com",
         protocol: "https",
       },
     ],

src/app/globals.css

@@ -13,6 +13,7 @@
   --primary-gray: #2b2b2b;
   --dark-gray: #333333;
   --light-gray: #c4c4c4;
+  --dull-white: #ffffffa4;
   --border-radius: 1rem;
 }
 

src/app/home.module.css

@@ -54,13 +54,21 @@
   /* flex: 1; */
   padding: 0.5em;
   border-radius: 1rem;
-  /* width: */
+  animation: levitate 2s ease infinite alternate;
 }
 
 .imageContainer img {
   object-fit: cover;
 }
 
+@keyframes levitate {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-10px);
+  }
+}
 
 /* Multipart section */
 .multiPartSection {
@@ -81,7 +89,7 @@
 }
 
 /* Pseudo elements */
-.brandsSection::before{
+.brandsSection::before {
   content: "";
   position: absolute;
   top: 0;
@@ -91,7 +99,7 @@
   margin-bottom: 1em;
 }
 
-.brandsSection::after{
+.brandsSection::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -109,4 +117,28 @@
 
 .dashboardImage img {
   object-fit: contain;
-}
+}
+
+/* Testimonial section */
+.testimonial {
+  width: 80%;
+  margin: 3em auto;
+  background-color: var(--purple);
+  color: var(--dark-gray);
+  border-radius: 1rem;
+}
+
+.testimonialContainer {
+  width: 70%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+  padding: 4em 0;
+}
+
+.testimony {
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1.5;
+}

src/app/layout.tsx

@@ -6,7 +6,7 @@ import Navbar from "../components/navbar/Navbar";
 // const inter = Inter({ subsets: ["latin"] });
 const poppins = Poppins({
   subsets: ["latin"],
-  weight: ["100", "400", "600", "700"],
+  weight: ["100", "300", "400", "600", "700"],
 });
 
 export const metadata: Metadata = {

src/app/page.tsx

@@ -4,7 +4,8 @@ import Link from "next/link";
 import heroImage from "../../public/landing-image.svg";
 import brandsImage from "../../public/Logos.png";
 import dashboardImage from "../../public/third.svg";
-
+import { Cards } from "../components/card/Cards";
+import { User } from "../components/user/User";
 
 export default function Home() {
   return (
@@ -36,18 +37,33 @@ export default function Home() {
           />
         </div>
       </section>
-     <section className={styles.multiPartSection}>
-     <div className={styles.brandsSection}>
-        <Image
-          src={brandsImage}
-          className={styles.brandImage}
-          alt="Brand Images"
-        />
-      </div>
-      <div className={styles.dashboardImage}>
-        <Image src={dashboardImage}  alt="Wallet dashboard image"/>
-      </div>
-     </section>
+      <section className={styles.multiPartSection}>
+        <div className={styles.brandsSection}>
+          <Image
+            src={brandsImage}
+            className={styles.brandImage}
+            alt="Brand Images"
+          />
+        </div>
+        <div className={styles.dashboardImage}>
+          <Image src={dashboardImage} alt="Wallet dashboard image" />
+        </div>
+        <Cards />
+      </section>
+      <section className={styles.testimonial}>
+        <div className={styles.testimonialContainer}>
+          <h3 className={styles.testimony}>
+            “Wallet is a great product! All of my most important information is
+            there - credit cards, transit cards, boarding passes, tickets, and
+            more. And I don't need to worry because it's all in one place!
+            thanks!”
+          </h3>
+          <User
+            image="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+            name="Sean Menders"
+          />
+        </div>
+      </section>
     </main>
   );
 }

src/components/card/Cards.tsx

@@ -0,0 +1,28 @@
+import { cardData } from "@/src/utils/cardData";
+import React from "react";
+import styles from "./card.module.css";
+import { CardData } from "@/src/utils/cardData";
+import Image from "next/image";
+
+export const Cards = () => {
+  const imageDimensions = 75;
+
+  return (
+    <div className={styles.container}>
+      {cardData.map((card: CardData) => (
+        <div key={card.id} className={styles.card_content}>
+          <div>
+            <Image
+              src={card.image}
+              alt={card.alt}
+              width={imageDimensions}
+              height={imageDimensions}
+            />
+          </div>
+          <h1 className={styles.card_title}>{card.title}</h1>
+          <p className={styles.card_description}>{card.desc}</p>
+        </div>
+      ))}
+    </div>
+  );
+};

src/components/card/card.module.css

@@ -0,0 +1,35 @@
+.container {
+  margin-top: 6em;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5em;
+}
+
+.card_content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1.5em;
+  transition: scale 300ms ease;
+  border-radius: .5rem;
+  padding: 1.5em;
+}
+
+.card_content:hover {
+    scale: 1.1;
+    outline: 1px solid var(--green);
+}
+
+
+.card_title {
+    font-weight: 600;
+    font-size: 1.5rem;
+}
+
+.card_description {
+    text-align: center;
+    color: var(--dull-white);
+    font-size: 1.2rem;
+    width: 85%;
+}

src/components/user/User.tsx

@@ -0,0 +1,23 @@
+import styles from "./user.module.css";
+import Image from "next/image";
+
+interface UserProps {
+  image: string;
+  name: string;
+}
+
+export const User = ({ image, name }: UserProps) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.image_container}>
+        <Image src={image} alt={name} fill />
+      </div>
+      <div className={styles.text_container}>
+        <h3>{name}</h3>
+        <p>
+          Rated: <b>4.5 stars</b>
+        </p>
+      </div>
+    </div>
+  );
+};

src/components/user/user.module.css

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
+.image_container {
+  position: relative;
+  width: 50px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  outline: 3px solid var(--light-gray);
+  box-shadow: 3px 4px 15px rgb(0 0 0 / 0.5);
+  overflow: clip;
+}
+
+.image_container img {
+  object-fit: cover;
+}
+
+.text_container h3 {
+  font-weight: 300;
+}

src/utils/cardData.ts

@@ -0,0 +1,31 @@
+export interface CardData {
+  id: number;
+  image: string;
+  title: string;
+  desc: string;
+  alt: string;
+}
+
+export const cardData: CardData[] = [
+  {
+    id: 1,
+    image: "/cards-icon.png",
+    title: "Customizable card",
+    desc: "Custom your own card for your exact incomes and expenses needs.",
+    alt: "Custom card",
+  },
+  {
+    id: 2,
+    image: "/coin-icon.png",
+    title: "No payment fee",
+    desc: "Transfer your payment all over the world with no payment fee.",
+    alt: "Payment",
+  },
+  {
+    id: 3,
+    image: "/purse-icon.png",
+    title: "All in one place",
+    desc: "The right place to keep your credit and debit cards, boarding passes & more.  ",
+    alt: "One place",
+  },
+];