Added request app button
This commit is contained in:
@@ -7,4 +7,4 @@ services:
|
||||
volumes:
|
||||
- /opt/docker/Website:/app
|
||||
command: sh -c "npm cache clean --force && rm -rf node_modules package-lock.json && npm install && npm run dev -- --host --port 8097"
|
||||
restart: unless-stopped
|
||||
restart: unless-stopped
|
||||
|
||||
@@ -34,4 +34,4 @@ server {
|
||||
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
||||
}
|
||||
}
|
||||
|
||||
115
src/App.tsx
115
src/App.tsx
@@ -1,5 +1,5 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { Download, Github, Smartphone, Shield, RefreshCw, Star, ArrowRight, ExternalLink } from "lucide-react";
|
||||
import { Download, Github, Smartphone, Shield, RefreshCw, Star, ArrowRight, ExternalLink, Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { useState, useEffect } from "react";
|
||||
@@ -411,7 +411,7 @@ function App() {
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* And Many More Text */}
|
||||
{/* And Many More Text + Request App Button */}
|
||||
<motion.div
|
||||
className="text-center mt-12"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -420,13 +420,13 @@ function App() {
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<motion.p
|
||||
className="text-2xl md:text-3xl font-semibold bg-gradient-to-r from-purple-400 via-pink-400 to-indigo-400 bg-clip-text text-transparent"
|
||||
className="text-2xl md:text-3xl font-semibold bg-gradient-to-r from-purple-400 via-pink-400 to-indigo-400 bg-clip-text text-transparent mb-4"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
...and many more!
|
||||
</motion.p>
|
||||
<motion.p
|
||||
className="text-lg text-gray-400 mt-3"
|
||||
className="text-lg text-gray-400 mb-8"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
@@ -434,6 +434,63 @@ function App() {
|
||||
>
|
||||
Discover hundreds of premium apps with unlocked features
|
||||
</motion.p>
|
||||
|
||||
{/* Request App Button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.7 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<motion.a
|
||||
href="https://forms.felo.gg/forms/felostore-request"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white transition-all duration-300 ease-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-500/50 rounded-2xl overflow-hidden"
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
boxShadow: "0 25px 50px -12px rgba(251, 146, 60, 0.5)"
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
{/* Vibrant gradient background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-orange-600 via-red-600 to-pink-600 rounded-2xl opacity-90 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
|
||||
{/* Glass overlay */}
|
||||
<div className="absolute inset-0 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 shadow-2xl"></div>
|
||||
|
||||
{/* Top shine effect */}
|
||||
<div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white/30 to-transparent rounded-t-2xl opacity-60"></div>
|
||||
|
||||
{/* Animated shimmer */}
|
||||
<div className="absolute inset-0 -skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-500 rounded-2xl"></div>
|
||||
|
||||
{/* Inner shadow for depth */}
|
||||
<div className="absolute inset-0 rounded-2xl shadow-inner shadow-black/20"></div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative flex items-center space-x-3 z-10">
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Plus className="w-5 h-5 text-white drop-shadow-lg" />
|
||||
</motion.div>
|
||||
<span className="text-white font-bold tracking-wide drop-shadow-lg">
|
||||
Request App
|
||||
</span>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<ExternalLink className="w-4 h-4 text-white/80 drop-shadow-lg" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Hover glow effect */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-orange-500/30 via-red-500/30 to-pink-500/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl"></div>
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
@@ -705,6 +762,56 @@ function App() {
|
||||
{/* Hover glow effect */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-emerald-500/30 via-teal-500/30 to-green-500/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl"></div>
|
||||
</motion.a>
|
||||
|
||||
{/* Request App Button in CTA */}
|
||||
<motion.a
|
||||
href="https://forms.felo.gg/forms/felostore-request"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group relative inline-flex items-center justify-center px-10 py-5 text-xl font-semibold text-white transition-all duration-300 ease-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-500/50 rounded-2xl overflow-hidden"
|
||||
whileHover={{
|
||||
scale: 1.05,
|
||||
boxShadow: "0 25px 50px -12px rgba(251, 146, 60, 0.5)"
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
{/* Vibrant gradient background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-orange-600 via-red-600 to-pink-600 rounded-2xl opacity-90 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
|
||||
{/* Glass overlay */}
|
||||
<div className="absolute inset-0 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 shadow-2xl"></div>
|
||||
|
||||
{/* Top shine effect */}
|
||||
<div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white/30 to-transparent rounded-t-2xl opacity-60"></div>
|
||||
|
||||
{/* Animated shimmer */}
|
||||
<div className="absolute inset-0 -skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-500 rounded-2xl"></div>
|
||||
|
||||
{/* Inner shadow for depth */}
|
||||
<div className="absolute inset-0 rounded-2xl shadow-inner shadow-black/20"></div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative flex items-center space-x-3 z-10">
|
||||
<motion.div
|
||||
whileHover={{ rotate: 360 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Plus className="w-6 h-6 text-white drop-shadow-lg" />
|
||||
</motion.div>
|
||||
<span className="text-white font-bold tracking-wide drop-shadow-lg">
|
||||
Request App
|
||||
</span>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<ExternalLink className="w-5 h-5 text-white/80 drop-shadow-lg" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Hover glow effect */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-orange-500/30 via-red-500/30 to-pink-500/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl"></div>
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
@@ -21,4 +21,4 @@ export default defineConfig({
|
||||
'store.felo.gg' // Add your domain
|
||||
],
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user