Compare commits
2 Commits
a721a71698
...
fbf4f31d92
| Author | SHA1 | Date | |
|---|---|---|---|
|
fbf4f31d92 | ||
|
|
703d17cf2f |
8
.dockerignore
Normal file
8
.dockerignore
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
.DS_Store
|
||||||
|
_site
|
||||||
|
node_modules
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
10
.eleventy.js
Normal file
10
.eleventy.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
module.exports = function(eleventyConfig) {
|
||||||
|
eleventyConfig.addPassthroughCopy("src/css");
|
||||||
|
eleventyConfig.addPassthroughCopy("src/images");
|
||||||
|
return {
|
||||||
|
dir: {
|
||||||
|
input: "src",
|
||||||
|
output: "_site"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
16
.gitignore
vendored
16
.gitignore
vendored
@@ -8,7 +8,7 @@ yarn-error.log*
|
|||||||
lerna-debug.log*
|
lerna-debug.log*
|
||||||
.pnpm-debug.log*
|
.pnpm-debug.log*
|
||||||
|
|
||||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
# Diagnostic reports (https://nodejs.org/api/report)
|
||||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
# Runtime data
|
# Runtime data
|
||||||
@@ -36,14 +36,14 @@ bower_components
|
|||||||
# node-waf configuration
|
# node-waf configuration
|
||||||
.lock-wscript
|
.lock-wscript
|
||||||
|
|
||||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
# Compiled binary addons
|
||||||
build/Release
|
build/Release
|
||||||
|
|
||||||
# Dependency directories
|
# Dependency directories
|
||||||
node_modules/
|
node_modules/
|
||||||
jspm_packages/
|
jspm_packages/
|
||||||
|
|
||||||
# Snowpack dependency directory (https://snowpack.dev/)
|
# Snowpack dependency directory
|
||||||
web_modules/
|
web_modules/
|
||||||
|
|
||||||
# TypeScript cache
|
# TypeScript cache
|
||||||
@@ -67,7 +67,7 @@ web_modules/
|
|||||||
# Optional REPL history
|
# Optional REPL history
|
||||||
.node_repl_history
|
.node_repl_history
|
||||||
|
|
||||||
# Output of 'npm pack'
|
# Output of npm pack
|
||||||
*.tgz
|
*.tgz
|
||||||
|
|
||||||
# Yarn Integrity file
|
# Yarn Integrity file
|
||||||
@@ -80,7 +80,7 @@ web_modules/
|
|||||||
.env.production.local
|
.env.production.local
|
||||||
.env.local
|
.env.local
|
||||||
|
|
||||||
# parcel-bundler cache (https://parceljs.org/)
|
# parcel-bundler cache
|
||||||
.cache
|
.cache
|
||||||
.parcel-cache
|
.parcel-cache
|
||||||
|
|
||||||
@@ -94,9 +94,6 @@ dist
|
|||||||
|
|
||||||
# Gatsby files
|
# Gatsby files
|
||||||
.cache/
|
.cache/
|
||||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
|
||||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
|
||||||
# public
|
|
||||||
|
|
||||||
# vuepress build output
|
# vuepress build output
|
||||||
.vuepress/dist
|
.vuepress/dist
|
||||||
@@ -136,3 +133,6 @@ dist
|
|||||||
.yarn/install-state.gz
|
.yarn/install-state.gz
|
||||||
.pnp.*
|
.pnp.*
|
||||||
|
|
||||||
|
# Project
|
||||||
|
_site/
|
||||||
|
.DS_Store
|
||||||
|
|||||||
17
Dockerfile
Normal file
17
Dockerfile
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
FROM oven/bun:1 AS build
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY package.json bun.lockb ./
|
||||||
|
RUN bun install --frozen-lockfile
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
RUN bun run build
|
||||||
|
|
||||||
|
FROM nginx:1.27-alpine AS runtime
|
||||||
|
|
||||||
|
COPY --from=build /app/_site /usr/share/nginx/html
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
16
package.json
Normal file
16
package.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "2pidev-landing-page",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build:css": "tailwindcss -i ./src/css/tailwind.css -o ./src/css/styles.css --minify",
|
||||||
|
"build": "bun run build:css && eleventy",
|
||||||
|
"dev": "bun run build:css && eleventy --serve --watch"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@11ty/eleventy": "^3.1.2",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^3.4.17"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
3
src/css/styles.css
Normal file
3
src/css/styles.css
Normal file
File diff suppressed because one or more lines are too long
84
src/css/tailwind.css
Normal file
84
src/css/tailwind.css
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@600;700&display=swap");
|
||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-paper text-ink antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
@apply bg-flame text-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.section-shell {
|
||||||
|
@apply mx-auto w-full max-w-6xl px-5 sm:px-6 lg:px-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
@apply text-[0.68rem] font-bold uppercase tracking-[0.16em] text-azure;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply inline-flex items-center justify-center rounded-md bg-flame px-5 py-3 text-sm font-bold text-white shadow-lg shadow-orange-500/20 transition hover:bg-ember focus:outline-none focus:ring-2 focus:ring-flame focus:ring-offset-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply inline-flex items-center justify-center rounded-md border border-line bg-white px-5 py-3 text-sm font-bold text-azure transition hover:border-azure hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-azure focus:ring-offset-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
@apply text-sm font-semibold text-slate-700 transition hover:text-azure;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
@apply rounded-lg border border-line bg-white p-5 shadow-sm transition hover:-translate-y-1 hover:shadow-soft;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mini-icon {
|
||||||
|
@apply flex h-9 w-9 items-center justify-center rounded-md text-base font-black text-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-panel {
|
||||||
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-screen {
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 20% 18%, rgba(249, 115, 22, 0.18), transparent 30%),
|
||||||
|
radial-gradient(circle at 80% 18%, rgba(0, 110, 230, 0.22), transparent 32%),
|
||||||
|
linear-gradient(135deg, #10243f 0%, #071323 52%, #132d4b 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-grid {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
|
||||||
|
background-size: 28px 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-bar {
|
||||||
|
@apply h-2 rounded-full bg-slate-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-fill {
|
||||||
|
@apply block h-full rounded-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
.case-display {
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(6, 24, 50, 0.05), rgba(6, 24, 50, 0.16)),
|
||||||
|
linear-gradient(135deg, #10243f, #071323 48%, #123965);
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
src/images/case-collage.png
Normal file
BIN
src/images/case-collage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1008 KiB |
6
src/images/favicon.svg
Normal file
6
src/images/favicon.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
|
||||||
|
<path d="M29 35c15-21 49-29 74-9 18 15 23 41 10 62-12 21-36 30-59 24 20 2 39-7 49-24 12-19 7-43-11-56-21-16-50-10-63 3Z" fill="#f97316"/>
|
||||||
|
<path d="M99 94c-15 21-49 29-74 9C7 88 2 62 15 41c12-21 36-30 59-24-20-2-39 7-49 24-12 19-7 43 11 56 21 16 50 10 63-3Z" fill="#0079ff"/>
|
||||||
|
<text x="29" y="83" font-family="Arial, sans-serif" font-size="58" font-weight="800" fill="#f97316">2</text>
|
||||||
|
<path d="M65 84c5-37 8-44 18-44 9 0 13 8 13 20h-7c0-7-2-10-6-10-6 0-8 8-10 34h-8Z" fill="#0079ff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 562 B |
BIN
src/images/hero-dashboard.png
Normal file
BIN
src/images/hero-dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
13
src/images/logo.svg
Normal file
13
src/images/logo.svg
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg version="1.0" width="364.77386pt" height="371.71338pt" viewBox="0 0 364.77386 371.71338" preserveAspectRatio="xMidYMid" id="svg5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(0.1,0,0,-0.1,-101.29014,527.91162)" fill="#ff7f2a" stroke="none">
|
||||||
|
<path d="m 2640,5268 c -315,-51 -458,-99 -682,-231 -304,-180 -543,-439 -699,-760 -62,-127 -61,-154 1,-34 194,380 603,699 1045,816 42,11 61,14 190,37 124,21 431,13 565,-15 495,-104 901,-396 1150,-826 28,-48 50,-90 50,-93 0,-4 9,-24 20,-44 41,-78 100,-263 125,-398 33,-177 31,-476 -5,-640 -47,-218 -119,-391 -238,-571 -160,-244 -337,-414 -572,-552 -277,-162 -548,-233 -885,-231 -191,1 -123,-15 97,-23 111,-4 194,-2 245,6 43,7 92,15 108,17 122,19 317,77 437,129 375,165 702,475 876,830 62,125 69,144 102,243 144,446 116,917 -81,1332 -72,151 -187,324 -293,439 -163,175 -327,297 -541,401 -264,127 -514,182 -810,179 -82,-1 -175,-6 -205,-11 z" />
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.0995434,0.00954526,0.00954526,0.0995434,431.37848,-182.09797)" fill="#0079ff" stroke="none">
|
||||||
|
<path d="m 2640,5268 c -315,-51 -458,-99 -682,-231 -304,-180 -543,-439 -699,-760 -62,-127 -61,-154 1,-34 194,380 603,699 1045,816 42,11 61,14 190,37 124,21 431,13 565,-15 495,-104 901,-396 1150,-826 28,-48 50,-90 50,-93 0,-4 9,-24 20,-44 41,-78 100,-263 125,-398 33,-177 31,-476 -5,-640 -47,-218 -119,-391 -238,-571 -160,-244 -337,-414 -572,-552 -277,-162 -548,-233 -885,-231 -191,1 -123,-15 97,-23 111,-4 194,-2 245,6 43,7 92,15 108,17 122,19 317,77 437,129 375,165 702,475 876,830 62,125 69,144 102,243 144,446 116,917 -81,1332 -72,151 -187,324 -293,439 -163,175 -327,297 -541,401 -264,127 -514,182 -810,179 -82,-1 -175,-6 -205,-11 z" />
|
||||||
|
</g>
|
||||||
|
<text xml:space="preserve" style="font-weight:600;font-size:241.212px;font-family:Rajdhani;fill:#ff7f2a;fill-rule:evenodd;stroke-width:20.1011" x="44.012177" y="278.01367" transform="scale(1.0552555,0.9476378)">2</text>
|
||||||
|
<g style="fill:#0079ff;fill-rule:evenodd" transform="matrix(0.28537283,0,0,0.29925605,165.05807,115.98893)">
|
||||||
|
<path fill-rule="nonzero" d="m 0,150.27 18.66,1.39 C 38,129.78 45.6,65.06 159.61,77.72 155.47,355.03 33.86,384.28 41.46,441.17 c 2.76,32.24 28.33,52.05 55.96,53.2 87.3,-2.99 83.38,-120.68 110.56,-417.34 H 320.6 c -5.98,104.57 -22.34,209.13 -24.18,311.63 1.38,68.17 42.84,104.56 97.43,105.02 89.82,3 118.15,-101.8 118.15,-146.48 h -19.35 c -1.84,36.85 -19.57,63.34 -57.35,64.95 C 332.35,413.53 389.01,231.12 389.7,78.41 L 512,79.11 511.31,1.03 C 2.98,-1.44 67.5,-11.4 0,150.27 Z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/images/results-dashboard.png
Normal file
BIN
src/images/results-dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
7
src/images/tech-aws.svg
Normal file
7
src/images/tech-aws.svg
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" role="img" aria-labelledby="aws-title">
|
||||||
|
<title id="aws-title">AWS</title>
|
||||||
|
<rect width="96" height="96" rx="20" fill="#232f3e"/>
|
||||||
|
<path fill="#fff" d="M25.8 55.5h-7.2l-1.4-5.1H8.7l-1.4 5.1H0L9.1 26h7.7l9 29.5Zm-10-10.8-2.1-7.8c-.2-.6-.4-1.7-.7-3.4h-.1c-.2 1.4-.4 2.6-.7 3.5l-2.1 7.7h5.7Zm42.6 10.8h-7.5L46 36.6c-.2-.8-.4-2.2-.6-4.1h-.1c-.1 1.4-.3 2.8-.7 4.1l-5 18.9h-7.8L24 26h7.4l4.2 19.6c.2 1 .4 2.4.5 4.1h.1c.1-1.3.4-2.7.8-4.2L42.3 26h7.2l4.8 19.8c.2.9.4 2.2.6 3.8h.1c.1-1.2.3-2.5.6-3.9L60 26h6.8l-8.4 29.5Zm9.6-1.1v-7c1.4 1.2 3 2.1 4.8 2.7 1.8.6 3.5.9 5.1.9 1.9 0 3.3-.3 4.2-.9.9-.6 1.4-1.4 1.4-2.4 0-.7-.3-1.3-.8-1.8-.5-.5-1.2-.9-2-1.3-.8-.4-2.1-.8-3.9-1.5-3-1.1-5.2-2.4-6.6-4-1.4-1.6-2.1-3.5-2.1-5.8 0-3 1.2-5.4 3.6-7 2.4-1.7 5.5-2.5 9.3-2.5 3.6 0 6.4.5 8.5 1.6v6.7c-2.3-1.5-5-2.3-8.1-2.3-1.6 0-2.9.3-3.8.8-.9.5-1.4 1.3-1.4 2.3 0 1 .5 1.8 1.5 2.4 1 .6 2.8 1.3 5.2 2.2 3.2 1.1 5.5 2.4 7 4 1.5 1.6 2.2 3.7 2.2 6.1 0 3.2-1.2 5.6-3.6 7.2-2.4 1.6-5.8 2.4-10.1 2.4-4.3 0-7.7-.7-10.4-2.1Z" transform="translate(2 5) scale(.92)"/>
|
||||||
|
<path fill="#ff9900" d="M25 70c13.5 7.6 32 8.1 46.1 1.2 2.1-1 3.8 1.7 1.9 3.1-13.2 9.8-34.4 10.9-50.2 2.1-2.2-1.2-.1-7.7 2.2-6.4Z"/>
|
||||||
|
<path fill="#ff9900" d="M69.7 66.6c2.7-.3 8.6-1 9.7 1.2 1.1 2.2-1.2 7.8-2.2 10.3-.3.8-1.4.4-1.3-.3.4-2.5 1.2-6.5.4-7.5-.8-1-4.8-.8-7.3-.7-.8 0-1-.9-.3-1.4.3-.2.6-.4 1-.5Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
4
src/images/tech-dotnet.svg
Normal file
4
src/images/tech-dotnet.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="none">
|
||||||
|
<rect width="512" height="512" fill="#512bd4" rx="77" ry="77" style="stroke-width:1.12281"/>
|
||||||
|
<path fill="#fff" d="M91.255 327.11q-5.43 0-9.232-3.618-3.801-3.712-3.801-8.815 0-5.197 3.801-8.909t9.232-3.712q5.52 0 9.322 3.712 3.892 3.712 3.892 8.909 0 5.103-3.892 8.815-3.801 3.62-9.322 3.619m144.722-2.041h-23.532l-61.996-97.807a44 44 0 0 1-3.891-7.703h-.544q.725 4.27.725 18.28v87.23h-20.817V192h25.07l59.915 95.487q3.8 5.94 4.888 8.166h.361q-.905-5.289-.905-17.91V192h20.726zm101.369 0H264.49V192h69.96v18.745h-48.42v37.675h44.62v18.652h-44.62v39.345h51.316zM440.89 210.745H403.6V325.07h-21.54V210.745h-37.198V192h96.027z" style="stroke-width:1.12281"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 748 B |
1
src/images/tech-postgres.svg
Normal file
1
src/images/tech-postgres.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 25.6 25.6" width="64"><style><![CDATA[.B{stroke-linecap:round}.C{stroke-linejoin:round}.D{stroke-linejoin:miter}.E{stroke-width:.716}]]></style><g fill="none" stroke="#fff"><path d="M18.983 18.636c.163-1.357.114-1.555 1.124-1.336l.257.023c.777.035 1.793-.125 2.4-.402 1.285-.596 2.047-1.592.78-1.33-2.89.596-3.1-.383-3.1-.383 3.053-4.53 4.33-10.28 3.227-11.687-3.004-3.84-8.205-2.024-8.292-1.976l-.028.005c-.57-.12-1.2-.19-1.93-.2-1.308-.02-2.3.343-3.054.914 0 0-9.277-3.822-8.846 4.807.092 1.836 2.63 13.9 5.66 10.25C8.29 15.987 9.36 14.86 9.36 14.86c.53.353 1.167.533 1.834.468l.052-.044a2.01 2.01 0 0 0 .021.518c-.78.872-.55 1.025-2.11 1.346-1.578.325-.65.904-.046 1.056.734.184 2.432.444 3.58-1.162l-.046.183c.306.245.285 1.76.33 2.842s.116 2.093.337 2.688.48 2.13 2.53 1.7c1.713-.367 3.023-.896 3.143-5.81" fill="#000" stroke="#000" stroke-linecap="butt" stroke-width="2.149" class="D"/><path d="M23.535 15.6c-2.89.596-3.1-.383-3.1-.383 3.053-4.53 4.33-10.28 3.228-11.687-3.004-3.84-8.205-2.023-8.292-1.976l-.028.005a10.31 10.31 0 0 0-1.929-.201c-1.308-.02-2.3.343-3.054.914 0 0-9.278-3.822-8.846 4.807.092 1.836 2.63 13.9 5.66 10.25C8.29 15.987 9.36 14.86 9.36 14.86c.53.353 1.167.533 1.834.468l.052-.044a2.02 2.02 0 0 0 .021.518c-.78.872-.55 1.025-2.11 1.346-1.578.325-.65.904-.046 1.056.734.184 2.432.444 3.58-1.162l-.046.183c.306.245.52 1.593.484 2.815s-.06 2.06.18 2.716.48 2.13 2.53 1.7c1.713-.367 2.6-1.32 2.725-2.906.088-1.128.286-.962.3-1.97l.16-.478c.183-1.53.03-2.023 1.085-1.793l.257.023c.777.035 1.794-.125 2.39-.402 1.285-.596 2.047-1.592.78-1.33z" fill="#336791" stroke="none"/><g class="E"><g class="B"><path d="M12.814 16.467c-.08 2.846.02 5.712.298 6.4s.875 2.05 2.926 1.612c1.713-.367 2.337-1.078 2.607-2.647l.633-5.017M10.356 2.2S1.072-1.596 1.504 7.033c.092 1.836 2.63 13.9 5.66 10.25C8.27 15.95 9.27 14.907 9.27 14.907m6.1-13.4c-.32.1 5.164-2.005 8.282 1.978 1.1 1.407-.175 7.157-3.228 11.687" class="C"/><path d="M20.425 15.17s.2.98 3.1.382c1.267-.262.504.734-.78 1.33-1.054.49-3.418.615-3.457-.06-.1-1.745 1.244-1.215 1.147-1.652-.088-.394-.69-.78-1.086-1.744-.347-.84-4.76-7.29 1.224-6.333.22-.045-1.56-5.7-7.16-5.782S7.99 8.196 7.99 8.196" stroke-linejoin="bevel"/></g><g class="C"><path d="M11.247 15.768c-.78.872-.55 1.025-2.11 1.346-1.578.325-.65.904-.046 1.056.734.184 2.432.444 3.58-1.163.35-.49-.002-1.27-.482-1.468-.232-.096-.542-.216-.94.23z"/><path d="M11.196 15.753c-.08-.513.168-1.122.433-1.836.398-1.07 1.316-2.14.582-5.537-.547-2.53-4.22-.527-4.22-.184s.166 1.74-.06 3.365c-.297 2.122 1.35 3.916 3.246 3.733" class="B"/></g></g><g fill="#fff" class="D"><path d="M10.322 8.145c-.017.117.215.43.516.472s.558-.202.575-.32-.215-.246-.516-.288-.56.02-.575.136z" stroke-width=".239"/><path d="M19.486 7.906c.016.117-.215.43-.516.472s-.56-.202-.575-.32.215-.246.516-.288.56.02.575.136z" stroke-width=".119"/></g><path d="M20.562 7.095c.05.92-.198 1.545-.23 2.524-.046 1.422.678 3.05-.413 4.68" class="B C E"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
10
src/images/tech-react.svg
Normal file
10
src/images/tech-react.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" role="img" aria-labelledby="react-title">
|
||||||
|
<title id="react-title">React</title>
|
||||||
|
<rect width="96" height="96" rx="20" fill="#0f172a"/>
|
||||||
|
<g fill="none" stroke="#61dafb" stroke-width="4">
|
||||||
|
<ellipse cx="48" cy="48" rx="33" ry="12"/>
|
||||||
|
<ellipse cx="48" cy="48" rx="33" ry="12" transform="rotate(60 48 48)"/>
|
||||||
|
<ellipse cx="48" cy="48" rx="33" ry="12" transform="rotate(120 48 48)"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="48" cy="48" r="6.5" fill="#61dafb"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 515 B |
60
src/images/tech-typescript.svg
Normal file
60
src/images/tech-typescript.svg
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
fill="none"
|
||||||
|
height="64"
|
||||||
|
viewBox="0 0 64 64"
|
||||||
|
width="64"
|
||||||
|
version="1.1"
|
||||||
|
id="svg2"
|
||||||
|
sodipodi:docname="ts-icon.svg"
|
||||||
|
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview2"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:zoom="1.3867188"
|
||||||
|
inkscape:cx="256"
|
||||||
|
inkscape:cy="256"
|
||||||
|
inkscape:window-width="1392"
|
||||||
|
inkscape:window-height="997"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="25"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg2" />
|
||||||
|
<rect
|
||||||
|
fill="#3178c6"
|
||||||
|
height="64"
|
||||||
|
rx="6.25"
|
||||||
|
width="64"
|
||||||
|
id="rect1"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
style="stroke-width:0.125" />
|
||||||
|
<rect
|
||||||
|
fill="#3178c6"
|
||||||
|
height="64"
|
||||||
|
rx="6.25"
|
||||||
|
width="64"
|
||||||
|
id="rect2"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
style="stroke-width:0.125" />
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="m 39.617375,50.928 v 6.257625 c 1.01725,0.5215 2.220375,0.9125 3.609375,1.17325 1.389,0.26075 2.852875,0.391125 4.391875,0.391125 1.499875,0 2.924625,-0.143375 4.2745,-0.43025 1.349875,-0.28675 2.5335,-0.759375 3.55075,-1.41775 1.01725,-0.65825 1.822625,-1.51875 2.416,-2.58125 C 58.45325,53.25825 58.75,51.944875 58.75,50.3805 58.75,49.24625 58.5805,48.25225 58.241375,47.398375 57.90225,46.5445 57.41325,45.785125 56.774125,45.12025 56.135125,44.455375 55.368875,43.858875 54.4755,43.330875 53.582125,42.802875 52.574625,42.30425 51.453,41.835 50.631375,41.496 49.8945,41.166875 49.242375,40.8475 48.59025,40.528 48.036,40.202125 47.5795,39.86975 c -0.4565,-0.3325 -0.808625,-0.6845 -1.056375,-1.056 -0.24775,-0.371625 -0.37175,-0.792 -0.37175,-1.261375 0,-0.430125 0.110875,-0.818 0.332625,-1.1635 0.22175,-0.3455 0.53475,-0.642 0.939,-0.88975 0.404375,-0.247625 0.899875,-0.44 1.48675,-0.576875 0.587,-0.136875 1.239,-0.20525 1.956375,-0.20525 0.521625,0 1.072625,0.03912 1.653,0.11725 0.580375,0.07825 1.164,0.198875 1.751,0.36175 0.586875,0.163 1.157375,0.368375 1.71175,0.616 0.55425,0.24775 1.066125,0.5345 1.535625,0.8605 v -5.847 C 56.5655,30.4605 55.525375,30.19 54.39725,30.014 53.269125,29.838 51.974625,29.75 50.514,29.75 c -1.486875,0 -2.895375,0.15975 -4.225625,0.479125 -1.33025,0.319375 -2.50075,0.818 -3.511625,1.495875 -1.01075,0.678 -1.8095,1.541625 -2.396375,2.591125 C 39.7935,35.3655 39.5,36.62025 39.5,38.080375 c 0,1.86425 0.538,3.45475 1.614,4.7715 1.075875,1.316625 2.709375,2.43125 4.9005,3.343875 0.86075,0.352 1.662875,0.697375 2.40625,1.036375 0.743375,0.339 1.38575,0.691 1.926875,1.056 0.54125,0.365 0.968375,0.762625 1.2815,1.192875 0.313,0.430125 0.4695,0.919 0.4695,1.466625 0,0.404125 -0.09788,0.778875 -0.2935,1.124375 -0.195625,0.3455 -0.492375,0.64525 -0.890125,0.8995 -0.39775,0.25425 -0.893375,0.453 -1.48675,0.596375 -0.5935,0.1435 -1.287875,0.215125 -2.0835,0.215125 -1.356375,0 -2.699625,-0.237875 -4.03,-0.71375 C 41.9845,52.5935 40.752,51.87975 39.617375,50.928 Z M 29.0975,35.51025 H 37.125 V 30.375 H 14.75 v 5.13525 h 7.98825 V 58.375 h 6.35925 z"
|
||||||
|
fill="#ffffff"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
id="path2"
|
||||||
|
style="stroke-width:0.125" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/images/testimonial-alicia.png
Normal file
BIN
src/images/testimonial-alicia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
src/images/testimonial-ricardo.png
Normal file
BIN
src/images/testimonial-ricardo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
src/images/testimonial-sofia.png
Normal file
BIN
src/images/testimonial-sofia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
346
src/index.njk
Normal file
346
src/index.njk
Normal file
@@ -0,0 +1,346 @@
|
|||||||
|
---
|
||||||
|
layout: false
|
||||||
|
title: 2piDev | Software a medida
|
||||||
|
description: Soluciones digitales de élite para empresas que necesitan operar, crecer y vender con sistemas a medida.
|
||||||
|
---
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="{{ description }}">
|
||||||
|
<title>{{ title }}</title>
|
||||||
|
<link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="stylesheet" href="/css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="sticky top-0 z-50 border-b border-line/70 bg-white/92 backdrop-blur">
|
||||||
|
<nav class="section-shell flex h-16 items-center justify-between gap-5">
|
||||||
|
<a href="#inicio" class="flex items-center gap-3" aria-label="2piDev inicio">
|
||||||
|
<img src="/images/logo.svg" alt="" class="h-10 w-10">
|
||||||
|
<span class="font-display text-xl font-bold text-ink">2piDev</span>
|
||||||
|
</a>
|
||||||
|
<div class="hidden items-center gap-8 md:flex">
|
||||||
|
<a href="#servicios" class="nav-link">Servicios</a>
|
||||||
|
<a href="#soluciones" class="nav-link">Soluciones</a>
|
||||||
|
<a href="#tecnologias" class="nav-link">Tecnología</a>
|
||||||
|
<a href="#contacto" class="nav-link">Contacto</a>
|
||||||
|
</div>
|
||||||
|
<a href="#contacto" class="btn-primary hidden px-4 py-2 text-xs sm:inline-flex">Agendar consulta</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="inicio">
|
||||||
|
<section class="overflow-hidden bg-[linear-gradient(115deg,#fff4ec_0%,#f7f8fc_43%,#eef6ff_100%)] pb-20 pt-14 lg:pb-28 lg:pt-20">
|
||||||
|
<div class="section-shell grid items-center gap-12 lg:grid-cols-[0.95fr_1.05fr]">
|
||||||
|
<div>
|
||||||
|
<p class="mb-5 inline-flex items-center gap-2 rounded-full border border-orange-200 bg-white/70 px-3 py-1.5 text-xs font-bold uppercase tracking-[0.14em] text-ember">
|
||||||
|
<span class="h-2 w-2 rounded-full bg-flame"></span>
|
||||||
|
Software de alto rendimiento
|
||||||
|
</p>
|
||||||
|
<h1 class="max-w-2xl font-display text-5xl font-bold leading-[0.95] text-ink sm:text-6xl lg:text-7xl">
|
||||||
|
Software que impulsa el crecimiento de tu empresa
|
||||||
|
</h1>
|
||||||
|
<p class="mt-7 max-w-xl text-lg leading-8 text-muted">
|
||||||
|
Diseñamos y desarrollamos soluciones tecnológicas personalizadas que automatizan procesos y te otorgan una ventaja competitiva real en el mercado actual.
|
||||||
|
</p>
|
||||||
|
<div class="mt-8 flex flex-col gap-3 sm:flex-row">
|
||||||
|
<a href="#contacto" class="btn-primary">Agendar una consulta</a>
|
||||||
|
<a href="#casos" class="btn-secondary">Ver soluciones</a>
|
||||||
|
</div>
|
||||||
|
<div class="mt-9 grid max-w-xl grid-cols-1 gap-3 text-sm font-semibold text-slate-700 sm:grid-cols-2">
|
||||||
|
<span class="flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-flame"></span>Proyectos a medida</span>
|
||||||
|
<span class="flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-azure"></span>Arquitecturas escalables</span>
|
||||||
|
<span class="flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-azure"></span>Tecnologías modernas</span>
|
||||||
|
<span class="flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-flame"></span>Enfoque de negocio</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative mx-auto w-full max-w-2xl">
|
||||||
|
<div class="overflow-hidden rounded-xl border border-white/60 bg-slate-900 shadow-panel">
|
||||||
|
<img src="/images/hero-dashboard.png" alt="Dashboard empresarial premium en una pantalla de oficina" class="aspect-[16/9] h-full w-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="absolute -bottom-8 left-6 rounded-lg border border-line bg-white p-5 shadow-soft sm:left-10">
|
||||||
|
<p class="text-xs font-bold uppercase tracking-wide text-muted">Rendimiento operativo</p>
|
||||||
|
<p class="mt-1 text-2xl font-black text-azure">+94%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20">
|
||||||
|
<div class="section-shell">
|
||||||
|
<div class="mx-auto max-w-3xl text-center">
|
||||||
|
<h2 class="font-display text-4xl font-bold leading-tight text-ink sm:text-5xl">Muchas empresas crecen más lento por culpa de sus sistemas</h2>
|
||||||
|
<p class="mt-4 text-muted">Identificamos cuellos de botella tecnológicos que están frenando tu escalabilidad.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{% set pains = [
|
||||||
|
["P", "Procesos manuales", "Pérdida de tiempo en tareas repetitivas que podrían estar automatizadas.", "bg-orange-600"],
|
||||||
|
["I", "Información fragmentada", "Datos dispersos en diferentes hojas de cálculo y herramientas aisladas.", "bg-blue-600"],
|
||||||
|
["S", "Sistemas legados", "Software obsoleto que no permite integraciones ni nuevas funcionalidades.", "bg-orange-600"],
|
||||||
|
["A", "Falta de automatización", "Dependencia excesiva de la intervención humana para flujos críticos.", "bg-blue-600"],
|
||||||
|
["M", "Visibilidad de métricas", "Imposibilidad de tomar decisiones basadas en datos en tiempo real.", "bg-orange-600"],
|
||||||
|
["E", "Software estancado", "Herramientas que no se adaptan cuando el negocio necesita crecer.", "bg-blue-600"]
|
||||||
|
] %}
|
||||||
|
{% for item in pains %}
|
||||||
|
<article class="feature-card">
|
||||||
|
<div class="mini-icon {{ item[3] }}">{{ item[0] }}</div>
|
||||||
|
<h3 class="mt-4 text-lg font-bold text-ink">{{ item[1] }}</h3>
|
||||||
|
<p class="mt-2 text-sm leading-6 text-muted">{{ item[2] }}</p>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="servicios" class="bg-white py-20">
|
||||||
|
<div class="section-shell">
|
||||||
|
<div class="flex flex-col justify-between gap-5 sm:flex-row sm:items-end">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Nuestras capacidades</p>
|
||||||
|
<h2 class="mt-2 font-display text-4xl font-bold text-ink sm:text-5xl">Soluciones Digitales de Élite</h2>
|
||||||
|
</div>
|
||||||
|
<a href="#contacto" class="text-sm font-bold text-flame hover:text-ember">Explorar portfolio completo</a>
|
||||||
|
</div>
|
||||||
|
<div id="soluciones" class="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{% set services = [
|
||||||
|
["</>", "Custom Software", "Desarrollo desde cero adaptado 100% a las reglas de tu negocio y necesidades específicas.", "bg-orange-600"],
|
||||||
|
["W", "Enterprise Web Apps", "Plataformas robustas, seguras y escalables accesibles desde cualquier navegador.", "bg-blue-600"],
|
||||||
|
["M", "Mobile Apps", "Experiencias nativas e híbridas diseñadas para detallar al usuario final en iOS y Android.", "bg-slate-900"],
|
||||||
|
["O", "Process Automation", "Eliminamos la fricción operativa mediante flujos de trabajo inteligentes y automatizados.", "bg-orange-600"],
|
||||||
|
["A", "APIs & Integrations", "Conectamos tus herramientas para que tus datos fluyan sin interrupciones entre sistemas.", "bg-blue-600"],
|
||||||
|
["C", "IT Consulting", "Acompañamiento estratégico para definir tu roadmap tecnológico y arquitectura.", "bg-slate-900"]
|
||||||
|
] %}
|
||||||
|
{% for item in services %}
|
||||||
|
<article class="feature-card min-h-52">
|
||||||
|
<div class="mini-icon {{ item[3] }}">{{ item[0] }}</div>
|
||||||
|
<h3 class="mt-5 text-xl font-bold text-ink">{{ item[1] }}</h3>
|
||||||
|
<p class="mt-3 text-sm leading-6 text-muted">{{ item[2] }}</p>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="relative overflow-hidden bg-navy py-20 text-white">
|
||||||
|
<div class="absolute inset-0">
|
||||||
|
<img src="/images/results-dashboard.png" alt="" class="h-full w-full object-cover opacity-35">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-navy via-navy/90 to-navy/55"></div>
|
||||||
|
</div>
|
||||||
|
<div class="section-shell relative grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-display text-4xl font-bold leading-tight sm:text-5xl">Resultados que se traducen en valor real</h2>
|
||||||
|
<p class="mt-5 max-w-xl text-blue-100">Nuestras implementaciones no solo resuelven procesos técnicos, sino que impactan directamente en el balance final de tu empresa.</p>
|
||||||
|
<div class="mt-9 grid grid-cols-2 gap-5">
|
||||||
|
<div class="border-l-2 border-flame pl-4">
|
||||||
|
<p class="text-4xl font-black text-flame">+40%</p>
|
||||||
|
<p class="mt-1 text-xs font-bold uppercase tracking-wide text-blue-100">Eficiencia operativa</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-l-2 border-azure pl-4">
|
||||||
|
<p class="text-4xl font-black text-azure">-60%</p>
|
||||||
|
<p class="mt-1 text-xs font-bold uppercase tracking-wide text-blue-100">Tareas manuales</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-l-2 border-flame pl-4">
|
||||||
|
<p class="text-4xl font-black text-white">24/7</p>
|
||||||
|
<p class="mt-1 text-xs font-bold uppercase tracking-wide text-blue-100">Disponibilidad</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-l-2 border-azure pl-4">
|
||||||
|
<p class="text-4xl font-black text-white">100%</p>
|
||||||
|
<p class="mt-1 text-xs font-bold uppercase tracking-wide text-blue-100">Escalabilidad</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="glass-panel rounded-lg p-6">
|
||||||
|
<div class="mb-6 flex items-center justify-between">
|
||||||
|
<h3 class="text-xl font-bold">Performance global</h3>
|
||||||
|
<span class="text-flame">+8%</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-5">
|
||||||
|
<div>
|
||||||
|
<div class="mb-2 flex justify-between text-sm font-semibold"><span>Automatización de procesos</span><span>92%</span></div>
|
||||||
|
<div class="metric-bar"><span class="metric-fill w-[92%] bg-flame"></span></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="mb-2 flex justify-between text-sm font-semibold"><span>Reducción de latencia</span><span>76%</span></div>
|
||||||
|
<div class="metric-bar"><span class="metric-fill w-[76%] bg-azure"></span></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="mb-2 flex justify-between text-sm font-semibold"><span>Integración de datos</span><span>100%</span></div>
|
||||||
|
<div class="metric-bar"><span class="metric-fill w-full bg-azure"></span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20">
|
||||||
|
<div class="section-shell">
|
||||||
|
<div class="text-center">
|
||||||
|
<h2 class="font-display text-4xl font-bold text-ink sm:text-5xl">Nuestro Método de Trabajo</h2>
|
||||||
|
<p class="mt-3 text-muted">Un proceso riguroso diseñado para el éxito del proyecto.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{% set steps = [
|
||||||
|
["Diagnóstico", "Relevamos procesos, sistemas actuales y objetivos de negocio para detectar oportunidades concretas de mejora."],
|
||||||
|
["Estrategia", "Definimos alcance, prioridades técnicas y roadmap para construir una solución viable, escalable y medible."],
|
||||||
|
["Prototipo UX/UI", "Diseñamos flujos e interfaces iniciales para validar la experiencia antes de avanzar al desarrollo completo."],
|
||||||
|
["Desarrollo", "Construimos el software con entregas iterativas, código mantenible e integración continua con tus herramientas."],
|
||||||
|
["Lanzamiento", "Implementamos la solución en producción, acompañando la adopción del equipo y ajustando los últimos detalles."],
|
||||||
|
["Evolución", "Medimos resultados, incorporamos mejoras y escalamos la plataforma según nuevas necesidades del negocio."]
|
||||||
|
] %}
|
||||||
|
{% for step in steps %}
|
||||||
|
<div class="rounded-lg border border-line bg-white p-6 shadow-sm">
|
||||||
|
<p class="font-display text-2xl font-bold text-flame/50">0{{ loop.index }}</p>
|
||||||
|
<h3 class="mt-3 text-lg font-bold text-ink">{{ step[0] }}</h3>
|
||||||
|
<p class="mt-3 text-sm leading-6 text-muted">{{ step[1] }}</p>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="tecnologias" class="border-y border-line bg-[#eef2fa] py-10">
|
||||||
|
<div class="section-shell">
|
||||||
|
<p class="text-center text-xs font-bold uppercase tracking-[0.2em] text-muted">Stack tecnológico premium</p>
|
||||||
|
<div class="mt-8 grid grid-cols-2 gap-4 text-center sm:grid-cols-3 lg:grid-cols-5">
|
||||||
|
{% set techs = [
|
||||||
|
[".NET", "tech-dotnet.svg"],
|
||||||
|
["TypeScript", "tech-typescript.svg"],
|
||||||
|
["React", "tech-react.svg"],
|
||||||
|
["Postgres", "tech-postgres.svg"],
|
||||||
|
["AWS", "tech-aws.svg"]
|
||||||
|
] %}
|
||||||
|
{% for tech in techs %}
|
||||||
|
<div class="{% if tech[0] == 'AWS' %}hidden sm:flex{% else %}flex{% endif %} min-h-32 flex-col items-center justify-center rounded-lg border border-white/70 bg-white/70 px-4 py-5 shadow-sm">
|
||||||
|
<img src="/images/{{ tech[1] }}" alt="Logo {{ tech[0] }}" class="h-12 w-12 object-contain">
|
||||||
|
<p class="mt-3 font-display text-xl font-bold text-slate-600">{{ tech[0] }}</p>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="casos" class="bg-white py-20">
|
||||||
|
<div class="section-shell">
|
||||||
|
<div class="text-center">
|
||||||
|
<h2 class="font-display text-4xl font-bold text-ink sm:text-5xl">Casos de Éxito</h2>
|
||||||
|
<p class="mt-3 text-muted">Soluciones reales implementadas para empresas líderes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-10 grid gap-6 lg:grid-cols-3">
|
||||||
|
{% set cases = [
|
||||||
|
["Industria", "ERP Empresarial a Medida", "Centralización de inventario y facturación para una distribuidora nacional.", "object-left"],
|
||||||
|
["Logística", "Plataforma SaaS de Tracking", "Sistema en tiempo real para el seguimiento de flotas internacionales.", "object-center"],
|
||||||
|
["Retail", "Automatización Operativa", "Workflow inteligente que redujo los tiempos de entrega en un 35%.", "object-right"]
|
||||||
|
] %}
|
||||||
|
{% for item in cases %}
|
||||||
|
<article class="overflow-hidden rounded-lg border border-line bg-white shadow-sm">
|
||||||
|
<div class="h-48 overflow-hidden bg-navy">
|
||||||
|
<img src="/images/case-collage.png" alt="Interfaces digitales modernas para logística, analítica y arquitectura cloud" class="h-full w-full object-cover {{ item[3] }}">
|
||||||
|
</div>
|
||||||
|
<div class="p-5">
|
||||||
|
<p class="text-xs font-bold uppercase tracking-wide text-flame">{{ item[0] }}</p>
|
||||||
|
<h3 class="mt-2 text-xl font-bold text-ink">{{ item[1] }}</h3>
|
||||||
|
<p class="mt-3 text-sm leading-6 text-muted">{{ item[2] }}</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bg-[#f0f4ff] py-14">
|
||||||
|
<div class="section-shell grid gap-5 md:grid-cols-3">
|
||||||
|
{% set quotes = [
|
||||||
|
["Ricardo Méndez", "CEO, Logística Global", "2piDev transformó nuestro sistema de turnos. Pasamos de hojas de cálculo a un software integrado que nos ahorra horas diarias.", "testimonial-alicia.png"],
|
||||||
|
["Sofía Larrea", "Directora Ops, TextilNova", "La capacidad técnica del equipo es impresionante, pero su entendimiento del negocio fue lo que realmente marcó diferencia.", "testimonial-sofia.png"],
|
||||||
|
["Alicia Vega", "CTO, Fintech Base", "Escalabilidad y seguridad desde el primer día. La nube tecnológica en el centro nos permitió crecer sin sobresaltos.", "testimonial-ricardo.png"]
|
||||||
|
] %}
|
||||||
|
{% for item in quotes %}
|
||||||
|
<figure class="rounded-lg border border-line bg-white p-6 shadow-sm">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<img src="/images/{{ item[3] }}" alt="Retrato de {{ item[0] }}" class="h-12 w-12 rounded-full object-cover ring-2 ring-blue-100">
|
||||||
|
<div>
|
||||||
|
<figcaption class="font-bold text-ink">{{ item[0] }}</figcaption>
|
||||||
|
<p class="text-xs text-muted">{{ item[1] }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="font-display text-4xl font-bold text-blue-200">99</span>
|
||||||
|
</div>
|
||||||
|
<blockquote class="mt-5 text-sm leading-6 text-slate-700">"{{ item[2] }}"</blockquote>
|
||||||
|
</figure>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contacto" class="bg-[linear-gradient(115deg,#9a3300_0%,#f97316_38%,#061832_39%,#062957_100%)] py-20 text-white">
|
||||||
|
<div class="section-shell grid gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-display text-5xl font-bold leading-[0.95] sm:text-6xl">Tu próximo sistema puede convertirse en una ventaja competitiva</h2>
|
||||||
|
<p class="mt-6 max-w-xl text-orange-50">Hablemos sobre cómo la tecnología puede acelerar tus objetivos de negocio hoy mismo.</p>
|
||||||
|
<div class="mt-8 space-y-3 text-sm font-bold">
|
||||||
|
<p class="flex items-center gap-3"><span class="h-2.5 w-2.5 rounded-full bg-white"></span>hola@2pidev.com</p>
|
||||||
|
<p class="flex items-center gap-3"><span class="h-2.5 w-2.5 rounded-full bg-white"></span>Sede Central, Hub de Innovación Digital</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form class="rounded-xl border border-white/20 bg-white p-6 text-ink shadow-panel">
|
||||||
|
<div class="grid gap-4 sm:grid-cols-2">
|
||||||
|
<label class="text-sm font-bold">Nombre
|
||||||
|
<input class="mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="text" name="nombre" placeholder="Juan Pérez">
|
||||||
|
</label>
|
||||||
|
<label class="text-sm font-bold">Empresa
|
||||||
|
<input class="mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="text" name="empresa" placeholder="Nombre de tu empresa">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label class="mt-4 block text-sm font-bold">Email corporativo
|
||||||
|
<input class="mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="email" name="email" placeholder="juan@empresa.com">
|
||||||
|
</label>
|
||||||
|
<label class="mt-4 block text-sm font-bold">Mensaje
|
||||||
|
<textarea class="mt-2 min-h-32 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" name="mensaje" placeholder="Cuéntanos un poco sobre tu proyecto..."></textarea>
|
||||||
|
</label>
|
||||||
|
<button class="btn-primary mt-5 w-full" type="submit">Enviar mensaje</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="bg-white py-12">
|
||||||
|
<div class="section-shell grid gap-8 md:grid-cols-4">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<img src="/images/logo.svg" alt="" class="h-10 w-10">
|
||||||
|
<span class="font-display text-xl font-bold">2piDev</span>
|
||||||
|
</div>
|
||||||
|
<p class="mt-4 text-sm leading-6 text-muted">Engineering elegance. Software de alto rendimiento diseñado para el futuro corporativo.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-black uppercase tracking-wide text-ink">Compañía</h3>
|
||||||
|
<div class="mt-4 space-y-2 text-sm text-muted">
|
||||||
|
<p>Sobre nosotros</p>
|
||||||
|
<p>Carreras</p>
|
||||||
|
<p>Blog tech</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-black uppercase tracking-wide text-ink">Legal</h3>
|
||||||
|
<div class="mt-4 space-y-2 text-sm text-muted">
|
||||||
|
<p>Privacidad</p>
|
||||||
|
<p>Términos</p>
|
||||||
|
<p>Seguridad</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-black uppercase tracking-wide text-ink">Contacto</h3>
|
||||||
|
<div class="mt-4 space-y-2 text-sm text-muted">
|
||||||
|
<p>Hablemos de tu proyecto</p>
|
||||||
|
<a class="font-bold text-azure" href="mailto:hola@2pidev.com">hola@2pidev.com</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-shell mt-10 border-t border-line pt-6 text-xs text-muted">
|
||||||
|
<p>(c) 2026 2piDev. Engineered Elegance.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
tailwind.config.js
Normal file
27
tailwind.config.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ["./src/**/*.{html,njk,md,js}"],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
ink: "#071323",
|
||||||
|
muted: "#637083",
|
||||||
|
paper: "#f7f8fc",
|
||||||
|
line: "#dde3ed",
|
||||||
|
flame: "#f97316",
|
||||||
|
ember: "#b94700",
|
||||||
|
azure: "#006ee6",
|
||||||
|
navy: "#061832"
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
|
||||||
|
display: ["Rajdhani", "Inter", "ui-sans-serif", "system-ui", "sans-serif"]
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
soft: "0 18px 50px rgba(15, 35, 63, 0.12)",
|
||||||
|
panel: "0 22px 70px rgba(6, 24, 50, 0.22)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: []
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user