xgriffins/cryptonexus-whirlwind

1```css2@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');3 4@keyframes float {5  0%, 100% {6    transform: translateY(0);7  }8  50% {9    transform: translateY(-10px);10  }11}12 13body {14  scroll-behavior: smooth;15}16 17::-webkit-scrollbar {18  width: 8px;19}20 21::-webkit-scrollbar-track {22  background: #0A0E0E;23}24 25::-webkit-scrollbar-thumb {26  background: #0795B0;27  border-radius: 4px;28}29 30.glow {31  filter: drop-shadow(0 0 10px rgba(7, 149, 176, 0.8));32}33 34.glow:hover {35  filter: drop-shadow(0 0 15px rgba(7, 149, 176, 1));36}37 38.feature-card {39  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);40  transform-style: preserve-3d;41  will-change: transform;42  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);43  position: relative;44  overflow: hidden;45}46 47.feature-card:hover {48  transform: perspective(1000px) rotateX(2deg) rotateY(2deg) translateY(-12px);49  box-shadow: 0 30px 60px -12px rgba(7, 149, 176, 0.4);50}51 52.feature-card::after {53  content: '';54  position: absolute;55  top: 0;56  left: -100%;57  width: 100%;58  height: 100%;59  background: linear-gradient(60    90deg,61    transparent,62    rgba(7, 149, 176, 0.1),63    transparent64  );65  transition: 0.5s;66}67 68.feature-card:hover::after {69  left: 100%;70}71 72.network-icon {73  transition: all 0.3s ease;74  animation: float 4s ease-in-out infinite;75}76 77.network-icon:hover {78  transform: scale(1.2);79  filter: drop-shadow(0 0 15px rgba(7, 149, 176, 1));80  animation-play-state: paused;81}82 83.network-icon:nth-child(2n) {84  animation-delay: 0.5s;85}86 87.network-icon:nth-child(3n) {88  animation-delay: 1s;89}90 91body::before {92  content: '';93  position: fixed;94  top: 0;95  left: 0;96  width: 100%;97  height: 100%;98  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='smallGrid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='rgba(7,149,176,0.1)' stroke-width='0.5'/%3E%3C/pattern%3E%3Cpattern id='grid' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='url(%23smallGrid)'/%3E%3Cpath d='M 100 0 L 0 0 0 100' fill='none' stroke='rgba(7,149,176,0.2)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)' /%3E%3C/svg%3E");99  animation: moveGrid 60s linear infinite;100  z-index: -1;101}102 103@keyframes moveGrid {104  0% { background-position: 0 0; }105  100% { background-position: 1000px 1000px; }106}107 108.feature-hologram {109  position: relative;110  overflow: hidden;111}112 113.feature-hologram::before {114  content: '';115  position: absolute;116  top: -50%;117  left: -50%;118  width: 200%;119  height: 200%;120  background: radial-gradient(circle, rgba(7,149,176,0.1) 0%, rgba(0,0,0,0) 70%);121  opacity: 0;122  transition: opacity 0.3s ease;123}124 125.feature-hologram:hover::before {126  opacity: 1;127}128```129 130To run this Next.js app:1311. Install dependencies: `npm install next react react-dom`1322. Create the above files in a new project1333. Run with: `npm run dev` (will run on port 3000 by default)134 135Note: You'll need to:1361. Convert all remaining HTML sections to JSX components1372. Organize components into separate files1383. Handle any dynamic functionality with React hooks1394. Set up proper TypeScript types1405. Configure any required build settings in next.config.js