Skip to content

created the footer ui in a better way #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

created the footer ui in a better way #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 135 additions & 64 deletions LandingPage/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,145 @@
import { Box, Typography, Link, Divider, Grid, Stack } from '@mui/material';
import { Rocket, Github, Mail, ExternalLink } from 'lucide-react';

const Footer = () => {
const linkStyle = {
color: 'rgba(255, 255, 255, 0.8)',
textDecoration: 'none',
fontSize: '0.95rem',
'&:hover': {
color: '#8B5CF6',
},
};

return (
<Box
component="footer"
sx={{
backgroundColor: '#111827',
color: '#ffffff',
py: 6,
px: { xs: 3, md: 10 },
mt: 10,
}}
>
{/* Top Section */}
<Grid container spacing={4} justifyContent="space-between">
<Grid>
<Typography variant="h5" sx={{ fontWeight: 600, mb: 1 }}>
InpactAI
</Typography>
<Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.6)' }}>
Empowering brands to make smarter creator decisions through AI-powered insights and integrations.
</Typography>
</Grid>
<footer className="relative w-full py-16 mt-20 overflow-hidden">
{/* Background with gradient and glassmorphism */}
<div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-purple-900/50 to-gray-900"></div>
<div className="absolute inset-0 bg-black/30 backdrop-blur-sm"></div>

{/* Animated background elements */}
<div className="absolute top-10 left-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
<div className="absolute bottom-10 right-10 w-96 h-96 bg-pink-500/20 rounded-full blur-3xl animate-pulse" style={{animationDelay: '1s'}}></div>

<div className="relative z-10 container mx-auto px-6 md:px-12">
Comment on lines +5 to +14
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Address style consistency and consider performance implications.

The background implementation creates nice visual effects, but there are a few concerns:

  1. Style inconsistency: Line 12 uses inline styles while the rest uses Tailwind classes
  2. Performance consideration: Multiple blur effects and animations may impact performance on lower-end devices

Apply this diff to maintain Tailwind consistency:

-      <div className="absolute bottom-10 right-10 w-96 h-96 bg-pink-500/20 rounded-full blur-3xl animate-pulse" style={{animationDelay: '1s'}}></div>
+      <div className="absolute bottom-10 right-10 w-96 h-96 bg-pink-500/20 rounded-full blur-3xl animate-pulse [animation-delay:1s]"></div>

Consider adding will-change-transform class to animated elements for better performance:

-      <div className="absolute top-10 left-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
+      <div className="absolute top-10 left-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl animate-pulse will-change-transform"></div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<footer className="relative w-full py-16 mt-20 overflow-hidden">
{/* Background with gradient and glassmorphism */}
<div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-purple-900/50 to-gray-900"></div>
<div className="absolute inset-0 bg-black/30 backdrop-blur-sm"></div>
{/* Animated background elements */}
<div className="absolute top-10 left-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
<div className="absolute bottom-10 right-10 w-96 h-96 bg-pink-500/20 rounded-full blur-3xl animate-pulse" style={{animationDelay: '1s'}}></div>
<div className="relative z-10 container mx-auto px-6 md:px-12">
<footer className="relative w-full py-16 mt-20 overflow-hidden">
{/* Background with gradient and glassmorphism */}
<div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-purple-900/50 to-gray-900"></div>
<div className="absolute inset-0 bg-black/30 backdrop-blur-sm"></div>
{/* Animated background elements */}
<div className="absolute top-10 left-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl animate-pulse will-change-transform"></div>
<div className="absolute bottom-10 right-10 w-96 h-96 bg-pink-500/20 rounded-full blur-3xl animate-pulse [animation-delay:1s]"></div>
<div className="relative z-10 container mx-auto px-6 md:px-12">
🤖 Prompt for AI Agents 
In LandingPage/src/components/Footer.tsx around lines 5 to 14, the inline style
for animation delay on line 12 should be replaced with a Tailwind CSS utility
class to maintain style consistency. Replace the inline style with an
appropriate Tailwind class or use a custom animation delay class if needed.
Additionally, add the 'will-change-transform' class to the animated background
elements to improve performance by hinting the browser about upcoming
transformations.

{/* Main Footer Content */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
{/* Brand Section */}
<div className="lg:col-span-1">
<div className="flex items-center space-x-2 mb-4">
<div className="relative">
<Rocket className="h-8 w-8 text-purple-400" />
<div className="absolute -inset-1 bg-purple-400/20 rounded-full blur-sm"></div>
</div>
<span className="text-2xl font-bold text-white">InpactAI</span>
</div>
<p className="text-gray-300 text-sm leading-relaxed mb-6">
Empowering brands to make smarter creator decisions through AI-powered insights and integrations.
</p>
<div className="flex items-center space-x-2 text-sm text-purple-300">
<span>Powered by</span>
<a
href="https://aossie.org/"
target="_blank"
rel="noopener noreferrer"
className="font-semibold hover:text-purple-200 transition-colors"
>
AOSSIE
</a>
</div>
</div>

{/* Quick Links */}
<div>
<h3 className="text-white font-semibold text-lg mb-4 relative">
Explore
<div className="absolute bottom-0 left-0 w-8 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full"></div>
</h3>
<div className="space-y-3">
<a href="/" className="block text-gray-300 hover:text-purple-300 transition-colors duration-200 text-sm">
Home
</a>
<a href="#features" className="block text-gray-300 hover:text-purple-300 transition-colors duration-200 text-sm">
Features
</a>
<a href="#how-it-works" className="block text-gray-300 hover:text-purple-300 transition-colors duration-200 text-sm">
How It Works
</a>
<a href="#integrations" className="block text-gray-300 hover:text-purple-300 transition-colors duration-200 text-sm">
Integrations
</a>
</div>
</div>

<Grid>
<Typography variant="subtitle1" sx={{ fontWeight: 500, mb: 1 }}>
Explore
</Typography>
<Stack spacing={1}>
<Link href="/" sx={linkStyle}>Home</Link>
<Link href="/" sx={linkStyle}>About</Link>
<Link href="/" sx={linkStyle}>Contact</Link>
</Stack>
</Grid>
{/* Legal & Resources */}
<div>
<h3 className="text-white font-semibold text-lg mb-4 relative">
Legal & Code
<div className="absolute bottom-0 left-0 w-8 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full"></div>
</h3>
<div className="space-y-3">
<a
href="https://github.com/AOSSIE-Org/InPactAI"
target="_blank"
rel="noopener noreferrer"
className="flex items-center space-x-2 text-gray-300 hover:text-purple-300 transition-colors duration-200 text-sm group"
>
<Github className="h-4 w-4" />
<span>GitHub</span>
<ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
</a>
<a href="/terms-of-service" className="block text-gray-300 hover:text-purple-300 transition-colors duration-200 text-sm">
Terms of Use
</a>
<a href="/privacy-policy" className="block text-gray-300 hover:text-purple-300 transition-colors duration-200 text-sm">
Privacy Policy
</a>
</div>
</div>

<Grid>
<Typography variant="subtitle1" sx={{ fontWeight: 500, mb: 1 }}>
Legal & Code
</Typography>
<Stack spacing={1}>
<Link href="https://github.com/AOSSIE-Org/InPactAI" sx={linkStyle} target="_blank" rel="noopener">
GitHub
</Link>
<Link href="/terms-of-service" sx={linkStyle}>Terms of Use</Link>
<Link href="/privacy-policy" sx={linkStyle}>Privacy Policy</Link>
</Stack>
</Grid>
</Grid>
{/* Contact & Community */}
<div>
<h3 className="text-white font-semibold text-lg mb-4 relative">
Connect
<div className="absolute bottom-0 left-0 w-8 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full"></div>
</h3>
<div className="space-y-3">
<a
href="mailto:[email protected]"
className="flex items-center space-x-2 text-gray-300 hover:text-purple-300 transition-colors duration-200 text-sm group"
>
<Mail className="h-4 w-4" />
<span>Contact Us</span>
</a>
<div className="pt-4">
<p className="text-xs text-gray-400 mb-2">Join the revolution</p>
<div className="bg-gradient-to-r from-purple-600 to-pink-600 p-0.5 rounded-lg">
<div className="bg-gray-900 rounded-lg px-3 py-2">
<p className="text-xs text-gray-300">Be the first to experience AI-powered creator collaboration</p>
</div>
</div>
</div>
</div>
</div>
</div>
Comment on lines +42 to +114
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Excellent navigation sections with consistent UX patterns.

The navigation sections demonstrate good practices:

  • Consistent structure and styling across all three sections
  • Proper hover effects and transitions
  • External link indicators for better UX
  • Semantic heading structure

Verify that the internal anchor links exist on the page:

🏁 Script executed:

#!/bin/bash
# Check if the referenced sections exist in the codebase
echo "Checking for referenced sections..."

# Search for features, how-it-works, and integrations sections
rg -i "id=[\"']features[\"']|id=[\"']how-it-works[\"']|id=[\"']integrations[\"']" --type tsx --type ts --type jsx --type js

# Also check for these terms in component names or files
echo "Checking for related components..."
fd -e tsx -e ts -e jsx -e js | grep -i -E "(feature|integration|how.*work)"

Length of output: 488

Add missing IDs for internal anchor links

The internal links in the footer ( #features, #how-it-works, #integrations ) don’t match any element IDs in the codebase. To ensure they scroll correctly, add corresponding id attributes to the section containers:

• LandingPage/src/components/Features.tsx
(or wherever your Features section lives)

— <div className="…">
+ <section id="features" className="…">

• LandingPage/src/components/howitworks.tsx

— const HowItWorks = () => (
—   <div className="…">
+ const HowItWorks = () => (
+   <section id="how-it-works" className="…">

• LandingPage/src/components/integration.tsx

— const Integrations = () => (
—   <div className="…">
+ const Integrations = () => (
+   <section id="integrations" className="…">

Once these IDs are in place, the footer’s anchor links will navigate as expected.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In LandingPage/src/components/Footer.tsx around lines 42 to 114, the internal
anchor links (#features, #how-it-works, #integrations) in the footer do not
correspond to any element IDs in the codebase. To fix this, add matching id
attributes to the root containers of the respective sections in their component
files: add id="features" in LandingPage/src/components/Features.tsx,
id="how-it-works" in LandingPage/src/components/howitworks.tsx, and
id="integrations" in LandingPage/src/components/integration.tsx. This will
ensure the footer links scroll correctly to the intended sections.


{/* Divider */}
<Divider sx={{ my: 4, borderColor: 'rgba(255, 255, 255, 0.1)' }} />
{/* Divider with gradient */}
<div className="relative my-8">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gradient-to-r from-transparent via-purple-500/30 to-transparent"></div>
</div>
<div className="relative flex justify-center">
<div className="bg-gradient-to-r from-purple-500/20 to-pink-500/20 px-4 py-1 rounded-full backdrop-blur-sm">
<div className="w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full"></div>
</div>
</div>
</div>
Comment on lines +116 to +126
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix invalid CSS property in divider implementation.

The divider has an invalid CSS class on line 119. The border-gradient-to-r class doesn't exist in Tailwind CSS.

Apply this diff to fix the gradient border:

-            <div className="w-full border-t border-gradient-to-r from-transparent via-purple-500/30 to-transparent"></div>
+            <div className="w-full h-px bg-gradient-to-r from-transparent via-purple-500/30 to-transparent"></div>

This creates a proper gradient line using background instead of an invalid border class.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{/* Divider with gradient */}
<div className="relative my-8">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gradient-to-r from-transparent via-purple-500/30 to-transparent"></div>
</div>
<div className="relative flex justify-center">
<div className="bg-gradient-to-r from-purple-500/20 to-pink-500/20 px-4 py-1 rounded-full backdrop-blur-sm">
<div className="w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full"></div>
</div>
</div>
</div>
{/* Divider with gradient */}
<div className="relative my-8">
<div className="absolute inset-0 flex items-center">
<div className="w-full h-px bg-gradient-to-r from-transparent via-purple-500/30 to-transparent"></div>
</div>
<div className="relative flex justify-center">
<div className="bg-gradient-to-r from-purple-500/20 to-pink-500/20 px-4 py-1 rounded-full backdrop-blur-sm">
<div className="w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full"></div>
</div>
</div>
</div>
🤖 Prompt for AI Agents 
In LandingPage/src/components/Footer.tsx around lines 116 to 126, the divider
uses an invalid Tailwind CSS class 'border-gradient-to-r' on line 119. Replace
the 'border-t border-gradient-to-r from-transparent via-purple-500/30
to-transparent' classes with a valid approach by removing the border classes and
instead applying a gradient background to create the gradient line effect. Use a
div with full width and a small height, and apply the 'bg-gradient-to-r
from-transparent via-purple-500/30 to-transparent' classes to achieve the
gradient line properly.


{/* Bottom Section */}
<Typography
variant="body2"
align="center"
sx={{ color: 'rgba(255, 255, 255, 0.4)' }}
>
© {new Date().getFullYear()} InpactAI. All rights reserved.
</Typography>
</Box>
{/* Bottom Section */}
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p className="text-gray-400 text-sm">
© {new Date().getFullYear()} InpactAI. All rights reserved.
</p>
<div className="flex items-center space-x-4 text-xs text-gray-400">
<span>Made with</span>
<div className="flex items-center space-x-1">
<div className="w-2 h-2 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full animate-pulse"></div>
<span>for creators & brands</span>
</div>
</div>
</div>
</div>
</footer>
);
};

Expand Down