Skip to content

Commit 952578c

Browse files
actions-useractions-user
committed
feat: add technology page
- Add technology page with data-driven content - Add technology data module and page component
1 parent 3dc18f3 commit 952578c

3 files changed

Lines changed: 501 additions & 0 deletions

File tree

‎src/app/technology/page.tsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
'use client'
2+
3+
import { useEffect, useMemo, useState } from 'react'
4+
import { cn } from '@/lib/cn'
5+
import { ActionButton } from '@/components/breadcrumbs'
6+
import { technologySections } from '@/components/technology/data'
7+
8+
function TechnologyAccordion() {
9+
const [activeSection, setActiveSection] = useState('environments')
10+
const [openItem, setOpenItem] = useState<string | null>(null)
11+
12+
const currentSection = useMemo(
13+
() => technologySections.find((section) => section.id === activeSection) ?? technologySections[0],
14+
[activeSection]
15+
)
16+
17+
useEffect(() => {
18+
setOpenItem(currentSection.items[0]?.id ?? null)
19+
}, [currentSection])
20+
21+
return (
22+
<section className="text-[#323232] bg-white pb-16">
23+
<div className="relative overflow-hidden bg-[#101619]">
24+
<video
25+
autoPlay
26+
loop
27+
muted
28+
playsInline
29+
className="absolute inset-0 h-full w-full object-cover"
30+
src="/template/videos/futuristic-technology-abstract-background_4k3v6uqwg__WL.mp4"
31+
/>
32+
<div className="absolute inset-0 z-[1] bg-[radial-gradient(circle_at_center,rgba(17,26,31,0.08)_0%,rgba(17,26,31,0.65)_55%,rgba(10,16,20,0.92)_100%)]" />
33+
<div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(10,18,22,0.7)_0%,rgba(10,18,22,0.35)_28%,rgba(10,18,22,0.74)_100%)]" />
34+
<div className="relative z-[2] mx-auto max-w-5xl px-6 py-20 text-center text-white lg:px-8 lg:py-28">
35+
<h1 className="text-[28px] font-normal">Technology</h1>
36+
<div className="mx-auto my-6 max-w-xl h-px w-full bg-[linear-gradient(to_right,transparent_0%,rgba(255,255,255,0.35)_35%,rgba(255,255,255,0.35)_70%,transparent_100%)]" />
37+
<p className="mx-auto max-w-3xl text-[18px] font-light leading-8 text-white/90">
38+
Our developers use various types of technology to stay current with industry standards.
39+
</p>
40+
<div className="mt-8">
41+
<ActionButton href="/contact" variant="ghost">
42+
Contact Us
43+
</ActionButton>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div className="mx-auto flex max-w-7xl gap-8 px-6 pt-6 lg:px-8">
49+
<aside className="hidden w-[220px] shrink-0 lg:block">
50+
<nav className="sticky top-28">
51+
<ul className="space-y-1">
52+
{technologySections
53+
.filter((section) => section.id !== 'cloud')
54+
.map((section) => (
55+
<li key={section.id}>
56+
<button
57+
type="button"
58+
onClick={() => setActiveSection(section.id)}
59+
className={cn(
60+
'w-full rounded-[3px] px-4 py-3 text-left text-[14px] text-[#666] transition-colors hover:bg-[#f7fafb] hover:text-[#09afdf]',
61+
activeSection === section.id &&
62+
'bg-[linear-gradient(90deg,rgba(9,175,223,0.12),rgba(9,175,223,0.04))] text-[#09afdf] font-medium'
63+
)}
64+
>
65+
{section.label}
66+
</button>
67+
</li>
68+
))}
69+
</ul>
70+
</nav>
71+
</aside>
72+
73+
<div className="min-w-0 flex-1">
74+
<div className="mb-5 lg:hidden">
75+
<label className="mb-2 block text-[13px] font-medium uppercase tracking-[0.12em] text-[#666]">
76+
Technology Section
77+
</label>
78+
<select
79+
value={activeSection}
80+
onChange={(event) => setActiveSection(event.target.value)}
81+
className="w-full rounded-[3px] border border-[#d9d9d9] bg-white px-4 py-3 text-[14px] outline-none ring-0"
82+
>
83+
{technologySections.map((section) => (
84+
<option key={section.id} value={section.id}>
85+
{section.label}
86+
</option>
87+
))}
88+
</select>
89+
</div>
90+
91+
<section id={currentSection.id}>
92+
<h2 className="mb-6 text-[32px] font-normal text-[#2f2f2f]">{currentSection.title}</h2>
93+
<div className="space-y-3">
94+
{currentSection.items.map((item) => {
95+
const isOpen = openItem === item.id
96+
return (
97+
<div key={item.id} className="overflow-hidden rounded-[3px] border border-[#ececec] bg-white">
98+
<button
99+
type="button"
100+
onClick={() => setOpenItem(isOpen ? null : item.id)}
101+
className="flex w-full items-center gap-3 px-5 py-4 text-left text-[14px] text-[#555]"
102+
>
103+
<img src={item.icon} alt="" className="h-4 w-4 object-contain" />
104+
<span>{item.title}</span>
105+
</button>
106+
{isOpen ? (
107+
<div className="border-t border-[#ececec] px-5 py-5 text-[14px] leading-7 text-[#666]">
108+
{item.description}
109+
</div>
110+
) : null}
111+
</div>
112+
)
113+
})}
114+
</div>
115+
</section>
116+
</div>
117+
</div>
118+
</section>
119+
)
120+
}
121+
122+
export default function TechnologyPage() {
123+
return <TechnologyAccordion />
124+
}

‎src/components/technology/data.ts‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
export type TechnologyItem = {
2+
id: string
3+
title: string
4+
icon: string
5+
description: string
6+
}
7+
8+
export type TechnologySection = {
9+
id: string
10+
label: string
11+
title: string
12+
items: TechnologyItem[]
13+
}
14+
15+
export const technologySections: TechnologySection[] = [
16+
{
17+
id: 'environments',
18+
label: 'Environments',
19+
title: 'Environments / Frameworks',
20+
items: [
21+
{
22+
id: 'nodejs',
23+
title: 'Node.js / Socket.io',
24+
icon: '/images/favicons/node.png',
25+
description:
26+
'Node.js is an open source JavaScript runtime environment that can be used for developing client-side and server-side applications. It has an event-drive architecture that makes it very useful for near-real-time communication in the browser.',
27+
},
28+
{
29+
id: 'composer',
30+
title: 'PHP / Composer / Laravel / WordPress',
31+
icon: '/images/favicons/laraval.jpg',
32+
description:
33+
'Composer is a PHP package manager that provides access to a myriad of libraries with just a few clicks. We love PHP and generally use the Laravel framework, however we have experience with many other PHP frameworks as well.',
34+
},
35+
{
36+
id: 'html5',
37+
title: 'HTML5 / CSS3 / JavaScript',
38+
icon: '/images/favicons/html5.png',
39+
description:
40+
"HTML5 is the current web standard we have all come to know and love. We have extensive experience building HTML5 User Interfaces (UX) that make use of JavaScript and CSS3's capabilities.",
41+
},
42+
{
43+
id: 'angular',
44+
title: 'Javascript / Angular / Vue / jQuery / Etc...',
45+
icon: '/images/favicons/angular.ico',
46+
description:
47+
'We have experience working with many different front-end platforms, frameworks, and libraries. We are experts in Ajax, Websockets, WebRTC, LocalStorage, and more.',
48+
},
49+
{
50+
id: 'python',
51+
title: 'Python / Twistd / Django / Etc...',
52+
icon: '/images/favicons/py.png',
53+
description:
54+
'Python is a great language and we make use it whenever appropriate. We have experience working with Twisted, Django, and more.',
55+
},
56+
{
57+
id: 'ionic',
58+
title: 'Ionic / Phonegap / Cordova',
59+
icon: '/images/favicons/ionic.png',
60+
description:
61+
'Our developers are experts in responsive design and creating mobile and desktop WebView applications. We have been using Apache Cordova since before PhoneGap was purchased by Adobe Systems. These tools allow us to create cross-platform web applications for any organization.',
62+
},
63+
{
64+
id: 'ruby',
65+
title: 'Ruby on Rails',
66+
icon: '/images/favicons/ruby.ico',
67+
description:
68+
"We have experience building and maintaining Ruby on Rails applications. We're also familiar with Active Record, and paradigms such as convention over configuration or don't repeat yourself.",
69+
},
70+
],
71+
},
72+
{
73+
id: 'database',
74+
label: 'Database Engines',
75+
title: 'Database Engines',
76+
items: [
77+
{
78+
id: 'mysql',
79+
title: 'MySQL / MariaDB',
80+
icon: '/images/favicons/mysql.ico',
81+
description:
82+
'Our engineers are data experts and can build, upgrade, or maintain your relational database(s). We understand SQL security and query optmiziation well, and will structure your database / application architecture in an efficient manner.',
83+
},
84+
{
85+
id: 'postgres',
86+
title: 'PostgreSQL',
87+
icon: '/images/favicons/postgres.ico',
88+
description:
89+
'Our engineers are data experts and can build, upgrade, or maintain your relational database(s). We understand SQL security and query optmiziation well, and will structure your database / application architecture in an efficient manner.',
90+
},
91+
{
92+
id: 'nosql',
93+
title: 'NoSQL / MongoDB / Redis / Memcached',
94+
icon: '/images/favicons/redis.png',
95+
description:
96+
'We understand when and how to use NoSQL and Memory-Caching solutions in order to optimize performance on high-use applications.',
97+
},
98+
{
99+
id: 'csv',
100+
title: "CSV's, AccessDB, and more!",
101+
icon: '/images/favicons/csv.png',
102+
description:
103+
'We understand when and how to use NoSQL and Memory-Caching solutions in order to optimize performance on high-use applications.',
104+
},
105+
],
106+
},
107+
{
108+
id: 'template',
109+
label: 'Template Engines',
110+
title: 'Template Engines',
111+
items: [
112+
{
113+
id: 'bootstrap',
114+
title: 'Bootstrap',
115+
icon: '/images/favicons/bootstrap.ico',
116+
description:
117+
'Bootstrap is a great HTML5 template engine that is at the core of a large number of websites online today. We understand the Stylesheets, JavaScript, and other Components well and can customize a new template to your exact specifications.',
118+
},
119+
{
120+
id: 'md',
121+
title: 'Material Design',
122+
icon: '/images/favicons/materialdesign.png',
123+
description:
124+
'Material Design is a design language developed by Google that is a good starting point for building a new mobile template or website.',
125+
},
126+
{
127+
id: 'propellerin',
128+
title: 'Propeller.in',
129+
icon: '/images/favicons/propellerin.ico',
130+
description:
131+
'Propeller.in is a new framework that combines the best features of Bootstrap and Material design into an excellent starting point for new web templates and interfaces.',
132+
},
133+
],
134+
},
135+
{
136+
id: 'servers',
137+
label: 'Servers',
138+
title: 'Server Administration',
139+
items: [
140+
{
141+
id: 'linux',
142+
title: 'Linux (Debian, CentOS, and more)',
143+
icon: '/images/favicons/linux.png',
144+
description:
145+
'We understand server administration well and can help you setup or maintain any type of Linux or Windows Server. We are experts at SSH and can write custom bash scripts and setup software daemons for you.',
146+
},
147+
{
148+
id: 'windows',
149+
title: 'Windows Server 2008 / 2012',
150+
icon: '/images/favicons/microsoft.ico',
151+
description:
152+
'We understand server administration well and can help you setup or maintain any type of Linux or Windows Server. We are experts at SSH and can write custom bash scripts and setup software daemons for you.',
153+
},
154+
{
155+
id: 'apache',
156+
title: 'Apache / nginx / lighttpd / IIS',
157+
icon: '/images/favicons/apache.ico',
158+
description:
159+
'As master web engineers, we have experience installing, configuring, customizing, and maintaining various types of web servers. We can setup load balancers, reverse/forward proxies, and much more.',
160+
},
161+
{
162+
id: 'virtualization',
163+
title: 'Virtualization (Docker, XenServer, Oracle VM, etc...)',
164+
icon: '/images/favicons/docker.png',
165+
description:
166+
'Our engineers is comfortable working their way around virtualization technology and can setup any Operating System on as many Virtual Machines necessary to meet your organizational needs.',
167+
},
168+
],
169+
},
170+
{
171+
id: 'networking',
172+
label: 'Networking',
173+
title: 'Network Administration',
174+
items: [
175+
{
176+
id: 'load',
177+
title: 'Load Balancing / Scalability (clustering, distributed networking, etc...)',
178+
icon: '/images/favicons/database_network.png',
179+
description:
180+
'We are experienced in creating and optimizing distributed computing applications that can handle high-usage loads. Database clustering, RAM caching, and algorithmic performance tweaks will have your application running smoothly even during peak usage times.',
181+
},
182+
{
183+
id: 'p2p',
184+
title: 'P2P Technology (Blockchain technology, bitcoin, bittorrent, webtorrent, etc...)',
185+
icon: '/images/favicons/network_cloud.png',
186+
description:
187+
'We are passionate about the potential applications that decentralization technology enables, and we of distributed networking protocols behind popular networks like bitcoin and bittorrent.',
188+
},
189+
{
190+
id: 'webrtc',
191+
title: 'WebRTC, Websockets, Ajax/Http, and more.',
192+
icon: '/images/favicons/ethernet.png',
193+
description:
194+
'We are passionate about the potential applications that decentralization technology enables, and we of distributed networking protocols behind popular networks like bitcoin and bittorrent.',
195+
},
196+
],
197+
},
198+
{
199+
id: 'cloud',
200+
label: 'Cloud Providers',
201+
title: 'Cloud Providers',
202+
items: [
203+
{
204+
id: 'dedi',
205+
title: 'Dedicated Servers',
206+
icon: '/images/favicons/server.png',
207+
description:
208+
'We work with several dedicated server providers in various locations throughout the world. Our team can setup your server or server cluster and help you maintain it.',
209+
},
210+
{
211+
id: 'aws',
212+
title: 'Amazon Web Services, Google Cloud, etc...',
213+
icon: '/images/favicons/aws.ico',
214+
description:
215+
'We have experience building applications on top of popular cloud computer architectures such as AWS, G Cloud, and more.',
216+
},
217+
{
218+
id: 'do',
219+
title: 'DigitalOcean, Linode, Online.net, etc..',
220+
icon: '/images/favicons/digitalocean.png',
221+
description: "We can also setup VPS's on popular providers such as DO, Linode, and more.",
222+
},
223+
],
224+
},
225+
{
226+
id: 'apis',
227+
label: "API's",
228+
title: "API's",
229+
items: [
230+
{
231+
id: 'fbgraph',
232+
title: 'Facebook Graph',
233+
icon: '/images/favicons/facebook.png',
234+
description:
235+
'We have experience building Automatic Posting and Parsing applications that connect with graph.facebook.com for data transfer. Our software can help you automate data processing coming in and out of the Facebook platform.',
236+
},
237+
{
238+
id: 'reddit',
239+
title: 'Reddit API',
240+
icon: '/images/favicons/reddit.gif',
241+
description:
242+
'We have built Reddit scrapers, posters, bots, and more. Let us build you an automated software solution for communicating with the Reddit platform.',
243+
},
244+
{
245+
id: 'gapi',
246+
title: "Google API's",
247+
icon: '/images/favicons/google.png',
248+
description:
249+
"Our developers can build custom software solutions for automated interactions with the massive trove of information available through Google's numerous API's.",
250+
},
251+
],
252+
},
253+
]

0 commit comments

Comments
 (0)