diff --git a/public/about.html b/public/about.html index a74ff0d..07c7b60 100644 --- a/public/about.html +++ b/public/about.html @@ -28,6 +28,7 @@ Services Our Process Clients + Our Apps
Let's Talk diff --git a/public/approach.html b/public/approach.html index f2c8b13..77c1389 100644 --- a/public/approach.html +++ b/public/approach.html @@ -28,6 +28,7 @@ Services Our Process Clients + Our Apps
Let's Talk diff --git a/public/apps.html b/public/apps.html new file mode 100644 index 0000000..88be9a6 --- /dev/null +++ b/public/apps.html @@ -0,0 +1,84 @@ + + + + + + + TwoAxis | Our Apps + + + + + + + + + + + + + + + + +
+
+
+

Our Apps.

+

Explore the suite of mobile and web applications developed by TwoAxis to make life easier.

+
+
+ +
+
+
+ +
+
+ TwoAxis Finance Logo +
+
+

TwoAxis Finance

+

An app to manage your personal finances.

+ + Get it on Google Play + +
+
+
+
+
+ +
+

Have an app idea?

+

Let's discuss how we can bring your next idea to life.

+ Book a Consultation +
+
+ + + + \ No newline at end of file diff --git a/public/clients.html b/public/clients.html index e6d20fa..2e06376 100644 --- a/public/clients.html +++ b/public/clients.html @@ -28,6 +28,7 @@ Services Our Process Clients + Our Apps
Let's Talk diff --git a/public/contact.html b/public/contact.html index cc22e43..8883d26 100644 --- a/public/contact.html +++ b/public/contact.html @@ -28,6 +28,7 @@ Services Our Process Clients + Our Apps
Let's Talk diff --git a/public/index.html b/public/index.html index ead0b49..48d183a 100644 --- a/public/index.html +++ b/public/index.html @@ -38,6 +38,7 @@ Services Our Process Clients + Our Apps
Let's Talk diff --git a/public/services.html b/public/services.html index e0f533b..933bbd5 100644 --- a/public/services.html +++ b/public/services.html @@ -28,6 +28,7 @@ Services Our Process Clients + Our Apps
Let's Talk diff --git a/public/static/img/apps/finance.webp b/public/static/img/apps/finance.webp new file mode 100644 index 0000000..f16e5cd Binary files /dev/null and b/public/static/img/apps/finance.webp differ diff --git a/public/static/style/apps.css b/public/static/style/apps.css new file mode 100644 index 0000000..8d13481 --- /dev/null +++ b/public/static/style/apps.css @@ -0,0 +1,124 @@ +.page-header { + background: var(--bg-light); + padding: 100px 20px 60px; + border-bottom: 1px solid var(--border-color); +} +.page-header h1 { + font-size: 56px; + font-weight: 800; + margin-bottom: 20px; +} +.page-header .subtitle { + font-size: 20px; + color: var(--text-muted); + max-width: 700px; + margin: 0 auto; +} + +.apps-section { + padding: 100px 0; + background: var(--bg-white); +} + +.apps-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 40px; +} + +.app-card { + display: flex; + flex-direction: column; + text-decoration: none; + color: var(--text-main); + background: var(--bg-white); + border: 1px solid var(--border-color); + border-radius: 16px; + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; + box-shadow: 0 4px 15px rgba(0,0,0,0.02); +} + +.app-card:hover { + transform: translateY(-8px); + box-shadow: 0 15px 35px rgba(0,0,0,0.08); + border-color: var(--primary); +} + +.app-logo-wrapper { + height: 200px; + background: var(--bg-light); + display: flex; + align-items: center; + justify-content: center; + padding: 40px; + border-bottom: 1px solid var(--border-color); +} + +.app-logo-wrapper img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + border-radius: 20px; +} + +.app-info { + padding: 25px; + text-align: center; +} + +.app-info h3 { + font-size: 20px; + font-weight: 700; + margin-bottom: 10px; +} + +.app-info p { + font-size: 15px; + color: var(--text-muted); + margin-bottom: 20px; +} + +.app-info .store-link { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + background: var(--primary); + color: white; + padding: 10px 20px; + border-radius: 8px; + font-weight: 600; + text-decoration: none; + transition: background 0.3s ease; +} + +.app-info .store-link:hover { + background: var(--secondary); +} + +#cta { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; + text-align: center; + padding: 100px 20px; +} +#cta h1 { + font-size: 48px; + font-weight: 800; + margin-bottom: 20px; +} +#cta p { + font-size: 20px; + opacity: 0.9; + margin-bottom: 40px; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +@media (max-width: 768px) { + .page-header h1 { + font-size: 40px; + } +}