Home
QQ-VVN
about us simple

about us simple

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is about me

About us

Author QQ-VVN

507

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
 <section class="min-h-screen px-4 py-14 text-white font-sans">
    <div class="max-w-6xl mx-auto">
        <div class="max-w-3xl mx-auto text-center mb-12 relative">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-indigo-600/20 blur-3xl opacity-30 rounded-full"></div>
            <h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500 mb-4">Hakkımızda</h1>
            <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-indigo-500 mx-auto mb-6 rounded-full"></div>
            <p class="text-lg text-gray-300 relative z-10">
                Mütevazı başlangıçlardan oyun dünyasında bir oyun değiştirici olmaya — 2015'ten beri en son teknoloji araçlar, eklentiler ve çözümler üretiyoruz. Sadece ürün geliştirmiyoruz; oyunun geleceğini şekillendiren deneyimler yaratıyoruz.
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-rocket text-blue-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Yolculuğumuz</h3>
                <p class="text-gray-300">
                    2015'te büyük bir vizyona sahip küçük bir ekip olarak başlayan serüvenimiz, şimdi yaratıcılık, teknoloji ve yeniliğin merkezi haline geldi. Misyonumuz her zaman netti: oyun dünyasında mümkün olanın sınırlarını zorlayan araçlar yaratmak.
                </p>
                <p class="text-gray-300 mt-4">
                    Üstlendiğimiz her projede, hem geliştiriciler hem de oyuncular için deneyimi yükseltmeyi hedefliyoruz. Çözümlerimiz sadece araç değil; yaratıcılığın katalizörleridir.
                </p>
            </div>
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-purple-400/20 to-purple-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-lightbulb text-purple-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Özünde Yenilik</h3>
                <p class="text-gray-300">
                    Yenilik bizim için sadece bir sözcük değil — şirketimizin kalp atışıdır. Geliştirdiğimiz her ürün ilham vermek, meydan okumak ve dönüştürmek için tasarlanmıştır. Vizyoner ve uzman ekibimiz sürekli olarak sınırları zorluyor.
                </p>
                <p class="text-gray-300 mt-4">
                    En küçük detayı mükemmelleştirirken veya tamamen yeni bir şey yaratırken, odak noktamız her zaman kalite, performans ve kullanıcı deneyimidir. Sadece trendi takip etmiyoruz; trendi yaratıyoruz.
                </p>
            </div>
        </div>
        <div class="glass-effect shimmer rounded-xl p-8 mb-16">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">8+</div>
                    <div class="text-gray-400">Yıllık Deneyim</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">50k+</div>
                    <div class="text-gray-400">Mutlu Kullanıcı</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">99.9%</div>
                    <div class="text-gray-400">Çalışma Süresi</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">7/24</div>
                    <div class="text-gray-400">Destek</div>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-indigo-400/20 to-indigo-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-clock text-indigo-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Gelecek Şimdi</h3>
                <p class="text-gray-300">
                    Oyunun geleceği sınırsız ve vizyonumuz da öyle. Büyümeye ve gelişmeye devam ederken, gelecekte olacakları şekillendirmeye her zamankinden daha kararlıyız. Ekibimiz sürekli yenilik yapıyor, araştırıyor ve işbirliği yapıyor.
                </p>
                <p class="text-gray-300 mt-4">
                    Sadece yazılım geliştirmiyoruz; deneyimler şekillendiriyoruz. Odak noktamız, geliştiricileri güçlendiren, oyun deneyimini geliştiren ve interaktif eğlencenin geleceğini sunan yeni nesil oyun araçları yaratmak.
                </p>
            </div>
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-green-400/20 to-green-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-check-circle text-green-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Neden Biz?</h3>
                <p class="text-gray-300">
                    Oyun dünyasının sürekli değiştiği bir ortamda, sadece ürün değil — bir ortaklık sunuyoruz. Oyun dünyasının rekabetçi, hızlı tempolu ve sürekli gelişen bir yapıya sahip olduğunu anlıyoruz.
                </p>
                <p class="text-gray-300 mt-4">
                    İş akışınızı düzene sokmak isteyen bir geliştirici veya deneyiminizi üst seviyeye çıkarmak isteyen bir oyuncu olun, yanınızdayız. Ürünlerimiz tek bir hedefle tasarlandı: en iyi işinizi yapmanızı, en iyi oyununuzu oynamanızı ve en iyi deneyiminizi yaratmanızı sağlamak.
                </p>
            </div>
        </div>
        <div class="glass-effect shimmer rounded-xl p-8 mt-16">
            <h3 class="text-2xl font-bold text-white mb-8 text-center">Değerlerimiz</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-shield-alt text-blue-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Güvenlik</h4>
                    <p class="text-gray-400 text-sm">En son güvenlik önlemleriyle güvenliğinizi ve gizliliğinizi önceliklendiriyoruz</p>
                </div>
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-purple-400/20 to-purple-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-tachometer-alt text-purple-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Performans</h4>
                    <p class="text-gray-400 text-sm">Araçlarımız minimum sistem etkisiyle maksimum performans için optimize edilmiştir</p>
                </div>
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-green-400/20 to-green-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-headset text-green-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Destek</h4>
                    <p class="text-gray-400 text-sm">Özel ekibimiz her türlü sorunuzda size yardımcı olmaya hazır</p>
                </div>
            </div>
        </div>
    </div>
</section>
</div>

Related Examples

Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

133
Testimonial that What Client Says

Author:
Abdul Baset Bappy

4 months ago

477
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

5 months ago

909
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

4 weeks ago

166
Questionnaire Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

856
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

4 months ago

778
About Us

Author:
KULDEEP

4 months ago

600
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

5 months ago

708
basichtml
this is basic html

Author:
Anonymous

4 months ago

247
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

13.8k
About Us

Author:
ariaw

3 weeks ago

68
Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

6 months ago

831

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components