diff --git a/package-lock.json b/package-lock.json index 7a8398d..d97e83e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,12 @@ "name": "landing-page", "version": "0.1.0", "dependencies": { + "@tailwindcss/postcss": "^4.3.0", "next": "16.2.6", + "postcss": "^8.5.15", "react": "19.2.4", - "react-dom": "19.2.4" + "react-dom": "19.2.4", + "tailwindcss": "^4.3.0" }, "devDependencies": { "@types/node": "^20", @@ -21,6 +24,18 @@ "typescript": "^5" } }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@babel/code-frame": { "version": "7.29.7", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", @@ -265,7 +280,6 @@ "version": "1.10.0", "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz", "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -287,7 +301,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz", "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -974,7 +987,6 @@ "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", @@ -985,7 +997,6 @@ "version": "2.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", @@ -996,7 +1007,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -1006,14 +1016,12 @@ "version": "1.5.5", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", - "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.31", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", - "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -1024,7 +1032,6 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz", "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -1247,11 +1254,266 @@ "tslib": "^2.8.0" } }, + "node_modules/@tailwindcss/node": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz", + "integrity": "sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==", + "license": "MIT", + "dependencies": { + "@jridgewell/remapping": "^2.3.5", + "enhanced-resolve": "^5.21.0", + "jiti": "^2.6.1", + "lightningcss": "1.32.0", + "magic-string": "^0.30.21", + "source-map-js": "^1.2.1", + "tailwindcss": "4.3.0" + } + }, + "node_modules/@tailwindcss/oxide": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.0.tgz", + "integrity": "sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==", + "license": "MIT", + "engines": { + "node": ">= 20" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.3.0", + "@tailwindcss/oxide-darwin-arm64": "4.3.0", + "@tailwindcss/oxide-darwin-x64": "4.3.0", + "@tailwindcss/oxide-freebsd-x64": "4.3.0", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.0", + "@tailwindcss/oxide-linux-arm64-gnu": "4.3.0", + "@tailwindcss/oxide-linux-arm64-musl": "4.3.0", + "@tailwindcss/oxide-linux-x64-gnu": "4.3.0", + "@tailwindcss/oxide-linux-x64-musl": "4.3.0", + "@tailwindcss/oxide-wasm32-wasi": "4.3.0", + "@tailwindcss/oxide-win32-arm64-msvc": "4.3.0", + "@tailwindcss/oxide-win32-x64-msvc": "4.3.0" + } + }, + "node_modules/@tailwindcss/oxide-android-arm64": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.0.tgz", + "integrity": "sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-arm64": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.0.tgz", + "integrity": "sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-x64": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.0.tgz", + "integrity": "sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-freebsd-x64": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.0.tgz", + "integrity": "sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.0.tgz", + "integrity": "sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.0.tgz", + "integrity": "sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-musl": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.0.tgz", + "integrity": "sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-gnu": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.0.tgz", + "integrity": "sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-musl": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.0.tgz", + "integrity": "sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.0.tgz", + "integrity": "sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==", + "bundleDependencies": [ + "@napi-rs/wasm-runtime", + "@emnapi/core", + "@emnapi/runtime", + "@tybys/wasm-util", + "@emnapi/wasi-threads", + "tslib" + ], + "cpu": [ + "wasm32" + ], + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.10.0", + "@emnapi/runtime": "^1.10.0", + "@emnapi/wasi-threads": "^1.2.1", + "@napi-rs/wasm-runtime": "^1.1.4", + "@tybys/wasm-util": "^0.10.1", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.0.tgz", + "integrity": "sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-win32-x64-msvc": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.0.tgz", + "integrity": "sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/postcss": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.0.tgz", + "integrity": "sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w==", + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "@tailwindcss/node": "4.3.0", + "@tailwindcss/oxide": "4.3.0", + "postcss": "^8.5.10", + "tailwindcss": "4.3.0" + } + }, "node_modules/@tybys/wasm-util": { "version": "0.10.2", "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz", "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -2566,7 +2828,6 @@ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", "license": "Apache-2.0", - "optional": true, "engines": { "node": ">=8" } @@ -2613,6 +2874,19 @@ "dev": true, "license": "MIT" }, + "node_modules/enhanced-resolve": { + "version": "5.22.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.22.0.tgz", + "integrity": "sha512-xYcDWrpELkFzz9SpZ3PlI6Eu6eD93Yf0WLDRxikGhWJ3MAir2SNZTIVCVZqZ/NUyx8AdMc2gT9C0gPiw18kG+A==", + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.4", + "tapable": "^2.3.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/es-abstract": { "version": "1.24.2", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz", @@ -3547,6 +3821,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "license": "ISC" + }, "node_modules/has-bigints": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz", @@ -4157,6 +4437,15 @@ "node": ">= 0.4" } }, + "node_modules/jiti": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz", + "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==", + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -4284,6 +4573,255 @@ "node": ">= 0.8.0" } }, + "node_modules/lightningcss": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz", + "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==", + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.32.0", + "lightningcss-darwin-arm64": "1.32.0", + "lightningcss-darwin-x64": "1.32.0", + "lightningcss-freebsd-x64": "1.32.0", + "lightningcss-linux-arm-gnueabihf": "1.32.0", + "lightningcss-linux-arm64-gnu": "1.32.0", + "lightningcss-linux-arm64-musl": "1.32.0", + "lightningcss-linux-x64-gnu": "1.32.0", + "lightningcss-linux-x64-musl": "1.32.0", + "lightningcss-win32-arm64-msvc": "1.32.0", + "lightningcss-win32-x64-msvc": "1.32.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", + "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz", + "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz", + "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz", + "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz", + "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==", + "cpu": [ + "arm" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz", + "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz", + "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz", + "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz", + "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz", + "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", + "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -4330,6 +4868,15 @@ "yallist": "^3.0.2" } }, + "node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -4805,6 +5352,34 @@ "node": ">= 0.4" } }, + "node_modules/postcss": { + "version": "8.5.15", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz", + "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -5501,6 +6076,25 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwindcss": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz", + "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==", + "license": "MIT" + }, + "node_modules/tapable": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz", + "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==", + "license": "MIT", + "engines": { + "node": ">=6" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/tinyglobby": { "version": "0.2.16", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz", diff --git a/package.json b/package.json index 454a7e9..c1e75bf 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,12 @@ "lint": "eslint" }, "dependencies": { + "@tailwindcss/postcss": "^4.3.0", "next": "16.2.6", + "postcss": "^8.5.15", "react": "19.2.4", - "react-dom": "19.2.4" + "react-dom": "19.2.4", + "tailwindcss": "^4.3.0" }, "devDependencies": { "@types/node": "^20", diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..a34a3d5 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + '@tailwindcss/postcss': {}, + }, +}; diff --git a/src/app/globals.css b/src/app/globals.css index 2feefeb..0dbaf9f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,9 +1,6 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); +@import "tailwindcss"; -/* ============================================ - DESIGN SYSTEM TOKENS - ============================================ */ -:root { +@theme { /* Colors */ --color-black: #0a0a0a; --color-dark: #111111; @@ -11,6 +8,7 @@ --color-gray-800: #2d2d2d; --color-gray-600: #555555; --color-gray-400: #888888; + --color-gray-300: #d1d1d1; --color-gray-200: #e5e5e5; --color-gray-100: #f5f5f5; --color-gray-50: #fafafa; @@ -25,290 +23,91 @@ --color-success: #00c853; --color-error: #ff3b3b; - /* Typography */ + /* Fonts */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - --text-xs: 0.75rem; - --text-sm: 0.875rem; - --text-base: 1rem; - --text-lg: 1.125rem; - --text-xl: 1.25rem; - --text-2xl: 1.5rem; - --text-3xl: 1.875rem; - --text-4xl: 2.25rem; - --text-5xl: 3rem; - --text-6xl: 3.75rem; - --text-7xl: 4.5rem; - - /* Spacing */ - --space-1: 0.25rem; - --space-2: 0.5rem; - --space-3: 0.75rem; - --space-4: 1rem; - --space-6: 1.5rem; - --space-8: 2rem; - --space-10: 2.5rem; - --space-12: 3rem; - --space-16: 4rem; - --space-20: 5rem; - --space-24: 6rem; - --space-32: 8rem; - - /* Border Radius */ - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; - --radius-2xl: 24px; - --radius-full: 9999px; - - /* Shadows */ - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); - --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); - --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10); - --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12); - /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; - - /* Max widths */ - --max-width-sm: 640px; - --max-width-md: 768px; - --max-width-lg: 1024px; - --max-width-xl: 1280px; - --max-width-2xl: 1440px; } -/* ============================================ - RESET & BASE - ============================================ */ -*, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -html { - scroll-behavior: smooth; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body { - font-family: var(--font-sans); - font-size: var(--text-base); - color: var(--color-dark); - background-color: var(--color-white); - line-height: 1.6; - overflow-x: hidden; -} - -img, video { - max-width: 100%; - height: auto; - display: block; -} - -a { - color: inherit; - text-decoration: none; -} - -button { - cursor: pointer; - font-family: var(--font-sans); - border: none; - outline: none; - background: none; -} - -input, textarea, select { - font-family: var(--font-sans); -} - -/* ============================================ - UTILITIES - ============================================ */ -.container { - width: 100%; - max-width: var(--max-width-xl); - margin: 0 auto; - padding: 0 var(--space-6); -} - -.section { - padding: var(--space-24) 0; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; -} - -/* Buttons */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--space-2); - padding: var(--space-3) var(--space-6); - font-size: var(--text-base); - font-weight: 600; - border-radius: var(--radius-md); - transition: all var(--transition-base); - letter-spacing: -0.01em; - white-space: nowrap; -} - -.btn-primary { - background: var(--color-black); - color: var(--color-white); - border: 2px solid var(--color-black); -} - -.btn-primary:hover { - background: var(--color-gray-900); - border-color: var(--color-gray-900); - transform: translateY(-1px); - box-shadow: var(--shadow-lg); -} - -.btn-secondary { - background: transparent; - color: var(--color-dark); - border: 2px solid var(--color-gray-200); -} - -.btn-secondary:hover { - border-color: var(--color-dark); - transform: translateY(-1px); -} - -.btn-accent { - background: var(--color-accent); - color: var(--color-white); - border: 2px solid var(--color-accent); -} - -.btn-accent:hover { - background: var(--color-accent-dark); - border-color: var(--color-accent-dark); - transform: translateY(-1px); - box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3); -} - -.btn-lg { - padding: var(--space-4) var(--space-8); - font-size: var(--text-lg); - border-radius: var(--radius-lg); -} - -/* Badges */ -.badge { - display: inline-flex; - align-items: center; - gap: var(--space-2); - padding: var(--space-2) var(--space-3); - font-size: var(--text-xs); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; - border-radius: var(--radius-full); -} - -.badge-dark { - background: var(--color-black); - color: var(--color-white); -} - -.badge-accent { - background: var(--color-accent-light); - color: var(--color-accent); -} - -/* ============================================ - SCROLLBAR - ============================================ */ -::-webkit-scrollbar { - width: 6px; -} -::-webkit-scrollbar-track { - background: var(--color-gray-100); -} -::-webkit-scrollbar-thumb { - background: var(--color-gray-400); - border-radius: var(--radius-full); -} - -/* ============================================ - ANIMATIONS - ============================================ */ -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(24px); +@layer base { + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; } - to { - opacity: 1; - transform: translateY(0); + + html { + scroll-behavior: smooth; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + body { + font-family: var(--font-sans); + font-size: 1rem; + color: var(--color-dark); + background-color: var(--color-white); + line-height: 1.6; + overflow-x: hidden; + } + + /* Custom Scrollbar */ + ::-webkit-scrollbar { + width: 6px; + } + ::-webkit-scrollbar-track { + background: var(--color-gray-100); + } + ::-webkit-scrollbar-thumb { + background: var(--color-gray-400); + border-radius: 9999px; } } -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - -@keyframes slideInRight { - from { - opacity: 0; - transform: translateX(20px); - } - to { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -@keyframes scaleIn { - from { - opacity: 0; - transform: scale(0.95); - } - to { - opacity: 1; - transform: scale(1); - } -} - -.animate-fadeInUp { - animation: fadeInUp 0.6s ease forwards; -} - -.animate-fadeIn { - animation: fadeIn 0.5s ease forwards; -} - -/* ============================================ - RESPONSIVE - ============================================ */ -@media (max-width: 768px) { +@layer components { + /* Layout */ .container { - padding: 0 var(--space-4); + @apply w-full max-w-7xl mx-auto px-6 md:px-4; } .section { - padding: var(--space-16) 0; + @apply py-16 md:py-24; + } + + /* Buttons */ + .btn { + @apply inline-flex items-center justify-center gap-2 px-6 py-3 text-base font-semibold rounded-lg transition-all duration-250 ease-out whitespace-nowrap cursor-pointer tracking-tight; + } + + .btn-primary { + @apply bg-black text-white border-2 border-black hover:bg-gray-900 hover:border-gray-900 hover:-translate-y-[1px] hover:shadow-[0_8px_32px_rgba(0,0,0,0.10)]; + } + + .btn-secondary { + @apply bg-transparent text-dark border-2 border-gray-200 hover:border-dark hover:-translate-y-[1px]; + } + + .btn-accent { + @apply bg-accent text-white border-2 border-accent hover:bg-accent-dark hover:border-accent-dark hover:-translate-y-[1px] hover:shadow-[0_8px_24px_rgba(0,102,255,0.3)]; + } + + .btn-lg { + @apply px-8 py-4 text-lg rounded-xl; + } + + /* Badges */ + .badge { + @apply inline-flex items-center gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-widest rounded-full; + } + + .badge-dark { + @apply bg-black text-white; + } + + .badge-accent { + @apply bg-accent-light text-accent; } } \ No newline at end of file diff --git a/src/components/ContactForm/ContactForm.module.css b/src/components/ContactForm/ContactForm.module.css deleted file mode 100644 index 6f8bcf2..0000000 --- a/src/components/ContactForm/ContactForm.module.css +++ /dev/null @@ -1,367 +0,0 @@ -.contactSection { - background: var(--color-white); -} - -/* Layout */ -.layout { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-16); - align-items: start; -} - -/* Reveal */ -.reveal { - opacity: 0; - transform: translateY(24px); - transition: opacity 0.65s ease, transform 0.65s ease; -} -.reveal.visible { - opacity: 1; - transform: translateY(0); -} - -/* Info panel */ -.infoPanel { - display: flex; - flex-direction: column; - gap: var(--space-6); - position: sticky; - top: calc(72px + var(--space-8)); -} - -.title { - font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); - font-weight: 900; - letter-spacing: -0.04em; - line-height: 1.05; - color: var(--color-black); -} - -.subtitle { - font-size: var(--text-lg); - color: var(--color-gray-600); - line-height: 1.6; -} - -/* Contact details */ -.contactDetails { - display: flex; - flex-direction: column; - gap: var(--space-4); - padding: var(--space-6); - background: var(--color-gray-50); - border: 1px solid var(--color-gray-200); - border-radius: var(--radius-xl); -} - -.contactItem { - display: flex; - align-items: center; - gap: var(--space-4); -} - -.contactIcon { - width: 40px; - height: 40px; - background: var(--color-white); - border: 1px solid var(--color-gray-200); - border-radius: var(--radius-lg); - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - color: var(--color-black); -} - -.contactLabel { - font-size: var(--text-xs); - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--color-gray-400); -} - -.contactValue { - font-size: var(--text-base); - font-weight: 600; - color: var(--color-black); -} - -/* Testimonial */ -.testimonial { - background: var(--color-black); - color: var(--color-white); - border-radius: var(--radius-xl); - padding: var(--space-6); - display: flex; - flex-direction: column; - gap: var(--space-4); -} - -.testimonialText { - font-size: var(--text-base); - line-height: 1.65; - color: rgba(255,255,255,0.85); - font-style: italic; -} - -.testimonialAuthor { - display: flex; - align-items: center; - gap: var(--space-3); -} - -.authorAvatar { - width: 40px; - height: 40px; - background: rgba(255,255,255,0.15); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: var(--text-xs); - font-weight: 700; - letter-spacing: 0.02em; - flex-shrink: 0; -} - -.authorName { - font-size: var(--text-sm); - font-weight: 700; -} - -.authorRole { - font-size: var(--text-xs); - color: rgba(255,255,255,0.5); -} - -/* Form panel */ -.formPanel { - background: var(--color-white); - border: 1px solid var(--color-gray-200); - border-radius: var(--radius-2xl); - padding: var(--space-10); - box-shadow: var(--shadow-lg); -} - -/* Form */ -.form { - display: flex; - flex-direction: column; - gap: var(--space-5); -} - -.formHeader { - margin-bottom: var(--space-2); -} - -.formTitle { - font-size: var(--text-2xl); - font-weight: 800; - letter-spacing: -0.03em; - color: var(--color-black); -} - -.formSubtitle { - font-size: var(--text-sm); - color: var(--color-gray-400); - margin-top: var(--space-1); -} - -/* Row */ -.row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-4); -} - -/* Field */ -.fieldGroup { - display: flex; - flex-direction: column; - gap: var(--space-2); -} - -.label { - font-size: var(--text-sm); - font-weight: 600; - color: var(--color-dark); -} - -.required { - color: var(--color-error); -} - -.optional { - font-weight: 400; - color: var(--color-gray-400); -} - -/* Inputs */ -.input, -.textarea { - width: 100%; - padding: var(--space-3) var(--space-4); - font-size: var(--text-base); - font-family: var(--font-sans); - color: var(--color-dark); - background: var(--color-white); - border: 1.5px solid var(--color-gray-200); - border-radius: var(--radius-lg); - transition: all var(--transition-fast); - outline: none; -} - -.input::placeholder, -.textarea::placeholder { - color: var(--color-gray-400); -} - -.input:focus, -.textarea:focus { - border-color: var(--color-black); - box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); -} - -.inputError { - border-color: var(--color-error) !important; - box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.08) !important; -} - -.textarea { - resize: vertical; - min-height: 120px; -} - -.textareaFooter { - display: flex; - justify-content: space-between; - align-items: center; -} - -/* Error */ -.errorMsg { - font-size: var(--text-xs); - color: var(--color-error); - font-weight: 500; - display: flex; - align-items: center; - gap: var(--space-1); -} - -.charCount { - font-size: var(--text-xs); - color: var(--color-gray-400); - margin-left: auto; -} - -/* Submit */ -.submitBtn { - width: 100%; - justify-content: center; - margin-top: var(--space-2); -} - -.submitBtn:disabled { - opacity: 0.7; - cursor: not-allowed; - transform: none !important; -} - -/* Spinner */ -@keyframes spin { - to { transform: rotate(360deg); } -} - -.spinner { - width: 18px; - height: 18px; - border: 2px solid rgba(255,255,255,0.3); - border-top-color: white; - border-radius: 50%; - animation: spin 0.7s linear infinite; - flex-shrink: 0; -} - -/* Privacy note */ -.privacyNote { - font-size: var(--text-xs); - color: var(--color-gray-400); - text-align: center; - line-height: 1.5; -} - -.privacyLink { - color: var(--color-gray-600); - text-decoration: underline; - text-underline-offset: 2px; - transition: color var(--transition-fast); -} - -.privacyLink:hover { - color: var(--color-black); -} - -/* Success state */ -.successState { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - gap: var(--space-4); - padding: var(--space-16) var(--space-8); - animation: scaleIn 0.4s ease; -} - -.successIcon { - width: 72px; - height: 72px; - background: var(--color-black); - color: var(--color-white); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; -} - -.successTitle { - font-size: var(--text-2xl); - font-weight: 800; - letter-spacing: -0.03em; - color: var(--color-black); -} - -.successDesc { - font-size: var(--text-base); - color: var(--color-gray-600); - max-width: 320px; - line-height: 1.6; -} - -/* Responsive */ -@media (max-width: 1024px) { - .layout { - grid-template-columns: 1fr; - gap: var(--space-12); - } - - .infoPanel { - position: static; - } - - .formPanel { - padding: var(--space-8); - } -} - -@media (max-width: 640px) { - .row { - grid-template-columns: 1fr; - } - - .formPanel { - padding: var(--space-6); - } -} diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx index 39a9ec4..0736bf7 100644 --- a/src/components/ContactForm/ContactForm.tsx +++ b/src/components/ContactForm/ContactForm.tsx @@ -1,7 +1,6 @@ 'use client'; import { useState, useRef, useEffect, FormEvent } from 'react'; -import styles from './ContactForm.module.css'; type FormData = { name: string; @@ -53,12 +52,15 @@ export default function ContactForm() { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { - if (entry.isIntersecting) entry.target.classList.add(styles.visible); + if (entry.isIntersecting) { + entry.target.classList.add('opacity-100', 'translate-y-0'); + entry.target.classList.remove('opacity-0', 'translate-y-6'); + } }); }, { threshold: 0.1 } ); - const elements = sectionRef.current?.querySelectorAll(`.${styles.reveal}`); + const elements = sectionRef.current?.querySelectorAll('.reveal'); elements?.forEach((el) => observer.observe(el)); return () => observer.disconnect(); }, []); @@ -115,94 +117,121 @@ export default function ContactForm() { return (
-
+
{/* Left info panel */} -
- Contacto -

+
+
+ Contacto +
+

Hablemos de
tu negocio

-

+

Cuéntanos qué necesitas. Nuestro equipo responderá en menos de 24 horas con una propuesta personalizada.

{/* Contact details */} -
-
-
+
+
+
-
Email
-
hola@flowsync.io
+
Email
+
hola@flowsync.io
-
-
+
+
-
Teléfono
-
+1 (800) 123-4567
+
Teléfono
+
+1 (800) 123-4567
-
-
+
+
-
Respuesta
-
Menos de 24 horas
+
Respuesta
+
Menos de 24 horas
{/* Testimonial */} -
-

+

+

“FlowSync transformó la forma en que colaboramos. Lo que antes tomaba días, ahora lo hacemos en horas.”

-
-
MR
+
+
+ MR +
-
María Rodríguez
-
CTO en TechLatam
+
María Rodríguez
+
CTO en TechLatam
{/* Form panel */} -
+
{status === 'success' ? ( -
-
+
+
-

¡Mensaje enviado!

-

+

+ ¡Mensaje enviado! +

+

Gracias por contactarnos. Nuestro equipo te responderá en menos de 24 horas.