diff --git a/feelize-ai/index.html b/feelize-ai/index.html index e27709a2..d48516d9 100644 --- a/feelize-ai/index.html +++ b/feelize-ai/index.html @@ -4,6 +4,11 @@ + + + Feelize - AI-Supercharged Engineers diff --git a/feelize-ai/package-lock.json b/feelize-ai/package-lock.json index 3c507dc0..4d930e03 100644 --- a/feelize-ai/package-lock.json +++ b/feelize-ai/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@base44/sdk": "^0.8.4", + "@gsap/react": "^2.1.2", "@hello-pangea/dnd": "^18.0.1", "@hookform/resolvers": "^4.1.2", "@radix-ui/react-accordion": "^1.2.3", @@ -46,6 +47,7 @@ "embla-carousel-react": "^8.5.2", "firebase": "^12.5.0", "framer-motion": "^12.4.7", + "gsap": "^3.14.2", "html2pdf.js": "^0.12.1", "input-otp": "^1.4.2", "lucide-react": "^0.475.0", @@ -56,6 +58,7 @@ "react-hook-form": "^7.54.2", "react-markdown": "^10.1.0", "react-resizable-panels": "^2.1.7", + "react-responsive": "^10.0.1", "react-router-dom": "^7.2.0", "recharts": "^2.15.1", "remark-gfm": "^4.0.1", @@ -73,7 +76,7 @@ "@types/react-dom": "^18.2.22", "@vitejs/plugin-react": "^4.3.4", "autoprefixer": "^10.4.20", - "baseline-browser-mapping": "^2.9.11", + "baseline-browser-mapping": "^2.9.14", "eslint": "^9.19.0", "eslint-plugin-react": "^7.37.4", "eslint-plugin-react-hooks": "^5.0.0", @@ -1695,6 +1698,16 @@ "node": ">=6" } }, + "node_modules/@gsap/react": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz", + "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==", + "license": "SEE LICENSE AT https://gsap.com/standard-license", + "peerDependencies": { + "gsap": "^3.12.5", + "react": ">=17" + } + }, "node_modules/@hello-pangea/dnd": { "version": "18.0.1", "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz", @@ -5148,6 +5161,12 @@ "utrie": "^1.0.2" } }, + "node_modules/css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==", + "license": "BSD" + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -6730,6 +6749,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gsap": { + "version": "3.14.2", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz", + "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==", + "license": "Standard 'no charge' license: https://gsap.com/standard-license." + }, "node_modules/has-bigints": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz", @@ -6900,6 +6925,12 @@ "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==", "license": "MIT" }, + "node_modules/hyphenate-style-name": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz", + "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==", + "license": "BSD-3-Clause" + }, "node_modules/iconv-lite": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz", @@ -7804,6 +7835,15 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/matchmediaquery": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.4.2.tgz", + "integrity": "sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==", + "license": "MIT", + "dependencies": { + "css-mediaquery": "^0.1.2" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -9621,6 +9661,24 @@ "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, + "node_modules/react-responsive": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-10.0.1.tgz", + "integrity": "sha512-OM5/cRvbtUWEX8le8RCT8scA8y2OPtb0Q/IViEyCEM5FBN8lRrkUOZnu87I88A6njxDldvxG+rLBxWiA7/UM9g==", + "license": "MIT", + "dependencies": { + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.4.2", + "prop-types": "^15.6.1", + "shallow-equal": "^3.1.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-router": { "version": "7.9.5", "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.5.tgz", @@ -10192,6 +10250,12 @@ "node": ">= 0.4" } }, + "node_modules/shallow-equal": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz", + "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/feelize-ai/package.json b/feelize-ai/package.json index c5428398..20f6558e 100644 --- a/feelize-ai/package.json +++ b/feelize-ai/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@base44/sdk": "^0.8.4", + "@gsap/react": "^2.1.2", "@hello-pangea/dnd": "^18.0.1", "@hookform/resolvers": "^4.1.2", "@radix-ui/react-accordion": "^1.2.3", @@ -48,6 +49,7 @@ "embla-carousel-react": "^8.5.2", "firebase": "^12.5.0", "framer-motion": "^12.4.7", + "gsap": "^3.14.2", "html2pdf.js": "^0.12.1", "input-otp": "^1.4.2", "lucide-react": "^0.475.0", @@ -58,6 +60,7 @@ "react-hook-form": "^7.54.2", "react-markdown": "^10.1.0", "react-resizable-panels": "^2.1.7", + "react-responsive": "^10.0.1", "react-router-dom": "^7.2.0", "recharts": "^2.15.1", "remark-gfm": "^4.0.1", diff --git a/feelize-ai/src/App.css b/feelize-ai/src/App.css deleted file mode 100644 index e69de29b..00000000 diff --git a/feelize-ai/src/App.jsx b/feelize-ai/src/App.jsx index ac388d76..86eeccf1 100644 --- a/feelize-ai/src/App.jsx +++ b/feelize-ai/src/App.jsx @@ -1,6 +1,9 @@ -import './App.css' import Pages from "@/pages/index.jsx" import { Toaster } from "@/components/ui/toaster" +import gsap from 'gsap' +import { ScrollTrigger, SplitText } from 'gsap/all' + +gsap.registerPlugin(ScrollTrigger, SplitText); function App() { return ( diff --git a/feelize-ai/src/components/project/Hero.jsx b/feelize-ai/src/components/project/Hero.jsx new file mode 100644 index 00000000..2e3675e9 --- /dev/null +++ b/feelize-ai/src/components/project/Hero.jsx @@ -0,0 +1,532 @@ +import { useRef, useEffect, useState } from "react"; +import { useGSAP } from "@gsap/react"; +import gsap from "gsap"; +import { ArrowRight, Zap, Code2, Sparkles } from "lucide-react"; +// import { useFPS } from "@/hooks/useFPS"; +// import '@/hero.css' + +const Hero = () => { + const containerRef = useRef(null); + const cursorRef = useRef(null); + const cursorDotRef = useRef(null); + const magneticButtonRef = useRef(null); + const neuralCanvasRef = useRef(null); + const [isHovering, setIsHovering] = useState(false); + const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); + const prefersReducedMotion = useRef( + window.matchMedia("(prefers-reduced-motion: reduce)").matches, + ); + + // Split text into individual characters for kinetic typography + const headline = "Engineering Digital Sovereignty"; + const words = headline.split(" "); + + // Neural Network Background Effect + useEffect(() => { + if (prefersReducedMotion.current) return; + + const canvas = neuralCanvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext("2d"); + const setCanvasSize = () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + }; + setCanvasSize(); + window.addEventListener("resize", setCanvasSize); + + // Create nodes for neural network + const nodes = []; + const nodeCount = 50; + const mouse = { x: 0, y: 0, radius: 150 }; + + for (let i = 0; i < nodeCount; i++) { + nodes.push({ + x: Math.random() * canvas.width, + y: Math.random() * canvas.height, + vx: (Math.random() - 0.5) * 0.5, + vy: (Math.random() - 0.5) * 0.5, + radius: Math.random() * 2 + 1, + }); + } + + const handleMouseMove = (e) => { + mouse.x = e.clientX; + mouse.y = e.clientY; + }; + window.addEventListener("mousemove", handleMouseMove); + + const animate = () => { + ctx.fillStyle = "rgba(10, 10, 15, 0.05)"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + nodes.forEach((node, i) => { + // Update position + node.x += node.vx; + node.y += node.vy; + + // Bounce off edges + if (node.x < 0 || node.x > canvas.width) node.vx *= -1; + if (node.y < 0 || node.y > canvas.height) node.vy *= -1; + + // Magnetic effect from mouse + const dx = mouse.x - node.x; + const dy = mouse.y - node.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < mouse.radius) { + const force = (mouse.radius - distance) / mouse.radius; + node.x += dx * force * 0.03; + node.y += dy * force * 0.03; + } + + // Draw node + ctx.beginPath(); + ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2); + ctx.fillStyle = `rgba(5, 128, 232, ${0.3 + Math.random() * 0.3})`; + ctx.fill(); + + // Draw connections + nodes.forEach((otherNode, j) => { + if (i !== j) { + const dx = node.x - otherNode.x; + const dy = node.y - otherNode.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < 120) { + ctx.beginPath(); + ctx.moveTo(node.x, node.y); + ctx.lineTo(otherNode.x, otherNode.y); + ctx.strokeStyle = `rgba(112, 0, 255, ${0.15 * (1 - distance / 120)})`; + ctx.lineWidth = 0.5; + ctx.stroke(); + } + } + }); + }); + + requestAnimationFrame(animate); + }; + + animate(); + + return () => { + window.removeEventListener("resize", setCanvasSize); + window.removeEventListener("mousemove", handleMouseMove); + }; + }, []); + + // Custom Cursor + useEffect(() => { + if (prefersReducedMotion.current) return; + + const moveCursor = (e) => { + setMousePos({ x: e.clientX, y: e.clientY }); + + gsap.to(cursorRef.current, { + x: e.clientX, + y: e.clientY, + duration: 0.6, + ease: "power3.out", + }); + + gsap.to(cursorDotRef.current, { + x: e.clientX, + y: e.clientY, + duration: 0.1, + }); + }; + + window.addEventListener("mousemove", moveCursor); + return () => window.removeEventListener("mousemove", moveCursor); + }, []); + + // Main GSAP Animations + useGSAP( + () => { + if (prefersReducedMotion.current) { + // Show everything immediately for reduced motion + gsap.set(".hero-element", { opacity: 1, y: 0 }); + return; + } + + const tl = gsap.timeline({ defaults: { ease: "power4.out" } }); + + // SVG Line Drawing + tl.from(".svg-line", { + strokeDashoffset: 1000, + duration: 1.5, + ease: "expo.out", + stagger: 0.2, + }) + // Container Expansion + .from( + ".glass-container", + { + scale: 0, + opacity: 0, + duration: 1, + ease: "back.out(1.4)", + }, + "-=0.8", + ) + // Kinetic Typography - Staggered 3D rotation + .from( + ".char", + { + opacity: 0, + rotationX: -90, + y: 50, + transformOrigin: "50% 50% -50px", + duration: 0.8, + stagger: { + each: 0.03, + from: "random", + }, + ease: "back.out(1.2)", + }, + "-=0.5", + ) + // Floating Cards with Clip-path + .from( + ".float-card", + { + clipPath: "polygon(0 0, 0 0, 0 100%, 0% 100%)", + duration: 1, + stagger: 0.15, + ease: "expo.out", + }, + "-=0.8", + ) + // Subheading reveal + .from( + ".subheading", + { + clipPath: "inset(0 100% 0 0)", + duration: 1, + ease: "expo.out", + }, + "-=0.6", + ) + // CTA Button + .from( + ".cta-button", + { + scale: 0, + rotation: -180, + duration: 0.8, + ease: "back.out(2)", + }, + "-=0.4", + ); + + // Parallax effect on floating cards + const cards = gsap.utils.toArray(".float-card"); + cards.forEach((card, i) => { + gsap.to(card, { + y: `${(i + 1) * 20}`, + x: `${(i + 1) * 10}`, + scrollTrigger: { + trigger: containerRef.current, + start: "top top", + end: "bottom top", + scrub: true, + }, + }); + }); + }, + { scope: containerRef }, + ); + + // Magnetic Button Effect + useEffect(() => { + if (prefersReducedMotion.current) return; + + const button = magneticButtonRef.current; + if (!button) return; + + const handleMouseMove = (e) => { + const rect = button.getBoundingClientRect(); + const buttonCenterX = rect.left + rect.width / 2; + const buttonCenterY = rect.top + rect.height / 2; + + const deltaX = e.clientX - buttonCenterX; + const deltaY = e.clientY - buttonCenterY; + const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); + + const magnetRadius = 100; + + if (distance < magnetRadius) { + const power = (magnetRadius - distance) / magnetRadius; + gsap.to(button, { + x: deltaX * power * 0.5, + y: deltaY * power * 0.5, + duration: 0.4, + ease: "power2.out", + }); + } else { + gsap.to(button, { + x: 0, + y: 0, + duration: 0.6, + ease: "elastic.out(1, 0.3)", + }); + } + }; + + window.addEventListener("mousemove", handleMouseMove); + return () => window.removeEventListener("mousemove", handleMouseMove); + }, []); + + const handleCTAClick = () => { + const aiSection = document.getElementById("ai-analyzer"); + if (aiSection) { + aiSection.scrollIntoView({ behavior: "smooth", block: "start" }); + } + }; + + const handleScrollClick = () => { + const action = document.getElementById("our-process") + + if(action) { + action.scrollIntoView({behavior: "smooth", block: "start"}) + } + } + + // const fps = useFPS(); + // console.log("Current FPS:", fps); // Should be ~60 + + return ( +
+ {/* Neural Network Background Canvas */} + + + {/* Custom Cursor */} + {!prefersReducedMotion.current && ( + <> +
+
+
+
+ + )} + + {/* SVG Line Decorations */} + + + + + + + + + + + + {/* Main Content */} +
+ {/* Glassmorphic Container */} +
+ {/* Floating Code Cards with Parallax */} +
+
+ + + component.tsx + +
+
+
+
+
+
+
+ +
+
+ + + ai-engine.js + +
+
+
+
+
+
+
+ +
+
+ + + performance.cpp + +
+
+
+
+
+
+
+ + {/* Main Headline - Kinetic Typography */} +

+ {words.map((word, wordIndex) => ( + + {word.split("").map((char, charIndex) => ( + + {char} + + ))} + + ))} +

+ + {/* Subheading with Clip-path Reveal */} +

+ Where{" "} + AI velocity{" "} + meets{" "} + + human artistry + + . Crafting digital experiences that transcend expectation. +

+ + {/* CTA Button - Magnetic Effect */} +
+ +
+
+ + {/* Scroll Indicator */} +
+
+
+
+
+
+ + {/* Ambient Glow Effects */} +
+
+
+ ); +}; + +export default Hero; diff --git a/feelize-ai/src/hero.css b/feelize-ai/src/hero.css new file mode 100644 index 00000000..7a7abbdc --- /dev/null +++ b/feelize-ai/src/hero.css @@ -0,0 +1,61 @@ +/* GPU-Accelerated Transforms */ +.hero-element { + will-change: transform, opacity; + transform: translateZ(0); + backface-visibility: hidden; +} + +/* Custom Cursor Override */ +body { + cursor: none; +} + +a, button, [role="button"] { + cursor: none; +} + +/* Smooth Text Rendering */ +.char { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; +} + +/* Glassmorphism Enhancement */ +.glass-container { + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +/* Canvas Performance */ +canvas { + image-rendering: optimizeSpeed; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: optimize-contrast; +} + +/* Selection Style */ +::selection { + background-color: rgba(5, 128, 232, 0.3); + color: white; +} + +/* Focus Visible for Accessibility */ +button:focus-visible { + outline: 2px solid #0580E8; + outline-offset: 4px; +} + +/* Reduced Motion Fallback */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} \ No newline at end of file diff --git a/feelize-ai/src/hooks/useFPS.jsx b/feelize-ai/src/hooks/useFPS.jsx new file mode 100644 index 00000000..7a5667a0 --- /dev/null +++ b/feelize-ai/src/hooks/useFPS.jsx @@ -0,0 +1,27 @@ +import { useEffect, useRef } from 'react'; + +export const useFPS = () => { + const fpsRef = useRef(0); + + useEffect(() => { + let lastTime = performance.now(); + let frames = 0; + + const measureFPS = (currentTime) => { + frames++; + + if (currentTime >= lastTime + 1000) { + fpsRef.current = Math.round((frames * 1000) / (currentTime - lastTime)); + console.log(`FPS: ${fpsRef.current}`); + frames = 0; + lastTime = currentTime; + } + + requestAnimationFrame(measureFPS); + }; + + requestAnimationFrame(measureFPS); + }, []); + + return fpsRef.current; +}; \ No newline at end of file diff --git a/feelize-ai/src/index.css b/feelize-ai/src/index.css index ec44205c..ac0e637a 100644 --- a/feelize-ai/src/index.css +++ b/feelize-ai/src/index.css @@ -127,6 +127,7 @@ body { @apply bg-background text-foreground; font-family: 'Inter', sans-serif; + cursor: none; } } diff --git a/feelize-ai/src/main.jsx b/feelize-ai/src/main.jsx index 9b5dc865..85068dca 100644 --- a/feelize-ai/src/main.jsx +++ b/feelize-ai/src/main.jsx @@ -1,4 +1,3 @@ -import React from 'react' import ReactDOM from 'react-dom/client' import App from '@/App.jsx' import '@/index.css' diff --git a/feelize-ai/src/pages/HomeComplete.jsx b/feelize-ai/src/pages/HomeComplete.jsx index 1e8920ba..f88595c0 100644 --- a/feelize-ai/src/pages/HomeComplete.jsx +++ b/feelize-ai/src/pages/HomeComplete.jsx @@ -30,6 +30,7 @@ import { motion } from "framer-motion"; import ContactForm from "@/components/ContactForm"; import { AIChatbot, ChatButton } from "@/components/AIChatbot"; import { ProjectAnalyzer } from "@/components/ProjectAnalyzerNew"; +import Hero from "@/components/project/Hero"; const HomePage = () => { const [openFaqIndex, setOpenFaqIndex] = useState(0); @@ -136,47 +137,53 @@ const HomePage = () => { const testimonials = [ { - quote: "Feelize is one of the greatest groups of creative minds and coding professionals that I have ever had the opportunity to work with. They ride the cutting edge of AI tech and their creativity and skill are phenomenal.", + quote: + "Feelize is one of the greatest groups of creative minds and coding professionals that I have ever had the opportunity to work with. They ride the cutting edge of AI tech and their creativity and skill are phenomenal.", author: "Vernon Attles", title: "President, CEO, PressEmporium", metric: "Exceptional Craftsmanship", rating: 5, }, { - quote: "I am honored to vouch for Feelize. Their standard of code development, project custodianship, accountability in delivery, and overall project management reflects exceptional quality.", + quote: + "I am honored to vouch for Feelize. Their standard of code development, project custodianship, accountability in delivery, and overall project management reflects exceptional quality.", author: "Utkarsh Srivastava", title: "Founder & Managing Partner, Adjuva Legal", metric: "Outstanding Technical Execution", rating: 5, }, { - quote: "I confidently recommend Feelize for their outstanding professionalism and consistency. Their technical expertise, responsible ownership of work, and structured approach to project execution make them a dependable partner.", + quote: + "I confidently recommend Feelize for their outstanding professionalism and consistency. Their technical expertise, responsible ownership of work, and structured approach to project execution make them a dependable partner.", author: "Sal Austin", title: "Senior VP, DGX Security", metric: "High-value Delivery", rating: 5, }, { - quote: "Feelize delivers a rare combination of technical skill, accountability, and creative insight. They manage projects with clarity and discipline, ensuring transparency and timely execution.", + quote: + "Feelize delivers a rare combination of technical skill, accountability, and creative insight. They manage projects with clarity and discipline, ensuring transparency and timely execution.", author: "Richard Weiner", title: "CEO, ABCVI", metric: "Exceeded Expectations", rating: 5, }, { - quote: "Feelize stands out through a rare combination of technical skill, responsible execution, and thoughtful creativity. Their development practices are well-structured, project delivery is handled with discipline.", + quote: + "Feelize stands out through a rare combination of technical skill, responsible execution, and thoughtful creativity. Their development practices are well-structured, project delivery is handled with discipline.", author: "Sandy Weberman", title: "Owner, Sandy Creative", metric: "Disciplined Delivery", rating: 5, }, { - quote: "Feelize is at the forefront of AI Web and app design. Contact them for your next project or to add new life to your existing Website.", + quote: + "Feelize is at the forefront of AI Web and app design. Contact them for your next project or to add new life to your existing Website.", author: "Neal Elefant", title: "President, Business Leader", metric: "Cutting Edge Design", rating: 5, - } + }, ]; const processSteps = [ @@ -359,80 +366,10 @@ const HomePage = () => { {/* Main Content */}
{/* Hero Section */} -
- -
- - - Feelize - - - - - - - - -
- -

- Developers Supercharged by AI -

- -

- Speed of AI. The quality and creativity of our professional - designers, engineers, and business strategists. -

- - - -
+ {/* Process Section */} -
+
✨ AI-Optimized Workflow diff --git a/feelize-ai/tailwind.config.cjs b/feelize-ai/tailwind.config.cjs index 7ee3f053..773406b1 100644 --- a/feelize-ai/tailwind.config.cjs +++ b/feelize-ai/tailwind.config.cjs @@ -1,89 +1,93 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: ["class"], - content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"], + darkMode: ["class"], + content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"], theme: { - extend: { - borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)' - }, - colors: { - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))' - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))' - }, - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))' - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))' - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))' - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))' - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))' - }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - chart: { - '1': 'hsl(var(--chart-1))', - '2': 'hsl(var(--chart-2))', - '3': 'hsl(var(--chart-3))', - '4': 'hsl(var(--chart-4))', - '5': 'hsl(var(--chart-5))' - }, - sidebar: { - DEFAULT: 'hsl(var(--sidebar-background))', - foreground: 'hsl(var(--sidebar-foreground))', - primary: 'hsl(var(--sidebar-primary))', - 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', - accent: 'hsl(var(--sidebar-accent))', - 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', - border: 'hsl(var(--sidebar-border))', - ring: 'hsl(var(--sidebar-ring))' - } - }, - keyframes: { - 'accordion-down': { - from: { - height: '0' - }, - to: { - height: 'var(--radix-accordion-content-height)' - } - }, - 'accordion-up': { - from: { - height: 'var(--radix-accordion-content-height)' - }, - to: { - height: '0' - } - } - }, - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out' - } - } + extend: { + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + colors: { + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + chart: { + 1: "hsl(var(--chart-1))", + 2: "hsl(var(--chart-2))", + 3: "hsl(var(--chart-3))", + 4: "hsl(var(--chart-4))", + 5: "hsl(var(--chart-5))", + }, + sidebar: { + DEFAULT: "hsl(var(--sidebar-background))", + foreground: "hsl(var(--sidebar-foreground))", + primary: "hsl(var(--sidebar-primary))", + "primary-foreground": "hsl(var(--sidebar-primary-foreground))", + accent: "hsl(var(--sidebar-accent))", + "accent-foreground": "hsl(var(--sidebar-accent-foreground))", + border: "hsl(var(--sidebar-border))", + ring: "hsl(var(--sidebar-ring))", + }, + }, + keyframes: { + "accordion-down": { + from: { + height: "0", + }, + to: { + height: "var(--radix-accordion-content-height)", + }, + }, + "accordion-up": { + from: { + height: "var(--radix-accordion-content-height)", + }, + to: { + height: "0", + }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + "bounce-slow": "bounce 3s infinite", + }, + backdropBlur: { + xs: "2px", + }, + }, }, plugins: [require("tailwindcss-animate")], -} \ No newline at end of file +};