Zeff01 · BigDrems · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.2.4"
+    "react-icons": "^5.6.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.2.4",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
diff --git a/frontend/public/Premium Gift Card.png b/frontend/public/Premium Gift Card.png
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -8,8 +8,9 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-inter);
+  --font-inter: var(--font-inter);
+  --font-poppins: var(--font-poppins);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,5 +23,13 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-inter);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-poppins);
+  font-weight: 700;
+  letter-spacing: -0.02em;
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,15 +1,17 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter, Poppins } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const inter = Inter({
+  variable: "--font-inter",
   subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const poppins = Poppins({
+  variable: "--font-poppins",
   subsets: ["latin"],
+  weight: ["500", "600", "700", "800"],
 });
 
 export const metadata: Metadata = {
@@ -25,7 +27,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${inter.variable} ${poppins.variable} antialiased`}
       >
         {children}
       </body>

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,103 +1,25 @@
-import Image from "next/image";
+'use client';
+
+import { Navigation, HeroSection, WhyChooseSection } from '@/features';
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+    <div className="min-h-screen bg-white dark:bg-gray-950">
+      {/* Navigation */}
+      <Navigation />
+
+      {/* Hero Section */}
+      <HeroSection
+        badge="The Future of Gifting is Here"
+        title="Gifting Made Easier"
+        description="Access over 250+ premium brands with instant delivery and exclusive cash back rewards. The boutique experience for digital rewards."
+        primaryButtonText="Shop Gift Cards"
+        secondaryButtonText="View Brands"
+        stats={{ label: 'EARNED TODAY', value: '$42.50' }}
+      />
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      {/* Why Choose Section */}
+      <WhyChooseSection />
     </div>
   );
 }
diff --git a/frontend/src/features/benefits/components/BenefitCard.tsx b/frontend/src/features/benefits/components/BenefitCard.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { BenefitCardProps } from '../types/benefits.types';
+import { COLORS, SPACING } from '../constants/theme.constants';
+
+export const BenefitCard: React.FC<BenefitCardProps> = ({
+  icon,
+  title,
+  description,
+  gradient,
+  iconBg,
+  iconSize,
+  titleSize = 14,
+  descSize = 12,
+  flex,
+  layout = 'vertical',
+  titleColor = COLORS.cardText,
+  descriptionColor = COLORS.cardSubtext,
+  iconBorder,
+}) => {
+  if (layout === 'horizontal') {
+    return (
+      <div
+        style={{
+          background: gradient,
+          borderRadius: 20,
+          padding: SPACING.cardCompactPadding,
+          display: 'flex',
+          alignItems: 'flex-start',
+          gap: SPACING.gridGap,
+        }}
+      >
+        <div
+          style={{
+            width: iconSize.width,
+            height: iconSize.height,
+            borderRadius: iconSize.radius,
+            background: iconBg,
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            ...(iconBorder && { border: iconBorder }),
+          }}
+        >
+          {icon}
+        </div>
+        <div>
+          <p style={{ fontWeight: 700, fontSize: titleSize, fontFamily: 'var(--font-poppins)', color: titleColor, margin: '0 0 4px' }}>
+            {title}
+          </p>
+          <p style={{ fontSize: descSize, fontFamily: 'var(--font-inter)', color: descriptionColor, lineHeight: 1.55, margin: 0 }}>
+            {description}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        flex,
+        background: gradient,
+        borderRadius: 20,
+        padding: SPACING.cardPadding,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: layout === 'vertical' && flex ? 'center' : 'flex-start',
+      }}
+    >
+      <div
+        style={{
+          width: iconSize.width,
+          height: iconSize.height,
+          borderRadius: iconSize.radius,
+          background: iconBg,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: SPACING.iconMargin,
+          ...(iconBorder && { border: iconBorder }),
+        }}
+      >
+        {icon}
+      </div>
+      <p style={{ fontWeight: 700, fontSize: titleSize, fontFamily: 'var(--font-poppins)', color: titleColor, margin: `0 0 ${SPACING.titleMargin}px` }}>
+        {title}
+      </p>
+      <p style={{ fontSize: descSize, fontFamily: 'var(--font-inter)', color: descriptionColor, lineHeight: 1.55, margin: 0 }}>
+        {description}
+      </p>
+    </div>
+  );
+};
diff --git a/frontend/src/features/benefits/components/WhyChooseSection.tsx b/frontend/src/features/benefits/components/WhyChooseSection.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Benefits } from '../data/benefits.data';
+import { COLORS, SPACING } from '../constants/theme.constants';
+import { WhyChooseSectionProps, Benefit } from '../types/benefits.types';
+import { BenefitCard } from './BenefitCard';
+
+export const WhyChooseSection: React.FC<WhyChooseSectionProps> = ({
+  heading = 'Why Choose Moola?',
+  subtitle = 'Experience the most sophisticated rewards platform designed for the modern lifestyle',
+}) => {
+  const leftColumn = Benefits.filter((b) => b.column === 'left');
+  const rightColumn = Benefits.filter((b) => b.column === 'right');
+
+  const renderColumn = (column: Benefit[]) =>
+    column.map((benefit) => (
+      <BenefitCard
+        key={benefit.id}
+        icon={benefit.icon}
+        title={benefit.title}
+        description={benefit.description}
+        gradient={benefit.gradient}
+        iconBg={benefit.iconBg}
+        iconSize={benefit.iconSize}
+        titleSize={benefit.titleSize}
+        descSize={benefit.descSize}
+        flex={benefit.flex}
+        layout={benefit.layout}
+        titleColor={benefit.titleColor}
+        descriptionColor={benefit.descriptionColor}
+        iconBorder={benefit.iconBorder}
+      />
+    ));
+
+  return (
+    <section
+      style={{
+        background: COLORS.background,
+        padding: SPACING.containerPadding,
+        borderRadius: 18,
+        maxWidth: 1200,
+        margin: '0 auto',
+      }}
+    >
+      {/* Header */}
+      <div style={{ textAlign: 'center', marginBottom: SPACING.sectionMargin }}>
+        <h2
+          style={{
+            fontSize: 28,
+            fontWeight: 800,
+            fontFamily: 'var(--font-poppins)',
+            color: COLORS.heading,
+            margin: '0 0 8px',
+            letterSpacing: '-0.3px',
+          }}
+        >
+          {heading}
+        </h2>
+        <p
+          style={{
+            fontSize: 13,
+            color: COLORS.subtitle,
+            maxWidth: 340,
+            margin: '0 auto',
+            lineHeight: 1.55,
+          }}
+        >
+          {subtitle}
+        </p>
+      </div>
+
+      {/* Two-column grid */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: SPACING.gridGap, alignItems: 'stretch' }}>
+        {/* LEFT COLUMN */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: SPACING.gridGap }}>
+          {renderColumn(leftColumn)}
+        </div>
+
+        {/* RIGHT COLUMN */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: SPACING.gridGap }}>
+          {renderColumn(rightColumn)}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WhyChooseSection;
diff --git a/frontend/src/features/benefits/components/index.ts b/frontend/src/features/benefits/components/index.ts
@@ -0,0 +1,2 @@
+export { WhyChooseSection } from './WhyChooseSection';
+export { BenefitCard } from './BenefitCard';
diff --git a/frontend/src/features/benefits/constants/index.ts b/frontend/src/features/benefits/constants/index.ts
@@ -0,0 +1 @@
+export { COLORS, SPACING, ICON_SIZES } from './theme.constants';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { WhyChooseSection } from './WhyChooseSection';
		export { BenefitCard } from './BenefitCard';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { COLORS, SPACING, ICON_SIZES } from './theme.constants';