diff --git a/LandingPage/index.html b/LandingPage/index.html index 340be0d..64c0c4f 100644 --- a/LandingPage/index.html +++ b/LandingPage/index.html @@ -2,10 +2,10 @@ - + - Vite + React + TS + InPactAI
diff --git a/LandingPage/public/vite.svg b/LandingPage/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/LandingPage/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/LandingPage/src/App.tsx b/LandingPage/src/App.tsx index 3ac0eab..36c6a45 100644 --- a/LandingPage/src/App.tsx +++ b/LandingPage/src/App.tsx @@ -1,35 +1,27 @@ -import { BrowserRouter, Routes, Route } from 'react-router-dom'; -// import Lenis from '@studio-freight/lenis'; -import Landing from '../src/Pages/Landing'; -import PrivacyPolicy from './Pages/Privacy'; -import TermsOfService from './Pages/Legal'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import Landing from './Pages/Landing'; +import Privacy from './Pages/Privacy'; +import Legal from './Pages/Legal'; +import Navbar from './components/Navbar'; +import Footer from './components/Footer'; +import LayoutFrame from './components/LayoutFrame'; +import ScrollToTop from './components/ScrollToTop'; function App() { - // useEffect(() => { - // const lenis = new Lenis({ - // duration: 1.2, - // easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), - // smoothWheel: true, - // }); - - // function raf(time: number) { - // lenis.raf(time); - // requestAnimationFrame(raf); - // } - - // requestAnimationFrame(raf); - // }, []); - return ( - - - } /> - } /> - } /> - {/* } /> */} - - {/* */} - + + +
+ + + + } /> + } /> + } /> + +
+ ); } diff --git a/LandingPage/src/Pages/Landing.tsx b/LandingPage/src/Pages/Landing.tsx index 90f25ac..1d266b1 100644 --- a/LandingPage/src/Pages/Landing.tsx +++ b/LandingPage/src/Pages/Landing.tsx @@ -1,184 +1,439 @@ import { motion } from 'framer-motion'; -import { Sparkles, Users } from 'lucide-react'; -import { DollarSign, FileText, BarChart2, RefreshCw } from 'lucide-react'; +import { Sparkles, Users, ArrowRight, Zap, Globe, ShieldCheck, Check } from 'lucide-react'; +import { DollarSign, FileText, BarChart2, RefreshCw } from 'lucide-react'; import ChatbotSidebarForm from '../components/form'; -import Footer from '../components/Footer'; -import Threads from '../components/bg'; -import SpotlightCard from '../components/card'; -import Header from '../components/Header'; -import HowItWorks from '../components/howitworks'; import Integrations from '../components/integration'; +import HowItWorks from '../components/howitworks'; +import { useEffect, useState } from 'react'; +import Community from '../components/Community'; +import Threads from '../components/bg'; +import ShootingStars from '../components/ShootingStars'; +// Ruler marks component for the grid lines +const RulerMarks = ({ side }: { side: 'left' | 'right' }) => { + const marks = [100, 200, 300, 400, 500, 600, 700, 800]; + return ( +
+ {/* Main vertical line - Brighter opacity [0.08] */} +
+ {/* Number markers */} + {marks.map((num) => ( +
+ {side === 'left' && ( + <> + {num} +
+ + )} + {side === 'right' && ( + <> +
+ {num} + + )} +
+ ))} + {/* Corner dots */} +
+
+ ); +}; -function Landing() { - const headingWords = ['Creator', 'Collaboration', 'Hub']; +// Typewriter Component +const Typewriter = ({ text, delay = 0, className }: { text: string; delay?: number; className?: string }) => { + const [displayedText, setDisplayedText] = useState(''); + + useEffect(() => { + const timeout = setTimeout(() => { + let currentIndex = 0; + const interval = setInterval(() => { + if (currentIndex <= text.length) { + setDisplayedText(text.slice(0, currentIndex)); + currentIndex++; + } else { + clearInterval(interval); + } + }, 50); // Typing speed + + // Cleanup for interval inside timeout + return () => clearInterval(interval); + }, delay * 1000); + + return () => { + clearTimeout(timeout); + }; + }, [text, delay]); + + return ( + + {displayedText} + | + + ); +}; + +// Glowing Beam Component for Grid Borders +const GlowingBeam = () => { + return ( +
+ {/* Horizontal Beam */} + + {/* Vertical Beam */} + +
+ ); +} +function Landing() { const containerVariants = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { - staggerChildren: 0.2, + staggerChildren: 0.12, + delayChildren: 0.1, }, }, }; - - const wordVariants = { - hidden: { opacity: 0, y: 30 }, - show: { opacity: 1, y: 0 }, + + const itemVariants = { + hidden: { opacity: 0, y: 16 }, + show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.25, 0.4, 0.25, 1] } }, }; + + const features = [ + { + icon: , + title: 'AI-Driven Sponsorship Matchmaking', + description: + 'Connects creators with brands based on demographics.', + }, + { + icon: , + title: 'Creator Collaboration Hub', + description: + 'Facilitates partnerships between creators with complementary audiences.', + }, + { + icon: , + title: 'Pricing & Deal Optimization', + description: + 'Fair pricing recommendations based on engagement trends.', + }, + { + icon: , + title: 'Contract Assistant', + description: + 'AI-powered deal structuring, contract generation, and optimization.', + }, + { + icon: , + title: 'Performance Analytics', + description: + 'Track sponsorship performance, audience engagement, and ROI.', + }, + { + icon: , + title: 'Real-Time Feedback Loop', + description: + 'Continuous campaign feedback to improve effectiveness.', + }, + ]; + return ( -
-
- {/* Hero Section */} +
+ {/* Main Container with Grid Lines */} +
+ {/* Left Ruler */} + + {/* Right Ruler */} + + + {/* Hero Section */} +
+ {/* Threads Background - Moved here for impact */} +
+ +
+ {/* Background Gradients */} +
+ {/* Main glow */} +
+ {/* Secondary accent glow */} +
+
+ {/* Noise texture overlay */} +
+ {/* Radial gradient vignette */} +
+
+ + + {/* Social Proof Badge */} - - Powered by AOSSIE - AOSSIE - - -
-
- -
- - {headingWords.map((word, index) => ( - - {word} - - ))} - - - -

- The future of creator collaboration is coming. - Join the waitlist to be the first to experience - the revolution in influencer marketing. -

- - - {/* Features */} + variants={itemVariants} + className="mb-8 flex items-center justify-center gap-3" + > +
+ {[1, 2, 3, 4].map((i) => ( +
+ {String.fromCharCode(64 + i)} +
+ ))} +
+ + Trusted by 2,000+ creators + + + + {/* Headline - Typewriter Effect */} +
+

+ + + +

+
+ + {/* Subheadline */} + + The future of creator partnerships. Join the waitlist to experience the revolution in influencer marketing. + + + {/* CTAs */} + + + Get Started + — it's free + + + + + {/* Premium Badges */} -

- Features - -

- - -
- {[ - { - icon: , - title: "AI-Driven Sponsorship Matchmaking", - description: - "Automatically connects creators with brands based on audience demographics, engagement rates, and content style.", - }, - { - icon: , - title: "AI-Powered Creator Collaboration Hub", - description: - "Facilitates partnerships between creators with complementary audiences and content niches.", - }, - { - icon: , - title: "AI-Based Pricing & Deal Optimization", - description: - "Provides fair sponsorship pricing recommendations based on engagement, market trends, and historical data.", - }, - { - icon: , - title: "AI-Powered Negotiation & Contract Assistant", - description: - "Assists in structuring deals, generating contracts, and optimizing terms using AI insights.", - }, - { - icon: , - title: "Performance Analytics & ROI Tracking", - description: - "Enables brands and creators to track sponsorship performance, audience engagement, and campaign success.", - }, - { - icon: , - title: "Real-Time Campaign Feedback Loop", - description: - "Gathers continuous feedback on campaigns to adapt and improve collaboration effectiveness over time.", - }, - ].map((feature, index) => ( - - {feature.icon} -

{feature.title}

-

{feature.description}

- - ))} +
+ + Global Reach +
+
+ + Enterprise Secure +
+ + + {/* Powered by AOSSIE */} + + + + Powered by AOSSIE + + AOSSIE + + + +
+ + {/* Horizontal Divider with Dots - Brighter [0.08] */} +
+
+
+
+ + {/* Features Section - Grid Layout */} +
+ {/* Section Header */} + + + Features + +

+ What's inside InPactAI? +

+

+ 500+ flexible components with developer-friendly codebase. +

+ + + {/* Features Grid Container */} +
+ +
+ {features.map((feature, index) => ( + + {/* Horizontal Divider for mobile (except first) */} + {index > 0 &&
} + + {/* Inner Horizontal Grid Lines (Desktop) - Row Dividers */} + {index >= 3 && ( +
+ )} + + +
+ {feature.icon} +
+

+ {feature.title} +

+

+ {feature.description} +

+ + ))} +
+ {/* Horizontal Grid Line for 2nd Row Desktop - Bolder */} +
+
+
+ + {/* Horizontal Divider with Dots */} +
+
+
{/* How It Works Section */} -
- +
+
-
- + {/* Horizontal Divider with Dots */} +
+
+
+
+ + {/* Integrations Section */} +
+
+ {/* Horizontal Divider with Dots */} +
+
+
+
+ + {/* Community Section */} + - {/* Waitlist Form Section */} -
-
-

- Be a Part of the Revolution - -

-

- Join our waitlist to be the first to experience how InpactAI is transforming the way brands and creators collaborate. -

-
- + {/* Horizontal Divider with Dots */} +
+
+
-
-
- -
-
+ {/* Waitlist CTA Section */} +
+ + {/* Spotlight Background */} +
+ + {/* Shooting Stars Background */} +
+ +
+ +
+ + + + Early Access + +

+ Join the revolution +

+

+ Be the first to experience how InPactAI is transforming creator-brand collaboration. +

+ +
+ +
+ + {/* Trust Indicators */} +
+ {['Free to join', 'No spam', 'Priority access'].map((item, i) => ( +
+
+ +
+ {item} +
+ ))} +
+ +
+
); } diff --git a/LandingPage/src/Pages/Legal.tsx b/LandingPage/src/Pages/Legal.tsx index f533279..111e70a 100644 --- a/LandingPage/src/Pages/Legal.tsx +++ b/LandingPage/src/Pages/Legal.tsx @@ -1,103 +1,177 @@ import React, { useEffect } from 'react'; -import Navbar from '../components/Header'; -import Footer from '../components/Footer'; import { motion } from 'framer-motion'; +const RulerMarks = ({ side }: { side: 'left' | 'right' }) => { + const marks = [100, 200, 300, 400, 500, 600, 700, 800]; + return ( +
+
+ {marks.map((num) => ( +
+ {side === 'left' && ( + <> + {num} +
+ + )} + {side === 'right' && ( + <> +
+ {num} + + )} +
+ ))} +
+
+ ); +}; + +const GlowingBeam = () => { + return ( +
+ + +
+ ); +} + const TermsOfService: React.FC = () => { useEffect(() => { - window.scrollTo(0, 0); - document.title = "Terms of Service | inpactAI"; + document.title = "Terms of Service | InPactAI"; }, []); return ( -
- -
-
- -

Terms of Service

- -
-

Last updated: April 14, 2025

- -
-

Introduction

-

- Welcome to inpactAI. These Terms of Service ("Terms") govern your use of our platform and services. By accessing or using inpactAI, you agree to be bound by these Terms. -

-
- -
-

Use of the Platform

-

You agree to use the platform in compliance with all applicable laws and regulations. You must not misuse our platform or attempt to access it using a method other than the interface we provide.

-
- -
-

Account Registration

-

To access certain features, you may be required to create an account. You are responsible for safeguarding your account credentials and for any activities or actions under your account.

-
- -
-

User Content

-

You retain ownership of the content you submit to the platform, but you grant inpactAI a worldwide, royalty-free license to use, display, and distribute that content as needed to provide services.

-
- -
-

Prohibited Activities

-

You agree not to engage in any of the following:

-
    -
  • Reverse engineering or decompiling any part of the platform
    • -
  • Using the platform for unlawful or harmful purposes
    • -
  • Infringing on the intellectual property rights of others
    • -
  • Disrupting the functionality or security of the platform
    • -
-
- -
-

Termination

-

- We may suspend or terminate your access if you violate these Terms. Upon termination, your right to use the platform ceases immediately. -

-
- -
-

Disclaimers

-

- The platform is provided "as is" without warranties of any kind. We do not guarantee that the platform will be uninterrupted, secure, or error-free. -

-
- -
-

Limitation of Liability

-

- To the fullest extent permitted by law, inpactAI shall not be liable for any indirect, incidental, special, or consequential damages resulting from your use of the platform. -

-
- -
-

Changes to These Terms

-

- We may modify these Terms at any time. If we do, we will notify you via the platform or by email. Continued use of the platform after changes means you accept the new Terms. -

-
- -
-

Contact Us

-

- If you have any questions about these Terms, contact us at: -
- Email: aossie.oss@gmail.com -

-
-
- +
+ {/* Main Container with Grid Lines */} +
+ {/* Left Ruler */} + + {/* Right Ruler */} + + +
+ + +
+ +

+ Terms of Service +

+ +
+ +
+

+
+ Introduction +

+

+ Welcome to InPactAI. These Terms of Service ("Terms") govern your use of our platform and services. By accessing or using InPactAI, you agree to be bound by these Terms. +

+
+ +
+

+
+ Use of the Platform +

+

You agree to use the platform in compliance with all applicable laws and regulations. You must not misuse our platform or attempt to access it using a method other than the interface we provide.

+
+ +
+

+
+ Account Registration +

+

To access certain features, you may be required to create an account. You are responsible for safeguarding your account credentials and for any activities or actions under your account.

+
+ +
+

+
+ User Content +

+

You retain ownership of the content you submit to the platform, but you grant InPactAI a worldwide, royalty-free license to use, display, and distribute that content as needed to provide services.

+
+ +
+

+
+ Prohibited Activities +

+

You agree not to engage in any of the following:

+
    + {['Reverse engineering or decompiling', 'Unlawful or harmful purposes', 'Infringing intellectual property', 'Disrupting platform security'].map((item, i) => ( +
  • +
    + {item} +
    • + ))} +
+
+ +
+

+
+ Termination +

+

+ We may suspend or terminate your access if you violate these Terms. Upon termination, your right to use the platform ceases immediately. +

+
+ +
+

+
+ Disclaimers +

+

+ The platform is provided "as is" without warranties of any kind. We do not guarantee that the platform will be uninterrupted, secure, or error-free. +

+
+ +
+

+
+ Limitation of Liability +

+

+ To the fullest extent permitted by law, InPactAI shall not be liable for any indirect, incidental, special, or consequential damages resulting from your use of the platform. +

+
+ +
+

Contact Us

+

+ If you have any questions about these Terms, contact us at: +
+ aossie.oss@gmail.com +

+
+
+ +
-
-
+
); }; diff --git a/LandingPage/src/Pages/Privacy.tsx b/LandingPage/src/Pages/Privacy.tsx index 4705e21..801e829 100644 --- a/LandingPage/src/Pages/Privacy.tsx +++ b/LandingPage/src/Pages/Privacy.tsx @@ -1,130 +1,150 @@ import React, { useEffect } from 'react'; -import Navbar from '../components/Header'; -import Footer from '../components/Footer'; import { motion } from 'framer-motion'; +const RulerMarks = ({ side }: { side: 'left' | 'right' }) => { + const marks = [100, 200, 300, 400, 500, 600, 700, 800]; + return ( +
+
+ {marks.map((num) => ( +
+ {side === 'left' && ( + <> + {num} +
+ + )} + {side === 'right' && ( + <> +
+ {num} + + )} +
+ ))} +
+
+ ); +}; + +const GlowingBeam = () => { + return ( +
+ + +
+ ); +} + const PrivacyPolicy: React.FC = () => { useEffect(() => { - window.scrollTo(0, 0); - document.title = "Privacy Policy | inpactAI"; + document.title = "Privacy Policy | InPactAI"; }, []); return ( -
- -
-
- -

Privacy Policy

- -
-

Last updated: April 14, 2025

- -
-

Introduction

-

- At inpactAI, we respect your privacy and are committed to protecting your personal data. This Privacy - Policy explains how we collect, use, disclose, and safeguard your information when you use our service. -

-
+
+ {/* Main Container with Grid Lines */} +
+ {/* Left Ruler */} + + {/* Right Ruler */} + -
-

Information We Collect

-

When you use inpactAI, we may collect the following types of information:

-
    -
  • - Personal Information: Name, email address, and organization details provided - during signup or when joining our waitlist. -
    • -
  • - Platform Data: If you connect inpactAI with platforms like Instagram, TikTok, or LinkedIn, - we may collect information necessary to offer creator-brand matching services, such as follower data, - audience engagement, and content performance metrics. -
    • -
  • - Usage Information: Data about how you interact with our platform, including features used, - actions taken, and time spent on the platform. -
    • -
-
+
+ -
-

How We Use Your Information

-

We use the collected information for various purposes, including:

-
    -
  • Providing and maintaining our AI-powered platform
    • -
  • Improving creator-brand matching accuracy
    • -
  • Personalizing your dashboard and analytics
    • -
  • Communicating with you about updates, matches, and insights
    • -
  • Ensuring data integrity and platform security
    • -
-
+
+ +

+ Privacy Policy +

-
-

Data Sharing and Disclosure

-

- We do not sell your personal information. We may share data in the following circumstances: -

-
    -
  • With service providers helping us run the platform (e.g., analytics, hosting)
    • -
  • To comply with legal obligations or respond to lawful requests
    • -
  • With your consent or to fulfill specific actions at your direction
    • -
  • In connection with business restructuring, mergers, or acquisitions
    • -
-
+
+

Last updated: February 5, 2026

-
-

Data Security

-

- We apply industry-standard security practices to protect your data, including encryption, access controls, - and regular security reviews. However, no digital system is completely secure, and we encourage - you to practice responsible data handling on your end as well. -

-
+
+

+
+ Introduction +

+

+ At InPactAI, we respect your privacy and are committed to protecting your personal data. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our service. +

+
-
-

Your Rights

-

- Depending on your location, you may have certain rights related to your personal information: -

-
    -
  • Access or request a copy of your personal data
    • -
  • Request correction of any inaccurate or incomplete data
    • -
  • Request deletion of your personal data
    • -
  • Restrict processing or object to data usage
    • -
  • Request data portability
    • -
-

- To exercise your rights, contact us at privacy@inpact.ai. -

-
+
+

+
+ Information We Collect +

+

When you use InPactAI, we may collect the following types of information:

+
    + {[ + { title: 'Personal Information', desc: 'Name, email address, and organization details provided during signup.' }, + { title: 'Platform Data', desc: 'Connected platform data (Instagram, TikTok, LinkedIn) for creator-brand matching.' }, + { title: 'Usage Information', desc: 'Analytics on how you interact with our platform and features.' } + ].map((item, i) => ( +
  • + {item.title} + {item.desc} +
    • + ))} +
+
-
-

Changes to This Policy

-

- We may update this Privacy Policy occasionally to reflect changes in law or our practices. - If significant changes are made, we will notify you on the platform or via email. - Please review this policy periodically to stay informed. -

-
+
+

+
+ How We Use Your Information +

+

We use the collected information for various purposes, including:

+
+ {[ + 'Platform maintenance', + 'Matching accuracy', + 'Dashboard analytics', + 'Updates & insights', + 'Data integrity', + 'Platform security' + ].map((item, i) => ( +
+ {item} +
+ ))} +
+
-
-

Contact Us

-

- If you have any questions about this Privacy Policy, feel free to reach out: -
- Email: aossie.oss@gmail.com -

-
-
- +
+

Contact Us

+

+ If you have any questions about this Privacy Policy, feel free to reach out: +
+ aossie.oss@gmail.com +

+
+
+ +
- -
+
); }; diff --git a/LandingPage/src/components/Community.tsx b/LandingPage/src/components/Community.tsx new file mode 100644 index 0000000..ad47c63 --- /dev/null +++ b/LandingPage/src/components/Community.tsx @@ -0,0 +1,106 @@ +import { motion } from 'framer-motion'; +import { Github, Twitter, MessageSquare } from 'lucide-react'; + +const Community = () => { + const socials = [ + { + name: 'Discord', + description: 'Join the community, ask questions, and share tips.', + icon: , + href: 'https://discord.gg/aossie', + color: 'hover:border-indigo-500/50 hover:shadow-indigo-500/20' + }, + { + name: 'GitHub', + description: 'Report bugs, request features and contribute to the project.', + icon: , + href: 'https://github.com/AOSSIE-Org/InPactAI', + color: 'hover:border-white/50 hover:shadow-white/20' + }, + { + name: 'Twitter', + description: 'Stay updated with tips, announcements, and general info.', + icon: , + href: 'https://twitter.com/AOSSIE_Org', + color: 'hover:border-sky-500/50 hover:shadow-sky-500/20' + } + ]; + + return ( +
+ + {/* Top Gradient Fade */} +
+ +
+ + {/* Header */} +
+
+ + Community +
+

+ Join our community +

+

+ Connect, learn, and grow with fellow creators and developers. +

+
+ + {/* Cards Grid */} +
+ {/* Connection Line Graphic (Background) */} +
+
+ + {socials.map((social, index) => ( + + {/* Hover Gradient Background */} +
+ +
+ {social.icon} +
+ +

+ {social.name} +

+ +

+ {social.description} +

+ + ))} +
+ + {/* Bottom Connector Graphic (SVG approximation of the reference) */} +
+ + + + + + +
+
+ Stay Informed +
+
+ +
+
+ ); +}; + +export default Community; diff --git a/LandingPage/src/components/Footer.tsx b/LandingPage/src/components/Footer.tsx index bbe3cf6..dd75636 100644 --- a/LandingPage/src/components/Footer.tsx +++ b/LandingPage/src/components/Footer.tsx @@ -1,74 +1,109 @@ -import { Box, Typography, Link, Divider, Grid, Stack } from '@mui/material'; +import { Github, Twitter, Linkedin, Heart } from 'lucide-react'; const Footer = () => { - const linkStyle = { - color: 'rgba(255, 255, 255, 0.8)', - textDecoration: 'none', - fontSize: '0.95rem', - '&:hover': { - color: '#8B5CF6', + const currentYear = new Date().getFullYear(); + + const footerLinks = [ + { + title: 'Product', + links: [ + { label: 'Features', href: '#features' }, + { label: 'Integrations', href: '#integrations' }, + { label: 'Pricing', href: '#pricing' }, + { label: 'Changelog', href: '#' }, + ] + }, + { + title: 'Resources', + links: [ + { label: 'Documentation', href: '#' }, + { label: 'API Reference', href: '#' }, + { label: 'Community', href: '#' }, + { label: 'Blog', href: '#' }, + ] }, - }; + { + title: 'Company', + links: [ + { label: 'About', href: '#' }, + { label: 'Careers', href: '#' }, + { label: 'Legal guide', href: '#' }, + { label: 'Contact', href: '#' }, + ] + }, + { + title: 'Legal', + links: [ + { label: 'Privacy', href: '/privacy' }, + { label: 'Terms', href: '/legal' }, + { label: 'Security', href: '#' }, + ] + } + ]; return ( - - {/* Top Section */} - - - - InpactAI - - - Empowering brands to make smarter creator decisions through AI-powered insights and integrations. - - +
+ + {/* Glow Effect */} +
+ +
+ +
+ + {/* Brand Column */} +
+
+
+ IP +
+ InPactAI +
+

+ Empowering brands and creators to build meaningful partnerships through data-driven intelligence and AI automation. +

+
+ + + +
+
+ + {/* Link Columns */} + {footerLinks.map((column, idx) => ( +
+

{column.title}

+ +
+ ))} - - - Explore - - - Home - About - Contact - - +
- - - Legal & Code - - - - GitHub - - Terms of Use - Privacy Policy - - - + {/* Bottom Bar */} +
+

+ © {currentYear} InPactAI Inc. All rights reserved. +

- {/* Divider */} - +
+
+ Made with + + by AOSSIE +
+
+
- {/* Bottom Section */} - - © {new Date().getFullYear()} InpactAI. All rights reserved. - - +
+
); }; diff --git a/LandingPage/src/components/LayoutFrame.tsx b/LandingPage/src/components/LayoutFrame.tsx new file mode 100644 index 0000000..e19bfc5 --- /dev/null +++ b/LandingPage/src/components/LayoutFrame.tsx @@ -0,0 +1,109 @@ +import { motion, useScroll, useTransform, useSpring } from 'framer-motion'; +import { useEffect } from 'react'; + +export default function LayoutFrame() { + const { scrollY } = useScroll(); + + // Update window height on mount/resize + useEffect(() => { + // Optional: could use window height for dynamic ruler calculation + }, []); + + // Map scroll to glow intensity + // Input: [0, 500] (pixels scrolled) + // Output: [0.1, 1] (opacity/glow) + const scrollRatio = useTransform(scrollY, [0, 300], [0, 1]); + const glowOpacity = useSpring(scrollRatio, { stiffness: 100, damping: 20 }); + + // Dynamic shadow style based on scroll + const glowShadow = useTransform( + glowOpacity, + (v) => `0 0 ${v * 20}px ${v * 4}px rgba(168, 85, 247, ${v * 0.5})` + ); + + const borderColor = useTransform( + glowOpacity, + (v) => `rgba(255, 255, 255, ${0.1 + v * 0.4})` + ); + + return ( +
+ + {/* Top Border */} + + {/* Ruler Marks Top */} +
+ {[...Array(12)].map((_, i) => ( +
+ ))} +
+ + + {/* Middle Section (Body) with Side Borders */} +
+ + {/* Left Border */} + + {/* Ruler Marks Left */} +
+ {[...Array(8)].map((_, i) => ( +
+ ))} +
+ + + {/* Right Border */} + + {/* Ruler Marks Right */} +
+ {[...Array(8)].map((_, i) => ( +
+ ))} +
+ + +
+ + {/* Bottom Border */} + + {/* Ruler Marks Bottom */} +
+ {[...Array(12)].map((_, i) => ( +
+ ))} +
+ + + {/* Corner Accents */} +
+
+
+
+ +
+ ); +} diff --git a/LandingPage/src/components/Navbar.tsx b/LandingPage/src/components/Navbar.tsx new file mode 100644 index 0000000..fc1c663 --- /dev/null +++ b/LandingPage/src/components/Navbar.tsx @@ -0,0 +1,238 @@ +import { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { + Search, + Github, + Menu, + X, + ChevronDown, +} from 'lucide-react'; + +// Discord icon component +const DiscordIcon = () => ( + + + +); + +interface NavLinkProps { + href: string; + children: React.ReactNode; + hasDropdown?: boolean; +} + +const NavLink = ({ href, children, hasDropdown }: NavLinkProps) => ( + + {children} + {hasDropdown && ( + + )} + +); + +interface IconButtonProps { + onClick?: () => void; + ariaLabel: string; + children: React.ReactNode; + href?: string; +} + +const IconButton = ({ onClick, ariaLabel, children, href }: IconButtonProps) => { + const classes = + 'flex items-center justify-center w-8 h-8 rounded-lg text-gray-500 hover:text-white hover:bg-white/[0.04] transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-white/10'; + + if (href) { + return ( + + {children} + + ); + } + + return ( + + ); +}; + +const Navbar = () => { + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + const [isScrolled, setIsScrolled] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 20); + }; + window.addEventListener('scroll', handleScroll); + // Sync state on mount + handleScroll(); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + const navLinks = [ + { label: 'Features', href: '#features', hasDropdown: false }, + { label: 'Process', href: '#how-it-works', hasDropdown: false }, + { label: 'Integrations', href: '#integrations', hasDropdown: false }, + { label: 'Waitlist', href: '#waitlist', hasDropdown: false }, + ]; + + return ( + <> +
+ + {/* Logo Mark */} + +
+ + IP + +
+ + + {/* Center Navigation Links (Desktop) */} +
+ {navLinks.map((link) => ( + + {link.label} + + ))} +
+ + {/* Vertical Separator */} +
+ + +
+ {/* Search (Desktop) */} + + + {/* Icon Buttons */} +
+ + + + + + +
+ + {/* Mobile Menu Button */} +
+ setIsMobileMenuOpen(!isMobileMenuOpen)} + ariaLabel="Toggle menu" + > + {isMobileMenuOpen ? ( + + ) : ( + + )} + +
+ +
+ + +
+ + + {/* Mobile Menu */} + + {isMobileMenuOpen && ( + +
+ {/* Mobile Nav Links */} + + + {/* Mobile Divider */} +
+ + {/* Mobile Icons */} +
+ Follow Us +
+ + + + + + +
+
+
+ + )} + + + ); +}; + +export default Navbar; diff --git a/LandingPage/src/components/ScrollToTop.tsx b/LandingPage/src/components/ScrollToTop.tsx new file mode 100644 index 0000000..21d9367 --- /dev/null +++ b/LandingPage/src/components/ScrollToTop.tsx @@ -0,0 +1,14 @@ +import { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; + +const ScrollToTop = () => { + const { pathname } = useLocation(); + + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + return null; +}; + +export default ScrollToTop; diff --git a/LandingPage/src/components/ShootingStars.tsx b/LandingPage/src/components/ShootingStars.tsx new file mode 100644 index 0000000..9fb9575 --- /dev/null +++ b/LandingPage/src/components/ShootingStars.tsx @@ -0,0 +1,152 @@ +import { useEffect, useRef } from 'react'; + +interface Star { + x: number; + y: number; + size: number; + opacity: number; + speed: number; +} + +interface ShootingStar { + id: number; + x: number; + y: number; + length: number; + speed: number; + angle: number; + opacity: number; + color: string; +} + +const ShootingStars = () => { + const canvasRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + // Set dimensions + const handleResize = () => { + canvas.width = canvas.offsetWidth; + canvas.height = canvas.offsetHeight; + }; + + handleResize(); + window.addEventListener('resize', handleResize); + + // Static Stars + const stars: Star[] = Array.from({ length: 150 }, () => ({ + x: Math.random() * canvas.width, + y: Math.random() * canvas.height, + size: Math.random() * 1.5, + opacity: Math.random() * 0.5 + 0.1, + speed: Math.random() * 0.05, + })); + + let shootingStars: ShootingStar[] = []; + let shootingStarId = 0; + let animationId: number; + let isActive = true; + + const createShootingStar = (): ShootingStar => { + const startX = Math.random() * canvas.width; + const startY = Math.random() * canvas.height * 0.5; // Start in top half + return { + id: shootingStarId++, + x: startX, + y: startY, + length: Math.random() * 80 + 50, + speed: Math.random() * 15 + 10, + angle: Math.PI / 4 + (Math.random() * 0.2 - 0.1), // Diagonal down-right roughly 45deg + opacity: 1, + color: Math.random() > 0.7 ? '#a855f7' : Math.random() > 0.5 ? '#3b82f6' : '#ffffff', // Purple, Blue, or White + }; + }; + + const animate = () => { + if (!isActive) return; + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Draw Static Stars + stars.forEach((star) => { + ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`; + ctx.beginPath(); + ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2); + ctx.fill(); + + // Twinkle effect + star.opacity += (Math.random() * 0.02 - 0.01); + if (star.opacity < 0.1) star.opacity = 0.1; + if (star.opacity > 0.6) star.opacity = 0.6; + }); + + // Manage Shooting Stars + if (Math.random() < 0.02) { // Chance to spawn + shootingStars.push(createShootingStar()); + } + + shootingStars = shootingStars.filter((star) => { + star.x += Math.cos(star.angle) * star.speed; + star.y += Math.sin(star.angle) * star.speed; + star.opacity -= 0.01; + + // Draw Trail (Gradient line) + const gradient = ctx.createLinearGradient( + star.x, star.y, + star.x - Math.cos(star.angle) * star.length, + star.y - Math.sin(star.angle) * star.length + ); + gradient.addColorStop(0, `rgba(${hexToRgb(star.color)}, ${star.opacity})`); + gradient.addColorStop(1, `rgba(${hexToRgb(star.color)}, 0)`); + + ctx.strokeStyle = gradient; + ctx.lineWidth = 2; + ctx.lineCap = 'round'; + ctx.beginPath(); + ctx.moveTo(star.x, star.y); + ctx.lineTo( + star.x - Math.cos(star.angle) * star.length, + star.y - Math.sin(star.angle) * star.length + ); + ctx.stroke(); + + // Glow head + ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`; + ctx.beginPath(); + ctx.arc(star.x, star.y, 1.5, 0, Math.PI * 2); + ctx.fill(); + + // Return true to keep if not off screen or faded + return ( + star.x <= canvas.width + 100 && + star.y <= canvas.height + 100 && + star.opacity > 0 + ); + }); + + animationId = requestAnimationFrame(animate); + }; + + animationId = requestAnimationFrame(animate); + + return () => { + isActive = false; + window.removeEventListener('resize', handleResize); + cancelAnimationFrame(animationId); + }; + }, []); + + return ; +}; + +// Helper +function hexToRgb(hex: string) { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : '255, 255, 255'; +} + +export default ShootingStars; diff --git a/LandingPage/src/components/howitworks.tsx b/LandingPage/src/components/howitworks.tsx index 13e4e26..bee7f0b 100644 --- a/LandingPage/src/components/howitworks.tsx +++ b/LandingPage/src/components/howitworks.tsx @@ -1,127 +1,183 @@ -import React from 'react'; -import { motion } from 'framer-motion'; +import React, { useRef } from 'react'; +import { motion, useScroll, useTransform } from 'framer-motion'; import { UserIcon, SparklesIcon, CreditCardIcon, - BarChartIcon, + BarChartIcon, LayoutDashboardIcon, CameraIcon - } from 'lucide-react'; +// Floating Logo Component +const FloatingLogo = ({ d, className, delay, x, y }: { d: string, className?: string, delay: number, x: number | string, y: number | string }) => ( + + + + + +); + const HowItWorks: React.FC = () => { + const containerRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ["start end", "end start"] + }); + + const height = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]); const steps = [ { - title: "User Onboarding", - description: "Brands and creators register and choose their roles, preferences, and categories.", - icon: , - color: "from-pink-500 to-purple-500" + title: "User Onboarding", + description: "Brands and creators register and choose their roles, preferences, and categories.", + icon: , + color: "from-pink-500 to-purple-500" }, { - title: "AI-Powered Matching", - description: "Inpact uses AI to suggest ideal brand-creator collaborations based on past work, niches, and engagement.", - icon: , - color: "from-pink-500 to-purple-500" + title: "AI-Powered Matching", + description: "Inpact uses AI to suggest ideal brand-creator collaborations based on past work.", + icon: , + color: "from-pink-500 to-purple-500" }, { - title: "Creator Showcases", - description: "Creators can highlight their portfolios and previous collaborations, making it easier for brands to evaluate fit.", - icon: , - color: "from-purple-500 to-pink-500" + title: "Creator Showcases", + description: "Creators highlight their portfolios and previous collaborations for brands to evaluate.", + icon: , + color: "from-purple-500 to-pink-500" }, { - title: "Collaboration Dashboard", - description: "Both parties interact, chat, and collaborate with full task and timeline visibility.", - icon: , - color: "from-purple-500 to-pink-500" + title: "Collaboration Dashboard", + description: "Both parties interact, chat, and collaborate with full task and timeline visibility.", + icon: , + color: "from-purple-500 to-pink-500" }, { - title: "Smart Contracts & Payments", - description: "Secure agreements and transactions powered by Stripe or Razorpay integrations.", - icon: , - color: "from-pink-500 to-purple-500" + title: "Smart Contracts & Payments", + description: "Secure agreements and transactions powered by Stripe or Razorpay integrations.", + icon: , + color: "from-pink-500 to-purple-500" }, { - title: "Analytics & Feedback", - description: "Track campaign metrics, gather insights, and iterate smarter with built-in dashboards.", - icon: , - color: "from-pink-500 to-purple-500" + title: "Analytics & Feedback", + description: "Track campaign metrics, gather insights, and iterate smarter with dashboards.", + icon: , + color: "from-pink-500 to-purple-500" } - ]; - - + ]; + + // Simple icons paths (React-like, Code-like, etc.) for visual ambience + const logos = [ + { d: "M12 2L2 7l10 5 10-5-10-5zm0 9l2-10 10 5-10 5-2-10zm0 9l2-10 10 5-10 5-2-10z M2 17l10 5 10-5M2 12l10 5 10-5", x: "10%", y: 100, delay: 0 }, // Generic Layer + { d: "M24 10.93h-5.906a4.819 4.819 0 00-1.297-2.915l3.812-4.103a1.071 1.071 0 00-.23-1.666L18.89.656a1.072 1.072 0 00-1.57.172l-3.376 4.39a4.832 4.832 0 00-3.877 0L6.69.828a1.071 1.071 0 00-1.57-.172l-1.488 1.59a1.072 1.072 0 00-.231 1.666l3.812 4.103a4.814 4.814 0 00-1.296 2.915H0a1.072 1.072 0 00-1.072 1.072v2.146A1.072 1.072 0 001.072 15.26h5.906a4.816 4.816 0 001.297 2.916l-3.812 4.102a1.072 1.072 0 00.23 1.666l1.489 1.59a1.071 1.071 0 001.57-.171l3.376-4.391a4.836 4.836 0 003.877 0l3.376 4.391a1.072 1.072 0 001.57.171l1.488-1.59a1.072 1.072 0 00.231-1.666l-3.812-4.102a4.819 4.819 0 001.297-2.916h5.906a1.072 1.072 0 001.072-1.072v-2.146a1.072 1.072 0 00-1.072-1.072zM12 15.485a3.486 3.486 0 11.001-6.972 3.486 3.486 0 01-.001 6.972z", x: "85%", y: 200, delay: 1 }, // React-ish + { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.604-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12", x: "10%", y: 600, delay: 2 }, // Github + { d: "M7.44 5.32c-.56-.56-.82-1.28-.79-2.16.03-.88.35-1.57.97-2.06.63-.49 1.36-.67 2.2-.55.84.11 1.5.51 1.99 1.18.49.67.65 1.41.48 2.23-.17.82-.61 1.5-1.32 2.03-.71.53-1.48.69-2.31.48-.83-.22-1.48-.68-1.95-1.38l.73.23zm10.23 11.23c-.76.76-1.12 1.74-1.08 2.94.04 1.2.46 2.14 1.27 2.83.81.69 1.77.92 2.88.69 1.11-.23 1.96-.83 2.56-1.81.6-1,.76-2.07.48-3.21-.28-1.14-.88-2.05-1.81-2.73-1.42-1.03-3.08-1.42-4.99-1.16l.69 2.45zm-1.8 1.83c.48.48.7 1.08.66 1.81-.04.73-.28 1.3-.73 1.71-.45.41-.95.53-1.51.36-.56-.17-.96-.51-1.22-1.02-.26-.51-.29-1.08-.11-1.71.19-.63.53-1.1 1.03-1.42.92-.59 1.88-1.21 2.88-1.83l-1.0 2.1zm-8.76-7.85c-.93.93-1.4 2.17-1.39 3.73.01 1.56.49 2.76 1.45 3.6.96.84 2.14 1.09 3.54.76 1.4-.33 2.45-1.17 3.15-2.52.7-1.35.84-2.77.42-4.26-.42-1.49-1.28-2.61-2.58-3.36-1.3-.75-2.67-.93-4.11-.53 1.09 1.29 2.18 2.58 3.27 3.87l-3.75-1.29z", x: "80%", y: 800, delay: 3 }, // Git-ish + ]; return ( -
-
-
- -

- How InpactAI works - -

-

- Inpact uses AI-powered pipelines to bridge the gap between brands and creators—simplifying discovery, onboarding, and collaboration. -

- +
+ + {/* Background Animation - Floating Logos */} +
+ {logos.map((logo, i) => ( + + ))} +
-
- {steps.map((step, index) => ( +
+ + {/* Header */} + + + Process + +

+ How InpactAI works +

+

+ A seamless, AI-driven workflow rooted in open source transparency. +

+ + + {/* Timeline Container */} +
+ + {/* Central Timeline Line - Bolder & Glowing */} +
-
-
- {step.icon} + style={{ height }} + className="w-full bg-gradient-to-b from-purple-500 via-pink-500 to-purple-500 shadow-[0_0_20px_rgba(168,85,247,0.6)]" + /> +
+ + {/* Timeline Steps */} +
+ {steps.map((step, index) => ( + + {/* Mobile: Icon on left, Content on right */} + {/* Desktop: Alternating */} + + {/* Padding Spacer for Alternating Layout */} +
+ + {/* Center Connector Point */} +
+
-
-

{step.title}

-

{step.description}

+ + {/* Content Card */} +
+ {/* Conditional alignment for desktop */} +
+
+ {step.icon} +
+
+

{step.title}

+

{step.description}

+
+
-
- - {index < steps.length - 1 && ( - <> -
- {step.title !== "Smart Contracts & Payments" && - step.title !== "Analytics & Feedback" && - ( - - )} -
- -
-
-
- - )} - - ))} -
-
- - - + + ))} +
+ +
+
); diff --git a/LandingPage/src/components/integration.tsx b/LandingPage/src/components/integration.tsx index 1155635..863dec4 100644 --- a/LandingPage/src/components/integration.tsx +++ b/LandingPage/src/components/integration.tsx @@ -1,49 +1,51 @@ -import { motion } from 'framer-motion'; -import { SocialIcon } from 'react-social-icons' +import { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Instagram, Youtube, Twitter, Linkedin, Check, Plus } from 'lucide-react'; export default function Integrations() { + // Independent state for each card would ideally be managing by ID, but index works for now + const [connected, setConnected] = useState([]); + + const toggleConnect = (index: number) => { + if (connected.includes(index)) { + setConnected(connected.filter(i => i !== index)); + } else { + setConnected([...connected, index]); + } + }; + const integrations = [ { - icon: , + icon: , name: 'Instagram', description: 'Fetch creator insights like engagement rate, reach trends, and content breakdown.', + color: 'from-pink-500 to-purple-500' }, { - icon: , + icon: , name: 'YouTube', description: 'Access analytics on video performance, channel growth, and viewer demographics.', + color: 'from-red-500 to-red-600' }, { - icon: , - name: 'X (formerly Twitter)', + icon: , + name: 'X (Twitter)', description: 'Measure influence through tweet engagement, retweet rate, and follower insights.', + color: 'from-gray-700 to-gray-900' }, { - icon: , + icon: , name: 'LinkedIn', description: 'Track professional creator presence and branded thought leadership impact.', + color: 'from-blue-600 to-blue-700' }, ]; - const container = { - hidden: { opacity: 0 }, - show: { - opacity: 1, - transition: { - staggerChildren: 0.12, - delayChildren: 0.2, - }, - }, - }; - - const item = { - hidden: { opacity: 0, y: 24 }, - show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: 'easeOut' } }, - }; - return ( -
-
+
+
+ + {/* Header */} -

- Social Integrations - -

-

- Inpact connects with major social platforms to analyze creator performance and brand-fit intelligence. + + Integrations + +

+ Connect your favorite tools +

+

+ Inpact utilizes powerful APIs to analyze creator performance and brand-fit intelligence.

- - {integrations.map((integration, index) => ( - -
-
+ {/* Grid */} +
+ {integrations.map((integration, index) => { + const isConnected = connected.includes(index); + return ( + + {/* Hover Gradient Background */} +
+ +
{integration.icon}
-

{integration.name}

-
-

- {integration.description} -

- - ))} - + +
+
+
+

{integration.name}

+

+ {integration.description} +

+
+
+ + +
+ + ); + })} +
); diff --git a/LandingPage/src/index.css b/LandingPage/src/index.css index ddd5849..28ce30e 100644 --- a/LandingPage/src/index.css +++ b/LandingPage/src/index.css @@ -1,3 +1,9 @@ +@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap'); + +body { + font-family: 'Plus Jakarta Sans', sans-serif; +} + /* Applies to WebKit browsers */ ::-webkit-scrollbar { width: 8px;