#🚀 Akiyam AI Studio - Frontend##🌟 OverviewThe Akiyam GenAA is the unified platform for next-generation generative media. This repository contains the source code for the main frontend application, built with React, and featuring modern motion design powered by Framer Motion and utility-first styling with Tailwind CSS.

The application provides a seamless, immersive user experience for accessing a suite of AI-powered creative tools, from high-fidelity image and video generation to smart chatbot assistance and enterprise-grade tooling.

##✨ Key FeaturesThis frontend application showcases the following core capabilities and design elements:

• Immersive Hero Section: Dynamic, animated hero section with scroll-based transformations and a word-by-word animation effect.
• Generative AI Tool Suite: A comprehensive grid showcasing various AI services (Image Converter, Video Generator, Text-to-Image, RAG Analysis, etc.).
• Interactive Design: Utilizes framer-motion for complex animations like:
• Spotlight Card (SpotlightCard): A custom effect that creates a radial-gradient spotlight following the mouse cursor over feature cards.
• 3D Tilt Card (TiltCard): A subtle 3D hover effect on update/news items.
• Scale Button (ScaleButton): Interactive press and hover effects on all primary buttons.
• Dynamic Background: Animated, large, floating background blobs to create a "futuristic" mood. ======= GenAA 🌊 A sleek, dynamic, and fully responsive front-end for Ocean GenAi, a conceptual platform for generative AI services and products. This repository contains the complete React application, built from the ground up with a focus on smooth animations and a theme-aware, custom CSS design system.

📸 Demo

• Performance Metrics Bar: An ultra-glass, sticky-styled bar displaying key platform statistics.
• Responsive & Dark-Themed UI: A dark-mode first design with a focus on glassmorphism and modern, vibrant accent colors.

##🛠️ Tech Stack* Frontend Framework: React

• Styling: Tailwind CSS (with utility classes for all component styling)
• Animation Library: Framer Motion
• Icon Library: Lucide React (lucide-react)

##🚀 Getting StartedFollow these steps to set up and run the project locally. Queries: [email protected]

###Prerequisites* Node.js (v18+)

• npm or yarn

###Installation1. Clone the repository:

git clone [YOUR_REPOSITORY_URL] cd [YOUR_PROJECT_DIRECTORY]

2. Install dependencies:

npm install

or

yarn install

3. Run the development server:

npm start

or

yarn start

The application will typically be available at http://localhost:3000.

##⚙️ Customization and Development###StylingThe project uses a dark theme with specific color constants defined at the top of the component:

• textPrimary: text-gray-100
• textSecondary: text-gray-400
• glassCardStyle: Defines the "glassmorphism" effect: bg-gradient-to-br from-white/[0.08] to-white/[0.02] border-white/10

To change the theme or look, adjust these Tailwind CSS classes.

###AnimationsAll major animations are handled by Framer Motion. Key variants are defined for re-use:

• enhancedFadeInUp: Used for staggered fade-in of sections and feature cards.
• staggerContainer: Used to apply delays to children elements (like feature cards).
• floatingBlob: Used for the dynamic, colorful background elements.

The useScroll and useTransform hooks are used in the Hero section for the parallax scrolling effect:

const { scrollYProgress } = useScroll();
const yHero = useTransform(scrollYProgress, [0, 0.5], [0, -100]);
const opacityHero = useTransform(scrollYProgress, [0, 0.4], [1, 0]);

To adjust the parallax speed, modify the output values in useTransform.

##🤝 ContributingContributions are welcome! Please follow the standard GitLab flow:

1. Fork the repository.
2. Create a new feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a Merge Request.

###Code StyleThis project primarily uses functional React components with ES6+ syntax and hooks. Please ensure your contributions adhere to this style and maintain consistency with the existing Tailwind CSS class structure.

##📄 License to Akiyam.in

---

Built with ❤️ and Framer Motion.

✨ Features Dynamic Theme: ☀️ Light & 🌙 Dark modes, managed globally with CSS variables.

Sleek "Glass" UI: A modern, blur-effect header that transitions from transparent to "glass" on scroll.

Smooth Animations: Built with framer-motion for all page transitions, modal popups, and interactive hover effects.

Component-Based: Fully built in React with reusable components for the Header, Footer, and UI elements.

100% Responsive: A mobile-first design that looks and works great on all devices.

Animated Mobile Nav: The hamburger menu smoothly animates into a close icon ("X").

Pages Home Page: A beautiful landing page with a hero section, feature list, and CTAs.

Explore Page: A filterable gallery of AI-generated content (Images, Video, Text) with an animated layoutId modal for a seamless lightbox effect.

Contact Page: A two-column layout with a themed contact form and animated info cards.