From 13a9a27c70b47568093cae56207ce8805b629bee Mon Sep 17 00:00:00 2001 From: Tejas Patil Date: Mon, 11 Nov 2024 01:45:42 +0530 Subject: [PATCH] Mixpanel Integrated (#39) --- .env.example | 8 +- app/page.tsx | 10 +- components/Pricing/GrowthCard.tsx | 110 +++++++++++--------- components/Pricing/MvpCard.tsx | 116 ++++++++++++--------- components/Pricing/StartupCard.tsx | 12 ++- components/main/contact/Contact.tsx | 86 +++++++++------ components/main/hero/Hero.tsx | 13 ++- components/main/navbar/Navbar.tsx | 18 +++- components/main/share-your-vision.tsx | 6 ++ lib/analytics.ts | 40 +++++++ package.json | 3 + pnpm-lock.yaml | 144 +++++++++++++++++++++++++- 12 files changed, 424 insertions(+), 142 deletions(-) create mode 100644 lib/analytics.ts diff --git a/.env.example b/.env.example index 49389da..c14fec7 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1,6 @@ -// web3form access key -NEXT_PUBLIC_WEB3FORM_ACCESS_KEY= \ No newline at end of file +# web3form access key +NEXT_PUBLIC_WEB3FORM_ACCESS_KEY= + +# Mixpanel Tokens for prod and test +NEXT_PUBLIC_PROD_MIXPANEL_TOKEN= +NEXT_PUBLIC_TEST_MIXPANEL_TOKEN= \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 650b899..5c2f2a2 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,13 +1,19 @@ -// import Accordian from "@/components/main/accordian/Accordian"; -// import { Bottom } from "@/components/main/bottom/Bottom"; +"use client"; +import { useEffect } from "react"; import ContactPage from "@/components/main/contact/Contact"; import HeroSection from "@/components/main/hero/Hero"; import PricingSection from "@/components/Pricing/PricingSection"; import Services from "@/components/main/services/Services"; import TeamPage from "@/components/main/team/Team"; +import { analyticsInit, trackEvent } from "@/lib/analytics"; export default function Home() { + useEffect(() => { + analyticsInit(); + trackEvent("HomePage Viewed", {}); + }, []); + return ( <> diff --git a/components/Pricing/GrowthCard.tsx b/components/Pricing/GrowthCard.tsx index 48c532e..03e0091 100644 --- a/components/Pricing/GrowthCard.tsx +++ b/components/Pricing/GrowthCard.tsx @@ -1,55 +1,69 @@ -import { Check} from "lucide-react" -import { Button } from "@/components/ui/button" -import { Card } from "@/components/ui/card" -import Link from "next/link" +import { Check } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import Link from "next/link"; +import { trackEvent } from "@/lib/analytics"; export const GrowthCard = () => { - return( - -
-
- - Ongoing Support - -
-
- Monthly Retainer -
-

Growth Retainer Package

-
- $2497/month -
-

No commitment, cancel anytime

- -
-

Dedicated Monthly Services:

-
    - {[ - "60 hours of development time per month", - "Flexible hours allocation", - "Weekly strategy calls", - "Priority feature development", - "Continuous maintenance & optimization", - "Same-day emergency support" - ].map((feature, index) => ( -
  • -
    - -
    - {feature} -
    • - ))} -
-
+ const handlePricingBtn = () => { + trackEvent("Pricing Button Pressed", { + PricingType: "Monthly Retainer", + Platform: navigator.userAgent.includes("Mobile") ? "Mobile" : "Desktop", + }); + }; + return ( + +
+
+ + Ongoing Support +
- - +
+ Monthly Retainer +
+

+ Growth Retainer Package +

+
+ $2497/month +
+

No commitment, cancel anytime

+ +
+

+ Dedicated Monthly Services: +

+
    + {[ + "60 hours of development time per month", + "Flexible hours allocation", + "Weekly strategy calls", + "Priority feature development", + "Continuous maintenance & optimization", + "Same-day emergency support", + ].map((feature, index) => ( +
  • +
    + +
    + {feature} +
    • + ))} +
+
+
+ +
-
- - - ) -} \ No newline at end of file + + + ); +}; diff --git a/components/Pricing/MvpCard.tsx b/components/Pricing/MvpCard.tsx index 03721d6..be0942c 100644 --- a/components/Pricing/MvpCard.tsx +++ b/components/Pricing/MvpCard.tsx @@ -1,58 +1,72 @@ -import { Check} from "lucide-react" -import { Button } from "@/components/ui/button" -import { Card } from "@/components/ui/card" -import Link from "next/link" - +import { Check } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; +import Link from "next/link"; +import { trackEvent } from "@/lib/analytics"; export const MvpCard = () => { - - return ( - -
-
- - Most Popular - -
-
- One time -
-

MVP Development Package

-
- Starting at $1997 -
-

20% off for early adopters

- -
-

What's Included:

-
    - {[ - "Complete MVP development in 2-3 weeks", - "Web application/ Mobile App", - "Modern, scalable tech stack", - "Seamless integrations (payments, auth, etc.)", - "30 days of free maintenance", - "Personalized, founder-led development", - "Regular updates and transparent process" - ].map((feature, index) => ( -
  • -
    - -
    - {feature} -
    • - ))} -
-
+ const handlePricingBtn = () => { + trackEvent("Pricing Button Pressed", { + PricingType: "One Time", + Platform: navigator.userAgent.includes("Mobile") ? "Mobile" : "Desktop", + }); + }; + return ( + +
+
+ + Most Popular + +
+
+ One time +
+

+ MVP Development Package +

+
+ + Starting at $1997 +
- - +

20% off for early adopters

+ +
+

+ What's Included: +

+
    + {[ + "Complete MVP development in 2-3 weeks", + "Web application/ Mobile App", + "Modern, scalable tech stack", + "Seamless integrations (payments, auth, etc.)", + "30 days of free maintenance", + "Personalized, founder-led development", + "Regular updates and transparent process", + ].map((feature, index) => ( +
  • +
    + +
    + {feature} +
    • + ))} +
+
+
+ +
-
- - - ) -} \ No newline at end of file + + + ); +}; diff --git a/components/Pricing/StartupCard.tsx b/components/Pricing/StartupCard.tsx index 7d2c84e..96570bb 100644 --- a/components/Pricing/StartupCard.tsx +++ b/components/Pricing/StartupCard.tsx @@ -2,8 +2,15 @@ import { Check } from "lucide-react"; import Link from "next/link"; import { Button } from "../ui/button"; import { Card } from "../ui/card"; +import { trackEvent } from "@/lib/analytics"; export const StartupCard = () => { + const handlePricingBtn = () => { + trackEvent("Pricing Button Pressed", { + PricingType: "Quarterly Plan", + Platform: navigator.userAgent.includes("Mobile") ? "Mobile" : "Desktop", + }); + }; return (
@@ -45,7 +52,10 @@ export const StartupCard = () => {
-
diff --git a/components/main/contact/Contact.tsx b/components/main/contact/Contact.tsx index fa4679d..f4c64d7 100644 --- a/components/main/contact/Contact.tsx +++ b/components/main/contact/Contact.tsx @@ -1,12 +1,12 @@ -"use client" +"use client"; -import { useState, FormEvent } from 'react'; -import Container from '../../shared/Container'; -import Topic from '../../shared/Topic'; -import Image from 'next/image'; +import { useState, FormEvent } from "react"; +import Container from "../../shared/Container"; +import Topic from "../../shared/Topic"; +import Image from "next/image"; +import { trackEvent } from "@/lib/analytics"; - -type ContactType = 'sayHi' | 'getQuote'; +type ContactType = "sayHi" | "getQuote"; interface FormData { contactType: ContactType; @@ -17,44 +17,50 @@ interface FormData { const ContactPage = () => { const [formData, setFormData] = useState({ - contactType: 'sayHi', - name: '', - email: '', - message: '' + contactType: "sayHi", + name: "", + email: "", + message: "", }); - + const handleContactSubmit = (type: ContactType) => { + trackEvent("Contact Form Submit", { + SubmitType: type, + Platform: navigator.userAgent.includes("Mobile") ? "Mobile" : "Desktop", + }); + }; const handleSubmit = (e: FormEvent) => { e.preventDefault(); // Add your form submission logic here - console.log('Form submitted:', formData); + handleContactSubmit(formData.contactType); + console.log("Form submitted:", formData); }; const handleInputChange = ( e: React.ChangeEvent ) => { const { name, value } = e.target; - setFormData(prev => ({ + setFormData((prev) => ({ ...prev, - [name]: value + [name]: value, })); }; const handleRadioChange = (type: ContactType) => { - setFormData(prev => ({ + setFormData((prev) => ({ ...prev, - contactType: type + contactType: type, })); }; return (
-
- +
@@ -64,8 +70,8 @@ const ContactPage = () => { id="sayHi" type="radio" name="contactType" - checked={formData.contactType === 'sayHi'} - onChange={() => handleRadioChange('sayHi')} + checked={formData.contactType === "sayHi"} + onChange={() => handleRadioChange("sayHi")} className="w-4 h-4 text-lime bg-black border-black focus:ring-lime" />
-
-
-