WebFolio/contact.html at main · rajpratham1/WebFolio · 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | WebFolio</title>
<meta name="description" content="Contact page for project inquiries and collaboration.">

    <meta name="author" content="WebFolio Studio">
  <meta name="keywords" content="web development, website design, android app development, ios app interface, portfolio website, seo-friendly website, responsive design, WebFolio">
<meta name="robots" content="index, follow">

  <meta property="og:type" content="website">
    <meta property="og:locale" content="en_US">
<link rel="canonical" href="https://rajpratham1.github.io/my-portfolio/contact.html">

  <meta property="og:site_name" content="WebFolio">
  <meta property="og:title" content="Contact | WebFolio">
  <meta property="og:description" content="Contact page for project inquiries and collaboration.">
  <meta property="og:url" content="https://rajpratham1.github.io/my-portfolio/contact.html">
  <meta property="og:image" content="https://rajpratham1.github.io/my-portfolio/assets/logo/webfolio-mark.svg">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@webfolio">
    <meta name="twitter:creator" content="@webfolio">
<meta name="twitter:title" content="Contact | WebFolio">
  <meta name="twitter:description" content="Contact page for project inquiries and collaboration.">
  <meta name="twitter:image" content="https://rajpratham1.github.io/my-portfolio/assets/logo/webfolio-mark.svg">

  <!-- Analytics: replace G-XXXXXXXXXX with your real GA4 Measurement ID -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
  </script>
  <meta name="theme-color" content="#0a1020">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "WebFolio Studio",
    "url": "https://rajpratham1.github.io/my-portfolio",
    "email": "shrivastavapratham40@gmail.com",
    "telephone": "+91-6200892887",
    "logo": "https://rajpratham1.github.io/my-portfolio/assets/logo/webfolio-mark.svg"
  }
  </script>
  <link rel="icon" type="image/svg+xml" href="assets/logo/webfolio-mark.svg">
  <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=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body class="theme-contact">
  <a class="skip-link" href="#main">Skip to content</a>
  <header class="site-header">
    <div class="container nav-wrap">
      <a class="brand" href="index.html">Web<span>Folio</span></a>
      <button type="button" class="nav-toggle" aria-label="Open menu">Menu</button>
      <nav class="nav-links" aria-label="Primary">
        <a data-nav href="index.html">Home</a>
        <a data-nav href="about.html">About</a>
        <a data-nav href="services.html">Services</a>
        <a data-nav href="work.html">Work</a>
        <a data-nav href="dedication.html">Dedication</a>
        <a data-nav href="contact.html">Contact</a>
<a data-nav href="hire.html" class="cta">Start Project</a>
      </nav>
      </div>
  </header>

  <main id="main" class="page-shell">
    <section class="hero container">
      <div class="hero-grid">
        <article class="panel hero-copy reveal">
          <p class="kicker">Start The Conversation</p>
          <h1>Share your brief and get a clear action plan.</h1>
          <p>Need website development, Android APK creation, redesign, or maintenance? Contact us directly. We are happy to help and guide you with a practical plan.</p>
          <div class="metrics">
            <div class="metric"><b data-count="24" data-suffix="h">0</b><span>First reply target</span></div>
            <div class="metric"><b data-count="3" data-suffix=" options">0</b><span>Engagement models</span></div>
            <div class="metric"><b data-count="1" data-suffix=" call">0</b><span>To finalize scope</span></div>
      </div>
        </article>
        <aside class="panel hero-art reveal" aria-hidden="true">
          <div class="blob one"></div>
          <div class="blob two"></div>
          <div class="blob three"></div>
          <div class="hero-tag">Fast replies with implementation clarity.</div>
        </aside>
      </div>
    </section>

    <section class="section container reveal">
      <h2>Direct Message Options</h2>
      <div class="contact-layout">
        <article class="panel card contact-actions">
          <strong>Talk Instantly</strong>
          <p>Pick your preferred channel. We will respond with clarity and next steps for your project.</p>
          <a class="contact-btn" href="mailto:shrivastavapratham40@gmail.com">Email: shrivastavapratham40@gmail.com</a>
          <a class="contact-btn" href="tel:+916200892887">Call: +91-6200892887</a>
          <a class="contact-btn" href="https://wa.me/916200892887" target="_blank" rel="noopener noreferrer">WhatsApp Direct Chat</a>
          <p>Tagline: We create, we develop, we maintain, and we are always happy to help.</p>
        </article>

        <form id="contactForm" class="panel contact-form" action="https://formsubmit.co/shrivastavapratham40@gmail.com" method="POST">
          <input type="hidden" name="_captcha" value="false">
          <input type="hidden" name="_subject" value="New WebFolio Direct Message">
          <input type="hidden" name="_template" value="table">
          <input type="hidden" name="_next" value="https://rajpratham1.github.io/my-portfolio/thank-you.html">

          <div class="field">
            <label for="name">Full Name</label>
            <input id="name" name="name" type="text" required placeholder="Your full name">
      </div>

          <div class="field">
            <label for="email">Email Address</label>
            <input id="email" name="email" type="email" required placeholder="your@email.com">
      </div>

          <div class="field">
            <label for="phone">Phone Number</label>
            <input id="phone" name="phone" type="tel" placeholder="+91-xxxxxxxxxx">
      </div>

          <div class="field">
            <label for="businessType">Business Type</label>
            <select id="businessType" name="business_type" required>
              <option value="">Select business type</option>
              <option value="Startup">Startup</option>
              <option value="Local Business">Local Business</option>
              <option value="Agency">Agency</option>
              <option value="Healthcare">Healthcare</option>
              <option value="Education">Education</option>
              <option value="Other">Other</option>
            </select>
      </div>

          <div class="field">
            <label for="service">Service Needed</label>
            <select id="service" name="service" required>
              <option value="">Select service</option>
              <option value="Landing Page">Landing Page</option>
              <option value="Business Website">Business Website</option>
              <option value="Portfolio Website">Portfolio Website</option>
              <option value="Redesign">Redesign</option>
              <option value="Other">Other</option>
            </select>
      </div>

          <div class="field">
            <label for="budget">Budget Range</label>
            <select id="budget" name="budget_range" required>
              <option value="">Select budget range</option>
              <option value="Under 25k INR">Under 25k INR</option>
              <option value="25k - 60k INR">25k - 60k INR</option>
              <option value="60k - 120k INR">60k - 120k INR</option>
              <option value="120k+ INR">120k+ INR</option>
            </select>
      </div>

          <div class="field">
            <label for="timeline">Preferred Timeline</label>
            <select id="timeline" name="preferred_timeline" required>
              <option value="">Select timeline</option>
              <option value="Urgent (within 1 week)">Urgent (within 1 week)</option>
              <option value="2-4 weeks">2-4 weeks</option>
              <option value="1-2 months">1-2 months</option>
              <option value="Flexible">Flexible</option>
            </select>
      </div>

          <div class="field">
            <label for="message">Project Message</label>
            <textarea id="message" name="message" required placeholder="Share your goals, pages needed, and timeline."></textarea>
      </div>

          <a class="contact-btn" href="https://wa.me/916200892887" target="_blank" rel="noopener noreferrer">Book 15-min Call</a>
          <button class="cta submit-btn" type="submit">Send Message Now</button>
          <p id="formStatus" class="form-status-note" role="status" aria-live="polite"></p>
        </form>
      </div>
    </section>

    <section class="section container reveal">
      <h2>Direct Message Setup Notes</h2>
      <div class="grid-3">
        <article class="card">
          <strong>1. Connect Your Form</strong>
          <p>Form is connected with: <code>action=\"https://formsubmit.co/shrivastavapratham40@gmail.com\"</code>.</p>
        </article>
        <article class="card">
          <strong>2. Add Name Attributes</strong>
          <p>All inputs include valid <code>name</code> attributes so message data is delivered correctly.</p>
        </article>
        <article class="card">
          <strong>3. Send And Confirm</strong>
          <p>On first submission, FormSubmit sends a confirmation email. Approve it once to activate delivery.</p>
        </article>
      </div>
    </section>

    <section class="section container reveal">
      <h2>Contact Steps</h2>
<div class="timeline">
  <div class="step"><strong>Send brief</strong><p>Share goals, pages needed, and preferred launch date.</p></div>
  <div class="step"><strong>Scope call</strong><p>Confirm feature priorities and timeline constraints.</p></div>
  <div class="step"><strong>Kickoff</strong><p>Begin production with milestone-based execution plan.</p></div>
      </div>
    </section>

    <section class="section container reveal">
      <h2>What You Can Share In Message</h2>
      <div class="long-text-grid">
        <article class="card">
          <strong>Business Context</strong>
          <p>Tell what your business does, your target audience, and what action you want users to take on the website.</p>
          <p>Example: calls, leads, bookings, signups, portfolio credibility, or product demos.</p>
        </article>
        <article class="card">
          <strong>Scope Details</strong>
          <p>Share number of pages, style preference, required integrations, and deadline expectations.</p>
          <p>This helps define a practical project plan from day one.</p>
        </article>
        <article class="card">
          <strong>Content Readiness</strong>
          <p>Mention if you already have text, images, and branding files or need complete content assistance.</p>
          <p>Clear content status prevents delays and improves launch quality.</p>
        </article>
        <article class="card">
          <strong>Budget Direction</strong>
          <p>Share a budget range so features can be prioritized correctly and transparently.</p>
          <p>You will get a realistic recommendation instead of generic packaging.</p>
        </article>
        <article class="card">
          <strong>Maintenance Requirement</strong>
          <p>Mention if you also need monthly maintenance, continuous content updates, or feature enhancements.</p>
          <p>This helps us design a long-term support plan from the start.</p>
        </article>
        <article class="card">
          <strong>Website + Android Combo</strong>
          <p>If you need both a website and Android APK version, mention it in your message for a bundled plan.</p>
          <p>We can align design, branding, and functionality across both platforms.</p>
        </article>
      </div>
    </section>
  </main>

      <footer class="site-footer">
    <div class="container footer-grid">
      <div>
        <h3>WebFolio Studio</h3>
        <p>Purpose-built websites, Android apps, desktop experiences, and iOS-ready UI systems with reliable delivery.</p>
        <small>Copyright <span id="year"></span> WebFolio</small>
      </div>
      <div class="footer-links">
        <a data-nav href="index.html">Home</a>
        <a data-nav href="about.html">About</a>
        <a data-nav href="services.html">Services</a>
        <a data-nav href="work.html">Work</a>
        <a data-nav href="dedication.html">Dedication</a>
        <a data-nav href="process.html">Process</a>
        <a data-nav href="showcase.html">Showcase</a>
        <a data-nav href="testimonials.html">Testimonials</a>
        <a data-nav href="pricing.html">Pricing</a>
        <a data-nav href="faq.html">FAQ</a>
        <a data-nav href="tools.html">Free Tools</a>
        <a data-nav href="performance.html">Performance</a>
        <a data-nav href="release-checklist.html">Release Checklist</a>
        <a data-nav href="contact.html">Contact</a>
        <a data-nav href="hire.html">Hire</a>
        <a data-nav href="privacy.html">Privacy</a>
        <a data-nav href="changelog.html">Changelog</a>
        <a data-nav href="terms.html">Terms</a>
      </div>
    </div>
  </footer>

  <script src="assets/js/main.js"></script>
</body>
</html>