pactora/contact.html at main · sooubh/pactora · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Support — Pactora</title>
    <link rel="icon" type="image/png" href="assets/images/logo-icon.png">
    <meta name="description" content="Reach out to the Pactora team for support, bug reports, or beta access inquiries.">
    <script src="https://cdn.tailwindcss.com"></script>
                                <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up {
            animation: fade-in-up 0.8s ease-out forwards;
        }
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
    h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Plus Jakarta Sans', sans-serif; }
    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        heading: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            50: '#f0fdfa',
                            100: '#e0f2fe',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 text-slate-800 antialiased selection:bg-brand-200 selection:text-brand-900">

    <!-- Header / Navigation -->
    <header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
        <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
            <a href="index.html" class="flex items-center gap-3">
                <img src="assets/images/logo-icon.png" alt="Pactora Logo" class="w-8 h-8 rounded-lg shadow-sm">
                <span class="text-xl font-bold text-slate-900 tracking-tight">Pactora</span>
            </a>
            <nav class="hidden md:flex gap-8 items-center">
                <a href="index.html#features" class="text-sm font-medium text-slate-600 hover:text-slate-900 transition">Features</a>
                <a href="index.html#how-it-works" class="text-sm font-medium text-slate-600 hover:text-slate-900 transition">How it Works</a>
                <a href="index.html#gallery" class="text-sm font-medium text-slate-600 hover:text-slate-900 transition">Gallery</a>
            </nav>
            <a href="index.html#download" class="px-4 py-2 text-sm font-semibold text-white bg-slate-900 rounded-full hover:bg-slate-800 transition">Get the App</a>
        </div>
    </header>

    <main class="pt-32 pb-24 relative overflow-hidden min-h-screen">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-4xl h-[400px] bg-brand-500/10 blur-[120px] rounded-full -z-10 pointer-events-none"></div>

        <div class="max-w-4xl mx-auto px-6 sm:px-8 lg:px-12 text-center">
            <div class="animate-fade-in-up">
                <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 tracking-tighter mb-6">Contact & Support</h1>
                <p class="text-xl text-slate-600 mb-12 max-w-2xl mx-auto">Questions about Pactora or the beta? We’re here to help.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-left animate-fade-in-up delay-100">
                <!-- Support Card -->
                <div class="p-8 rounded-[2.5rem] bg-white border border-slate-200 shadow-lg">
                    <div class="w-12 h-12 rounded-2xl bg-brand-500/10 border border-brand-500/20 flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                    </div>
                    <h2 class="text-2xl font-bold text-slate-900 mb-2">Support Email</h2>
                    <p class="text-slate-600 mb-6">General questions, beta access, or feedback.</p>
                    <a href="mailto:sourabh3527@gmail.com" class="text-brand-600 font-bold hover:text-brand-500 transition-colors text-lg">sourabh3527@gmail.com</a>
                </div>

                <!-- Developer Card -->
                <div class="p-8 rounded-[2.5rem] bg-white border border-slate-200 shadow-lg">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-6">
                        <svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
                    </div>
                    <h2 class="text-2xl font-bold text-slate-900 mb-2">Developer</h2>
                    <p class="text-slate-600 mb-6">Technical feedback or partnership inquiries.</p>
                    <p class="text-slate-900 font-bold text-lg">Sourabh Singh</p>
                </div>

                <!-- Bug Reports -->
                <div class="md:col-span-2 p-8 rounded-[2.5rem] bg-white border border-slate-200 shadow-lg">
                    <div class="flex flex-col md:flex-row gap-8 items-center">
                        <div class="w-16 h-16 rounded-2xl bg-rose-500/10 border border-rose-500/20 flex items-center justify-center shrink-0">
                            <svg class="w-8 h-8 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                        </div>
                        <div>
                            <h2 class="text-2xl font-bold text-slate-900 mb-2">Bug Reports</h2>
                            <p class="text-slate-600 leading-relaxed">Please include your device model, Android version, and steps to reproduce the issue.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-20 animate-fade-in-up delay-200">
                <h3 class="text-sm font-semibold tracking-[0.2em] uppercase text-brand-600 mb-8">Quick Resources</h3>
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="how-to-use.html" class="px-6 py-3 rounded-full bg-white border border-slate-200 text-slate-700 font-bold hover:bg-slate-100 transition-all">User Guide</a>
                    <a href="privacy.html" class="px-6 py-3 rounded-full bg-white border border-slate-200 text-slate-700 font-bold hover:bg-slate-100 transition-all">Privacy Policy</a>
                    <a href="terms.html" class="px-6 py-3 rounded-full bg-white border border-slate-200 text-slate-700 font-bold hover:bg-slate-100 transition-all">Terms of Use</a>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <!-- Footer -->
    <footer class="bg-slate-50 border-t border-slate-200 py-20">
        <div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
                <div class="col-span-1 md:col-span-2 text-left">
                    <div class="flex items-center gap-3 mb-6">
                        <img src="assets/images/logo-icon.png" alt="Pactora Logo" class="w-8 h-8 rounded-lg shadow-sm">
                        <span class="text-xl font-extrabold text-slate-900 tracking-tighter">Pactora</span>
                    </div>
                    <p class="max-w-xs text-slate-600 text-sm leading-relaxed mb-8">Private, offline-first tracking for promises, IOUs, and borrowed items.</p>
                    <div class="flex flex-col gap-2">
                        <span class="text-sm font-bold text-slate-900">Contact Us</span>
                        <a href="mailto:sourabh3527@gmail.com" class="text-brand-600 font-semibold hover:text-brand-500 transition-colors text-sm">sourabh3527@gmail.com</a>
                    </div>
                </div>
                <div>
                    <h5 class="text-slate-900 font-bold mb-6 text-sm uppercase tracking-widest">Product</h5>
                    <ul class="space-y-4 text-sm font-medium text-slate-600">
                        <li><a href="index.html#features" class="hover:text-slate-900 transition-colors">Features</a></li>
                        <li><a href="how-to-use.html" class="hover:text-slate-900 transition-colors">User Guide</a></li>
                        <li><a href="contact.html" class="hover:text-slate-900 transition-colors">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h5 class="text-slate-900 font-bold mb-6 text-sm uppercase tracking-widest">Legal</h5>
                    <ul class="space-y-4 text-sm font-medium text-slate-600">
                        <li><a href="privacy.html" class="hover:text-slate-900 transition-colors">Privacy Policy</a></li>
                        <li><a href="terms.html" class="hover:text-slate-900 transition-colors">Terms of Use</a></li>
                    </ul>
                </div>
            </div>
            <div class="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-bold uppercase tracking-widest text-slate-500">
                <p>&copy; 2026 Pactora. All rights reserved.</p>
                <p>Offline-Always &bull; Privacy-First</p>
            </div>
        </div>
    </footer>

</body>
</html>