<!doctype html> <html lang='en'> <head> <meta charset='utf-8' /> <meta name='viewport' content='width=device-width,initial-scale=1' /> <title>Twister Technologies — Your Problem, Our Solution!</title> <meta name='description' content='Twister Technologies: Lebanese IT company since 2006. Marketing, Social Media Management, Web Development and Twistify e‑commerce solutions.' /> <style> :root{ --bg:#071428; --card:#0b1624; --muted:#9fb0c6; --accent-a:#38bdf8; /* sky-400 */ --accent-b:#34d399; /* emerald-400 */ --accent-c:#7c3aed; /* violet */ --glass: rgba(255,255,255,0.03); --radius:14px; --container:1200px; --shadow-1: 0 6px 20px rgba(2,6,23,0.6); --shadow-2: 0 12px 36px rgba(2,6,23,0.55); font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: #e6f0f8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background: linear-gradient(180deg,#041026 0%, #071428 100%); padding:24px; line-height:1.45; } .wrap{max-width:var(--container);margin:0 auto;padding:0 20px;} /* Header */ header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--accent-a)} .logo{ width:54px;height:54px;border-radius:12px;background:linear-gradient(135deg,var(--accent-b),var(--accent-a));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1);flex-shrink:0 } .brand h1{margin:0;font-size:18px;color:#dff6ff} nav{display:flex;gap:12px;align-items:center} nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;font-size:14px} nav a.cta{background:linear-gradient(90deg,var(--accent-a),var(--accent-b));color:#042028;font-weight:700} /* Hero */ .hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:start} .hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:26px;border-radius:var(--radius);box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:14px} .eyebrow{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--accent-b);font-weight:700;font-size:13px} h2{margin:6px 0 0;font-size:26px;color:#eaf8ff} p.lead{margin:12px 0 0;color:var(--muted);font-size:15px;max-width:70ch} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px} .btn{padding:12px 16px;border-radius:12px;border:0;cursor:pointer;font-weight:700;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));color:#042028} .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)} /* Quick aside */ .quick{background:var(--card);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow-1)} .muted{color:var(--muted)} /* Services */ .services{margin-top:16px;display:grid;gap:12px;grid-template-columns:1fr} .service-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;gap:12px;align-items:flex-start;transition:transform .16s ease, box-shadow .16s ease} .service-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.55)} .svc-icon{width:56px;height:56;border-radius:10px;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;flex-shrink:0} .service-card h3{margin:0;font-size:15px} .service-card p{margin:6px 0 0;color:var(--muted);font-size:13px} .svc-cta{margin-left:auto;align-self:center} /* Twistify spotlight */ .spotlight{margin-top:14px;display:grid;gap:12px;padding:16px;border-radius:12px;background:linear-gradient(90deg, rgba(52,211,153,0.03), rgba(56,189,248,0.02));border:1px solid rgba(255,255,255,0.03)} .spot-grid{display:grid;gap:12px} .kpis{display:flex;gap:10px;flex-wrap:wrap} .kpi{background:rgba(255,255,255,0.02);padding:10px;border-radius:10px;min-width:110px;text-align:center} .kpi strong{display:block;color:var(--accent-a);font-size:18px} /* Process */ .process{margin-top:14px;display:grid;gap:10px} .step{display:flex;gap:12px;align-items:center;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.02)} .num{width:36px;height:36;border-radius:8px;background:linear-gradient(90deg,var(--accent-b),var(--accent-c));display:flex;align-items:center;justify-content:center;color:white;font-weight:800} /* Projects */ .projects{margin-top:14px;display:grid;gap:12px;grid-template-columns:1fr} .project{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)} .thumb{width:92px;height:60px;border-radius:8px;background:linear-gradient(90deg,var(--accent-a),var(--accent-c));flex-shrink:0} /* CTA strip */ .cta-strip{margin-top:18px;padding:16px;border-radius:12px;background:linear-gradient(90deg, rgba(56,189,248,0.04), rgba(52,211,153,0.03));display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(255,255,255,0.02)} footer{margin-top:22px;color:var(--muted);padding-top:12px;border-top:1px solid rgba(255,255,255,0.03)} /* Responsive columns */ @media(min-width:760px){ .hero{grid-template-columns:1fr 420px} .services{grid-template-columns:repeat(2,1fr)} .projects{grid-template-columns:repeat(2,1fr)} .spot-grid{grid-template-columns:1fr 200px} } @media(min-width:1100px){ .services{grid-template-columns:repeat(3,1fr)} .projects{grid-template-columns:repeat(3,1fr)} .wrap{padding:0} } /* small helpers */ a{color:inherit} .sr-only{position:absolute!important;height:1px!important;width:1px!important;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .small{font-size:13px;color:var(--muted)} </style> </head> <body> <div class='wrap' role='document'> <header> <a class='brand' href='#' aria-label='Twister Technologies home'> <div class='logo' aria-hidden='true'> <svg width='30' height='30' viewBox='0 0 24 24' fill='none' aria-hidden='true' xmlns='http://www.w3.org/2000/svg'> <path d='M12 3v3' stroke='#042028' stroke-width='1.5' stroke-linecap='round'/> <path d='M6 8c1.7-2 4.1-3.2 6.6-3.2 4.6 0 8.2 3.7 8.2 8.3' stroke='#042028' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/> </svg> </div> <h1>Twister Technologies</h1> </a> <nav aria-label='Main navigation'> <a href='#services'>Services</a> <a href='#projects'>Work</a> <a href='#contact' class='cta'>Contact</a> </nav> </header> <main> <!-- HERO --> <section class='hero' aria-labelledby='hero-title'> <div class='hero-card' role='region' aria-label='Introduction'> <span class='eyebrow'>Established in Lebanon • Since 2006</span> <div style='display:flex;flex-direction:column;align-items:center;text-align:center'> <h2 id='hero-title'>Welcome to Twister Technologies, where innovation meets impact.</h2> <p class='lead' style='margin-top:10px'> As a leading Lebanese IT company established in 2006, we specialize in crafting powerful digital solutions designed to elevate your business. We believe every challenge presents an opportunity, embodying our core philosophy: 'Your Problem, Our Solution!' </p> <p class='lead' style='margin-top:10px;font-weight:700;color:var(--accent-b)'> We seamlessly integrate Marketing, Social Media Management, and Web Development to build your unshakeable online presence. </p> <div class='hero-cta' role='group' aria-label='Primary actions'> <button class='btn' onclick='location.href='#contact''>Get a Free Consultation</button> <button class='btn ghost' onclick='location.href='#projects''>Explore Twistify Demo</button> </div> <div style='margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center'> <span class='small'>Twistify • Bespoke Web Design • Strategic Digital Marketing</span> </div> </div> </div> <aside class='quick' aria-labelledby='how-we-help' style='min-width:260px'> <h3 id='how-we-help' style='margin:0 0 8px'>How we help</h3> <p class='small' style='margin:0 0 12px'>Tailored strategies, reliable delivery, and measurable results — combining global quality standards with local agility.</p> <div style='display:flex;flex-direction:column;gap:10px'> <div style='display:flex;gap:10px;align-items:center'> <div style='width:44px;height:44px;border-radius:10px;background:linear-gradient(90deg,var(--accent-a),var(--accent-b));display:flex;align-items:center;justify-content:center;flex-shrink:0'> <svg width='20' height='20' viewBox='0 0 24 24' fill='none'><path d='M3 12h18' stroke='#042028' stroke-width='1.4' stroke-linecap='round'/></svg> </div> <div> <div style='font-weight:700'>Tailored Strategies</div> <div class='small'>Campaigns and roadmaps aligned to business goals</div> </div> </div> <div style='display:flex;gap:10px;align-items:center'> <div style='width:44px;height:44px;border-radius:10px;background:linear-gradient(90deg,var(--accent-b),var(--accent-c));display:flex;align-items:center;justify-content:center;flex-shrink:0'> <svg width='20' height='20' viewBox='0 0 24 24' fill='none'><path d='M3 7v10a2 2 0 002 2h14' stroke='#042028' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg> </div> <div> <div style='font-weight:700'>Local + Global</div> <div class='small'>Global standards with local market agility</div> </div> </div> <div style='display:flex;gap:10px;align-items:center'> <div style='width:44px;height:44px;border-radius:10px;background:linear-gradient(90deg,var(--accent-c),var(--accent-a));display:flex;align-items:center;justify-content:center;flex-shrink:0'> <svg width='20' height='20' viewBox='0 0 24 24' fill='none'><path d='M4 6h16v12H4z' stroke='#042028' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg> </div> <div> <div style='font-weight:700'>Partnership</div> <div class='small'>Long-term focus to perfect your digital journey</div> </div> </div> <div style='display:flex;gap:8px;margin-top:6px;justify-content:flex-end'> <button class='btn' onclick='location.href='#contact''>Start Collaboration</button> </div> </div> </aside> </section> <!-- Services & Twistify --> <section id='services' style='margin-top:18px'> <h3 style='margin:0 0 10px'>Core Services</h3> <div class='services' role='list'> <article class='service-card' role='listitem' aria-labelledby='svc-marketing'> <div class='svc-icon' aria-hidden='true'> <svg width='26' height='26' viewBox='0 0 24 24' fill='none'><path d='M3 12h18' stroke='#2563eb' stroke-width='1.6' stroke-linecap='round'/></svg> </div> <div> <h3 id='svc-marketing'>Digital Marketing & Strategy</h3> <p>Data-driven campaigns designed to grow traffic, conversions, and brand awareness with measurable KPIs.</p> </div> <div class='svc-cta'><button class='btn ghost' onclick='location.href='#contact''>Start a Project</button></div> </article> <article class='service-card' role='listitem' aria-labelledby='svc-social'> <div class='svc-icon' aria-hidden='true'> <svg width='26' height='26' viewBox='0 0 24 24' fill='none'><path d='M3 8c0-1.1.9-2 2-2h14' stroke='#34d399' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg> </div> <div> <h3 id='svc-social'>Social Media Management</h3> <p>Creative content, paid social, and community management that connects your brand with real audiences.</p> </div> <div class='svc-cta'><button class='btn ghost' onclick='location.href='#contact''>Discuss Strategy</button></div> </article> <article class='service-card' role='listitem' aria-labelledby='svc-web'> <div class='svc-icon' aria-hidden='true'> <svg width='26' height='26' viewBox='0 0 24 24' fill='none'><path d='M3 7v10a2 2 0 002 2h14' stroke='#7c3aed' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg> </div> <div> <h3 id='svc-web'>Web Design & Development</h3> <p>Bespoke websites engineered for performance, accessibility, and conversion—built to scale with your business.</p> </div> <div class='svc-cta'><button class='btn ghost' onclick='location.href='#contact''>Get a Quote</button></div> </article> <article class='service-card' role='listitem' aria-labelledby='svc-twist'> <div class='svc-icon' aria-hidden='true'> <svg width='26' height='26' viewBox='0 0 24 24' fill='none'><path d='M3 3h18v4H3zM5 11h14v8H5z' stroke='#ffd166' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg> </div> <div> <h3 id='svc-twist'>Twistify — E‑commerce Platforms</h3> <p>Intuitive e‑commerce solutions with secure payment flows, inventory control, and conversion-focused UX.</p> </div> <div class='svc-cta'><button class='btn' onclick='location.href='#projects''>See Twistify</button></div> </article> </div> <div class='spotlight' aria-labelledby='twistify-title'> <h4 id='twistify-title' style='margin:0 0 6px'>Twistify — Built for merchants & marketplaces</h4> <p class='small' style='margin:0 0 10px'>Dynamic, secure, and conversion-optimized e‑commerce tailored to your business model.</p> <div class='spot-grid'> <div> <ul style='margin:0 0 10px 18px;color:var(--muted)'> <li>Optimized checkout & payment integrations</li> <li>Multi-vendor & inventory management</li> <li>Promotions, analytics & A/B testing</li> </ul> <div style='display:flex;gap:10px'> <button class='btn' onclick='location.href='#projects''>View Case Study</button> <button class='btn ghost' onclick='location.href='#contact''>Request Demo</button> </div> </div> <aside> <div class='kpis' role='list' aria-label='Twistify highlights'> <div class='kpi' role='listitem'><strong>99.9%</strong><span class='small'>Uptime</span></div> <div class='kpi' role='listitem'><strong>PCI‑Ready</strong><span class='small'>Secure payments</span></div> <div class='kpi' role='listitem'><strong>Scalable</strong><span class='small'>Startups → Marketplaces</span></div> </div> </aside> </div> </div> </section> <!-- Process --> <section aria-labelledby='process-title' style='margin-top:18px'> <h4 id='process-title' style='margin:0 0 8px'>Our Process</h4> <p class='small' style='margin:0 0 12px'>Practical, collaborative and outcome-focused — we partner with you throughout the journey.</p> <div class='process' aria-hidden='false'> <div class='step'><div class='num'>1</div><div><strong>Discover</strong><div class='small'>We learn your goals, users and constraints.</div></div></div> <div class='step'><div class='num'>2</div><div><strong>Design</strong><div class='small'>UX-led wireframes and brand-aligned visuals.</div></div></div> <div class='step'><div class='num'>3</div><div><strong>Build</strong><div class='small'>Secure development, testing and deployment.</div></div></div> <div class='step'><div class='num'>4</div><div><strong>Grow</strong><div class='small'>Optimization, analytics and ongoing support.</div></div></div> </div> </section> <!-- Projects --> <section id='projects' style='margin-top:18px'> <h4 style='margin:0 0 10px'>Featured Work</h4> <div class='projects' role='list'> <article class='project' role='listitem'> <div class='thumb' aria-hidden='true'></div> <div> <div style='font-weight:700'>Twistify — Online Marketplace</div> <div class='small'>Custom e‑commerce system with multi-vendor support and optimized checkout.</div> </div> <div style='margin-left:auto'><button class='btn ghost' onclick='location.href='#projects''>View Case</button></div> </article> <article class='project' role='listitem'> <div class='thumb' style='background:linear-gradient(90deg,#ff9a9e,#fbc2eb)' aria-hidden='true'></div> <div> <div style='font-weight:700'>Corporate Website Rebuild</div> <div class='small'>Bespoke website redesigned for speed, accessibility and conversion.</div> </div> <div style='margin-left:auto'><button class='btn ghost' onclick='location.href='#projects''>View Case</button></div> </article> <article class='project' role='listitem'> <div class='thumb' style='background:linear-gradient(90deg,#60a5fa,#34d399)' aria-hidden='true'></div> <div> <div style='font-weight:700'>Social Campaign — Launch</div> <div class='small'>Integrated social strategy that doubled user engagement in 6 weeks.</div> </div> <div style='margin-left:auto'><button class='btn ghost' onclick='location.href='#projects''>View Case</button></div> </article> </div> </section> <!-- CTA strip --> <section class='cta-strip' aria-label='Call to action' style='margin-top:20px'> <div> <div style='font-weight:700'>Discover how we can transform your vision into tangible digital excellence.</div> <div class='small' style='margin-top:4px'>We combine global quality standards with local agility and competitive pricing.</div> </div> <div style='display:flex;gap:10px'> <button class='btn' onclick='location.href='#contact''>Get Started</button> <button class='btn ghost' onclick='location.href='mailto:hello@twister.example''>Email Us</button> </div> </section> <!-- Contact Teaser --> <section id='contact' style='margin-top:20px'> <div class='quick' style='display:flex;flex-direction:column;gap:10px'> <strong>Ready to begin?</strong> <p class='small' style='margin:0'>Tell us about your project and we'll respond with a tailored plan and estimate.</p> <div style='display:flex;gap:10px;flex-wrap:wrap'> <button class='btn' onclick='location.href='mailto:hello@twister.example''>Email hello@twister.example</button> <button class='btn ghost' onclick='location.href='#''>Request a Proposal</button> </div> </div> </section> <footer style='margin-top:22px'> <div style='display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap'> <div> <div style='font-weight:700'>Twister Technologies</div> <div class='small'>Digital solutions crafted in Lebanon — Since 2006</div> </div> <div style='display:flex;gap:18px;flex-wrap:wrap'> <div> <div style='font-weight:700'>Contact</div> <div class='small'>hello@twister.example • +961 7 123 456</div> </div> <div> <div style='font-weight:700'>Office</div> <div class='small'>Beirut, Lebanon</div> </div> </div> </div> <div style='margin-top:12px' class='small'>© <span id='year'></span> Twister Technologies — All rights reserved.</div> </footer> </main> </div> <script> document.getElementById('year').textContent = new Date().getFullYear(); </script> </body> </html>