1<!DOCTYPE html> 2<html lang="english"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Easyfie â Social Marketplace + Instant Websites</title> 7 <meta name="description" content="Easyfie is a business-first social platform for products, services, blogs, and portfolio work. Post once, launch your website automatically."> 8 <link rel="shortcut icon" href="https://easyfie.com/users/images/favicon.ico"> 9 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700;800&display=swap" rel="stylesheet"> 10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> 11 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet"> 12 13 <style> 14 /* ââ TOKENS âââââââââââââââââââââââââââââââââââââââââââ */ 15 :root { 16 --brand: #009faa; 17 --brand-dk: #007a84; 18 --brand-lt: #e4f6f7; 19 --accent: #f2a154; 20 --ink: #0d1b1e; 21 --ink-soft: #2e4447; 22 --muted: #637578; 23 --bg: #f8fafb; 24 --card: #ffffff; 25 --border: #e1e8ea; 26 --r-sm: 10px; 27 --r: 16px; 28 --r-lg: 24px; 29 --sh-sm: 0 1px 4px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04); 30 --sh: 0 4px 20px rgba(0,0,0,.07), 0 12px 40px rgba(0,0,0,.05); 31 --sh-lg: 0 16px 56px rgba(0,0,0,.10); 32 } 33 34 *, *::before, *::after { box-sizing: border-box; } 35 html { scroll-behavior: smooth; } 36 37 body { 38 font-family: 'Inter', sans-serif; 39 color: var(--ink); 40 background: #fff; 41 line-height: 1.65; 42 overflow-x: hidden; 43 margin: 0; 44 } 45 46 h1,h2,h3,h4,h5,h6 { 47 font-family: 'Space Grotesk', sans-serif; 48 letter-spacing: -.025em; 49 line-height: 1.12; 50 } 51 52 a { text-decoration: none; color: inherit; } 53 img { max-width: 100%; height: auto; display: block; } 54 55 /* ââ ANNOUNCE BAR âââââââââââââââââââââââââââââââââââââ */ 56 .announce { 57 background: var(--brand); 58 color: #fff; 59 text-align: center; 60 padding: 10px 16px; 61 font-size: .82rem; 62 font-weight: 500; 63 letter-spacing: .01em; 64 } 65 .announce a { color: #fff; font-weight: 700; text-decoration: underline; margin-left: 6px; } 66 67 /* ââ NAV ââââââââââââââââââââââââââââââââââââââââââââââ */ 68 .site-nav { 69 position: sticky; 70 top: 0; 71 z-index: 900; 72 background: rgba(255,255,255,.85); 73 backdrop-filter: blur(18px); 74 -webkit-backdrop-filter: blur(18px); 75 border-bottom: 1px solid rgba(0,0,0,.07); 76 transition: box-shadow .25s; 77 } 78 .site-nav.nav-scrolled { box-shadow: 0 2px 24px rgba(0,0,0,.08); } 79 .nav-wrap { 80 max-width: 1200px; 81 margin: 0 auto; 82 padding: 0 24px; 83 display: flex; 84 align-items: center; 85 justify-content: space-between; 86 height: 64px; 87 gap: 1rem; 88 } 89 .nav-logo img { height: 38px; } 90 .nav-menu { 91 display: flex; 92 align-items: center; 93 gap: .15rem; 94 list-style: none; 95 margin: 0; 96 padding: 0; 97 } 98 .nav-menu a { 99 display: block; 100 font-size: .875rem; 101 font-weight: 600; 102 color: var(--ink-soft); 103 padding: .5rem .8rem; 104 border-radius: var(--r-sm); 105 transition: color .2s, background .2s; 106 } 107 .nav-menu a:hover { color: var(--brand); background: var(--brand-lt); } 108 .nav-signin { color: var(--muted) !important; } 109 .nav-cta-btn { 110 display: inline-flex; 111 align-items: center; 112 gap: .4rem; 113 background: var(--brand); 114 color: #fff !important; 115 padding: .5rem 1.2rem; 116 border-radius: 999px; 117 font-size: .875rem; 118 font-weight: 700; 119 transition: background .2s, transform .2s, box-shadow .2s; 120 } 121 .nav-cta-btn:hover { 122 background: var(--brand-dk); 123 transform: translateY(-1px); 124 box-shadow: 0 6px 20px rgba(0,159,170,.28); 125 } 126 .nav-hamburger { 127 display: none; 128 background: none; 129 border: none; 130 color: var(--ink); 131 font-size: 1.25rem; 132 cursor: pointer; 133 padding: 6px; 134 } 135 136 /* ââ BUTTONS ââââââââââââââââââââââââââââââââââââââââââ */ 137 .btn { 138 display: inline-flex; 139 align-items: center; 140 justify-content: center; 141 gap: .45rem; 142 font-family: 'Inter', sans-serif; 143 font-weight: 700; 144 font-size: .95rem; 145 padding: .8rem 1.75rem; 146 border-radius: 999px; 147 border: none; 148 cursor: pointer; 149 transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; 150 text-decoration: none; 151 line-height: 1; 152 } 153 .btn-primary { background: var(--brand); color: #fff; } 154 .btn-primary:hover { background: var(--brand-dk); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,159,170,.28); color: #fff; } 155 .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border); } 156 .btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-lt); transform: translateY(-1px); } 157 .btn-white { background: #fff; color: var(--brand); } 158 .btn-white:hover { background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(0,0,0,.12); } 159 .btn-lg { padding: 1rem 2.2rem; font-size: 1rem; } 160 .btn-block { width: 100%; } 161 162 /* ââ SECTION SHELL ââââââââââââââââââââââââââââââââââââ */ 163 .sec { padding: 96px 0; } 164 .sec-alt { background: var(--bg); } 165 .sec-warm { background: #f6f2ec; } 166 167 .container { 168 max-width: 1160px; 169 margin: 0 auto; 170 padding: 0 24px; 171 } 172 173 .eyebrow { 174 display: inline-block; 175 font-size: .7rem; 176 font-weight: 700; 177 letter-spacing: .14em; 178 text-transform: uppercase; 179 color: var(--brand); 180 background: var(--brand-lt); 181 padding: .3rem .85rem; 182 border-radius: 999px; 183 margin-bottom: .85rem; 184 } 185 .sec-title { font-size: 2.5rem; margin: 0 0 .9rem; color: var(--ink); } 186 .sec-lead { font-size: 1.05rem; color: var(--muted); line-height: 1.75; max-width: 540px; } 187 .sec-lead.wide { max-width: 640px; } 188 189 /* ââ HERO âââââââââââââââââââââââââââââââââââââââââââââ */ 190 .hero { 191 padding: 76px 0 96px; 192 position: relative; 193 overflow: hidden; 194 background: #fff; 195 } 196 .hero::before { 197 content: ''; 198 position: absolute; 199 inset: 0; 200 background: 201 radial-gradient(ellipse 60% 50% at 0% 0%, rgba(0,159,170,.09), transparent), 202 radial-gradient(ellipse 50% 60% at 100% 20%, rgba(242,161,84,.11), transparent); 203 pointer-events: none; 204 } 205 .hero-row { 206 display: grid; 207 grid-template-columns: 1fr 1fr; 208 gap: 3rem; 209 align-items: center; 210 } 211 .hero-badge { 212 display: inline-flex; 213 align-items: center; 214 gap: .5rem; 215 background: var(--brand-lt); 216 color: var(--brand-dk); 217 border: 1px solid rgba(0,159,170,.22); 218 padding: .38rem 1rem .38rem .5rem; 219 border-radius: 999px; 220 font-size: .8rem; 221 font-weight: 700; 222 margin-bottom: 1.4rem; 223 } 224 .live-dot { 225 width: 8px; height: 8px; border-radius: 50%; 226 background: var(--brand); 227 animation: livepulse 2s ease-in-out infinite; 228 } 229 @keyframes livepulse { 230 0%,100% { opacity:1; transform:scale(1); } 231 50% { opacity:.55; transform:scale(.82); } 232 } 233 .hero-h1 { font-size: 3.4rem; margin: 0 0 1.3rem; color: var(--ink); } 234 .hero-h1 em { 235 font-style: normal; 236 color: var(--brand); 237 position: relative; 238 } 239 .hero-h1 em::after { 240 content: ''; 241 position: absolute; 242 left: 0; bottom: 3px; 243 width: 100%; height: 3px; 244 background: var(--brand); 245 border-radius: 2px; 246 opacity: .3; 247 } 248 .hero-lead { font-size: 1.08rem; color: var(--muted); line-height: 1.75; max-width: 480px; margin-bottom: 2rem; } 249 .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.2rem; } 250 .hero-trust { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .82rem; font-weight: 600; color: var(--muted); } 251 .hero-trust span { display: flex; align-items: center; gap: .35rem; } 252 .hero-trust i { color: var(--brand); font-size: .75rem; } 253 254 /* mock social feed */ 255 .mock-feed { display: flex; flex-direction: column; gap: 12px; } 256 .mock-card { 257 background: #fff; 258 border: 1px solid var(--border); 259 border-radius: var(--r); 260 padding: 15px 17px; 261 box-shadow: var(--sh-sm); 262 } 263 .mock-card:nth-child(2) { margin-left: 20px; } 264 .mock-card:nth-child(3) { margin-right: 20px; } 265 .mock-card:nth-child(1) { animation: fc1 7s ease-in-out infinite; } 266 .mock-card:nth-child(2) { animation: fc2 7s ease-in-out infinite; animation-delay: -2.5s; } 267 .mock-card:nth-child(3) { animation: fc3 7s ease-in-out infinite; animation-delay: -5s; } 268 @keyframes fc1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} } 269 @keyframes fc2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } 270 @keyframes fc3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } 271 272 .mc-head { display:flex; align-items:center; gap:9px; margin-bottom:10px; } 273 .mc-av { 274 width:34px; height:34px; border-radius:50%; 275 display:flex; align-items:center; justify-content:center; 276 font-size:.75rem; font-weight:800; color:#fff; flex-shrink:0; 277 } 278 .av-teal { background: linear-gradient(135deg,#009faa,#00c6d4); } 279 .av-amber { background: linear-gradient(135deg,#f2a154,#e07820); } 280 .av-violet { background: linear-gradient(135deg,#7c3aed,#a855f7); } 281 .mc-name { font-size:.82rem; font-weight:700; color:var(--ink); line-height:1.2; } 282 .mc-meta { font-size:.7rem; color:var(--muted); } 283 .mc-tag { 284 margin-left:auto; font-size:.65rem; font-weight:700; letter-spacing:.05em; 285 background:var(--brand-lt); color:var(--brand-dk); 286 padding:.18rem .55rem; border-radius:999px; 287 } 288 .mc-thumb { 289 width:100%; height:80px; border-radius:10px; 290 margin-bottom:10px; overflow:hidden; 291 } 292 .mc-t1 { background:linear-gradient(120deg,rgba(0,159,170,.12),rgba(0,198,212,.2)); } 293 .mc-t2 { background:linear-gradient(120deg,rgba(242,161,84,.12),rgba(240,120,32,.18)); } 294 .mc-title { font-size:.87rem; font-weight:700; color:var(--ink); margin-bottom:4px; } 295 .mc-price { font-size:.95rem; font-weight:800; color:var(--brand); } 296 .mc-body { font-size:.82rem; color:var(--ink-soft); line-height:1.5; } 297 .mc-foot { 298 display:flex; align-items:center; gap:12px; 299 margin-top:10px; font-size:.75rem; color:var(--muted); 300 } 301 .mc-foot a { color:var(--brand); font-weight:700; font-size:.75rem; margin-left:auto; } 302 303 /* ââ STATS BAR ââââââââââââââââââââââââââââââââââââââââ */ 304 .stats-bar { 305 background: var(--ink); 306 padding: 0; 307 } 308 .stats-grid { 309 display: grid; 310 grid-template-columns: repeat(4,1fr); 311 } 312 .stat-cell { 313 padding: 32px 20px; 314 text-align: center; 315 border-right: 1px solid rgba(255,255,255,.07); 316 }
317 .stat-cell:last-child { border-right: none; } 318 .stat-n { 319 font-family:'Space Grotesk',sans-serif; 320 font-size: 2.1rem; font-weight: 800; 321 color: #fff; line-height: 1; margin-bottom: 4px; 322 } 323 .stat-n span { color: #00c6d4; } 324 .stat-l { font-size: .8rem; color: rgba(255,255,255,.45); font-weight: 500; } 325 326 /* ââ ABOUT ââââââââââââââââââââââââââââââââââââââââââââ */ 327 .feature-list { list-style:none; padding:0; margin:1.5rem 0 0; } 328 .feature-list li { 329 display:flex; align-items:flex-start; gap:14px; 330 padding:14px 0; border-bottom:1px solid var(--border); 331 } 332 .feature-list li:last-child { border-bottom:none; } 333 .fl-icon { 334 width:34px; height:34px; border-radius:9px; flex-shrink:0; 335 background:var(--brand-lt); color:var(--brand); 336 display:flex; align-items:center; justify-content:center; 337 font-size:.85rem; margin-top:1px; 338 } 339 .fl-title { font-weight:700; font-size:.95rem; display:block; margin-bottom:2px; color:var(--ink); } 340 .fl-desc { font-size:.88rem; color:var(--muted); line-height:1.55; } 341 342 .about-stats { 343 background:linear-gradient(135deg,rgba(0,159,170,.07),rgba(242,161,84,.07)); 344 border-radius:var(--r-lg); padding:1.75rem; 345 } 346 .astat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } 347 .astat-card { 348 background:#fff; border-radius:14px; border:1px solid var(--border); 349 padding:1.35rem; text-align:center; 350 } 351 .astat-n { 352 font-family:'Space Grotesk',sans-serif; 353 font-size:1.9rem; font-weight:800; color:var(--brand); line-height:1; 354 } 355 .astat-l { font-size:.78rem; color:var(--muted); margin-top:4px; } 356 357 /* ââ POST TYPES âââââââââââââââââââââââââââââââââââââââ */ 358 .pt-card { 359 background:#fff; border:1px solid var(--border); 360 border-radius:var(--r); padding:1.75rem; height:100%; 361 position:relative; overflow:hidden; 362 transition:transform .25s, box-shadow .25s, border-color .25s; 363 } 364 .pt-card::after { 365 content:''; position:absolute; top:0; left:0; right:0; height:3px; 366 background:var(--brand); transform:scaleX(0); transform-origin:left; 367 transition:transform .25s; 368 } 369 .pt-card:hover { transform:translateY(-5px); box-shadow:var(--sh); border-color:rgba(0,159,170,.2); } 370 .pt-card:hover::after { transform:scaleX(1); } 371 .pt-icon { 372 width:52px; height:52px; border-radius:14px; 373 background:var(--brand-lt); color:var(--brand); 374 display:flex; align-items:center; justify-content:center; 375 font-size:1.3rem; margin-bottom:1rem; 376 } 377 .pt-card h5 { font-size:1rem; margin-bottom:.45rem; } 378 .pt-card p { font-size:.875rem; color:var(--muted); margin:0; line-height:1.6; } 379 380 /* ââ HOW IT WORKS âââââââââââââââââââââââââââââââââââââ */ 381 .steps { margin-top:.5rem; } 382 .step { 383 display:flex; gap:1.25rem; padding:1.35rem 0; 384 border-bottom:1px solid var(--border); 385 } 386 .step:last-child { border-bottom:none; } 387 .step-n { 388 width:44px; height:44px; border-radius:12px; flex-shrink:0; 389 background:var(--brand); color:#fff; 390 font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:800; 391 display:flex; align-items:center; justify-content:center; 392 } 393 .step h5 { font-size:.97rem; margin:0 0 .3rem; } 394 .step p { font-size:.87rem; color:var(--muted); margin:0; } 395 396 /* ââ FEATURES âââââââââââââââââââââââââââââââââââââââââ */ 397 .feat-card { 398 background:#fff; border:1px solid var(--border); 399 border-radius:var(--r); padding:1.5rem; height:100%; 400 box-shadow:var(--sh-sm); 401 transition:transform .25s, box-shadow .25s; 402 } 403 .feat-card:hover { transform:translateY(-4px); box-shadow:var(--sh); } 404 .feat-icon { 405 width:46px; height:46px; border-radius:12px; 406 background:var(--brand-lt); color:var(--brand); 407 display:flex; align-items:center; justify-content:center; 408 font-size:1.15rem; margin-bottom:.9rem; 409 } 410 .feat-card h5 { font-size:.95rem; margin-bottom:.35rem; } 411 .feat-card p { font-size:.85rem; color:var(--muted); margin:0; } 412 413 /* ââ TEMPLATES ââââââââââââââââââââââââââââââââââââââââ */ 414 .tpl-card { 415 background:#fff; border:1px solid var(--border); 416 border-radius:var(--r); overflow:hidden; height:100%; 417 transition:transform .25s, box-shadow .25s; 418 } 419 .tpl-card:hover { transform:translateY(-5px); box-shadow:var(--sh); } 420 .tpl-thumb { 421 height:110px; display:flex; align-items:center; justify-content:center; 422 font-size:2rem; color:rgba(255,255,255,.85); 423 } 424 .tpl-t1 { background:linear-gradient(135deg,#009faa,#00c6d4); } 425 .tpl-t2 { background:linear-gradient(135deg,#3b82f6,#60a5fa); } 426 .tpl-t3 { background:linear-gradient(135deg,#f59e0b,#fbbf24); } 427 .tpl-t4 { background:linear-gradient(135deg,#8b5cf6,#a78bfa); } 428 .tpl-t5 { background:linear-gradient(135deg,#ef4444,#f87171); } 429 .tpl-body { padding:1.15rem 1.35rem; } 430 .tpl-body h5 { font-size:.95rem; margin-bottom:.3rem; } 431 .tpl-body p { font-size:.82rem; color:var(--muted); margin:0; } 432 433 /* ââ PRICING ââââââââââââââââââââââââââââââââââââââââââ */ 434 .price-card { 435 background:#fff; border:1.5px solid var(--border); 436 border-radius:var(--r-lg); padding:2rem; height:100%; 437 position:relative; transition:transform .25s, box-shadow .25s; 438 } 439 .price-card:hover { transform:translateY(-4px); } 440 .price-card.is-featured { border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,159,170,.1), var(--sh); } 441 .price-popular { 442 position:absolute; top:-1px; left:50%; transform:translateX(-50%); 443 background:var(--brand); color:#fff; 444 font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; 445 padding:.3rem 1rem; border-radius:0 0 10px 10px; 446 } 447 .price-plan { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; } 448 .price-amount { font-size:2.4rem; font-weight:800; color:var(--ink); line-height:1; margin-bottom:.2rem; } 449 .price-amount small { font-size:.88rem; color:var(--muted); font-weight:400; } 450 .price-desc { font-size:.875rem; color:var(--muted); margin-bottom:1.5rem; } 451 .price-sep { border:none; border-top:1px solid var(--border); margin:1.1rem 0; } 452 .price-list { list-style:none; padding:0; margin:0 0 1.5rem; } 453 .price-list li { display:flex; align-items:center; gap:9px; font-size:.88rem; padding:5px 0; color:var(--ink-soft); } 454 .price-list li i { color:var(--brand); font-size:.8rem; width:14px; } 455 456 /* ââ TESTIMONIALS âââââââââââââââââââââââââââââââââââââ */ 457 .testi-card { 458 background:#fff; border:1px solid var(--border); 459 border-radius:var(--r); padding:1.75rem; height:100%; 460 box-shadow:var(--sh-sm); 461 } 462 .testi-stars { color:#f59e0b; font-size:.85rem; letter-spacing:2px; margin-bottom:.9rem; } 463 .testi-quote { font-size:.97rem; color:var(--ink-soft); line-height:1.72; font-style:italic; margin-bottom:1.25rem; } 464 .testi-author { display:flex; align-items:center; gap:11px; } 465 .tav { 466 width:40px; height:40px; border-radius:50%; 467 display:flex; align-items:center; justify-content:center; 468 font-size:.8rem; font-weight:800; color:#fff; flex-shrink:0; 469 } 470 .tav-1 { background:linear-gradient(135deg,#009faa,#00b8c5); } 471 .tav-2 { background:linear-gradient(135deg,#8b5cf6,#a78bfa); } 472 .tav-3 { background:linear-gradient(135deg,#f59e0b,#fbbf24); color:var(--ink); } 473 .tav-name { font-weight:700; font-size:.875rem; margin-bottom:1px; } 474 .tav-role { font-size:.77rem; color:var(--muted); } 475 476 /* ââ FAQ ââââââââââââââââââââââââââââââââââââââââââââââ */ 477 .faq-wrap { border-top:1px solid var(--border); } 478 .faq-row { border-bottom:1px solid var(--border); } 479 .faq-btn { 480 width:100%; background:none; border:none; cursor:pointer; 481 display:flex; align-items:center; justify-content:space-between; gap:1rem; 482 padding:1.2rem 0; text-align:left; 483 font-family:'Space Grotesk',sans-serif; font-size:.97rem; font-weight:700; 484 color:var(--ink); 485 } 486 .faq-ico { 487 width:28px; height:28px; border-radius:8px; flex-shrink:0; 488 border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; 489 color:var(--brand); font-size:.75rem; 490 transition:transform .3s, background .2s, border-color .2s; 491 } 492 .faq-btn[aria-expanded="true"] .faq-ico { 493 transform:rotate(45deg); background:var(--brand); border-color:var(--brand); color:#fff; 494 } 495 .faq-ans { font-size:.9rem; color:var(--muted); line-height:1.72; padding-bottom:1.2rem; display:none; } 496 497 /* ââ CTA BANNER âââââââââââââââââââââââââââââââââââââââ */ 498 .cta-banner { 499 background:linear-gradient(140deg,#009faa 0%,#007a84 55%,#005862 100%); 500 padding:96px 0; text-align:center; position:relative; overflow:hidden; 501 } 502 .cta-banner::before, .cta-banner::after { 503 content:''; position:absolute; border-radius:50%; pointer-events:none; 504 } 505 .cta-banner::before { width:440px;height:440px;top:-160px;right:-140px; background:rgba(255,255,255,.05); } 506 .cta-banner::after { width:320px;height:320px;bottom:-100px;left:-80px; background:rgba(255,255,255,.04); } 507 .cta-banner h2 { font-size:2.7rem; color:#fff; margin-bottom:1rem; position:relative;z-index:1; } 508 .cta-banner p { font-size:1.05rem; color:rgba(255,255,255,.72); max-width:500px; margin:0 auto 2.2rem; position:relative;z-index:1; } 509 .cta-actions { display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; position:relative;z-index:1; } 510 .btn-cta-ghost { 511 display:inline-flex; align-items:center; gap:.45rem; 512 font-family:'Inter',sans-serif; font-weight:700; font-size:1rem; 513 padding:1rem 2.2rem; border-radius:999px; border:1.5px solid rgba(255,255,255,.35); 514 color:#fff; background:transparent; cursor:pointer; 515 transition:background .2s, border-color .2s; 516 text-decoration:none; 517 } 518 .btn-cta-ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); color:#fff; } 519 520 /* ââ CONTACT ââââââââââââââââââââââââââââââââââââââââââ */ 521 .ci-row { 522 display:flex; align-items:flex-start; gap:14px; 523 padding:14px 0; border-bottom:1px solid var(--border); 524 } 525 .ci-row:last-child { border-bottom:none; } 526 .ci-icon { 527 width:40px; height:40px; border-radius:10px; flex-shrink:0; 528 background:var(--brand-lt); color:var(--brand); 529 display:flex; align-items:center; justify-content:center; font-size:.9rem; 530 } 531 .ci-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:2px; } 532 .ci-val { font-size:.92rem; color:var(--ink-soft); font-weight:500; } 533 534 .contact-form-card { 535 background:#fff; border:1px solid var(--border); 536 border-radius:var(--r-lg); padding:2rem; box-shadow:var(--sh-sm); 537 } 538 .f-label { font-size:.8rem; font-weight:700; color:var(--ink-soft); margin-bottom:.4rem; display:block; } 539 .f-input { 540 width:100%; padding:.72rem 1rem; border:1.5px solid var(--border); 541 border-radius:var(--r-sm); font-family:'Inter',sans-serif; 542 font-size:.9rem; color:var(--ink); background:#fff; outline:none; 543 transition:border-color .2s, box-shadow .2s; 544 } 545 .f-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,159,170,.1); } 546 .f-input::placeholder { color:#b0bec5; } 547 textarea.f-input { resize:vertical; min-height:126px; } 548 549 /* ââ FOOTER âââââââââââââââââââââââââââââââââââââââââââ */ 550 .site-footer { background:#091a1c; color:rgba(255,255,255,.55); padding:72px 0 0; } 551 .ft-logo img { height:36px; filter:brightness(0) invert(1); opacity:.88; margin-bottom:.9rem; } 552 .ft-tagline { font-size:.875rem; line-height:1.65; max-width:270px; } 553 .ft-social { display:flex; gap:.55rem; margin-top:1.1rem; } 554 .ft-social a { 555 width:36px; height:36px; border-radius:9px; 556 border:1px solid rgba(255,255,255,.1); 557 display:flex; align-items:center; justify-content:center; 558 color:rgba(255,255,255,.45); font-size:.875rem; 559 transition:background .2s, color .2s, border-color .2s; 560 } 561 .ft-social a:hover { background:var(--brand); color:#fff; border-color:var(--brand); } 562 .ft-col-head { 563 font-family:'Space Grotesk',sans-serif; 564 font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; 565 color:rgba(255,255,255,.85); margin-bottom:.9rem; 566 } 567 .ft-links { list-style:none; padding:0; margin:0; } 568 .ft-links li { margin-bottom:.55rem; } 569 .ft-links a { font-size:.875rem; color:rgba(255,255,255,.45); transition:color .2s; } 570 .ft-links a:hover { color:#fff; } 571 .ft-bottom { 572 border-top:1px solid rgba(255,255,255,.07); 573 padding:20px 0; margin-top:52px; 574 display:flex; align-items:center; justify-content:space-between; 575 flex-wrap:wrap; gap:.5rem; font-size:.8rem; 576 } 577 .ft-bottom a { color:rgba(255,255,255,.35); } 578 .ft-bottom a:hover { color:rgba(255,255,255,.75); } 579 580 /* ââ GRID HELPERS âââââââââââââââââââââââââââââââââââââ */ 581 .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; } 582 .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; } 583 584 /* ââ RESPONSIVE âââââââââââââââââââââââââââââââââââââââ */ 585 @media (max-width:991px) { 586 .hero-row { grid-template-columns:1fr; } 587 .hero-h1 { font-size:2.7rem; } 588 .sec-title { font-size:2.1rem; } 589 .stats-grid { grid-template-columns:repeat(2,1fr); } 590 .grid-3 { grid-template-columns:1fr 1fr !important; } 591 .nav-menu { display:none; flex-direction:column; align-items:stretch; 592 position:absolute; top:100%; left:0; right:0; 593 background:rgba(255,255,255,.97); backdrop-filter:blur(16px); 594 border-bottom:1px solid var(--border)
594; padding:12px 24px 16px; gap:2px; } 595 .nav-menu.open { display:flex; } 596 .nav-menu a { padding:.7rem .85rem; } 597 .nav-hamburger{ display:block; } 598 } 599 @media (max-width:767px) { 600 .sec { padding:64px 0; } 601 .hero { padding:48px 0 64px; } 602 .hero-h1 { font-size:2.2rem; } 603 .sec-title { font-size:1.9rem; } 604 .cta-banner { padding:64px 0; } 605 .cta-banner h2{ font-size:2rem; } 606 .grid-2 { grid-template-columns:1fr; } 607 .astat-grid { grid-template-columns:1fr 1fr; } 608 .stats-grid { grid-template-columns:repeat(2,1fr); } 609 } 610 @media (max-width:575px) { 611 .hero-h1 { font-size:1.9rem; } 612 .sec-title { font-size:1.7rem; } 613 .grid-3 { grid-template-columns:1fr !important; } 614 .ft-bottom { flex-direction:column; text-align:center; } 615 } 616 </style> 617</head> 618<body><a href="https://easyfie.com/cdn-cgi/content?id=ulAKSwvS90.aGBXxsi.TIU_WcBcnNxJJLwH3gV8mDn0-1790231051.6691682-1.2.1.1-pdHtn7FSjEEqrPh4js8VxVbxbMZ0a.XHbpkB.aXc2mvwUScDsOAHsHhyQItIr5JP" aria-hidden="true" rel="nofollow noopener" style="display: none !important; visibility: hidden !important"></a> 619 620 621<div class="announce"> 622 ð Free accounts now include <strong>20 posts</strong> â No credit card needed. 623 <a href="/register">Get started â</a> 624</div> 625 626 627<nav class="site-nav" id="siteNav"> 628 <div class="nav-wrap"> 629 <a href="/" class="nav-logo"><img src="https://www.easyfie.com/users/images/EasFie.png" alt="EasFie"></a> 630 <button class="nav-hamburger" id="navHam" aria-label="Open menu"><i class="fa-solid fa-bars"></i></button> 631 <ul class="nav-menu" id="navMenu"> 632 <li><a href="#about">About</a></li> 633 <li><a href="#posts">Post Types</a></li> 634 <li><a href="#templates">Templates</a></li> 635 <li><a href="#pricing">Packages</a></li> 636 <li><a href="#contact">Contact</a></li> 637 <li><a href="/login" class="nav-signin">Sign in</a></li> 638 <li><a href="/register" class="nav-cta-btn"><i class="fa-solid fa-bolt"></i> Start Free</a></li> 639 </ul> 640 </div> 641</nav> 642 643 644<section class="hero"> 645 <div class="container"> 646 <div class="hero-row"> 647 <div data-aos="fade-up"> 648 <div class="hero-badge"><span class="live-dot"></span> Social marketplace & instant websites</div> 649 <h1 class="hero-h1">Turn posts into sales.<br>Launch your site in <em>minutes</em>.</h1> 650 <p class="hero-lead">Easyfie is a business-first social platform for products, services, shouts, blogs, and portfolio work. Upgrade to unlock higher post limits plus a full website with custom domain and hosting.</p> 651 <div class="hero-actions"> 652 <a href="/register" class="btn btn-primary btn-lg"><i class="fa-solid fa-rocket"></i> Start Free</a> 653 <a href="#pricing" class="btn btn-ghost btn-lg">View Packages</a> 654 </div> 655 <div class="hero-trust"> 656 <span><i class="fa-solid fa-circle-check"></i> No credit card</span> 657 <span><i class="fa-solid fa-circle-check"></i> 20 free posts</span> 658 <span><i class="fa-solid fa-circle-check"></i> Setup in minutes</span> 659 </div> 660 </div> 661 662 <div data-aos="fade-left" data-aos-delay="100"> 663 <div class="mock-feed"> 664 <div class="mock-card"> 665 <div class="mc-head"> 666 <div class="mc-av av-teal">NR</div> 667 <div> 668 <div class="mc-name">Nadia's Boutique</div> 669 <div class="mc-meta">Product · 2 min ago</div> 670 </div> 671 <span class="mc-tag">Product</span> 672 </div> 673 <div class="mc-thumb mc-t1" style="display:flex;align-items:center;justify-content:center;"><i class="fa-solid fa-bag-shopping" style="font-size:2.2rem;color:rgba(0,159,170,.45);"></i></div> 674 <div class="mc-title">Handmade Leather Bag</div> 675 <div class="mc-price">$89.00</div> 676 <div class="mc-foot">
677 <span><i class="fa-regular fa-heart"></i> 24</span> 678 <span><i class="fa-regular fa-comment"></i> 6</span> 679 <a href="#">View product â</a> 680 </div> 681 </div> 682 683 <div class="mock-card"> 684 <div class="mc-head"> 685 <div class="mc-av av-amber">IA</div> 686 <div> 687 <div class="mc-name">Imran's Retail</div> 688 <div class="mc-meta">Shout · 15 min ago</div> 689 </div> 690 <span class="mc-tag">Shout</span> 691 </div> 692 <div class="mc-body">ð¥ Flash Sale â 30% off all items this weekend only. Don't miss out!</div> 693 <div class="mc-foot"> 694 <span><i class="fa-regular fa-heart"></i> 51</span> 695 <span><i class="fa-regular fa-comment"></i> 12</span> 696 <a href="#">View offer â</a> 697 </div> 698 </div> 699 700 <div class="mock-card"> 701 <div class="mc-head"> 702 <div class="mc-av av-violet">CW</div> 703 <div> 704 <div class="mc-name">Cynthia's Studio</div> 705 <div class="mc-meta">Service · 1 hr ago</div> 706 </div> 707 <span class="mc-tag">Service</span> 708 </div> 709 <div class="mc-title">Professional Photography & Brand Shoots</div> 710 <div class="mc-foot"> 711 <span><i class="fa-regular fa-heart"></i> 33</span> 712 <span><i class="fa-regular fa-comment"></i> 8</span> 713 <a href="#">Book now â</a> 714 </div> 715 </div> 716 </div> 717 </div> 718 </div> 719 </div> 720</section> 721 722 723<div class="stats-bar"> 724 <div class="container"> 725 <div class="stats-grid"> 726 <div class="stat-cell"> 727 <div class="stat-n"><span class="counter" data-target="200">0</span>k<span>+</span></div> 728 <div class="stat-l">Business posts shared</div> 729 </div> 730 <div class="stat-cell"> 731 <div class="stat-n"><span class="counter" data-target="40">0</span>k<span>+</span></div> 732 <div class="stat-l">Websites generated</div> 733 </div> 734 <div class="stat-cell"> 735 <div class="stat-n"><span class="counter" data-target="18">0</span>k<span>+</span></div> 736 <div class="stat-l">Active storefronts</div> 737 </div> 738 <div class="stat-cell"> 739 <div class="stat-n"><span class="counter" data-target="92">0</span><span>%</span></div> 740 <div class="stat-l">User satisfaction</div> 741 </div> 742 </div> 743 </div> 744</div> 745 746 747<section id="about" class="sec"> 748 <div class="container"> 749 <div class="grid-2" style="align-items:center;gap:4rem;"> 750 <div data-aos="fade-right"> 751 <span class="eyebrow">Why Easyfie</span> 752 <h2 class="sec-title">Built for commerce,<br>not endless scrolling.</h2> 753 <p class="sec-lead">Easyfie blends social discovery with business tools. Your posts become a living catalog, and your best content powers a website ready for customers to shop, apply, or inquire.</p> 754 <ul class="feature-list"> 755 <li> 756 <div class="fl-icon"><i class="fa-solid fa-store"></i></div> 757 <div><span class="fl-title">Business-first feed</span><span class="fl-desc">Showcase offerings without competing with entertainment noise.</span></div> 758 </li> 759 <li> 760 <div class="fl-icon"><i class="fa-solid fa-arrows-rotate"></i></div> 761 <div><span class="fl-title">Automation from day one</span><span class="fl-desc">Content, store, and site stay synced automatically.</span></div> 762 </li> 763 <li> 764 <div class="fl-icon"><i class="fa-solid fa-earth-americas"></i></div> 765 <div><span class="fl-title">Local reach with global polish</span><span class="fl-desc">Look professional, sell locally, and scale when ready.</span></div> 766 </li> 767 <li> 768 <div class="fl-icon"><i class="fa-solid fa-bolt"></i></div> 769 <div><span class="fl-title">Launch in minutes</span><span class="fl-desc">From sign-up to live profile to website â all in one session.</span></div> 770 </li> 771 </ul> 772 </div> 773 <div data-aos="fade-left"> 774 <div class="about-stats"> 775 <div class="astat-grid"> 776 <div class="astat-card"><div class="astat-n">200k+</div><div class="astat-l">Business posts</div></div> 777 <div class="astat-card"><div class="astat-n">40k+</div><div class="astat-l">Sites generated</div></div> 778 <div class="astat-card"><div class="astat-n">18k+</div><div class="astat-l">Storefronts</div></div> 779 <div class="astat-card"><div class="astat-n">92%</div><div class="astat-l">Satisfaction</div></div> 780 </div> 781 <p style="font-size:.75rem;color:var(--muted);text-align:center;margin:1rem 0 0;">Community highlights & growth markers.</p> 782 </div> 783 </div> 784 </div> 785 </div> 786</section> 787 788 789<section id="posts" class="sec sec-alt"> 790 <div class="container"> 791 <div class="text-center mb-5" data-aos="fade-up" style="text-align:center;margin-bottom:3rem;">
792 <span class="eyebrow">Post Types</span> 793 <h2 class="sec-title" style="margin-left:auto;margin-right:auto;">Every post is designed to sell, hire, or inspire.</h2> 794 <p class="sec-lead wide" style="margin:0 auto;">Share exactly what your audience needs. Each post type appears in the community feed and powers your website automatically.</p> 795 </div> 796 <div class="grid-3"> 797 <div data-aos="fade-up" data-aos-delay="0"> 798 <div class="pt-card"> 799 <div class="pt-icon"><i class="fa-solid fa-store"></i></div> 800 <h5>Products</h5> 801 <p>List physical or digital goods with pricing, photos, and a contact button â your own mini storefront in the feed.</p> 802 </div> 803 </div> 804 <div data-aos="fade-up" data-aos-delay="70"> 805 <div class="pt-card"> 806 <div class="pt-icon"><i class="fa-solid fa-bullhorn"></i></div> 807 <h5>Shouts</h5> 808 <p>Broadcast promotions, announcements, hiring news, or quick updates to the whole community instantly.</p> 809 </div> 810 </div> 811 <div data-aos="fade-up" data-aos-delay="140"> 812 <div class="pt-card"> 813 <div class="pt-icon"><i class="fa-solid fa-briefcase"></i></div> 814 <h5>Services</h5> 815 <p>Describe what you offer, set your rates, and make it easy for local customers to reach out and book.</p> 816 </div> 817 </div> 818 <div data-aos="fade-up" data-aos-delay="210" style="grid-column:span 1;"> 819 <div class="pt-card"> 820 <div class="pt-icon"><i class="fa-solid fa-pen-nib"></i></div> 821 <h5>Blogs</h5> 822 <p>Publish long-form articles, guides, and insights. Build authority while driving organic traffic to your profile.</p> 823 </div> 824 </div> 825 <div data-aos="fade-up" data-aos-delay="280" style="grid-column:span 1;"> 826 <div class="pt-card"> 827 <div class="pt-icon"><i class="fa-solid fa-camera-retro"></i></div> 828 <h5>Portfolio</h5> 829 <p>Display your best creative work with a visual gallery layout. Perfect for designers, photographers, and freelancers.</p> 830 </div> 831 </div> 832 </div> 833 </div> 834</section> 835 836 837<section id="how" class="sec"> 838 <div class="container"> 839 <div class="grid-2" style="align-items:center;gap:4rem;"> 840 <div data-aos="fade-right"> 841 <span class="eyebrow">How it works</span> 842 <h2 class="sec-title">Start now,<br>scale later.</h2> 843 <p class="sec-lead">Launch in three simple steps and grow at your own pace. No technical knowledge needed.</p> 844 <div style="margin-top:1.75rem;"> 845 <a href="/register" class="btn btn-primary btn-lg">Create your account â</a> 846 </div> 847 </div> 848 <div data-aos="fade-left"> 849 <div class="steps"> 850 <div class="step"> 851 <div class="step-n">1</div> 852 <div> 853 <h5>Create your profile</h5> 854 <p>Set up your business in minutes. Add a bio, logo, and info to establish your presence in the community.</p> 855 </div> 856 </div> 857 <div class="step"> 858 <div class="step-n">2</div> 859 <div> 860 <h5>Publish your posts</h5> 861 <p>Share products, services, shouts, blogs, and portfolio work. Each post appears in the feed and on your profile instantly.</p> 862 </div> 863 </div> 864 <div class="step"> 865 <div class="step-n">3</div> 866 <div> 867 <h5>Upgrade when ready</h5> 868 <p>Unlock higher post limits and get a full website built from your content â with custom domain, hosting, and templates included.</p> 869 </div> 870 </div> 871 </div> 872 </div> 873 </div> 874 </div> 875</section> 876 877 878<section id="automation" class="sec sec-warm"> 879 <div class="container"> 880 <div class="grid-2" style="align-items:center;gap:4rem;"> 881 <div data-aos="fade-right">
882 <span class="eyebrow">Automation</span> 883 <h2 class="sec-title">Your website builds itself from your posts.</h2> 884 <p class="sec-lead">Post once, appear everywhere. When you subscribe, Easyfie generates a professional website from your content â with hosting, custom domain, and an optimised layout.</p> 885 <ul class="feature-list" style="margin-top:1.25rem;"> 886 <li> 887 <div class="fl-icon"><i class="fa-solid fa-check"></i></div> 888 <div><span class="fl-title">More posts per month</span><span class="fl-desc">Higher limits as your plan grows.</span></div> 889 </li> 890 <li> 891 <div class="fl-icon"><i class="fa-solid fa-check"></i></div> 892 <div><span class="fl-title">Website auto-created</span><span class="fl-desc">Built from your existing posts instantly.</span></div> 893 </li> 894 <li> 895 <div class="fl-icon"><i class="fa-solid fa-check"></i></div> 896 <div><span class="fl-title">Custom domain & hosting</span><span class="fl-desc">Claim your brand name and go live.</span></div> 897 </li> 898 <li> 899 <div class="fl-icon"><i class="fa-solid fa-check"></i></div> 900 <div><span class="fl-title">Template updates included</span><span class="fl-desc">Always up to date, zero effort required.</span></div> 901 </li> 902 </ul> 903 </div> 904 <div data-aos="fade-left"> 905 <div class="grid-2"> 906 <div class="feat-card"> 907 <div class="feat-icon"><i class="fa-solid fa-globe"></i></div> 908 <h5>Custom domain</h5> 909 <p>Claim your brand name and go live instantly.</p> 910 </div> 911 <div class="feat-card"> 912 <div class="feat-icon"><i class="fa-solid fa-server"></i></div> 913 <h5>Managed hosting</h5> 914 <p>
914Fast, secure, and auto-updated without extra setup.</p> 915 </div> 916 <div class="feat-card"> 917 <div class="feat-icon"><i class="fa-solid fa-layer-group"></i></div> 918 <h5>Ready templates</h5> 919 <p>Pick a style and launch your site in minutes.</p> 920 </div> 921 <div class="feat-card"> 922 <div class="feat-icon"><i class="fa-solid fa-chart-line"></i></div> 923 <h5>Growth tools</h5> 924 <p>Promote posts and reach more customers.</p> 925 </div> 926 </div> 927 </div> 928 </div> 929 </div> 930</section> 931 932 933<section id="templates" class="sec"> 934 <div class="container"> 935 <div style="text-align:center;margin-bottom:3rem;" data-aos="fade-up"> 936 <span class="eyebrow">Templates</span> 937 <h2 class="sec-title">Choose a website style built for your business.</h2> 938 <p class="sec-lead wide" style="margin:0 auto;">Every package includes templates that match your goals. Pick a layout that fits your business and Easyfie fills it with your posts.</p> 939 </div> 940 <div class="grid-3"> 941 <div data-aos="fade-up" data-aos-delay="0"> 942 <div class="tpl-card"> 943 <div class="tpl-thumb tpl-t1"><i class="fa-solid fa-cart-shopping"></i></div> 944 <div class="tpl-body"><h5>E-commerce Website</h5><p>Products, inventory, and checkout ready from day one.</p></div> 945 </div> 946 </div> 947 <div data-aos="fade-up" data-aos-delay="70"> 948 <div class="tpl-card"> 949 <div class="tpl-thumb tpl-t2"><i class="fa-solid fa-building"></i></div> 950 <div class="tpl-body"><h5>Corporate Website</h5><p>Professional presence with company info and team pages.</p></div> 951 </div> 952 </div> 953 <div data-aos="fade-up" data-aos-delay="140"> 954 <div class="tpl-card"> 955 <div class="tpl-thumb tpl-t3"><i class="fa-solid fa-filter"></i></div> 956 <div class="tpl-body"><h5>Sales Funnel Page</h5><p>Convert visitors into customers with optimised landing pages.</p></div> 957 </div> 958 </div> 959 <div data-aos="fade-up" data-aos-delay="210"> 960 <div class="tpl-card"> 961 <div class="tpl-thumb tpl-t4"><i class="fa-solid fa-pen-to-square"></i></div> 962 <div class="tpl-body"><h5>Blog Website</h5><p>Publish stories and grow your audience with ease.</p></div> 963 </div> 964 </div> 965 <div data-aos="fade-up" data-aos-delay="280"> 966 <div class="tpl-card"> 967 <div class="tpl-thumb tpl-t5"><i class="fa-solid fa-images"></i></div> 968 <div class="tpl-body"><h5>Portfolio Website</h5><p>Show your best work with a modern visual layout.</p></div> 969 </div> 970 </div> 971 </div> 972 </div> 973</section> 974 975 976<section id="pricing" class="sec sec-alt"> 977 <div class="container"> 978 <div style="text-align:center;margin-bottom:3rem;" data-aos="fade-up"> 979 <span class="eyebrow">Packages</span> 980 <h2 class="sec-title">Plans that grow with your business.</h2> 981 <p class="sec-lead wide" style="margin:0 auto;">Start free, then upgrade when you need more posts, more visibility, and a complete website experience.</p> 982 </div> 983 <div class="grid-3" style="max-width:960px;margin:0 auto;"> 984 <div data-aos="fade-up" data-aos-delay="0"> 985 <div class="price-card"> 986 <div class="price-plan">Starter</div> 987 <div class="price-amount">Free</div> 988 <div class="price-desc">Perfect for getting discovered locally.</div> 989 <hr class="price-sep"> 990 <ul class="price-list"> 991 <li><i class="fa-solid fa-check"></i> 20 post limit</li> 992 <li><i class="fa-solid fa-check"></i> Business profile page</li> 993 <li><i class="fa-solid fa-check"></i> Community feed visibility</li> 994 <li><i class="fa-solid fa-check"></i> Basic analytics</li> 995 </ul> 996 <a href="/login" class="btn btn-ghost btn-block">Get started free</a> 997 </div> 998 </div> 999 <div data-aos="fade-up" data-aos-delay="120"> 1000 <div class="price-card is-featured"> 1001 <div class="price-popular">Most Popular</div> 1002 <div class="price-plan" style="margin-top:1.75rem;">Growth</div> 1003 <div class="price-amount">$19.99 <small>/ month</small></div> 1004 <div class="price-desc">For growing brands ready to publish more.</div> 1005 <hr class="price-sep"> 1006 <ul class="price-list"> 1007 <li><i class="fa-solid fa-check"></i> 200 post limit</li> 1008 <li><i class="fa-solid fa-check"></i> Website template included</li> 1009 <li><i class="fa-solid fa-check"></i> Custom domain + hosting</li> 1010 <li><i class="fa-solid fa-check"></i> Priority support</li> 1011 </ul> 1012 <a href="/register" class="btn btn-primary btn-block">Upgrade to Growth</a> 1013 </div> 1014 </div> 1015 <div data-aos="fade-up" data-aos-delay="240"> 1016 <div class="price-card"> 1017 <div class="price-plan">Scale</div> 1018 <div class="price-amount">$49.99 <small>/ month</small></div> 1019 <div class="price-desc">For multi-service teams and agencies.</div> 1020 <hr class="price-sep"> 1021 <ul class="price-list"> 1022 <li><i class="fa-solid fa-check"></i> Unlimited posts</li> 1023 <li><i class="fa-solid fa-check"></i> Premium templates</li> 1024 <li><i class="fa-solid fa-check"></i> Multiple site sections</li> 1025 <li><i class="fa-solid fa-check"></i> Dedicated success manager</li> 1026 </ul> 1027 <a href="/register" class="btn btn-ghost btn-block">Talk to Sales</a> 1028 </div> 1029 </div> 1030 </div> 1031 </div> 1032</section> 1033 1034 1035<section id="testimonials" class="sec"> 1036 <div class="container"> 1037 <div style="text-align:center;margin-bottom:3rem;" data-aos="fade-up">
1038 <span class="eyebrow">Testimonials</span> 1039 <h2 class="sec-title">Trusted by businesses that sell with confidence.</h2> 1040 </div> 1041 <div class="grid-3"> 1042 <div data-aos="fade-up" data-aos-delay="0"> 1043 <div class="testi-card" style="height:100%;"> 1044 <div class="testi-stars">â â â â â </div> 1045 <p class="testi-quote">"Easyfie helped us launch a clean website in one afternoon. Our services are finally easy to find online."</p> 1046 <div class="testi-author"> 1047 <div class="tav tav-1">NR</div> 1048 <div><div class="tav-name">Nadia R.</div><div class="tav-role">Salon Owner</div></div> 1049 </div> 1050 </div> 1051 </div> 1052 <div data-aos="fade-up" data-aos-delay="110"> 1053 <div class="testi-card"> 1054 <div class="testi-stars">â â â â â </div> 1055 <p class="testi-quote">"Posting our products now updates our site automatically. That alone saved us hours every single week."</p> 1056 <div class="testi-author"> 1057 <div class="tav tav-2">IA</div> 1058 <div><div class="tav-name">Imran A.</div><div class="tav-role">Retail Shop Owner</div></div> 1059 </div> 1060 </div> 1061 </div> 1062 <div data-aos="fade-up" data-aos-delay="220"> 1063 <div class="testi-card"> 1064 <div class="testi-stars">â â â â â </div> 1065 <p class="testi-quote">"We used the jobs template and hired two assistants in a week. The platform just works, no technical fuss."</p> 1066 <div class="testi-author"> 1067 <div class="tav tav-3">CW</div> 1068 <div><div class="tav-name">Cynthia W.</div><div class="tav-role">Studio Founder</div></div> 1069 </div> 1070 </div> 1071 </div> 1072 </div> 1073 </div> 1074</section> 1075 1076 1077<section id="faq" class="sec sec-alt"> 1078 <div class="container"> 1079 <div style="max-width:720px;margin:0 auto;"> 1080 <div style="text-align:center;margin-bottom:3rem;" data-aos="fade-up"> 1081 <span class="eyebrow">FAQ</span> 1082 <h2 class="sec-title">Frequently asked questions</h2> 1083 </div> 1084 <div class="faq-wrap" data-aos="fade-up"> 1085 <div class="faq-row"> 1086 <button class="faq-btn" aria-expanded="false" data-faq="1">Is the free plan really free? No credit card? <div class="faq-ico"><i class="fa-solid fa-plus"></i></div></button> 1087 <div class="faq-ans" id="faq-1">Yes, completely free. You can create a profile, start posting (up to 20 posts), and appear in the community feed without entering any payment information. You only pay when you upgrade to a Growth or Scale plan.</div> 1088 </div> 1089 <div class="faq-row"> 1090 <button class="faq-btn" aria-expanded="false" data-faq="2">How does the automatic website work? <div class="faq-ico"><i class="fa-solid fa-plus"></i></div></button> 1091 <div class="faq-ans" id="faq-2">When you upgrade to a paid plan, Easyfie generates a professional website using your existing posts and profile. You choose a template, connect your domain, and your content is automatically organised and published. New posts also appear on your website instantly.</div> 1092 </div> 1093 <div class="faq-row"> 1094 <button class="faq-btn" aria-expanded="false" data-faq="3">Can I use my own domain name? <div class="faq-ico"><i class="fa-solid fa-plus"></i></div></button> 1095 <div class="faq-ans" id="faq-3">Yes. Growth and Scale plans include custom domain support. You can connect your existing domain or we can help you set one up. Hosting is fully managed and included â no extra fees.</div> 1096 </div> 1097 <div class="faq-row"> 1098 <button class="faq-btn" aria-expanded="false" data-faq="4">What types of businesses is Easyfie best for? <div class="faq-ico"><i class="fa-solid fa-plus"></i></div></button> 1099 <div class="faq-ans" id="faq-4">Easyfie works for any local or online business â retail shops, salons, freelancers, p
1099hotographers, consultants, restaurants, and more. If you sell products, offer services, or want to build a following, Easyfie is built for you.</div> 1100 </div> 1101 <div class="faq-row"> 1102 <button class="faq-btn" aria-expanded="false" data-faq="5">Can I cancel my plan at any time? <div class="faq-ico"><i class="fa-solid fa-plus"></i></div></button> 1103 <div class="faq-ans" id="faq-5">Yes, there are no long-term contracts. Cancel any time and your account reverts to the free plan at the end of your billing cycle. Your posts and profile data are always kept safe.</div> 1104 </div> 1105 </div> 1106 </div> 1107 </div> 1108</section> 1109 1110 1111<section id="contact" class="sec"> 1112 <div class="container"> 1113 <div class="grid-2" style="align-items:start;gap:4rem;"> 1114 <div data-aos="fade-right"> 1115 <span class="eyebrow">Contact</span> 1116 <h2 class="sec-title">Talk to our team.</h2> 1117 <p class="sec-lead">Questions about packages or onboarding? We're ready to help you launch.</p> 1118 <div style="margin-top:1.5rem;"> 1119 <div class="ci-row"> 1120 <div class="ci-icon"><i class="fa-solid fa-location-dot"></i></div> 1121 <div><div class="ci-label">Address</div><div class="ci-val">Fleharty Road, North Olmsted, OH, USA</div></div> 1122 </div> 1123 <div class="ci-row"> 1124 <div class="ci-icon"><i class="fa-solid fa-phone"></i></div> 1125 <div><div class="ci-label">Phone</div><div class="ci-val">+88 0171-5162718</div></div> 1126 </div> 1127 <div class="ci-row"> 1128 <div class="ci-icon"><i class="fa-solid fa-envelope"></i></div> 1129 <div><div class="ci-label">Email</div><div class="ci-val"><a href="/cdn-cgi/l/email-protection#d7beb9b1b897b2b6a4aeb1beb2f9b4b8ba" style="color:var(--brand);"><span class="__cf_email__" data-cfemail="e0898e868fa085819399868985ce838f8d">[email protected]</span></a></div></div> 1130 </div> 1131 </div> 1132 </div> 1133 <div data-aos="fade-left"> 1134 <div class="contact-form-card"> 1135 <h5 style="font-size:1.1rem;margin-bottom:1.4rem;">Send a message</h5> 1136 <form> 1137 <div style="display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-bottom:.85rem;"> 1138 <div><label class="f-label">Your name</label><input type="text" class="f-input" placeholder="Nadia Rahman" required></div> 1139 <div><label class="f-label">Email address</label><input type="email" class="f-input" placeholder="[email protected]" required></div> 1140 </div> 1141 <div style="margin-bottom:.85rem;"> 1142 <label class="f-label">Business type</label> 1143 <input type="text" class="f-input" placeholder="e.g. Retail, Photography, Consulting" required> 1144 </div> 1145 <div style="margin-bottom:1.25rem;"> 1146 <label class="f-label">Your message</label> 1147 <textarea class="f-input" placeholder="Tell us about your goals and how we can helpâ¦" required></textarea> 1148 </div> 1149 <button type="submit" class="btn btn-primary btn-lg">Send Message <i class="fa-solid fa-paper-plane" style="margin-left:4px;"></i></button> 1150 </form> 1151 </div> 1152 </div> 1153 </div> 1154 </div> 1155</section> 1156 1157 1158<section class="cta-banner"> 1159 <div class="container"> 1160 <span class="eyebrow" style="background:rgba(255,255,255,.15);color:#fff;" data-aos="fade-up">Get started today</span> 1161 <h2 data-aos="fade-up" data-aos-delay="80">Ready to grow your<br>business online?</h2> 1162 <p data-aos="fade-up" data-aos-delay="160">Join thousands of businesses already selling and connecting on Easyfie. Free to start, powerful when you need it.</p> 1163 <div class="cta-actions" data-aos="fade-up" data-aos-delay="240"> 1164 <a href="/register" class="btn btn-white btn-lg"><i class="fa-solid fa-rocket"></i> Create free account</a> 1165 <a href="#pricing" class="btn-cta-ghost">View pricing</a> 1166 </div> 1167 </div> 1168</section> 1169 1170 1171<footer class="site-footer"> 1172 <div class="container"> 1173 <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;"> 1174 <div> 1175 <div class="ft-logo"><img src="https://www.easyfie.com/users/images/EasFie.png" alt="EasFie"></div> 1176 <p class="ft-tagline">A business-first social platform and instant website builder for modern businesses. Post once, sell everywhere.</p> 1177 <div class="ft-social"> 1178 <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a> 1179 <a href="#" aria-label="Twitter / X"><i class="fab fa-twitter"></i></a> 1180 <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a> 1181 <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a> 1182 </div> 1183 </div> 1184 <div> 1185 <div class="ft-col-head">Platform</div> 1186 <ul class="ft-links"> 1187 <li><a href="#about">About</a></li> 1188 <li><a href="#posts">Post types</a></li> 1189 <li><a href="#templates">Templates</a></li> 1190 <li><a href="#pricing">Packages</a></li> 1191 </ul> 1192 </div> 1193 <div> 1194 <div class="ft-col-head">Account</div> 1195 <ul class="ft-links"> 1196 <li><a href="/login">Sign in</a></li> 1197 <li><a href="/register">Register</a></li> 1198 <li><a href="/forgot-password">Forgot password</a></li> 1199 </ul> 1200 </div> 1201 <div> 1202 <div class="ft-col-head">Support</div> 1203 <ul class="ft-links"> 1204 <li><a href="#faq">FAQ</a></li> 1205 <li><a href="#contact">Contact</a></li> 1206 <li><a href="/cdn-cgi/l/email-protection#e28b8c848da28783919b848b87cc818d8f"><span class="__cf_email__" data-cfemail="8fe6e1e9e0cfeaeefcf6e9e6eaa1ece0e2">[email protected]</span></a></li> 1207 <li><a href="#">Privacy Policy</a></li> 1208 <li><a href="#">Terms of Service</a></li> 1209 </ul> 1210 </div> 1211 </div> 1212 <div class="ft-bottom">
1213 <span>© 2026 Easyfie. All rights reserved.</span> 1214 <span>Built for businesses that mean business.</span> 1215 </div> 1216 </div> 1217</footer>
vendor: 110 bytes, lines 1217-1219
1217 1218 1219<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1219<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
vendor: 1 bytes, line 1219
1219
1220<script> 1221 AOS.init({ duration: 760, easing: 'ease-out-cubic', once: true }); 1222 1223 // Nav scroll shadow 1224 window.addEventListener('scroll', () => { 1225 document.getElementById('siteNav').classList.toggle('nav-scrolled', window.scrollY > 16); 1226 }, { passive: true }); 1227 1228 // Mobile menu toggle 1229 document.getElementById('navHam').addEventListener('click', () => { 1230 document.getElementById('navMenu').classList.toggle('open'); 1231 }); 1232 1233 // Close mobile menu on link click 1234 document.querySelectorAll('#navMenu a').forEach(a => { 1235 a.addEventListener('click', () => document.getElementById('navMenu').classList.remove('open')); 1236 }); 1237 1238 // Counter animation 1239 const counters = document.querySelectorAll('.counter'); 1240 const cObs = new IntersectionObserver(entries => { 1241 entries.forEach(e => { 1242 if (!e.isIntersecting) return; 1243 const el = e.target, target = +el.dataset.target; 1244 let v = 0; 1245 const step = target / 160; 1246 const tick = () => { 1247 v = Math.min(v + step, target); 1248 el.textContent = Math.ceil(v); 1249 if (v < target) requestAnimationFrame(tick); 1250 }; 1251 tick(); 1252 cObs.unobserve(el); 1253 }); 1254 }, { threshold: 0.5 }); 1255 counters.forEach(c => cObs.observe(c)); 1256 1257 // FAQ accordion 1258 document.querySelectorAll('.faq-btn').forEach(btn => { 1259 btn.addEventListener('click', () => { 1260 const id = btn.dataset.faq; 1261 const ans = document.getElementById('faq-' + id); 1262 const open = btn.getAttribute('aria-expanded') === 'true'; 1263 // close all 1264 document.querySelectorAll('.faq-btn').forEach(b => { 1265 b.setAttribute('aria-expanded', 'false'); 1266 document.getElementById('faq-' + b.dataset.faq).style.display = 'none'; 1267 }); 1268 if (!open) { btn.setAttribute('aria-expanded', 'true'); ans.style.display = 'block'; } 1269 }); 1270 }); 1271</script>
1271 1272
1273<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"e471d2b633394bb9acc72f14b38fb064","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 1273
1273
1274<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a3ffb468ead13c9c',t:'MTc5MDIzMTA1MQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
1274</body> 1275</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.