Skip to content

Commit d1b16e7

Browse files
DavidH-1DavidH-1
authored
Merge pull request #9 from pranav-deshmukh/dev
Layout changes and cleanups
2 parents affe469 + 1f763aa commit d1b16e7

11 files changed

Lines changed: 80 additions & 38 deletions

File tree

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/gazelle.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + React + TS</title>
88
</head>

‎public/gazelle.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/mifos-gazelle-large.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/App.tsx‎

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,47 @@
1-
import React from 'react';
2-
import { ProductCard } from './components/Cards/product-card';
1+
import { ProductCard } from "./components/Cards/product-card";
2+
import { products } from "./data/productCardData";
33

4+
const App = () => {
45

5-
const App: React.FC = () => {
66
return (
7-
<div className="min-h-screen bg-gray-50 py-12 px-4">
8-
<div className="max-w-6xl mx-auto">
9-
<div className="text-center mb-12">
10-
<h1 className="text-3xl font-bold text-gray-900 mb-8">
11-
Welcome to the Mifos Product<br />Demo Explorer
7+
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50">
8+
<div className="pt-16 pb-16 px-6">
9+
<div className="max-w-7xl mx-auto text-center">
10+
<div className="inline-flex items-center bg-blue-50 text-blue-700 px-4 py-2 rounded-full text-sm font-medium mb-8">
11+
<span className="w-2 h-2 bg-blue-400 rounded-full mr-2"></span>
12+
Product Demo Platform
13+
</div>
14+
15+
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-8 leading-tight">
16+
Welcome to the Mifos
17+
<br />
18+
<span className="bg-gradient-to-r from-blue-600 to-blue-500 bg-clip-text text-transparent">
19+
Product Demo Explorer
20+
</span>
1221
</h1>
13-
<p className="text-gray-600 font-semibold max-w-2xl mx-auto mb-4">
14-
Experience interactive demos of MifosX, Phee, and VNext — with step-by-step guides. (Text is yet to be decided)
22+
23+
<p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed font-light">
24+
Experience interactive demonstrations of our products — MifosX, Phee, and VNext.
25+
Explore comprehensive step-by-step guides designed to showcase the full potential of our financial technology solutions.
1526
</p>
1627
</div>
17-
18-
<div className="flex md:flex-row xl:flex-row 2xl:flex-row flex-col justify-center items-center space-x-6">
19-
<ProductCard title="MifosX" />
20-
<ProductCard title="PHEE" />
21-
<ProductCard title="VNext" />
28+
</div>
29+
30+
<div className="pb-24 px-6 pt-10">
31+
<div className="max-w-7xl mx-auto">
32+
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 justify-items-center">
33+
{products.map((product, index) => (
34+
<ProductCard
35+
key={index}
36+
title={product.title}
37+
description={product.description}
38+
/>
39+
))}
40+
</div>
2241
</div>
2342
</div>
43+
44+
2445
</div>
2546
);
2647
};

‎src/components/Cards/product-card.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,21 @@ interface ProductCardProps {
1111

1212
export const ProductCard: React.FC<ProductCardProps> = ({
1313
title = "MifosX",
14-
subtitle = "Subtitle",
1514
description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
1615
onDemoClick = () => console.log('Demo clicked')
1716
}) => {
1817
return (
19-
<div className="bg-white rounded-xl overflow-hidden w-80 border border-gray-200 transition-all duration-300 hover:shadow-2xl hover:shadow-purple-200 hover:-translate-y-0.15">
20-
<div className="bg-purple-50 px-6 py-4">
18+
<div className="bg-white rounded-xl overflow-hidden w-80 border border-gray-200 transition-all duration-300 hover:shadow-xl hover:shadow-blue-200 hover:-translate-y-0.15">
19+
<div className="bg-blue-50 px-6 py-4">
2120
<div className="flex items-center">
22-
<div className="w-8 h-8 bg-purple-200 rounded-lg flex items-center justify-center mr-3">
23-
<span className="text-purple-700 font-semibold text-sm">A</span>
21+
<div className="w-8 h-8 bg-blue-200 rounded-lg flex items-center justify-center mr-3">
22+
<span className="text-blue-700 font-semibold text-sm">A</span>
2423
</div>
2524
<h3 className="text-lg font-semibold text-gray-800">{title}</h3>
2625
</div>
2726
</div>
2827

29-
<div className="bg-purple-50 px-6 pb-8">
28+
<div className="bg-blue-50 px-6 pb-8">
3029
<div className="flex justify-center items-center space-x-4">
3130
<div className="w-0 h-0 border-l-[20px] border-r-[20px] border-b-[24px] border-l-transparent border-r-transparent border-b-gray-400"></div>
3231

@@ -36,7 +35,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
3635
<div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-400"></div>
3736
<div className="absolute -left-1 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gray-400"></div>
3837
<div className="absolute -right-1 top-1/2 transform -translate-y-1/2 w-2 h-2 bg-gray-400"></div>
39-
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-purple-50 rounded-full"></div>
38+
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-blue-50 rounded-full"></div>
4039
</div>
4140
</div>
4241

@@ -47,7 +46,6 @@ export const ProductCard: React.FC<ProductCardProps> = ({
4746
<div className="px-6 py-6 bg-white">
4847
<div className="mb-4">
4948
<h4 className="text-base font-semibold text-gray-900 mb-1">About</h4>
50-
<p className="text-sm text-gray-500">{subtitle}</p>
5149
</div>
5250

5351
<p className="text-sm text-gray-700 leading-relaxed mb-6">
@@ -57,7 +55,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
5755
<div className="flex justify-end">
5856
<Button
5957
onClick={onDemoClick}
60-
className="bg-purple-400 hover:bg-purple-500 text-white text-sm px-6 py-2.5 rounded-full font-medium transition-colors duration-200 shadow-sm hover:shadow-md cursor-pointer"
58+
className="bg-blue-400 hover:bg-blue-500 text-white text-sm px-6 py-2.5 rounded-full font-medium transition-colors duration-200 shadow-sm hover:shadow-md cursor-pointer"
6159
>
6260
Demo
6361
</Button>

‎src/components/Navigation/SideNav.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,18 @@ export const SideNav = () => {
44
return (
55
<div className="h-screen w-14 bg-white flex flex-col items-center border-r-2 border-gray-200">
66
<div className="logo h-16 w-full flex items-center justify-center border-b-2 border-gray-200">
7-
<img
8-
src="/react.svg"
9-
alt="logo"
10-
width={30}
11-
height={30}
12-
className="cursor-pointer"
13-
/>
7+
<div className="p-1 rounded-full">
8+
<img
9+
src="/gazelle.svg"
10+
alt="logo"
11+
width={35}
12+
height={35}
13+
className="cursor-pointer"
14+
/>
15+
</div>
1416
</div>
1517
<div className="w-16 flex flex-1 justify-center pt-4">
16-
<Home size={30} className="cursor-pointer" />
18+
<Home size={30} className="cursor-pointer" />
1719
</div>
1820
</div>
1921
);

‎src/components/Navigation/TopNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { SunIcon } from "lucide-react";
22

33
export const TopNav = ({ title }: { title: string }) => {
44
return (
5-
<div className="h-16 w-full flex items-center justify-between border-b-2 border-[#1579EB] px-4">
5+
<div className="h-14 w-full flex items-center justify-between border-b-2 border-[#1579EB] px-4">
66
<div className="text-white text-xl font-semibold text-center">
77
{title}
88
</div>

‎src/data/productCardData.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export const products = [
2+
{
3+
title: "MifosX",
4+
description: "Comprehensive core banking platform designed for microfinance institutions and financial service providers worldwide."
5+
},
6+
{
7+
title: "PHEE",
8+
description: "Payment hub enabling seamless digital financial services and interoperability across payment systems."
9+
},
10+
{
11+
title: "VNext",
12+
description: "Next-generation financial platform built with modern architecture for enhanced scalability and performance."
13+
}
14+
];

0 commit comments

Comments
 (0)