Repository: brahmGAN/bramgan.ai
Branch: master
Commit: db2c08781224
Files: 95
Total size: 10.4 MB
Directory structure:
gitextract_f6de6mzh/
├── .gitignore
├── README.md
├── about.jsx
├── hamburgerMenu.component.jsx
├── nav-bar.component.jsx
├── package.json
├── public/
│ ├── index.html
│ ├── manifest.json
│ ├── robots.txt
│ └── video/
│ ├── Brahmgan.webm
│ ├── Social Media Filter Shoe.webm
│ └── Voxel.webm
└── src/
├── App.css
├── App.js
├── App.test.js
├── components/
│ ├── FAQSection/
│ │ ├── FAQSection.component.jsx
│ │ └── FAQSection.css
│ ├── HeroSection/
│ │ ├── herosection.css
│ │ └── hersosection.component.jsx
│ ├── XR/
│ │ ├── xr.css
│ │ └── xr.jsx
│ ├── about/
│ │ ├── about.css
│ │ └── about.jsx
│ ├── clientcomponent/
│ │ ├── clentcomponent.css
│ │ └── clientcomponent.component.jsx
│ ├── clients/
│ │ ├── client.css
│ │ └── clients.component.jsx
│ ├── contact/
│ │ ├── contact.css
│ │ └── contact.jsx
│ ├── contactSection/
│ │ ├── contactSection.component.jsx
│ │ └── contactSection.css
│ ├── creativeSection/
│ │ ├── creativeSection.component.jsx
│ │ └── creativesection.css
│ ├── ecommerce/
│ │ ├── ecommerce.css
│ │ └── ecommerce.jsx
│ ├── features/
│ │ ├── feature.component.jsx
│ │ └── feature.css
│ ├── footer/
│ │ ├── footer.component.jsx
│ │ └── footer.css
│ ├── game/
│ │ ├── game.css
│ │ └── game.jsx
│ ├── getintouch/
│ │ ├── getintouch.component.jsx
│ │ └── getintouch.css
│ ├── hamburgermenu/
│ │ ├── hamburgerMenu.component.jsx
│ │ └── hamburgermenu.css
│ ├── home/
│ │ ├── home.css
│ │ └── home.jsx
│ ├── homePage/
│ │ ├── homePage.css
│ │ └── homepage.jsx
│ ├── homesection1/
│ │ ├── homesection1.component.jsx
│ │ └── homesection1.css
│ ├── introsection/
│ │ ├── introsection.component.jsx
│ │ └── introsection.css
│ ├── joinmail/
│ │ ├── joinMail.component.jsx
│ │ └── joinmail.css
│ ├── meubar/
│ │ ├── menubar.component.jsx
│ │ └── menubar.css
│ ├── moving-left/
│ │ ├── moving-left.component.jsx
│ │ └── moving-left.css
│ ├── nav-bar/
│ │ ├── nav-bar.component.jsx
│ │ └── nav-bar.css
│ ├── overboxes/
│ │ ├── overboxes.component.jsx
│ │ └── overboxes.css
│ ├── questions/
│ │ ├── questions.component.jsx
│ │ └── questions.css
│ ├── quote/
│ │ ├── quote.component.jsx
│ │ └── quote.css
│ ├── review/
│ │ ├── review.component.jsx
│ │ └── review.css
│ ├── slider/
│ │ ├── slider.component.jsx
│ │ └── slider.css
│ ├── solutions/
│ │ ├── solution.css
│ │ └── solutions.jsx
│ ├── solutionsection1/
│ │ ├── solutionsection1.component.jsx
│ │ └── solutionsection1.css
│ ├── solutionsection2/
│ │ ├── solutionsection2.component.jsx
│ │ └── solutionsection2.css
│ ├── solutionsection3/
│ │ ├── solutionsection3.component.jsx
│ │ └── solutionsection3.css
│ ├── solutionsection3content/
│ │ ├── solutionsection3content.component.jsx
│ │ └── solutionsection3content.css
│ ├── solutionsection3content2/
│ │ ├── solutionsection3content2.component.jsx
│ │ └── solutionsection3content2.css
│ ├── team/
│ │ ├── team.css
│ │ └── team.jsx
│ ├── tech/
│ │ ├── tech.component.jsx
│ │ └── tech.css
│ └── technologies/
│ ├── technologies.css
│ └── technologies.jsx
├── firebase.js
├── gloabal.css
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: README.md
================================================
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
================================================
FILE: about.jsx
================================================
import './about.css'
import {Link} from 'react-router-dom'
export default function about(){
return(
<div className='aboutpage'>
<div className='aboutheader'>
<h1>Our Bussiness</h1>
<h4>Changing the Game, literally</h4>
<p>We are focused on creating the next generation of infrastructure for 3D services.
The company was started in 2022 by serial entrepreneurs to help various gaming studios make their asset development faster. Soon we grew to cater Ecommerce clients as well who were keen to take their 2D customer experience to 3D with more engagement and conversion.
Today we also serve the XR industry which innovatively uses the NeRF outputs to create highly photorealistic scenes.
</p>
</div>
<div className='colum'>
<h1>OUR TEAM</h1>
<h4>Who We Are</h4>
<div className='row' >
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Suraj.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Suraj Chawla</h4>
<h5 style={{margin:'0px'}}>CEO & Co-founder</h5>
</div>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Kiruba.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Kirubakaran Reddy</h4>
<h5 style={{margin:'0px'}}>CBO & Co-founder</h5>
</div>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Puru.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Puru</h4>
<h5 style={{margin:'0px'}}>CTO & Co-founder</h5>
</div>
</div>
<div className='row'>
<div className='subcolum' >
<img style={{borderRadius:'30px'}} src={'icons/Yogesh.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Yogesh Achari</h4>
<h5 style={{margin:'0px'}}>Senior Marketing Lead</h5>
</div>
<div className='subcolum' >
<img style={{borderRadius:'30px'}} src={'icons/Kamala.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Kamala</h4>
<h5 style={{margin:'0px'}}>Content Strategist Specialist</h5>
</div>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Patanjali.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Pathanjali Sharma</h4>
<h5 style={{margin:'0px'}}>Business Development</h5>
</div>
</div>
<div className='row'>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Praful.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Praful R</h4>
<h5 style={{margin:'0px'}}>Tech Advisor</h5>
</div>
</div>
</div>
</div>
);
}
================================================
FILE: hamburgerMenu.component.jsx
================================================
import {Link} from 'react-router-dom'
import './hamburgermenu.css'
import React, { useState } from 'react';
const HamburgerMenu = () => {
const [isOpen, setIsOpen] = useState(false);
const [isSolutionsOpen, setIsSolutionsOpen] = useState(false);
const [isAboutOpen, setIsAboutOpen] = useState(false);
const toggleMenu = () => {
setIsOpen(!isOpen);
};
const toggleSolutions = () => {
setIsSolutionsOpen(!isSolutionsOpen);
};
const toggleAbout = () => {
setIsAboutOpen(!isAboutOpen);
};
return (
<header className="header">
<Link to='/'>
<div style={{marginLeft:'20px'}}><img src={'/icons/brahmlogo.png'} alt={''} width={100} height={100} /></div>
</Link>
<button style={{display:'flex'}} className="hamburger" onClick={toggleMenu}>
<img src={'/icons/hamburger.svg'} alt={' '} />
</button>
<nav className={`menu ${isOpen ? 'open' : ''}`} style={{display:'flex', flexDirection:'row'}}>
<button style={{display:'flex', justifyContent:'flex-start', backgroundColor:'#fff', border:'none', marginTop:'10px',cursor: 'pointer'}} onClick={toggleMenu}><img src={'/icons/close.svg'} alt={''} width={40} height={40} /></button>
<ul>
<Link to='/'>
<li onClick={toggleMenu}>Home</li></Link>
<Link to='/solutions'><span onClick={toggleSolutions} className="dropdown-button">
Solutions<img src={isSolutionsOpen ? '/icons/up.svg' : 'icons/down.svg'} alt={''} />
</span></Link>
<ul className={`submenu ${isSolutionsOpen ? 'open' : ''}`}>
<Link to='/ecommerce'>
<li onClick={toggleMenu}>eCommerce</li>
</Link>
<Link to='/xr'>
<li onClick={toggleMenu}>XR</li>
</Link>
<Link to='/game'>
<li onClick={toggleMenu}>Gaming</li>
</Link>
</ul>
<Link to='/technologies'>
<li onClick={toggleMenu}>Technologies</li></Link>
<Link to='/about'>
<li onClick={toggleMenu}> About </li>
</Link>
</ul>
</nav>
</header>
);
};
export default HamburgerMenu;
================================================
FILE: nav-bar.component.jsx
================================================
import {Link} from 'react-router-dom'
import React, {useState} from 'react'
import './nav-bar.css'
export default function NavBar(){
return (
<>
<div className="menu-container">
<div className='logoicon'>
<Link to='/'>
<img src={'/icons/brahmlogo.png'} alt={''} width={100} height={100} />
</Link>
</div>
<div className="navcontainer">
<Link to='/' className="menu-item">
Home
</Link>
<div className='dropdown'>
<Link to='/solutions' className="dropbtn ">
Solutions
</Link>
<div className="dropdown-content">
<Link to='/ecommerce' >eCommerce</Link>
<Link to='/xr'>XR</Link>
<Link to='/game'>Gaming</Link>
</div>
</div>
<Link to="/technologies" className="menu-item">
Technologies
</Link>
<div className='dropdown'>
<Link to='./about' className="menu-item">
About
</Link>
</div>
<div>
{/* <Link to='./contactus'> */}
<button className="button1"><a href='https://app.brahmgan.com' target="_blank">Try Now</a></button>
{/* </Link> */}
</div>
</div>
</div>
</>
);
}
================================================
FILE: package.json
================================================
{
"name": "website",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"firebase": "^9.18.0",
"mangodb": "^1.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-plugin-react-hooks": "^4.6.0"
}
}
================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/icons/brahmGAN.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>BrahmGAN</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
================================================
FILE: public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: public/video/Voxel.webm
================================================
[File too large to display: 10.3 MB]
================================================
FILE: src/App.css
================================================
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
================================================
FILE: src/App.js
================================================
import './App.css';
import './gloabal.css'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Footer from './components/footer/footer.component';
import Solutions from './components/solutions/solutions';
import Technologies from './components/technologies/technologies'
import About from './components/about/about'
import Game from './components/game/game'
import XR from './components/XR/xr'
import ECommerce from './components/ecommerce/ecommerce'
import Team from './components/team/team'
import ContactUs from './components/contact/contact'
import Home from './components/home/home'
import NavBar from './components/nav-bar/nav-bar.component'
import ContactSection from './components/contactSection/contactSection.component'
import HamburgerMenu from './components/hamburgermenu/hamburgerMenu.component'
import { useEffect, useState } from 'react';
function App() {
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
};
const [showHam, setShowHam] = useState(false)
const isMobile = () => {
return window.matchMedia("(max-width: 768px)").matches
}
useEffect(() => {
setShowHam(isMobile());
if(window) {
window.addEventListener('resize', () => {
setShowHam(isMobile());
})
}
}, [])
useEffect(() => {
scrollToTop();
}, []);
return (
<>
<Router>
<div className='App'>
{ showHam ? <HamburgerMenu /> : <NavBar />}
</div>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/solutions" element={<Solutions />} />
<Route path="/technologies" element={<Technologies />} />
<Route path="/about" element={<About />} />
<Route path="/ecommerce" element={<ECommerce />} />
<Route path="/xr" element={<XR />} />
<Route path="/game" element={<Game />} />
<Route path="/team" element={<Team />} />
<Route path="/contactus" element={<ContactUs />} />
<Route path="/home" element={<Home />} />
</Routes>
<ContactSection />
<Footer />
</Router>
</>
);
}
export default App;
================================================
FILE: src/App.test.js
================================================
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
================================================
FILE: src/components/FAQSection/FAQSection.component.jsx
================================================
import React, { useState } from "react";
import "./FAQSection.css"; // import the CSS file for the FAQ styles
function FAQSection() {
const [activeIndex, setActiveIndex] = useState(null);
const toggleAccordion = (index) => {
setActiveIndex(activeIndex === index ? null : index);
};
const faqData = [
{
question: "Can you integrate your 3D infrastructure solutions with our existing software and platforms?",
answer:
"Yes, we can work with your team to integrate our solutions with your existing software and platforms, such as Unity or Unreal game engines, eCommerce websites, or other systems.",
},
{
question: "How do you integrate NeRF, blockchain, and GAN technologies into your solutions for XR, gaming, and eCommerce industries?",
answer:
"Yes, we can work with your team to integrate our solutions with your existing software and platforms, such as Unity or Unreal game engines, eCommerce websites, or other systems.",
},
{
question: "Do you offer international shipping?",
answer:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sapien ipsum. Quisque ac diam blandit, fringilla nulla a, fringilla lorem. Nam auctor massa eget neque bibendum feugiat.",
},
];
return (
<div className="faq-container">
<h2>Frequently Asked Questions</h2>
{faqData.map((faq, index) => (
<div
key={index}
className="faq-accordion"
onClick={() => toggleAccordion(index)}
>
<div className="faq-header">
<h3>{faq.question}</h3>
</div>
<div
className={`faq-content ${
activeIndex === index ? "active" : "inactive"
}`}
>
<p>{faq.answer}</p>
</div>
</div>
))}
</div>
);
}
export default FAQSection;
================================================
FILE: src/components/FAQSection/FAQSection.css
================================================
/* FAQ Container */
.faq-container {
max-width: 800px;
margin: 0 auto;
padding: 40px;
}
/* FAQ Accordion */
.faq-accordion {
border: 1px solid #ccc;
border-radius: 8px;
}
.faq-accordion .faq-header {
background-color: #f6f6f6;
padding: 20px;
cursor: pointer;
}
.faq-accordion .faq-header:hover {
background-color: #eaeaea;
}
.faq-accordion .faq-header h3 {
margin: 0;
font-size: 18px;
}
.faq-accordion .faq-content {
background-color: #fff;
padding: 20px;
display: none;
}
.faq-accordion .faq-content p {
margin: 0;
font-size: 16px;
}
.faq-accordion .faq-content.active {
display: block;
}
================================================
FILE: src/components/HeroSection/herosection.css
================================================
.video{
width:100%;
min-width: 100vh;
display:flex;
height:auto;
}
.h1intro {
text-align: left;
color: #234951;
bottom: 0;
left: 0;
right: 0;
font-size: 60px;
}
.intropar {
font-size: 20px;
font-weight: 500;
}
.overlay {
width: 500px;
position: absolute;
top: 0;
left: 0;
margin-top: 4rem;
padding: 3rem;
margin-left: 2rem;
background-size: 3px 3px;
z-index: 2;
}
.introbtn {
padding: 15px;
border-radius: 50px;
background-color: #F5BB44;
color: white;
font-size: 15px;
border: none;
letter-spacing: 5px;
font-weight: 700;
}
.introbtn:hover {
background-color: rgb(50, 209, 50);
}
.bgvideowrap {
position: relative;
}
@media only screen and (max-width:768px){
.bgvideowrap {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.overlay{
position: relative;
background-size: 3px 3px;
width:50%;
margin-top: 0px;
padding: 0px;
margin-left: 20px;
background-size: 0px;
z-index: 0;
}
.video{
display: flex;
width: 100%;
min-width: 100%;
min-height: 200px !important;
}
.h1intro {
text-align: left;
color: #234951;
font-size: 60px;
width: 100%;
height: 120px;
margin-left: 20px;
margin-top: 0px;
}
.intropar {
font-size: 20px;
font-weight: 500;
margin-left: 40px;
width:350px;
}
}
================================================
FILE: src/components/HeroSection/hersosection.component.jsx
================================================
import './herosection.css'
export default function heroSection(){
return(
<section className="bgvideowrap">
<video className="video" src={'video/Brahmgan.webm'} autoPlay loop muted></video>
<div className="overlay">
<div style={{ width: "500px" }}>
<h1 className="h1intro">3D Generative AI</h1>
</div>
<p className='intropar'>To make asset generation 5x faster, 5x cheaper and 4x photorealistic. <br></br><br></br>
With our Video to 3D product you can just take a video of any object (your car or your table action figure) and bring it to the Metaverse!
</p>
<button className='introbtn'><a href='https://app.brahmgan.com' target="_blank">Try Now</a></button>
</div>
</section>
)
}
================================================
FILE: src/components/XR/xr.css
================================================
================================================
FILE: src/components/XR/xr.jsx
================================================
import Section1 from '../solutionsection1/solutionsection1.component'
import Section2 from '../solutionsection2/solutionsection2.component'
import Section3 from '../solutionsection3/solutionsection3.component'
import Content from '../solutionsection3content/solutionsection3content.component'
import Content2 from '../solutionsection3content2/solutionsection3content2.component'
export default function xr()
{
const data1={
title:'3D for XR',
image:'icons/vr.svg',
description:'Experience an immersive world with our XR solutions. From virtual reality (VR) to augmented reality (AR), we offer custom integration for your business needs. Our XR solutions can enhance your e-commerce website, gaming experience, and other industries by providing interactive, 3D environments that engage and excite your audience. Explore the possibilities of XR with our expert team and take your business to the next level.',
iframe:'https://taanga-studios-website.web.app/?product=artroom'
}
const data2={
title:'Need for 3D in XR Industries',
image:'icons/Nerf.svg',
title1:'Realism',
content1:'3D models in XR create a realistic and immersive environment for users, enhancing their experience and engagement with the content.',
title2:'Interactivity',
content2:'3D models allow users to interact with the virtual environment, increasing engagement and providing a more hands-on experience.',
title3:'Immersive Experience',
content3:'3D models and environments provide a more immersive experience for users, making them feel like they are really there. This enhances the overall XR experience and makes it more engaging for users.'
}
const data3={
title:'Applications',
subtitle:'Here are various products that can be showcased in VR '
}
const data4={
contenttitle:'Education',
content:'XR can be used to create immersive learning experiences for students, allowing them to explore and interact with educational content in 3D environments. This can enhance engagement and retention of information, making learning more effective and enjoyable.',
iframe:'https://taanga-studios-website.web.app/?product=realistichumanheart'
}
const data5={
iframe:'video/Social Media Filter Shoe.webm',
contenttitle:'Social Media',
content:'Customers can view 3D models of electronic devices, such as phones or laptops, to see details and features not visible in traditional product photos. 3D models can also show how accessories, like phone cases or covers, look and fit.'
}
const data6={
contenttitle:'Virtual Events',
content:'XR can be used to create virtual events, such as conferences, concerts, and exhibitions. By providing an immersive virtual environment, XR can help to replicate the experience of attending a live event, allowing people to connect and engage with each other from anywhere in the world.',
iframe:'https://taanga-studios-website.web.app/?product=artroom'
}
return(
<>
<Section1 data={data1} />
<Section2 data={data2} />
<Section3 data={data3} />
<Content data={data4} />
<Content2 data={data5} />
<Content data={data6} />
</>
);
}
================================================
FILE: src/components/about/about.css
================================================
.aboutpage{
display: flex;
flex-direction: column;
}
.aboutheader{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0px 150px 150px 150px;
font-size: 16px;
}
.colum{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.row{
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.subcolum{
display: flex;
flex-direction: column;
height:auto;
width: 300px;
white-space: 0px;
margin-left: 40px;
}
@media only screen and (max-width:768px){
.aboutheader{
padding: 0px;
margin-right: 20px;
margin-left: 20px;
}
.subcolum{
margin-left: 0px;
justify-content: center;
}
}
================================================
FILE: src/components/about/about.jsx
================================================
import './about.css'
import {Link} from 'react-router-dom'
export default function about(){
return(
<div className='aboutpage'>
<div className='aboutheader'>
<h1>Our Bussiness</h1>
<h4>Changing the Game, literally</h4>
<p>We are focused on creating the next generation of infrastructure for 3D services.
The company was started in 2022 by serial entrepreneurs to help various gaming studios make their asset development faster. Soon we grew to cater Ecommerce clients as well who were keen to take their 2D customer experience to 3D with more engagement and conversion.
Today we also serve the XR industry which innovatively uses the NeRF outputs to create highly photorealistic scenes.
</p>
</div>
<div className='colum'>
<h1>OUR TEAM</h1>
<h4>Who We Are</h4>
<div className='row' >
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Suraj.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Suraj Chawla</h4>
<h5 style={{margin:'0px'}}>CEO & Co-founder</h5>
</div>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Kiruba.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Kirubakaran Reddy</h4>
<h5 style={{margin:'0px'}}>CBO & Co-founder</h5>
</div>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Puru.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Puru</h4>
<h5 style={{margin:'0px'}}>CTO & Co-founder</h5>
</div>
</div>
<div className='row'>
<div className='subcolum' >
<img style={{borderRadius:'30px'}} src={'icons/Yogesh.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Yogesh Achari</h4>
<h5 style={{margin:'0px'}}>Senior Marketing Lead</h5>
</div>
<div className='subcolum' >
<img style={{borderRadius:'30px'}} src={'icons/Kamala.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Kamala</h4>
<h5 style={{margin:'0px'}}>Content Strategist Specialist</h5>
</div>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Patanjali.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Pathanjali Sharma</h4>
<h5 style={{margin:'0px'}}>Business Development</h5>
</div>
</div>
<div className='row'>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Praful.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Praful R</h4>
<h5 style={{margin:'0px'}}>Tech Advisor</h5>
</div>
</div>
</div>
</div>
);
}
================================================
FILE: src/components/clientcomponent/clentcomponent.css
================================================
.clientcontainer{
display: flex;
flex-direction: column;
width:100%;
background-color: #FFD7EF;
height:auto;
margin-bottom: 80px;
}
.clientheader{
display: flex;
flex-direction: column;
margin-top: 30px;
margin-left: 140px;
width:50%;
margin-top: 120px;
}
.clienticons{
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-left: 140px;
margin-bottom: 120px;
}
.clientimage{
position: relative;
display: inline-block;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 60px;
margin-top: 60px;
}
@media only screen and (max-width:768px) {
.clienticons{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
margin-left: 0px;
}
.clientheader{
display: flex;
flex-direction: column;
margin-top: 30px;
margin-left: 20px;
width:100%;
}
}
================================================
FILE: src/components/clientcomponent/clientcomponent.component.jsx
================================================
import './clentcomponent.css'
import {useState} from 'react'
export default function ClientComponent(){
const [hovered, setHovered] = useState(true);
const [hovered1, setHovered1] = useState(true);
const [hovered2, setHovered2] = useState(true);
const [hovered3, setHovered3] = useState(true);
const [hovered4, setHovered4] = useState(true);
return(
<div className='clientcontainer' >
<div className='clientheader'>
<h3>Trusted Among Industry Leaders</h3>
<p>We have worked with several industry leaders to realise thier 3D requirements using our cutting edge AI tools.</p>
</div>
<div className='clienticons'>
<div className='clientimage' onMouseEnter={()=>setHovered(false)} onMouseLeave={()=>setHovered(true)} >
<img src={hovered ? '/icons/Amilma.svg' : '/icons/Amilmacolored.png'} alt={''} height={100} width={200} />
</div>
<div className='clientimage' onMouseEnter={()=>setHovered1(false)} onMouseLeave={()=>setHovered1(true)} >
<img src={hovered1 ? '/icons/Alphablockz.svg' : '/icons/Alphablockzcolored.png'} alt={''} height={60} width={200} />
</div>
<div className='clientimage' onMouseEnter={()=>setHovered2(false)} onMouseLeave={()=>setHovered2(true)} >
<img src={hovered2 ? '/icons/Taanga.svg' : '/icons/Taangacolored.png'} alt={''} height={60} width={200} />
</div>
<div className='clientimage' onMouseEnter={()=>setHovered3(false)} onMouseLeave={()=>setHovered3(true)} >
<img src={hovered3 ? '/icons/Frouter.svg' : '/icons/Froutercolored.png'} alt={''} height={60} width={200} />
</div>
<div className='clientimage' onMouseEnter={()=>setHovered4(false)} onMouseLeave={()=>setHovered4 (true)} >
<img src={hovered4 ? '/icons/frontier.svg' : '/icons/frontiercolored.png'} alt={''} height={40} width={200} />
</div>
</div>
</div>
)
}
================================================
FILE: src/components/clients/client.css
================================================
.clientsec{
justify-content: center;
text-align: center;
margin: 0;
background-color: #E1EFF2;
}
.clientdiv{
display: flex;
gap: 30px;
margin-left: 5em;
}
@media only screen and (max-width: 768px){
.clientsec{
justify-content: center;
text-align: center;
height:auto;
width:auto;
background-color: #E1EFF2;
}
.clientdiv{
display: flex;
flex-direction: column;
margin-top: 3em;
}
}
================================================
FILE: src/components/clients/clients.component.jsx
================================================
import './client.css'
export default function clients(){
return(
<div className='clientsec'>
<div className="sectwohed4">
<h1 className='sectwoindu4'>Our Clients</h1>
</div>
<div className='clientdiv'>
<div>
<img src={'/icons/Amilma.svg'} alt={''} height={200} width={200} />
</div>
<div>
<img src={'/icons/Alphablockz.svg'} alt={''} height={200} width={200} />
</div>
<div>
<img src={'/icons/Taanga.svg'} alt={''} height={200} width={200} />
</div>
<div>
<img src={'/icons/Frouter.svg'} alt={''} height={200} width={200} />
</div>
<div>
<img src={'/icons/frontier.svg'} alt={''} height={200} width={200} />
</div>
</div>
</div>
)
}
================================================
FILE: src/components/contact/contact.css
================================================
.page{
position: relative;
display: flex;
align-items: center;
flex-direction: column;
}
.pageContainer{
display: flex;
flex-direction:row;
}
.detailsBox{
display: flex;
flex-direction: column;
margin-top: 100px;
height: 566px;
width:506px;
}
.socialMedia{
display: flex;
}
.box {
border: 2px solid #ccc;
padding: 10px;
margin: 10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.contentBox{
display: flex;
flex-direction: column;
color: #ffff;
background-color:#234951;
padding:20px;
height: 566px;
margin-top: 20px;
width:506px;
margin-left: 80px;
}
@media only screen and (max-width: 768px) {
.pageContainer{
display: flex;
flex-direction:column;
}
.detailsBox{
display: flex;
flex-direction: column;
height: auto;
width:auto;
justify-content: center;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
.contentBox{
display: flex;
flex-direction: column;
color: #ffff;
background-color:#234951;
padding:20px;
height: auto;
width:auto;
justify-content: center;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
}
================================================
FILE: src/components/contact/contact.jsx
================================================
import React, { useState } from 'react';
import './contact.css';
import { initializeApp } from 'firebase/app';
import { getDatabase, ref, push, set } from 'firebase/database';
export default function ContactUs() {
const [fname, setFname] = useState('');
const [lname, setLname] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const firebaseConfig = {
apiKey: "AIzaSyCfSlEt6aagNBepS-1tPsd_xUWL5iQFiPw",
authDomain: "brahmgan-7d2dd.firebaseapp.com",
databaseURL: "https://brahmgan-7d2dd-default-rtdb.firebaseio.com",
projectId: "brahmgan-7d2dd",
storageBucket: "brahmgan-7d2dd.appspot.com",
messagingSenderId: "492014097456",
appId: "1:492014097456:web:765c00dd671d7c869889f5",
measurementId: "G-QZRGQ65V81"
};
// Initialize Firebase
initializeApp(firebaseConfig);
const database = getDatabase();
const pushData = () => {
const userRef = ref(database, 'user');
const newUserRef = push(userRef);
set(newUserRef, {
firstname: fname,
lastname: lname,
email: email,
message: message
}).catch((error) => {
console.error(error);
});
}
return(
<div className='page'>
<div>
<h1 className='title'>Contact Us</h1>
</div>
<div className='pageContainer'>
<div className='detailsBox'>
<div style={{displa:'flex', flexDirection:'row'}}>
<div style={{display:'flex',flexDirection:'column'}}>
<label>First Name</label>
<input className='box' type='text' value={fname} onChange={(event) => setFname(event.target.value)} />
</div>
<div style={{display:'flex',flexDirection:'column'}}>
<label>Last Name</label>
<input className='box' type='text' value={lname} onChange={(event) => setLname(event.target.value)} />
</div>
</div>
<label>Email</label>
<input className='box' type='text' value={email} onChange={(event) => setEmail(event.target.value)} />
<label>Message</label>
<textarea className='box' row='3'value={message} onChange={(event) => setMessage(event.target.value)} />
<button style={{marginTop:"20px"}} className='btn' onClick={pushData}>Send</button>
</div>
<div className='contentBox'>
<h3>Get in Touch</h3>
<h4>Do get in touch with us or if you would like to visit us, we have offices in Singapore and Bangalore.. Drop your mail or ping us on social media, and we will be happy to assist you.</h4>
<h4>123-456-7890</h4>
<h4>info@brahmgan.com</h4>
<div className='socialMedia' style={{marginTop:'10px'}}>
<a href='https://t.me/+bVr0c3Ck9AQyMTE1'><img src={'/icons/telegram.svg'} alt={''}/></a>
<a href='https://twitter.com/brahmGAN_'><img style={{marginLeft:'10px'}} src={'/icons/twitter.svg'} alt={''} /></a>
<a href='https://www.instagram.com/brahmgan/'><img style={{marginLeft:'10px'}} src={'/icons/instagram.svg'} alt={''} /></a>
<a href="https://www.linkedin.com/authwall?trk=bf&trkInfo=AQFciWqj1LljVQAAAYeZjezgVcG6ibWZvPrhtEKR9duQsK_Tf0jda2VPJvIJ063xkfGnO7oWqYjvw-dxnoie8RntI6NdJBxuqAOe3-CFRgLY6wfUl4YeqAHIkGMa8YLZdSUpCCw=&original_referer=&sessionRedirect=https%3A%2F%2Fwww.linkedin.com%2Fcompany%2Fbrahmgan%2F"> <img style={{marginLeft:'10px'}} src={'/icons/linkedin.svg'} alt={''} /></a>
</div>
</div>
</div>
</div>
);
}
================================================
FILE: src/components/contactSection/contactSection.component.jsx
================================================
import './contactSection.css'
export default function ContactSection(){
return(
<div className='contactContainer'>
<div className='contactheader'>
<img src={'/icons/brahmGAN.png'} height={100} width={100} alt={''} />
</div>
<div className='contactsubsection'>
<div className='contactInformation'>
<h4>Contact</h4>
<div className='contacts'>
<div className='contactDetails'>
<p>3 FRASER STREET #05-25, DUO TOWER, 189352, Singapore</p>
</div>
<div className='contactDetails'>
<p>Sales:
karan@brahmgan.com</p>
</div>
</div>
{/* <div className='contacts'>
<div className='contactDetails'>
<p>General Inquiries:
123-456-7890</p>
</div>
<div className='contactDetails'>
<p>Customer Care:
info@brahmgan.com</p>
</div>
</div> */}
</div>
<div>
</div>
{/* <div className='socialLinks'>
<h4>Quick Links</h4>
<a href=' ' ><p>Terms&Condition</p></a>
<a href=' ' ><p>Privacy policies</p></a>
</div> */}
{/* <div className='socialLinks'>
<h4>Follow</h4>
<p>Sign up to get the latest news on our product.</p>
<input type="email" style={{backgroundColor:'#FFBF23', border:'1px solid black'}} ></input>
<button style={{backgroundColor:'black', color:'white'}}>Send</button>
</div> */}
</div>
</div>
)
}
================================================
FILE: src/components/contactSection/contactSection.css
================================================
.contactContainer{
background-color:#FFBF23 ;
display: flex;
flex-direction: column;
width:100%;
height: auto;
}
.contactheader{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 40px;
}
.contactsubsection{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
margin-bottom: 40px;
font-family: 'Calibri Light';
}
.contacts{
display: flex;
flex-direction: row;
margin: 0px;
}
.contactDetails{
display: flex;
flex-direction: column;
margin-left: 20px;
justify-content: space-evenly;
height: 60px;
width:150px;
margin-top: 20px;
}
.sociallinks{
display: flex;
flex-direction: column;
font-size: 22px;
text-decoration: none !important ;
margin-left: 20px;
justify-content: space-evenly;
}
@media only screen and (max-width:768px){
.contactsubsection{
flex-direction: column;
margin-top: 20px;
}
.sociallinks{
margin-top: 20px;
}
}
================================================
FILE: src/components/creativeSection/creativeSection.component.jsx
================================================
import './creativesection.css'
export default function CreativeSection(){
return(
<div className='creative'>
{/* <div className='videioConatiner'>
<video className='videioConatiner' src={'video/Voxel.webm'} autoPlay loop muted></video>
</div>
<div className='detailsContainer'>
<h3 style={{margin:'0px'}}>Built for Creatives, by Creatives</h3>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<div className='icons'>
<div className='iconConatiner'>
<img src={'icons/solution.svg'} alt={''} />
<p style={{marginLeft:'10px'}} >about icon</p>
</div>
<div className='iconConatiner' style={{marginLeft:'20px'}}>
<img src={'icons/technology.svg'} alt={''} />
<p style={{marginLeft:'10px'}}>about icon</p>
</div>
<div className='iconConatiner' style={{marginLeft:'20px'}}>
<img src={'icons/home.svg'} alt={''} />
<p style={{marginLeft:'10px'}}>about icon</p>
</div>
</div>
</div> */}
</div>
)
}
================================================
FILE: src/components/creativeSection/creativesection.css
================================================
.creative{
display: flex;
flex-direction: row;
align-items:center;
margin-top:40px;
margin-left: 80px;
}
.videioConatiner{
display: flex;
justify-content:flex-start;
align-items: center;
margin-left: 120px;
object-fit:content;
height:500px;
width:500px;
margin-bottom: 80px;
/*background:blue;*/
}
.detailsContainer{
display: flex;
flex-direction: column;
margin-top: 60px;
margin-left: 300px;
height:500px;
width: 400px;
margin-right:40px;
font-family: 'Calibri Light';
font-size: 20px;
}
.icons{
display:flex;
flex-direction:row;
}
.iconConatiner{
margin-top:0px;
display: flex;
flex-direction: row;
}
@media only screen and (max-width:786px) {
.creative{
display: flex;
flex-direction: column;
align-items:center;
margin-top:40px;
}
.videioConatiner{
display: flex;
justify-content:flex-start;
align-items: center;
margin-left: 0px;
margin-right: 0px;
object-fit:content;
height:400px;
width:100%;
margin-bottom: 20px;
/*background:blue;*/
}
.detailsContainer{
display: flex;
flex-direction: column;
margin-top: 10px;
margin-left: 20px;
height:400px;
width: 400px;
margin-right:0px;
}
}
================================================
FILE: src/components/ecommerce/ecommerce.css
================================================
================================================
FILE: src/components/ecommerce/ecommerce.jsx
================================================
import Section1 from '../solutionsection1/solutionsection1.component'
import Section2 from '../solutionsection2/solutionsection2.component'
import Section3 from '../solutionsection3/solutionsection3.component'
import Content from '../solutionsection3content/solutionsection3content.component'
import Content2 from '../solutionsection3content2/solutionsection3content2.component'
export default function ecommerce ()
{
const data1={
title:'3D for E-Commerce',
image:'icons/cart.svg',
description:'Our 3D solutions are highly beneficial for eCommerce websites and companies as they can provide an immersive and engaging experience for their customers. With our 3D infrastructure, clients can request custom 3D models of their products. Which will be delivered swiftly using our community of 3D content creators, that can be seamlessly integrated into your eCommerce workflow. Our NeRF technology also allows for quick and easy creation of 3D models, reducing production time and costs.',
iframe:'https://taanga-studios-website.web.app/?product=fendi'
}
const data2={
title:'Why 3D in E-Commerce?',
image:'icons/Nerf.svg',
title1:'3D Product Display',
content1:'Embedding 3D models on product pages for a more engaging shopping experience.',
title2:'AR/VR Shopping',
content2:'Using 3D models for augmented and virtual reality experiences, allowing customers to "try before they buy" and making online shopping more interactive.',
title3:'Product Customization',
content3:'Offering customers the ability to customize products in 3D, enabling them to visualize and create their desired product.'
}
const data3={
title:'Applications',
subtitle:'Here are various products that can be showcased in VR '
}
const data4={
contenttitle:'Furniture Shopping',
content:'Customers can view 3D models of furniture in their homes through AR/VR experiences to see how they will look and fit before making a purchase. We can also allow customers to modify or customize content.',
iframe:'https://taanga-studios-website.web.app/?product=shelf'
}
const data5={
iframe:'https://taanga-studios-website.web.app/?product=tv',
contenttitle:'Electronics shopping',
content:'Customers can view 3D models of electronic devices, such as phones or laptops, to see details and features not visible in traditional product photos. 3D models can also show how accessories, like phone cases or covers, look and fit.'
}
const data6={
contenttitle:'Jewellery shopping',
content:'Customers can view 3D models of electronic devices, such as phones or laptops, to see details and features not visible in traditional product photos. 3D models can also show how accessories, like phone cases or covers, look and fit.',
iframe:'https://taanga-studios-website.web.app/?product=ring'
}
return(
<>
<Section1 data={data1} />
<Section2 data={data2} />
<Section3 data={data3} />
<Content data={data4} />
<Content2 data={data5} />
<Content data={data6} />
</>
);
}
================================================
FILE: src/components/features/feature.component.jsx
================================================
import './feature.css'
export default function Features(){
return(
<div className='feature'>
<div className='imageheader'>
<div className='headers'>
<h2 style={{fontSize:'36px'}}>Our Features</h2>
<p style={{fontSize:'20px',fontWeight:'300px'}}></p>
</div>
{/* <img className='imagecontainerheader' src={'icons/bg.png'} alt={''} /> */}
</div>
<div className='featurecontainer'>
<div className='featurecontainerbox'>
<img className='imageconatiner' src={'icons/Speed.svg'} alt={''} />
<h4 style={{margin:'0px', marginLeft:'20px', marginTop:'10px'}}>BG Architect</h4>
<p style={{margin:'0px', marginLeft:'20px', marginTop:'10px'}}>A Video to 3D pipeline, which takes a video of an object and convert it into an usable 3D model.</p>
</div>
<div className='featurecontainerbox'>
<img className='imageconatiner' src={'icons/Users.svg'} alt={''} />
<h4 style={{margin:'0px', marginLeft:'20px', marginTop:'10px'}}>BG Genie (Coming Soon)</h4>
<p style={{margin:'0px', marginLeft:'20px', marginTop:'10px'}}>An Image to 3D pipeline, which takes an image of an object and convert it into an usable 3D model.</p>
</div>
<div className='featurecontainerbox'>
<img className='imageconatiner' src={'icons/Gameready.svg'} alt={''} />
<h4 style={{margin:'0px', marginLeft:'20px', marginTop:'10px'}}>BG Avatar (Coming Soon)</h4>
<p style={{margin:'0px', marginLeft:'20px', marginTop:'10px'}}>A Text to 3D pipeline, which takes text prompt as an input and convert it into an usabke 3D Model.</p>
</div>
<div className='featurecontainerbox'>
<img className='imageconatiner' src={'icons/Ai.svg'} alt={''} />
<h4 style={{margin:'0px', marginLeft:'20px', marginTop:'10px'}}>GPU Network</h4>
<p style={{margin:'0px', marginLeft:'20px', marginTop:'10px'}}>A decentralized GPU network, A person can be an user or a provider by renting the GPU on GPU network.</p>
</div>
</div>
</div>
)
}
================================================
FILE: src/components/features/feature.css
================================================
.feature{
display:flex;
width:100%;
height: auto;
flex-direction: column;
}
.imageheader{
display: flex;
flex-direction: row;
}
.imagecontainerheader{
display: flex;
height: 200px;
justify-content: flex-end;
margin-left: 610px;
}
.headers{
display: flex;
flex-direction: column;
height: auto;
width:40%;
justify-content: flex-start;
margin-left: 140px;
margin-bottom: 40px;
font-family: 'Bahnschrift Light';
}
.featurecontainer{
display:flex;
flex-direction: row;
margin-top: 20px;
margin-bottom: 20px;
justify-content: center;
align-items: center;
width:80%;
margin-left: 180px;
}
.featurecontainerbox{
display: flex;
flex-direction: column;
height:auto;
width:35%;
margin-left: 40px;
justify-content: space-evenly;
font-family: 'Calibri Light';
}
.imageconatiner{
border-color: black;
border: 3px solid;
border-radius: 30px;
width:230px;
height:290px;
object-fit: cover;
}
@media only screen and (max-width:786px) {
.featurecontainer{
display:flex;
flex-direction: column;
margin-top: 20px;
margin-bottom: 20px;
justify-content: center;
align-items: center;
width:80%;
margin-left: 0px;
}
.headers{
display: flex;
flex-direction: column;
height: auto;
width:70%;
justify-content: flex-start;
margin-left: 80px;
margin-bottom: 40px;
font-family: 'Bahnschrift Light';
}
.imageconatiner{
border-color: black;
border: 3px solid;
border-radius: 30px;
width:230px;
height:290px;
object-fit: cover;
margin-top: 30px;
}
.featurecontainerbox{
display: flex;
flex-direction: column;
height:auto;
width:55%;
margin-left: 80px;
justify-content: center;
font-family: 'Calibri Light';
}
}
================================================
FILE: src/components/footer/footer.component.jsx
================================================
import './footer.css'
export default function footer(){
return (
<div className="footer" >
<div className='socialMedia' style={{marginTop:'10px'}}>
<a href='https://t.me/+bVr0c3Ck9AQyMTE1'><img src={'/icons/telegram.svg'} alt={''} /></a>
<a href='https://twitter.com/brahmGAN_'><img style={{marginLeft:'10px'}} src={'/icons/twitter.svg'} alt={''} /></a>
<a href='https://www.instagram.com/brahmgan/'><img style={{marginLeft:'10px'}} src={'/icons/instagram.svg'} alt={''} /></a>
<a href="https://www.linkedin.com/authwall?trk=bf&trkInfo=AQFciWqj1LljVQAAAYeZjezgVcG6ibWZvPrhtEKR9duQsK_Tf0jda2VPJvIJ063xkfGnO7oWqYjvw-dxnoie8RntI6NdJBxuqAOe3-CFRgLY6wfUl4YeqAHIkGMa8YLZdSUpCCw=&original_referer=&sessionRedirect=https%3A%2F%2Fwww.linkedin.com%2Fcompany%2Fbrahmgan%2F"> <img style={{marginLeft:'10px'}} src={'/icons/linkedin.svg'} alt={''} /></a>
</div>
<div>
<p>© 2023 My brahmGAN Website</p>
</div>
</div>
);
}
================================================
FILE: src/components/footer/footer.css
================================================
/* Footer styles */
.footer {
display:flex;
flex-direction: column;
background-color: #000;
color: #fff;
justify-content: center;
align-items: center;
height: auto;
}
================================================
FILE: src/components/game/game.css
================================================
================================================
FILE: src/components/game/game.jsx
================================================
import Section1 from '../solutionsection1/solutionsection1.component'
import Section2 from '../solutionsection2/solutionsection2.component'
import Section3 from '../solutionsection3/solutionsection3.component'
import Content from '../solutionsection3content/solutionsection3content.component'
import Content2 from '../solutionsection3content2/solutionsection3content2.component'
export default function game()
{
const data1={
title:'3D for Gaming',
image:'icons/GamePad.svg',
description:'At our company, we specialize in providing cutting-edge solutions for the gaming industry, using technologies such as NeRF and GAN to create highly optimized 3D models ready to be used in Games. We offer a range of services, from 3D modeling and integration with popular game engines Unity and Unreal. Whether you are looking to create a new game from scratch or to enhance an existing game with 3D elements, we have the expertise and technology to help you achieve your goals.',
iframe:'https://taanga-studios-website.web.app/?product=treehouse'
}
const data2={
title:'3D In Gaming',
image:'icons/Nerf.svg',
title1:'Immersive',
content1:'3D graphics and animations can create a more immersive gameplay experience by providing a realistic and detailed environment for the players to explore.',
title2:'Enhanced Visuals',
content2:'3D graphics can enhance the visual appeal of a game by providing more realistic textures, lighting, and shading effects. This can attract more players and increase the overall quality of the gaming experience.',
title3:'Flexibility',
content3:'3D graphics and animations allow for more flexibility in game design and development. They can be easily modified and customized to fit the specific needs and preferences of the game developers and players.'
}
const data3={
title:'Object Showcase ',
subtitle:'Here are various products that can be showcased in VR '
}
const data4={
contenttitle:'Model Creation',
content:'Quickly Create 3D Models required for games using our explicit scene creation services, which generate Environment for your gaming needs.',
iframe:'https://taanga-studios-website.web.app/?product=gun'
}
const data5={
iframe:'https://taanga-studios-website.web.app/?product=idletoswordunsheath',
contenttitle:'Chracter Creation',
content:'NeRF can be used to create realistic 3D models of characters for gaming quickly and efficiently. With NeRF, it is possible to capture a persons likeness and turn it into a 3D model in a matter of minutes. This can be done using just a few photos of the person from different angles, making it a fast and easy process. These models can then be integrated into game engines, allowing for seamless integration into game development pipelines. '
}
return(
<>
<Section1 data={data1} />
<Section2 data={data2} />
<Section3 data={data3} />
<Content data={data4} />
<Content2 data={data5} />
</>
);
}
================================================
FILE: src/components/getintouch/getintouch.component.jsx
================================================
import './getintouch.css'
export default function getInTouch(){
return(
<div className='seclast'>
<div><h1 className='intouch'>GET IN TOUCH</h1>
<p style={{padding:"10px"}}>Office Locations in Bangalroe and Singapore</p>
<a href=" " ><p style={{padding:"10px"}}>info@brahmgan.com</p></a>
<button className='introbtn'style={{marginTop:"20px"}} >Contact Us</button>
</div>
<div>
<img src={'/icons/handshake.svg'} alt={''} />
</div>
</div>
)
}
================================================
FILE: src/components/getintouch/getintouch.css
================================================
.seclast{
display: flex;
/* border: 2px solid red; */
margin: auto;
justify-content: center;
text-align: center;
background-color: #F1F1F1;
margin-top: 0%;
}
.seclast div{
/* border:2px solid blue; */
width: 40%;
}
.intouch{
font-size: 40px;
font-weight: 700;
color: #6b6969;
margin-top: 3em;
}
.seclast div a{
color: #5e5c5c;
}
@media only screen and (max-width: 768px){
.seclast{
display: flex;
flex-direction: column;
margin: auto;
text-align: center;
background-color: #F1F1F1;
margin-top: 0%;
}
.seclast div{
/* border:2px solid blue; */
width: 100%;
}
}
================================================
FILE: src/components/hamburgermenu/hamburgerMenu.component.jsx
================================================
import {Link} from 'react-router-dom'
import './hamburgermenu.css'
import React, { useState } from 'react';
const HamburgerMenu = () => {
const [isOpen, setIsOpen] = useState(false);
const [isSolutionsOpen, setIsSolutionsOpen] = useState(false);
const [isAboutOpen, setIsAboutOpen] = useState(false);
const toggleMenu = () => {
setIsOpen(!isOpen);
};
const toggleSolutions = () => {
setIsSolutionsOpen(!isSolutionsOpen);
};
const toggleAbout = () => {
setIsAboutOpen(!isAboutOpen);
};
return (
<header className="header">
<Link to='/'>
<div style={{marginLeft:'20px'}}><img src={'/icons/brahmlogo.png'} alt={''} width={100} height={100} /></div>
</Link>
<button style={{display:'flex'}} className="hamburger" onClick={toggleMenu}>
<img src={'/icons/hamburger.svg'} alt={' '} />
</button>
<nav className={`menu ${isOpen ? 'open' : ''}`} style={{display:'flex', flexDirection:'row'}}>
<button style={{display:'flex', justifyContent:'flex-start', backgroundColor:'#fff', border:'none', marginTop:'10px',cursor: 'pointer'}} onClick={toggleMenu}><img src={'/icons/close.svg'} alt={''} width={40} height={40} /></button>
<ul>
<Link to='/'>
<li onClick={toggleMenu}>Home</li></Link>
<Link to='/solutions'><span onClick={toggleSolutions} className="dropdown-button">
Solutions<img src={isSolutionsOpen ? '/icons/up.svg' : 'icons/down.svg'} alt={''} />
</span></Link>
<ul className={`submenu ${isSolutionsOpen ? 'open' : ''}`}>
<Link to='/ecommerce'>
<li onClick={toggleMenu}>eCommerce</li>
</Link>
<Link to='/xr'>
<li onClick={toggleMenu}>XR</li>
</Link>
<Link to='/game'>
<li onClick={toggleMenu}>Gaming</li>
</Link>
</ul>
<Link to='/technologies'>
<li onClick={toggleMenu}>Technologies</li></Link>
<Link to='/about'>
<li onClick={toggleMenu}> About </li>
</Link>
</ul>
</nav>
</header>
);
};
export default HamburgerMenu;
================================================
FILE: src/components/hamburgermenu/hamburgermenu.css
================================================
body{
overflow-x: hidden;
}
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0px;
width:100%;
}
.hamburger-menu {
position: relative;
}
.hamburger {
display: flex;
flex-direction: column;
justify-content:flex-end;
width: 30px;
height: 22px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1000;
margin-right: 40px;
}
.hamburger-line {
width: 100%;
height: 2px;
background-color: #fff;
transition: all 0.3s;
}
.menu {
position: fixed;
top: 0;
right: 0;
background-color: #fff;
width: 200px;
height: 100%;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s;
transform: translateX(200px);
z-index: 1000;
}
.menu.open {
transform: translateX(0);
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #eee;
}
.menu li:last-child {
border-bottom: none;
}
.menu a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: #333;
transition: all 0.3s;
}
.menu a:hover {
background-color: #eee;
}
.dropdown-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 12px 16px;
text-decoration: none;
color: #333;
transition: background-color 0.3s;
cursor: pointer;
}
.submenu {
display: none;
list-style: none;
padding: 0;
margin: 0;
margin-left: 1rem;
}
.submenu.open {
display: block;
}
.submenu li {
margin: 0.5rem 0;
}
.submenu a {
color: inherit;
text-decoration: none;
}
.submenu a:hover {
text-decoration: underline;
}
/* Mobile view styles */
@media screen and (max-width: 768px) {
.hamburger {
display: flex;
}
}
================================================
FILE: src/components/home/home.css
================================================
================================================
FILE: src/components/home/home.jsx
================================================
import HeroSection from '../HeroSection/hersosection.component'
import HomeSection1 from '../homesection1/homesection1.component'
import Features from '../features/feature.component'
import CreativeSection from '../creativeSection/creativeSection.component'
import ClientComponent from '../clientcomponent/clientcomponent.component'
import Review from '../review/review.component'
import MovingLeft from '../moving-left/moving-left.component'
import Tech from '../tech/tech.component'
export default function Home(){
const data1 = {
title: 'Industries',
para: 'Providing cutting-edge 3D infrastructure services for XR, gaming, and eCommerce industries.',
image1: '/icons/GamePad.svg',
title1: 'Game',
content1: 'Learn how brahmGAN is going to revolutionize gaming with NeRF and GAN Tech',
image2: '/icons/VR.svg',
title2: 'XR',
content2: 'We help industries with tools such as 3D AR filters, 3D XR Viewers, XR related plugins to make 3D viewing easier.',
image3: '/icons/Cart.svg',
title3: 'eCommerce',
content3: 'Helvetica Light is an easy-to-read font, with tall and narrow letters, that works well on almost every site.'
}
return(
<>
<HeroSection />
<HomeSection1 />
<MovingLeft data={data1}/>
<Features />
<CreativeSection />
<Tech />
<ClientComponent />
<Review />
<div style={{width:'100%',display:'flex', justifyContent:'center' ,alignItems:'center'}} >
<img style={{width:'50%'}} src={'icons/BrahmGAN.jpg'} alt={''} />
</div>
</>
)
}
================================================
FILE: src/components/homePage/homePage.css
================================================
.effetsimg {
width: 100%;
}
.bgvideowrap {
position: relative;
}
.video {
width: 100%;
min-height: 100vh;
height: auto;
z-index: 1;
}
.overlay {
width: 500px;
position: absolute;
top: 0;
left: 0;
margin-top: 4rem;
padding: 3rem;
margin-left: 2rem;
background-size: 3px 3px;
z-index: 2;
}
.h1intro {
text-align: left;
color: #234951;
bottom: 0;
left: 0;
right: 0;
font-size: 60px;
}
.intropar {
font-size: 20px;
font-weight: 500;
}
.introbtn {
padding: 15px;
border-radius: 50px;
background-color: #F5BB44;
color: white;
font-size: 15px;
border: none;
letter-spacing: 5px;
font-weight: 700;
}
.introbtn:hover {
background-color: rgb(50, 209, 50);
}
.image {
position: relative;
min-width: 100%;
min-height: 100vh;
height: auto;
z-index: 1;
}
.overcontent {
justify-content: center;
text-align: center;
position: absolute;
top: 0;
left: 0;
/* background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%); */
/* background-size: 3px 3px; */
z-index: 2;
padding-bottom: 0%;
}
.sectwohed {
justify-content: center;
text-align: center;
width: 60%;
padding-top: 2em;
margin-left: 40%;
/* border: 2px solid red; */
margin-bottom: 2rem;
}
.sectwoindu {
color: #F5BB44;
font-size: 4em;
text-shadow: 3px 3px #8d8b8b;
padding: 0%;
margin-bottom: auto;
}
.sectwopar {
padding: 0%;
font-size: 20px;
color: #5e5c5c;
font-weight: 500;
}
.sectwoimg {
display: flex;
/* border: 2px solid blue; */
}
.container {
position: absolute;
width: 30%;
height: 550px;
/* border: 1px solid red; */
/* transition: fill 1s ease; */
background-image: url(/public/icons/GamePad.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: rgba(0, 0, 0, 0.24) 3px 3px 8px;
}
.containers {
position: absolute;
width: 30%;
height: 550px;
/* border: 1px solid yellow; */
/* transition: fill 1s ease; */
background-image: url(/public/icons/VR.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left: 35%;
box-shadow: rgba(0, 0, 0, 0.24) 3px 3px 8px;
}
.containers3 {
position: absolute;
width: 30%;
height: 550px;
/* border: 1px solid yellow; */
/* transition: fill 1s ease; */
background-image: url(/public/icons/Cart.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left: 70%;
box-shadow: rgba(0, 0, 0, 0.24) 3px 3px 8px;
}
.overlays {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: white;
/* Black see-through */
color: #f1f1f1;
/* width: 100%; */
transition: .5s ease;
opacity: 0;
color: black;
font-size: 16px;
padding: 20px;
text-align: center;
border-radius: 30px;
}
.container:hover .overlays {
opacity: 1;
}
.overlays3 {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: white;
/* Black see-through */
color: #f1f1f1;
/* width: 100%; */
transition: .5s ease;
opacity: 0;
color: black;
font-size: 20px;
padding: 20px;
text-align: center;
}
.containers3:hover .overlays3 {
opacity: 1;
}
.overlays2 {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: white;
/* Black see-through */
color: #f1f1f1;
/* width: 100%; */
transition: .5s ease;
opacity: 0;
color: black;
font-size: 20px;
padding: 20px;
text-align: center;
}
.containers:hover .overlays2 {
opacity: 1;
}
.moving-left {
transition: transform 0.3s ease;
transform: translateX(0px);
}
.moving-left:hover {
transform: translateX(10px);
}
.learnm {
padding: 15px;
border-radius: 50px;
background-color: #F5BB44;
font-size: 15px;
border: none;
font-weight: 700;
}
.learnm:hover {
background-color: rgb(39, 207, 207);
}
.sec3 {
background-image: url("https://static.wixstatic.com/media/nsplsh_7849dda1784948dc84ebb921c3bd92af~mv2.jpg/v1/fill/w_1222,h_1330,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/nsplsh_7849dda1784948dc84ebb921c3bd92af~mv2.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0%;
text-align: center;
justify-content: center;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row: 200px;
}
.sec3 div {
width: 40%;
height: 300px;
margin: auto;
/* border: 2px solid red; */
}
.sec4 {
background-image: url("https://static.wixstatic.com/media/6379c4_0c3652a7127846aa9f4b0686852f3759~mv2.jpg/v1/fill/w_1222,h_1025,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/6379c4_0c3652a7127846aa9f4b0686852f3759~mv2.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.sectwohed4 {
justify-content: center;
text-align: center;
width: 40%;
padding-top: 2em;
/* margin-left: 40%; */
/* border: 2px solid red; */
margin-bottom: 2rem;
margin: auto;
}
.sectwoindu4 {
color: #F5BB44;
font-size: 4em;
text-shadow: 3px 3px #8d8b8b;
padding: 0%;
margin-bottom: auto;
}
.sectwopar4 {
padding: 0%;
font-size: 20px;
color: #5e5c5c;
font-weight: 700;
}
.containertech1 {
position: absolute;
width: 20%;
height: 550px;
/* border: 1px solid red; */
/* transition: fill 1s ease; */
background-image: url(/public/icons/Gan.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: rgba(0, 0, 0, 0.24) 3px 3px 8px;
}
.containertech2 {
position: absolute;
width: 20%;
height: 550px;
/* border: 1px solid yellow; */
/* transition: fill 1s ease; */
background-image: url(/public/icons/Nerf.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left: 23%;
box-shadow: rgba(0, 0, 0, 0.24) 3px 3px 8px;
}
.containertech3 {
position: absolute;
width: 20%;
height: 550px;
/* border: 1px solid yellow; */
/* transition: fill 1s ease; */
background-image: url(/public/icons/Blockchain.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left: 46%;
box-shadow: rgba(0, 0, 0, 0.24) 3px 3px 8px;
}
.overlaystech1 {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: white;
/* Black see-through */
color: #f1f1f1;
/* width: 100%; */
transition: .5s ease;
opacity: 0;
color: black;
font-size: 20px;
padding: 20px;
text-align: center;
}
.containertech1:hover .overlaystech1 {
opacity: 1;
}
.overlaystech3 {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: white;
/* Black see-through */
color: #f1f1f1;
/* width: 100%; */
transition: .5s ease;
opacity: 0;
color: black;
font-size: 20px;
padding: 20px;
text-align: center;
}
.containertech3:hover .overlaystech3 {
opacity: 1;
}
.overlaystech2 {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: white;
/* Black see-through */
color: #f1f1f1;
/* width: 100%; */
transition: .5s ease;
opacity: 0;
color: black;
font-size: 20px;
padding: 20px;
text-align: center;
}
.containertech2:hover .overlaystech2 {
opacity: 1;
}
.sec4btn {
/* border: 2px solid red; */
margin-top: 650px;
}
.sec5 {
background-color: #F5BB44;
}
@media only screen and (max-width: 768px) {
.overlays {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: white;
/* Black see-through */
color: #f1f1f1;
/* width: 100%; */
transition: .5s ease;
opacity: 0;
color: black;
font-size: 14px;
padding: 20px;
text-align: center;
border-radius: 30px;
}
}
================================================
FILE: src/components/homePage/homepage.jsx
================================================
import Clients from '../clients/clients.component'
import Slider from '../slider/slider.component'
import JoinMail from '../joinmail/joinMail.component'
import GetInTouch from '../getintouch/getintouch.component';
import MovingLeft from '../moving-left/moving-left.component';
import './homePage.css';
export default function HomePage() {
const data1 = {
title: 'Industries',
para: 'Providing cutting-edge 3D infrastructure services for XR, gaming, and eCommerce industries.',
image: '/icons/Hexa.svg',
image1: '/icons/GamePad.svg',
title1: 'Game',
content1: 'Learn how brahmGAN is going to revolutionize gaming with NeRF and GAN Tech',
image2: '/icons/VR.svg',
title2: 'XR',
content2: 'We help industries with tools such as 3D AR filters, 3D XR Viewers, XR related plugins to make 3D viewing easier.',
image3: '/icons/Cart.svg',
title3: 'eCommerce',
content3: 'Helvetica Light is an easy-to-read font, with tall and narrow letters, that works well on almost every site.'
}
const data2 = {
title: 'Technologies',
para: 'We dont hold back with technologies when it comes to 3D. We use NeRF for video to 3D, GAN for Text to 3D, and Blockchain to democrotize 3D content creation from all over the world.',
image: '/icons/whiteCloud.svg',
image1: '/icons/Gan.svg',
title1: 'Game',
content1: 'Learn how brahmGAN is going to revolutionize gaming with NeRF and GAN Tech',
image2: '/icons/Nerf.svg',
title2: 'XR',
content2: 'We help industries with tools such as 3D AR filters, 3D XR Viewers, XR related plugins to make 3D viewing easier.',
image3: '/icons/BlockChain.svg',
title3: 'eCommerce',
content3: 'Helvetica Light is an easy-to-read font, with tall and narrow letters, that works well on almost every site.'
}
return (
<div className='effectsimg'>
<section className="bgvideowrap">
<video className="video" src={'video/Brahmgan.webm'} autoPlay loop muted></video>
<div className="overlay">
<div style={{ width: "500px" }}>
<h1 className="h1intro">Introducing AI Generation</h1>
</div>
<p className='intropar'>Create amazing 3D content effortlessly with our text-to-3D tools.Our advanced technology uses NeRF, GAN, and Blockchain for fast, decentralized AI-based 3D content creation.With BrahmGAN, bring your ideas to life instantly, without technical expertise or complex software.Explore the future of 3D content creation and unlock your creativity.</p>
<button className='introbtn'>Learn More</button>
</div>
</section>
<MovingLeft data={data1} />
{/*<section className="bgvideowrap">
<img className="image" src={'/icons/Hexa.svg'} alt={' '}></img>
<div className="overcontent">
<div className="sectwohed">
<h1 className='sectwoindu'>Industries</h1>
<p className='sectwopar'>Providing cutting-edge 3D infrastructure services for XR, gaming, and eCommerce industries.</p>
</div>
<div style={{ display: "flex", marginLeft: "200px" }}>
<div style={{ display: 'flex', }}>
<div className='container moving-left'>
<div class="overlays" >
<h4>Game</h4>
<p>Learn how brahmGAN is going to revolutionize gaming with NeRF and GAN Tech.</p>
<button className='learnm'>Learn More</button>
</div>
</div>
<div className='containers moving-left'>
<div class="overlays2">
<h4>XR</h4>
<p>We help industries with tools such as 3D AR filters, 3D XR Viewers, XR related plugins to make 3D viewing easier.</p>
<button className='learnm'>Learn More</button>
</div>
</div>
<div className='containers3 moving-left'>
<div class="overlays3">
<h4>eCommerce</h4>
<p>Helvetica Light is an easy-to-read font, with tall and narrow letters, that works well on almost every site.</p>
<button className='learnm'>Learn More</button>
</div>
</div>
</div>
</div>
</div>
</section>*/}
<section className='sec3'>
<h2>AI Generation is the Future, <a href=" ">Join us.</a></h2>
<h1>Features</h1>
<div>
<img src={'/icons/speed.svg'} alt={''} />
<p>Boost speed of assets creation using Tridev our Asset Creation app.</p>
</div>
<div>
<img src={'/icons/Users.svg'} alt={''} />
<p>With global cult like followers, get 3D model of any object you want in instant, through the power of blockchain.</p>
</div>
<div>
<img src={'/icons/Gameready.svg'} alt={''} height={200} width={300} />
<p>Generated assets are Game Ready assets with instant import and delighting for use with in game lights.</p>
</div>
<div>
<img src={'/icons/Ai.svg'} alt={''} />
<p>AI Generated assets from prompts, just type what object you want, and have 3D model of that ready.</p>
</div>
</section>
<MovingLeft data={data2} />
{/* sectionn 4 */}
{/*<section className="bgvideowrap">
<video className="video" src={'video/background.webm'} autoPlay loop muted></video>
<img className="image" src={'https://static.wixstatic.com/media/6379c4_0c3652a7127846aa9f4b0686852f3759~mv2.jpg/v1/fill/w_1222,h_1025,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/6379c4_0c3652a7127846aa9f4b0686852f3759~mv2.jpg'} alt={' '}></img>
<div className="overcontent">
<div className="sectwohed4">
<h1 className='sectwoindu4'>Technologies</h1>
<p className='sectwopar4'>We don't hold back with technologies when it comes to 3D. We use NeRF for video to 3D, GAN for Text to 3D, and Blockchain to democrotize 3D content creation from all over the world.</p>
</div>
<div style={{ display: "flex", marginLeft: "200px" }}>
<div className='containertech1 moving-left'>
<div class="overlaystech1">
<p>Learn how brahmGAN is going to revolutionize gaming with NeRF and GAN Tech.</p>
<button className='learnm'>Learn More</button>
</div>
</div>
<div className='containertech2 moving-left'>
<div class="overlaystech2">
<p>We help industries with tools such as 3D AR filters, 3D XR Viewers, XR related plugins to make 3D viewing easier.</p>
<button className='learnm'>Learn More</button>
</div>
</div>
<div className='containertech3 moving-left'>
<div class="overlaystech3">
<p>Helvetica Light is an easy-to-read font, with tall and narrow letters, that works well on almost every site.</p>
<button className='learnm'>Learn More</button>
</div>
</div>
</div>
<div className='sec4btn'>
<button className='introbtn'>Learn More</button>
</div>
</div>
</section>*/}
<Clients />
< Slider />
<section className='sec5'>
<h1>"</h1>
<div>
<p>Using brahmGAN's NeRF solutions for our VR Services, we were able to quickly create stunning worlds in matter days. Defenetily going to incoporate thier entire stack in our workflow in future.</p>
<h5>Manju M, Project Manager</h5>
<h5>Taanga Studios</h5>
</div>
<div>
<p>"Never thought AI could be usesful in our site. Been a game changer since we integrated 3D Assets for site.”</p>
<h5>Claire Brooks, MI</h5>
</div>
<div>
<p>"Never thought AI could be usesful in our site. Been a game changer since we integrated 3D Assets for site.”</p>
<h5>Claire Brooks, MI</h5>
</div>
</section>
<GetInTouch />
<JoinMail />
</div>
);
}
================================================
FILE: src/components/homesection1/homesection1.component.jsx
================================================
import './homesection1.css'
export default function HomeSection1(){
return(
<div className='sectionBackground'>
<div className='innerSection'>
Cutting Edge 3D AI Research
</div>
<div className='innerSection2'>
We have expertise in NeRF, GAN, Generative AI and building custom AI pipelines to suit various needs of our clients across industries.
</div>
</div>
)
}
================================================
FILE: src/components/homesection1/homesection1.css
================================================
.sectionBackground{
background-color:#FFBF23 ;
display: flex;
flex-direction: row;
width:100%;
height: auto;
}
.innerSection{
display: flex;
justify-content: center;
padding: 80px 120px 80px 120px;
font-size:38px
}
.innerSection2{
display: flex;
justify-content: center;
padding: 120px 180px 120px 100px;
font-size:18px;
}
@media only screen and (max-width:768px){
.sectionBackground{
flex-direction: column;
}
.innerSection{
padding: 0px;
margin-left: 60px;
margin-right: 60px;
margin-top: 40px;
}
.innerSection2{
padding: 0px;
margin-left: 60px;
margin-right: 60px;
margin-top: 40px;
margin-bottom: 40px;
}
}
================================================
FILE: src/components/introsection/introsection.component.jsx
================================================
import './introsection.css'
export default function introSection({ data })
{
return(
<div className='section1'>
<img className='introimage' src={ data.picture } alt={''} />
<h1 className='heading'>{ data.heading }</h1>
<p className='p'>{ data.description }</p>
</div>
)
}
================================================
FILE: src/components/introsection/introsection.css
================================================
.section1{
position: relative;
flex-direction: column;
display:flex;
align-items: center;
}
.introimage{
height:281px;
width: 979px;
margin: auto;
object-fit: cover;
}
.heading{
display:flex;
color:#F5BB44;
font-size: 40px;
}
.p{
font-size: 22px;
height:281px;
width: 979px;
}
@media only screen and (max-width: 768px){
.section1{
position: relative;
flex-direction: column;
display:flex;
align-items: center;
}
.introimage{
height:281px;
width: 500px;
margin: auto;
object-fit: cover;
}
.heading{
display:flex;
color:#F5BB44;
font-size: 40px;
}
.p{
font-size: 22px;
height:auto;
width: 450px;
}
}
================================================
FILE: src/components/joinmail/joinMail.component.jsx
================================================
import './joinmail.css'
export default function joinMail(){
return(
<section>
<div className='mailjoin'>
<h1>Join Our Mailing List</h1>
<input type="email" placeholder="emil@gmail.com"/>
</div>
</section>
)
}
================================================
FILE: src/components/joinmail/joinmail.css
================================================
.mailjoin{
margin-top: 5em;
justify-content: center;
text-align: center;
}
.mailjoin h1{
font-size: 30px;
font-weight: 700;
color: #5e5c5c;
}
.mailjoin input{
padding: 10px;
width: 400px;
}
================================================
FILE: src/components/meubar/menubar.component.jsx
================================================
import {Link} from 'react-router-dom'
import './menubar.css'
export default function menuBar(){
return (
<>
<div className="menu-container">
<div className='logoicon'>
<Link to='/'>
<img src={'/icons/brahmlogo.png'} alt={''} width={100} height={100} />
</Link>
</div>
<div className="navcontainer">
<Link to='/' className="menu-item">
Home
</Link>
<div className='dropdown'>
<Link to='/solutions' className="dropbtn ">
solutions
</Link>
<div className="dropdown-content">
<Link to='/ecommerce' >eCommerce</Link>
<Link to='/xr'>XR</Link>
<Link to='/game'>Gaming</Link>
</div>
</div>
<Link to="/technologies" className="menu-item">
Technologies
</Link>
<div className='dropdown'>
<Link to='./about' className="menu-item">
About
</Link>
</div>
</div>
<div>
<Link to='./contactus'>
<button className="button">contact Us</button>
</Link>
</div>
</div>
</>
);
}
================================================
FILE: src/components/meubar/menubar.css
================================================
/* Menu bar styles */
/* Styling for the menu container */
.menu-container {
display: flex;
align-items: center;
justify-content: space-between;
/* background-color: rgb(255,255,255);*/
height: 80px;
/* border: 1px solid red; */
}
.logoicon{
padding: 20px;
}
/* Styling for the menu items */
.menu-item {
/* padding:20px; */
padding-left: 30px;
padding-right: 30px;
font-size: 20px;
color: #333;
cursor: pointer;
font-weight: 750;
text-decoration: none;
}
/* Show the submenu when hovering over the menu item */
.menu-item:hover .submenu-container {
display: block;
}
.button{
background-color: rgb(65, 134, 168);
color: #fff;
border: 1px solid transparent;
transition: .2s ease;
border-radius: 50px;
font-size: 20px;
padding: 10px 30px 10px 30px;
margin-right: 20px;
text-decoration: none !important;
}
.button:hover{
background-color: rgb(104,154,222);
}
.logo{
cursor: auto;
height:fit-content ;
width: fit-content;
}
.logoicon{
padding: 20px;
}
.dropbtn {
/* background-color: #4CAF50; */
color: black;
padding: 16px;
font-size: 20px;
border: none;
text-decoration: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
font-weight: 750;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
@media only screen and (max-width: 768px){
.menu-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height:auto;
}
.logoicon{
display: flex;
justify-content: center;
}
.menu-item {
display: none;
}
.navcontainer{
display: flex;
flex-direction: row;
}
.button{
display: none;
}
.dropbtn {
/* background-color: #4CAF50; */
color: black;
padding: 16px;
font-size: 10px;
border: none;
text-decoration: none;
cursor: pointer;
display:none;
}
}
================================================
FILE: src/components/moving-left/moving-left.component.jsx
================================================
import React from 'react';
import './moving-left.css';
export default function movingLeft ({ data })
{
return (
<div style={{backgroundImage: `url(${data.image})`}} className='background-image'>
<div className='headerMovingLeft'>
<h2 style={{fontSize:'46px'}}>{data.title}</h2>
<p style={{fontSize:'20px', fontWeight:'300px'}}>{data.para}</p>
</div>
<div className='overlay-container'>
<div className='overlay-block moving-left1' style={{backgroundImage: `url(${data.image1})` , backgroundPosition:'center', objectFit:'cover'}}>
<div className='overlays'>
<h3 className='overlayttitle'>{data.title1}</h3>
<p className='ocerlaycontent'>{data.content1}</p>
<button className='learnm'>Learn More</button>
</div>
</div>
<br />
<div className='overlay-block moving-left1' style={{backgroundImage: `url(${data.image2})` , backgroundPosition:'center'}}>
<div className='overlays'>
<h3 className='overlayttitle'>{data.title2}</h3>
<p className='overlaycontent'>{data.content2}</p>
<button className='learnm'>Learn More</button>
</div>
</div>
<br />
<div className='overlay-block moving-left1' style={{backgroundImage: `url(${data.image3})` , backgroundPosition:'center'}}>
<div className='overlays'>
<h3 className='overlayttitle'>{data.title3}</h3>
<p className='ocerlaycontent'>{data.content3}</p>
<button className='learnm'>Learn More</button>
</div>
</div>
</div>
</div>
);
};
================================================
FILE: src/components/moving-left/moving-left.css
================================================
.background-image {
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.mainheader{
display: flex;
justify-content: center;
color: #F5BB44;
font-size: 4em;
text-shadow: 3px 3px #8d8b8b;
padding: 0%;
margin-bottom: auto;
}
.paraintro{
display: flex;
padding: 0%;
font-size: 20px;
color: #5e5c5c;
font-weight: 500;
}
.overlay-container{
display:flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
height: auto;
align-items: center;
width:90%;
width: calc(100% - 70px);
margin-top: 40px;
margin-bottom: 40px;
}
.headerMovingLeft{
display: flex;
flex-direction: column;
margin-left: 140px;
width:40%;
font-family: 'Calibri Light';
}
.overlay-block{
position: relative;
display: flex;
justify-content: space-evenly;
border-radius: 30px;
flex-direction: column;
background-color: #fff;
color: #000;
width: 226px;
height: 400px;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
margin-left: 80px;
border: 3px solid;
border-color: #000;
}
.overlays {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: white;
/* Black see-through */
color: #f1f1f1;
/* width: 100%; */
transition: .5s ease;
opacity: 0;
color: black;
font-size: 16px;
padding: 20px;
text-align: center;
border-radius: 30px;
}
.overlay-block:hover .overlays {
opacity: 1;
}
.moving-left1 {
transition: transform 0.3s ease;
transform: translateX(0px);
object-fit: cover;
}
.moving-left1:hover {
transform: translateX(10px);
}
.learnm {
padding: 15px;
border-radius: 50px;
background-color: #F5BB44;
font-size: 15px;
border: none;
font-weight: 700;
}
.learnm:hover {
background-color: rgb(39, 207, 207);
}
@media only screen and (max-width: 768px){
.headerMovingLeft{
display: flex;
flex-direction: column;
margin-left: 0px;
width:70%;
font-family: 'Bahnschrift Light';
}
.overlay-container{
display:flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width:100%;
}
.moving-left1 {
transition: transform 0.3s ease;
transform: translateX(0px);
object-fit: cover;
background-position: center;
}
.background-image {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height:auto;
align-items: center;
flex-direction: column;
}
.overlay-block{
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #fff;
color: #000;
width: 40%;
height: 200px;
align-items: center;
margin-left: 20px;
background-repeat: no-repeat;
background-size: auto;
}
.overlays {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: white;
/* Black see-through */
color: #f1f1f1;
/* width: 100%; */
transition: .5s ease;
opacity: 0;
color: black;
font-size: 9px;
padding: 20px;
text-align: center;
}
}
================================================
FILE: src/components/nav-bar/nav-bar.component.jsx
================================================
import {Link} from 'react-router-dom'
import React, {useState} from 'react'
import './nav-bar.css'
export default function NavBar(){
return (
<>
<div className="menu-container">
<div className='logoicon'>
<Link to='/'>
<img src={'/icons/brahmlogo.png'} alt={''} width={100} height={100} />
</Link>
</div>
<div className="navcontainer">
<Link to='/' className="menu-item">
Home
</Link>
<div className='dropdown'>
<Link to='/solutions' className="dropbtn ">
Solutions
</Link>
<div className="dropdown-content">
<Link to='/ecommerce' >eCommerce</Link>
<Link to='/xr'>XR</Link>
<Link to='/game'>Gaming</Link>
</div>
</div>
<Link to="/technologies" className="menu-item">
Technologies
</Link>
<div className='dropdown'>
<Link to='./about' className="menu-item">
About
</Link>
</div>
<div>
{/* <Link to='./contactus'> */}
<button className="button1"><a href='https://app.brahmgan.com' target="_blank">Try Now</a></button>
{/* </Link> */}
</div>
</div>
</div>
</>
);
}
================================================
FILE: src/components/nav-bar/nav-bar.css
================================================
/* Menu bar styles */
/* Styling for the menu container */
.menu-container {
display: flex;
align-items: center;
justify-content: space-between;
/* background-color: rgb(255,255,255);*/
height: 80px;
/* border: 1px solid red; */
}
.logoicon{
padding: 20px;
}
/* Styling for the menu items */
.menu-item {
/* padding:20px; */
padding-left: 30px;
padding-right: 30px;
font-size: 18px;
color: #333;
cursor: pointer;
font-weight: 400;
text-decoration: none;
}
/* Show the submenu when hovering over the menu item */
.menu-item:hover .submenu-container {
display: block;
}
.navcontainer{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.button1{
background-color:#FFBF23;
color: #000;
transition: .1s ease;
font-size: 20px;
padding: 10px 30px 10px 30px;
margin-right: 20px;
text-decoration: none !important;
}
.button1:hover{
background-color: rgb(104,154,222);
}
.logo{
cursor: auto;
height:fit-content ;
width: fit-content;
}
.logoicon{
padding: 20px;
}
.dropbtn {
/* background-color: #4CAF50; */
color: black;
padding: 16px;
font-size: 18px;
border: none;
text-decoration: none;
cursor: pointer;
font-weight: 400;
}
.dropdown {
position: relative;
display: inline-block;
font-weight: 750;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
@media only screen and (max-width: 768px){
.menu-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height:auto;
}
.logoicon{
display: flex;
justify-content: center;
}
.menu-item {
display: none;
}
.navcontainer{
display: flex;
flex-direction: row;
}
.button{
display: none;
}
.dropbtn {
/* background-color: #4CAF50; */
color: black;
padding: 16px;
font-size: 10px;
border: none;
text-decoration: none;
cursor: pointer;
display:none;
}
}
================================================
FILE: src/components/overboxes/overboxes.component.jsx
================================================
import './overboxes.css'
================================================
FILE: src/components/overboxes/overboxes.css
================================================
================================================
FILE: src/components/questions/questions.component.jsx
================================================
import './questions.css'
export default function question ({data}){
return(
<>
<div style={{ display: "flex", justifyContent:"center" ,FlexDirection: "row" }}>
<p>{data.question}</p>
<img src={'icons/drop-down.svg'} alt={''} height={'20px'} width={'20px'} />
</div>
<div className='expandable'>
<p>{data.answer}</p>
</div>
<hr />
</>
)
}
================================================
FILE: src/components/questions/questions.css
================================================
.expandable {
background: #fff;
overflow: hidden;
color: #000;
line-height: 50px;
transition: all .5s ease-in-out;
height: 0;
}
.expandable:hover {
height: 50px;
}
================================================
FILE: src/components/quote/quote.component.jsx
================================================
import './quote.css'
export default function quote(){
return(
<div className='section5Container'>
<section className='section5'>
<h1>Get a Quote</h1>
<div className='details'>
<div className='labelcontainer'>
<label>First Name</label>
<input type='text' className='input' />
</div>
<div className='labelcontainer'>
<label>Last Name</label>
< input type='text' className='input' />
</div>
<div className='labelcontainer'>
<label>Email *</label>
<input type='text' className='input' />
</div>
<div>
<button className='btn'>Send</button>
</div>
</div>
</section>
</div>
)
}
================================================
FILE: src/components/quote/quote.css
================================================
.section5Container{
display:flex;
justify-content: center;
align-items: center;
}
.section5{
display: flex;
flex-direction: column;
justify-content: center;
background-color: darkgrey;
width:100%;
height:443px;
}
.details{
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.labelcontainer{
display: flex;
flex-direction: column;
margin-left: 30px;
background-color: darkgrey;
}
.input{
border: none;
background-color: darkgrey;
border-bottom:1px solid black;
height:40px;
}
@media only screen and (max-width: 768px){
.section5Container{
display:flex;
justify-content: center;
align-items: center;
}
.section5{
display: flex;
flex-direction: column;
justify-content: center;
background-color: darkgrey;
width:100%;
height:auto;
}
.details{
display: flex;
flex-direction: column;
justify-content: center;
}
.labelcontainer{
display: flex;
flex-direction: column;
justify-content: center;
background-color: darkgrey;
margin-top: 20px;
}
.input{
border: none;
background-color: darkgrey;
border-bottom:1px solid black;
height:40px;
width:200px;
}
}
================================================
FILE: src/components/review/review.component.jsx
================================================
import './review.css'
export default function review(){
return(
<div className='reviewContainer'>
{/* <div className='reviewHeader'>
<h2 style={{fontSize:'36px'}}> What Our Clients Say</h2>
</div>
<div className='reviewiconscontainer'>
<div className='reviewicon' style={{}}>
<div className='reviewicondiv'>
<p>Using brahmGAN's NeRF solutions for our VR Services, we were able to quickly create stunning worlds in matter days. Defenetily going to incoporate thier entire stack in our workflow in future.</p>
<p style={{marginLeft:'80px', marginTop:'40px'}}>Taanga Studios</p>
</div>
</div>
<div className='reviewicon'>
<div className='reviewicondiv'>
<p>The NeRF tech helped us quickly model 3D assets and put them on our store, really thankful for the team behind brahmGAN for fast custom solutions.</p>
<p style={{marginLeft:'80px', marginTop:'40px'}}>Amilma Ice Creams</p>
</div>
</div>
<div className='reviewicon'>
<div className='reviewicondiv'>
<p>Never thought AI could be usesful in our site. Been a game changer since we integrated 3D Assets for site.</p>
<p style={{marginLeft:'80px', marginTop:'40px'}}>Claire Brooks, MI</p>
</div>
</div>
</div> */}
</div>
)
}
================================================
FILE: src/components/review/review.css
================================================
.reviewContainer{
display:flex;
flex-direction: column;
}
.reviewiconscontainer{
display:flex;
flex-direction: row;
margin-left: 0px;
justify-content: center;
}
.reviewicon{
position:relative;
display: flex;
flex-direction: column;
background-image: url(/public/icons/BrahmGan_Template.svg);
align-items: center;
padding:20px;
margin-left: 40px;
height:500px;
width:400px;
object-fit: cover;
background-repeat: no-repeat;
font-size: 18px;
font-family: 'Calibri Light';
}
.reviewHeader{
display:flex;
margin-left: 140px;
font-family: 'Calibri Light';
}
.reviewicondiv{
margin-top:40px;
margin-left:60px;
margin-right:40px;
padding:40px;
}
@media only screen and (max-width:768px){
.reviewiconscontainer{
display:flex;
flex-direction: column;
margin-left: 40px;
justify-content: center;
}
.reviewicon{
margin-left: 10px;
}
.reviewHeader{
margin-left: 40px;
}
}
================================================
FILE: src/components/slider/slider.component.jsx
================================================
import React, { useState } from "react";
import "./slider.css";
const Slider = () => {
const quotes = [
{
text: "Quote 1",
author: "Author 1"
},
{
text: "Quote 2",
author: "Author 2"
},
{
text: "Quote 3",
author: "Author 3"
},
{
text: "Quote 4",
author: "Author 4"
}
];
const [index, setIndex] = useState(0);
const handleNextClick = () => {
setIndex((index + 1) % quotes.length);
};
const handlePrevClick = () => {
setIndex((index - 1 + quotes.length) % quotes.length);
};
return (
<div className="slider">
<div className="slides" style={{ transform: `translateX(${-index * 100}%)` }}>
{quotes.map((quote, i) => (
<div className="slide" key={i}>
<div className="text">{quote.text}</div>
<div className="author">{quote.author}</div>
</div>
))}
</div>
<button className="prev" onClick={handlePrevClick}>
<
</button>
<button className="next" onClick={handleNextClick}>
>
</button>
</div>
);
};
export default Slider;
{/*<section className='sec5'>
<h1>"</h1>
<div>
<p>Using brahmGAN's NeRF solutions for our VR Services, we were able to quickly create stunning worlds in matter days. Defenetily going to incoporate thier entire stack in our workflow in future.</p>
<h5>Manju M, Project Manager</h5>
<h5>Taanga Studios</h5>
</div>
<div>
<p>"Never thought AI could be usesful in our site. Been a game changer since we integrated 3D Assets for site.”</p>
<h5>Claire Brooks, MI</h5>
</div>
<div>
<p>"Never thought AI could be usesful in our site. Been a game changer since we integrated 3D Assets for site.”</p>
<h5>Claire Brooks, MI</h5>
</div>
</section>*/}
================================================
FILE: src/components/slider/slider.css
================================================
.slider {
position: relative;
width: 100%;
margin: 0 auto;
background-color: #F5BB44;
}
.slides {
display: flex;
transition: transform 0.5s ease;
overflow: hidden;
/* flex-direction: row; */
}
.slide {
flex: 0 0 100%;
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24px;
color: #333;
text-align: center;
}
.text {
margin-bottom: 10px;
}
.author {
font-style: italic;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
padding: 10px;
border: none;
background-color: transparent;
color: #333;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
================================================
FILE: src/components/solutions/solution.css
================================================
.section2{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.subsection2{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.subsectioncontainer
{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 80px;
width: 269px;
height: 316ox;
}
.button2 {
background-color: rgb(65, 134, 168);
color: #fff;
border: 1px solid transparent;
transition: .2s ease;
border-radius: 50px;
font-size: 20px;
padding: 10px 30px 10px 30px;
margin-right: 20px;
text-decoration: none !important;
}
@media only screen and (max-width: 768px){
.section2{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.subsection2{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.subsectioncontainer
{
display: flex;
flex-direction: column;
align-items: center;
width: 269px;
height: 316ox;
margin-left: 0px;
margin-bottom: 40px;
}
}
================================================
FILE: src/components/solutions/solutions.jsx
================================================
import './solution.css'
import IntroSection from '../introsection/introsection.component';
import FAQSection from '../FAQSection/FAQSection.component';
export default function solutions()
{
const data={
picture:'/icons/solution.webp',
heading:'Solutions',
description:'Our companys unique selling point is our ability to leverage the latest technologies such as NeRF, GAN, and blockchain to provide innovative and decentralized solutions for the XR, gaming, and eCommerce industries. Our NeRF app allows users worldwide to capture 3D models quickly and easily, while our blockchain-based incentive system rewards users with crypto coins for creating and sharing 3D models. This enables clients to request any kind of 3D assets created by users across the globe. Our GAN technology provides photorealistic 3D models, and our custom solutions can be integrated seamlessly into existing workflows and software. We aim to deliver cutting-edge, cost-effective solutions to our clients.'
}
const faqData = [
{
question: "Can you integrate your 3D infrastructure solutions with our existing software and platforms?",
answer:
"Yes, we can work with your team to integrate our solutions with your existing software and platforms, such as Unity or Unreal game engines, eCommerce websites, or other systems.",
},
{
question: "How do you integrate NeRF, blockchain, and GAN technologies into your solutions for XR, gaming, and eCommerce industries?",
answer:
"Yes, we can work with your team to integrate our solutions with your existing software and platforms, such as Unity or Unreal game engines, eCommerce websites, or other systems.",
},
{
question: "Do you offer international shipping?",
answer:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sapien ipsum. Quisque ac diam blandit, fringilla nulla a, fringilla lorem. Nam auctor massa eget neque bibendum feugiat.",
},
];
return(
<>
<IntroSection data={data} />
<div className='section2'>
<h2>Custom Solutions based on industries</h2>
<div className='subsection2'>
<div className='subsectioncontainer'>
<img style={{borderRadius:'30px', height:'270px', width:'330px'}} src={'icons/Cat House.webp'} alt={''} />
<h2 style={{margin:'0px'}}>Gaming</h2>
<p style={{margin:'10px'}}>We provide gaming studios with tech stack to create 3D models easily.</p>
{/* <button className='button2'>Know more</button> */}
</div>
<div className='subsectioncontainer'>
<img style={{borderRadius:'30px', height:'270px', width:'330px'}} src={'icons/Auto Virtual Reality.webp'} alt={''} />
<h2 style={{margin:'0px'}}>XR</h2>
<p style={{margin:'10px'}}>Easily integrate 3D models into AR and VR apps to showcase your clients using our custom solutions for XR</p>
{/* <button className='button2'>Know more</button> */}
</div>
<div className='subsectioncontainer'>
<img style={{borderRadius:'30px', height:'270px', width:'330px'}} src={'icons/Yellow Couch.webp'} alt={''} />
<h2 style={{margin:'0px'}}>eCommerce</h2>
<p style={{margin:'10px'}}>We can provide infra to showcase 3D models in your site and easily integrate with exisitng tech.</p>
{/* <button className='button2'>Know more</button> */}
</div>
</div>
</div>
{/* <FAQSection data={faqData} /> */}
</>
);
}
================================================
FILE: src/components/solutionsection1/solutionsection1.component.jsx
================================================
import React from 'react';
import './solutionsection1.css'
export default function solutionSection1 ({ data })
{
return (
<>
<div className='section1'>
<h1 className='title'>{data.title}</h1>
<div className='row'>
<div className='column'>
<img className='img' src={data.image} alt={''} />
</div>
<div className='column'>
<div className='content'>{data.description}</div>
</div>
</div>
<br />
<div className='row'>
<button className='btn'>Request Demo</button>
</div>
<br />
<div className='row'>
<iframe className='iframe' src={data.iframe} title={' '} />
</div>
</div>
</>
);
};
================================================
FILE: src/components/solutionsection1/solutionsection1.css
================================================
.row{
position: relative;
content: "";
clear: both;
display: flex;
justify-content: center;
align-items:center;
margin-bottom: 10px;
}
.column{
float: left;
width: 33.33%;
padding: 5px;
justify-content: center;
}
.title{
display:flex;
justify-content: center;
color:#F5BB44;
font-size: 40px;
}
.btn{
display: flex;
justify-content: center;
justify-self: center;
align-items: center;
background-color: #F5BB44;
color: #fff;
border: 5px solid transparent;
transition: .2s ease;
width: 200px;
height: 40px;
letter-spacing: 5px;
font-weight: 700px;
}
.content{
display: flex;
justify-content: center;
height: 100%;
display:flex;
align-items: center;
padding: 0px 35px;
font-size: 22px;
}
.img{
display: flex;
min-height: 320px;
height: 100%;
padding-left: 35px 0px;
justify-content: center;
}
.iframe{
display: flex;
justify-content: center;
height: 350px;
width: 450px;
align-items:center;
}
@media only screen and (max-width: 768px){
.row{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
margin-bottom: 10px;
}
.img{
display:flex;
justify-content: center;
}
.column{
display:flex;
justify-content: center;
height: auto;
width: auto;
}
.content{
display:flex;
justify-content: center;
height: auto;
width: auto;
}
}
================================================
FILE: src/components/solutionsection2/solutionsection2.component.jsx
================================================
import React from 'react';
import './solutionsection2.css';
export default function solutionSection1 ({ data })
{
return (
<div style={{backgroundImage: `url(${data.image})`}} className='image-container'>
<h1 className='maintitle'>{data.title}</h1>
<div className='text-container'>
<div className='text-block'>
<h3 className='contenttitle'>{data.title1}</h3>
<p className='content'>{data.content1}</p>
</div>
<br />
<div className='text-block'>
<h3 className='contenttitle'>{data.title2}</h3>
<p className='content'>{data.content2}</p>
</div>
<br />
<div className='text-block'>
<h3 className='contenttitle'>{data.title3}</h3>
<p className='content'>{data.content3}</p>
</div>
</div>
</div>
);
};
================================================
FILE: src/components/solutionsection2/solutionsection2.css
================================================
.image-container {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height:550px;
align-items: center;
flex-direction: column;
margin-top: 20px;
}
.maintitle{
display: flex;
justify-content: center;
}
.text-container{
display:flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.text-block{
display: flex;
justify-content: center;
flex-direction: column;
background-color: #fff;
color: #000;
height:380px;
width:322px;
align-items: center;
margin-left: 20px;
border-color: black;
border: 3px solid;
border-radius: 30px;
}
@media only screen and (max-width: 768px){
.text-container{
display:flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin-left: 0px;
}
.image-container {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height:auto;
align-items: center;
flex-direction: column;
}
.text-block{
margin-bottom: 40px;
}
}
================================================
FILE: src/components/solutionsection3/solutionsection3.component.jsx
================================================
import React from 'react';
import './solutionsection3.css'
export default function solutionSection3 ({ data })
{
return (
<div className='section3'>
<h1 className='title'>{data.title}</h1>
<p className='subtitle'>{data.subtitle}</p>
</div>
);
};
================================================
FILE: src/components/solutionsection3/solutionsection3.css
================================================
.section3{
display: flex;
flex-direction:column;
align-items: center;
}
================================================
FILE: src/components/solutionsection3content/solutionsection3content.component.jsx
================================================
import React from 'react';
import './solutionsection3content.css'
export default function solutionSection3Content ({ data })
{
return (
<>
<div className='content'>
<div className='container1'>
<h2 className='contentTitle'>{data.contenttitle}</h2>
<p className='pBox'>{data.content}</p>
<button className='btn1'>Contact Us for Demo</button>
</div>
<div>
<iframe className='iframeBox' src={data.iframe} title={' '} scrolling='no' />
</div>
</div>
</>
)
}
================================================
FILE: src/components/solutionsection3content/solutionsection3content.css
================================================
.content{
position: relative;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.container1{
display:flex;
flex-direction: column;
background-color: #F8DB9F;
justify-content: center;
align-items: center;
height:507px;
width: 461px;
padding:30px;
font-family: 'Bahnschrift Light';
}
.iframeBox{
margin-left: 20px;
height:555px;
width: 510px;
}
.iframeBox img {
max-width: 361px;
height: 507px;
object-fit: cover;
}
.btn1{
background-color: rgb(11, 19, 34);
color:#fff;
border:yellow;
}
@media only screen and (max-width: 768px){
.content{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container1{
display:flex;
flex-direction: column;
background-color: #F8DB9F;
justify-content: center;
align-items: center;
height:auto;
width: auto;
padding: 40px;
margin-bottom: 20px;
}
.btn1{
background-color: rgb(11, 19, 34);
color:#fff;
border:yellow;
}
.iframeBox{
margin-left: 0px;
height:507px;
width: 461px;
}
}
================================================
FILE: src/components/solutionsection3content2/solutionsection3content2.component.jsx
================================================
import React from 'react';
import './solutionsection3content2.css'
export default function solutionSection3Content ({ data })
{
return (
<div className='content1'>
<section>
<iframe className='iframeBox' src={data.iframe} title={' '} />
</section>
<br />
<div className='container3'>
<h2 className='contentTitle'>{data.contenttitle}</h2>
<p className='pBox'>{data.content}</p>
<button className='btn1' >Contact Us for Demo</button>
</div>
</div>
)
}
================================================
FILE: src/components/solutionsection3content2/solutionsection3content2.css
================================================
.content1{
position: relative;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 20px;
font-size: 22px;
}
.container3{
display:flex;
flex-direction: column;
background-color: #F8DB9F;
justify-content: center;
align-items: center;
height:500px;
width: 461px;
margin-left: 20px;
padding: 30px;
font-family: 'Bahnschrift Light';
}
.iframeBox1{
height:555px;
width: 510px;
object-fit: cover;
}
.btn1{
background-color: rgb(11, 19, 34);
color:#fff;
border:yellow;
}
@media only screen and (max-width: 768px){
.content1{
position: relative;
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
.container3{
display: flex;
flex-direction: column;
background-color: #F8DB9F;
justify-content: center;
align-items: center;
height: auto;
width: auto;
padding: 40px;
margin-bottom: 20px;
margin-right: 30px;
margin-left: 30px;
}
.iframeBox1{
height:auto;
width: 100%;
margin-left: 0px;
}
.btn1{
background-color: rgb(11, 19, 34);
color:#fff;
border:yellow;
margin-bottom: 20px;
}
}
================================================
FILE: src/components/team/team.css
================================================
.team{
display: flex;
flex-direction: column;
align-items: center;
}
.colum{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.row{
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.subcolum{
display: flex;
flex-direction: column;
height:auto;
width: 300px;
white-space: 0px;
margin-left:40px;
}
@media only screen and (max-width:768px){
.row{
display: flex;
flex-direction: column;
}
.subcolum{
margin-left: 0px;
justify-content: center;
}
}
================================================
FILE: src/components/team/team.jsx
================================================
import './team.css'
export default function team(){
return(
<div className='team'>
<h1>Our Team</h1>
<div className='colum'>
<div className='row'>
<div className='subcolum' >
<img style={{borderRadius:'30px'}} src={'icons/Suraj.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Suraj Chawla</h4>
<h5 style={{margin:'0px'}}>CEO & Co-founder</h5>
</div>
<div className='subcolum' >
<img style={{borderRadius:'30px'}} src={'icons/Kiruba.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Kirubakaran Reddy</h4>
<h5 style={{margin:'0px'}}>CBO & Co-founder</h5>
</div>
<div className='subcolum' >
<img style={{borderRadius:'30px'}} src={'icons/Puru.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Puru</h4>
<h5 style={{margin:'0px'}}>CTO & Co-founder</h5>
</div>
</div>
<div className='row'>
<div className='subcolum' >
<img style={{borderRadius:'30px'}} src={'icons/Yogesh.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Yogesh Achari</h4>
<h5 style={{margin:'0px'}}>Senior Marketing Lead</h5>
</div>
<div className='subcolum' >
<img style={{borderRadius:'30px'}} src={'icons/Kamala.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Kamala</h4>
<h5 style={{margin:'0px'}}>Content Strategist Specialist</h5>
</div>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Patanjali.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Pathanjali Sharma</h4>
<h5 style={{margin:'0px'}}>Business Development</h5>
</div>
</div>
<div className='row'>
<div className='subcolum'>
<img style={{borderRadius:'30px'}} src={'icons/Praful.jpg'} alt={''} />
<h4 style={{margin:'10px 0 auto 0'}}>Praful R</h4>
<h5 style={{margin:'0px'}}>Tech Advisor</h5>
</div>
</div>
</div>
</div>
);
}
================================================
FILE: src/components/tech/tech.component.jsx
================================================
import React,{useState} from 'react'
import './tech.css'
export default function Tech(){
const [imagebox, setImagebox]=useState('icons/gan.svg');
return(
<div className='techContainer'>
{/* <div className='ButtonContainer'>
<h3 style={{fontSize:'26px',fontWeight:'200px'}}>With cutting edge
technologies from around the world creating the future of 3D design and gaming!</h3>
<button className='buttons' onClick={()=>setImagebox('icons/Gan.svg')}>
<img style={{height:'80px',width:'80px', marginRight:'20px'}} src={'icons/gan.png'} alt={' '} /> GAN</button>
<button className='buttons' onClick={()=>setImagebox('icons/Nerf.svg')}>
<img style={{height:'80px',width:'80px',marginRight:'20px'}} src={'icons/Nerf.png'} alt={' '} /> Nerf</button>
<button className='buttons' onClick={()=>setImagebox('icons/Blockchain.svg')}>
<img style={{height:'80px',width:'80px', marginRight:'20px'}} src={'icons/blockchain.png'} alt={' '} /> Blockchain</button>
</div>
<div className='detailimagecontainer'>
<img style={{objectFit:'cover'}} src={imagebox} alt={''} />
</div> */}
</div>
)
}
================================================
FILE: src/components/tech/tech.css
================================================
.techContainer{
display: flex;
flex-direction: row;
margin-left: 180px;
margin-right: 180px;
margin-bottom: 80px;
}
.ButtonContainer{
display: flex;
flex-direction: column;
height: 50%;
width:30%;
font-family: 'Calibri Light';
}
.detailimagecontainer{
display: flex;
flex-direction: column;
height: 70%;
width: 70%;
margin-left: 40px;
margin-top: 20px;
}
.buttons{
display: flex;
justify-content: flex-start;
justify-self: center;
align-items: center;
background-color: #F5BB44;
color: #fff;
border: 5px solid transparent;
transition: .2s ease;
width: 100%;
height: 145px;
letter-spacing: 5px;
font-weight: 700px;
margin-top: 25px;
font-size:36px;
}
.buttons:hover{
border: 3px solid;
border-color:#000;
}
@media only screen and (max-width:768px) {
.techContainer{
display: flex;
flex-direction: column;
margin-left: 40px;
margin-right: 40px;
align-items: center;
}
.ButtonContainer{
display: flex;
flex-direction: column;
height: 50%;
width:80%;
font-family: 'Calibri Light';
}
.detailimagecontainer{
display: flex;
flex-direction: column;
height: 70%;
width: 80%;
margin-top: 20px;
margin-left: 0px;
}
}
================================================
FILE: src/components/technologies/technologies.css
================================================
.section4{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.separator{
border: 1px solid #F5BB44;
}
.videocontainer{
display: flex;
justify-content: center;
align-items: center;
width:100%;
}
================================================
FILE: src/components/technologies/technologies.jsx
================================================
import './technologies.css'
import IntroductionSection from '../introsection/introsection.component'
import FAQSection from '../FAQSection/FAQSection.component';
import Section2 from '../solutionsection2/solutionsection2.component'
export default function technologies()
{
const data1={
picture:'/icons/Ai(golden).svg',
heading:'Technologies',
description:'Our company is dedicated to using cutting-edge AI technologies like GAN and NeRF. Through these powerful tools, we are able to create incredibly realistic 3D models with stunning detail and accuracy. Our integration with machine learning and AI allows us to automate many aspects of the model creation process, making it faster and more efficient than ever before. By leveraging the power of AI, we can provide our clients with customized solutions that meet their exact needs, from gaming environments to eCommerce product showcases. At our core, we believe that AI technology is the future of digital creation, and we are excited to be at the forefront of this innovative field.'
}
const faqData = [
{
question: "Can you integrate your 3D infrastructure solutions with our existing software and platforms?",
answer:
"Yes, we can work with your team to integrate our solutions with your existing software and platforms, such as Unity or Unreal game engines, eCommerce websites, or other systems.",
},
{
question: "How do you integrate NeRF, blockchain, and GAN technologies into your solutions for XR, gaming, and eCommerce industries?",
answer:
"Yes, we can work with your team to integrate our solutions with your existing software and platforms, such as Unity or Unreal game engines, eCommerce websites, or other systems.",
},
{
question: "Do you offer international shipping?",
answer:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sapien ipsum. Quisque ac diam blandit, fringilla nulla a, fringilla lorem. Nam auctor massa eget neque bibendum feugiat.",
},
];
const data2={
title:'',
image:'icons/Nerf.svg',
title1:'Gan',
content1:'3D graphics and animations can create a more immersive gameplay experience by providing a realistic and detailed environment for the players to explore.',
title2:'Nerf',
content2:'We use NeRF to generate high-quality 3D models from 2D images and videos, allowing us to create realistic virtual environments.',
title3:'Blockchain',
content3:'Our use of blockchain technology enables us to decentralize the process of 3D model creation, allowing users from all over the world to contribute and earn GAN tockens for their contributions.'
}
return(
<>
<IntroductionSection data={data1}/>
<div style={{display:'flex', justifyContent:'center', alignItems:'center', flexDirection:'column'}}>
<h1 style={{marginLeft:'40px'}}>Cutting Edge Technologies at your <a href=' '>fingertips.</a></h1>
<video src={'video/Voxel.webm'} autoPlay loop muted className='videocontainer' ></video>
</div>
<Section2 data={data2} />
{/* <FAQSection data={faqData} /> */}
</>
);
}
================================================
FILE: src/firebase.js
================================================
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';
import { Database, ref } from "firebase/database";
const firebaseConfig = {
apiKey: "AIzaSyCfSlEt6aagNBepS-1tPsd_xUWL5iQFiPw",
authDomain: "brahmgan-7d2dd.firebaseapp.com",
databaseURL: "https://brahmgan-7d2dd-default-rtdb.firebaseio.com",
projectId: "brahmgan-7d2dd",
storageBucket: "brahmgan-7d2dd.appspot.com",
messagingSenderId: "492014097456",
appId: "1:492014097456:web:765c00dd671d7c869889f5",
measurementId: "G-QZRGQ65V81"
};
const firebaseApp = initializeApp(firebaseConfig);
const database = getFirestore(firebaseApp);
export default database;
================================================
FILE: src/gloabal.css
================================================
body {
font-family: 'Bahnschrift Light';
}
================================================
FILE: src/index.css
================================================
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
================================================
FILE: src/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
================================================
FILE: src/reportWebVitals.js
================================================
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
================================================
FILE: src/setupTests.js
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
gitextract_f6de6mzh/
├── .gitignore
├── README.md
├── about.jsx
├── hamburgerMenu.component.jsx
├── nav-bar.component.jsx
├── package.json
├── public/
│ ├── index.html
│ ├── manifest.json
│ ├── robots.txt
│ └── video/
│ ├── Brahmgan.webm
│ ├── Social Media Filter Shoe.webm
│ └── Voxel.webm
└── src/
├── App.css
├── App.js
├── App.test.js
├── components/
│ ├── FAQSection/
│ │ ├── FAQSection.component.jsx
│ │ └── FAQSection.css
│ ├── HeroSection/
│ │ ├── herosection.css
│ │ └── hersosection.component.jsx
│ ├── XR/
│ │ ├── xr.css
│ │ └── xr.jsx
│ ├── about/
│ │ ├── about.css
│ │ └── about.jsx
│ ├── clientcomponent/
│ │ ├── clentcomponent.css
│ │ └── clientcomponent.component.jsx
│ ├── clients/
│ │ ├── client.css
│ │ └── clients.component.jsx
│ ├── contact/
│ │ ├── contact.css
│ │ └── contact.jsx
│ ├── contactSection/
│ │ ├── contactSection.component.jsx
│ │ └── contactSection.css
│ ├── creativeSection/
│ │ ├── creativeSection.component.jsx
│ │ └── creativesection.css
│ ├── ecommerce/
│ │ ├── ecommerce.css
│ │ └── ecommerce.jsx
│ ├── features/
│ │ ├── feature.component.jsx
│ │ └── feature.css
│ ├── footer/
│ │ ├── footer.component.jsx
│ │ └── footer.css
│ ├── game/
│ │ ├── game.css
│ │ └── game.jsx
│ ├── getintouch/
│ │ ├── getintouch.component.jsx
│ │ └── getintouch.css
│ ├── hamburgermenu/
│ │ ├── hamburgerMenu.component.jsx
│ │ └── hamburgermenu.css
│ ├── home/
│ │ ├── home.css
│ │ └── home.jsx
│ ├── homePage/
│ │ ├── homePage.css
│ │ └── homepage.jsx
│ ├── homesection1/
│ │ ├── homesection1.component.jsx
│ │ └── homesection1.css
│ ├── introsection/
│ │ ├── introsection.component.jsx
│ │ └── introsection.css
│ ├── joinmail/
│ │ ├── joinMail.component.jsx
│ │ └── joinmail.css
│ ├── meubar/
│ │ ├── menubar.component.jsx
│ │ └── menubar.css
│ ├── moving-left/
│ │ ├── moving-left.component.jsx
│ │ └── moving-left.css
│ ├── nav-bar/
│ │ ├── nav-bar.component.jsx
│ │ └── nav-bar.css
│ ├── overboxes/
│ │ ├── overboxes.component.jsx
│ │ └── overboxes.css
│ ├── questions/
│ │ ├── questions.component.jsx
│ │ └── questions.css
│ ├── quote/
│ │ ├── quote.component.jsx
│ │ └── quote.css
│ ├── review/
│ │ ├── review.component.jsx
│ │ └── review.css
│ ├── slider/
│ │ ├── slider.component.jsx
│ │ └── slider.css
│ ├── solutions/
│ │ ├── solution.css
│ │ └── solutions.jsx
│ ├── solutionsection1/
│ │ ├── solutionsection1.component.jsx
│ │ └── solutionsection1.css
│ ├── solutionsection2/
│ │ ├── solutionsection2.component.jsx
│ │ └── solutionsection2.css
│ ├── solutionsection3/
│ │ ├── solutionsection3.component.jsx
│ │ └── solutionsection3.css
│ ├── solutionsection3content/
│ │ ├── solutionsection3content.component.jsx
│ │ └── solutionsection3content.css
│ ├── solutionsection3content2/
│ │ ├── solutionsection3content2.component.jsx
│ │ └── solutionsection3content2.css
│ ├── team/
│ │ ├── team.css
│ │ └── team.jsx
│ ├── tech/
│ │ ├── tech.component.jsx
│ │ └── tech.css
│ └── technologies/
│ ├── technologies.css
│ └── technologies.jsx
├── firebase.js
├── gloabal.css
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js
SYMBOL INDEX (37 symbols across 37 files)
FILE: about.jsx
function about (line 4) | function about(){
FILE: nav-bar.component.jsx
function NavBar (line 5) | function NavBar(){
FILE: src/App.js
function App (line 20) | function App() {
FILE: src/components/FAQSection/FAQSection.component.jsx
function FAQSection (line 4) | function FAQSection() {
FILE: src/components/HeroSection/hersosection.component.jsx
function heroSection (line 3) | function heroSection(){
FILE: src/components/XR/xr.jsx
function xr (line 7) | function xr()
FILE: src/components/about/about.jsx
function about (line 4) | function about(){
FILE: src/components/clientcomponent/clientcomponent.component.jsx
function ClientComponent (line 4) | function ClientComponent(){
FILE: src/components/clients/clients.component.jsx
function clients (line 3) | function clients(){
FILE: src/components/contact/contact.jsx
function ContactUs (line 6) | function ContactUs() {
FILE: src/components/contactSection/contactSection.component.jsx
function ContactSection (line 3) | function ContactSection(){
FILE: src/components/creativeSection/creativeSection.component.jsx
function CreativeSection (line 3) | function CreativeSection(){
FILE: src/components/ecommerce/ecommerce.jsx
function ecommerce (line 7) | function ecommerce ()
FILE: src/components/features/feature.component.jsx
function Features (line 3) | function Features(){
FILE: src/components/footer/footer.component.jsx
function footer (line 3) | function footer(){
FILE: src/components/game/game.jsx
function game (line 7) | function game()
FILE: src/components/getintouch/getintouch.component.jsx
function getInTouch (line 3) | function getInTouch(){
FILE: src/components/home/home.jsx
function Home (line 10) | function Home(){
FILE: src/components/homePage/homepage.jsx
function HomePage (line 9) | function HomePage() {
FILE: src/components/homesection1/homesection1.component.jsx
function HomeSection1 (line 3) | function HomeSection1(){
FILE: src/components/introsection/introsection.component.jsx
function introSection (line 3) | function introSection({ data })
FILE: src/components/joinmail/joinMail.component.jsx
function joinMail (line 3) | function joinMail(){
FILE: src/components/meubar/menubar.component.jsx
function menuBar (line 4) | function menuBar(){
FILE: src/components/moving-left/moving-left.component.jsx
function movingLeft (line 4) | function movingLeft ({ data })
FILE: src/components/nav-bar/nav-bar.component.jsx
function NavBar (line 5) | function NavBar(){
FILE: src/components/questions/questions.component.jsx
function question (line 3) | function question ({data}){
FILE: src/components/quote/quote.component.jsx
function quote (line 3) | function quote(){
FILE: src/components/review/review.component.jsx
function review (line 3) | function review(){
FILE: src/components/solutions/solutions.jsx
function solutions (line 5) | function solutions()
FILE: src/components/solutionsection1/solutionsection1.component.jsx
function solutionSection1 (line 4) | function solutionSection1 ({ data })
FILE: src/components/solutionsection2/solutionsection2.component.jsx
function solutionSection1 (line 4) | function solutionSection1 ({ data })
FILE: src/components/solutionsection3/solutionsection3.component.jsx
function solutionSection3 (line 4) | function solutionSection3 ({ data })
FILE: src/components/solutionsection3content/solutionsection3content.component.jsx
function solutionSection3Content (line 4) | function solutionSection3Content ({ data })
FILE: src/components/solutionsection3content2/solutionsection3content2.component.jsx
function solutionSection3Content (line 4) | function solutionSection3Content ({ data })
FILE: src/components/team/team.jsx
function team (line 3) | function team(){
FILE: src/components/tech/tech.component.jsx
function Tech (line 4) | function Tech(){
FILE: src/components/technologies/technologies.jsx
function technologies (line 6) | function technologies()
Condensed preview — 95 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (142K chars).
[
{
"path": ".gitignore",
"chars": 310,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "README.md",
"chars": 3359,
"preview": "# Getting Started with Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebo"
},
{
"path": "about.jsx",
"chars": 3768,
"preview": "import './about.css'\r\nimport {Link} from 'react-router-dom'\r\n\r\nexport default function about(){\r\n\r\n return(\r\n "
},
{
"path": "hamburgerMenu.component.jsx",
"chars": 2301,
"preview": "import {Link} from 'react-router-dom'\r\nimport './hamburgermenu.css'\r\nimport React, { useState } from 'react';\r\n\r\n\r\nconst"
},
{
"path": "nav-bar.component.jsx",
"chars": 1365,
"preview": "import {Link} from 'react-router-dom'\r\nimport React, {useState} from 'react'\r\nimport './nav-bar.css'\r\n\r\nexport default f"
},
{
"path": "package.json",
"chars": 966,
"preview": "{\n \"name\": \"website\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^5"
},
{
"path": "public/index.html",
"chars": 1715,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"/icons/brahmGAN.png\" /"
},
{
"path": "public/manifest.json",
"chars": 492,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "public/robots.txt",
"chars": 67,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "src/App.css",
"chars": 564,
"preview": ".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion:"
},
{
"path": "src/App.js",
"chars": 2166,
"preview": "import './App.css';\nimport './gloabal.css'\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\nim"
},
{
"path": "src/App.test.js",
"chars": 246,
"preview": "import { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () ="
},
{
"path": "src/components/FAQSection/FAQSection.component.jsx",
"chars": 1897,
"preview": "import React, { useState } from \"react\";\nimport \"./FAQSection.css\"; // import the CSS file for the FAQ styles\n\nfunction "
},
{
"path": "src/components/FAQSection/FAQSection.css",
"chars": 713,
"preview": "/* FAQ Container */\n.faq-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 40px;\n }\n \n /* FAQ Accord"
},
{
"path": "src/components/HeroSection/herosection.css",
"chars": 1657,
"preview": ".video{\n width:100%;\n min-width: 100vh;\n display:flex;\n height:auto;\n}\n.h1intro {\n text-align: left;\n "
},
{
"path": "src/components/HeroSection/hersosection.component.jsx",
"chars": 867,
"preview": "import './herosection.css'\n\nexport default function heroSection(){\n return(\n\n <section className=\"bgvideowrap\""
},
{
"path": "src/components/XR/xr.css",
"chars": 0,
"preview": ""
},
{
"path": "src/components/XR/xr.jsx",
"chars": 3312,
"preview": "import Section1 from '../solutionsection1/solutionsection1.component'\nimport Section2 from '../solutionsection2/solution"
},
{
"path": "src/components/about/about.css",
"chars": 800,
"preview": ".aboutpage{\n display: flex;\n flex-direction: column;\n}\n\n.aboutheader{\n display: flex;\n flex-direction: colum"
},
{
"path": "src/components/about/about.jsx",
"chars": 3691,
"preview": "import './about.css'\nimport {Link} from 'react-router-dom'\n\nexport default function about(){\n\n return(\n <div c"
},
{
"path": "src/components/clientcomponent/clentcomponent.css",
"chars": 1036,
"preview": ".clientcontainer{\n display: flex;\n flex-direction: column;\n width:100%;\n background-color: #FFD7EF;\n heig"
},
{
"path": "src/components/clientcomponent/clientcomponent.component.jsx",
"chars": 2165,
"preview": "import './clentcomponent.css'\nimport {useState} from 'react'\n\nexport default function ClientComponent(){\n const [hove"
},
{
"path": "src/components/clients/client.css",
"chars": 489,
"preview": ".clientsec{\n justify-content: center;\n text-align: center;\n margin: 0;\n background-color: #E1EFF2;\n }\n .cl"
},
{
"path": "src/components/clients/clients.component.jsx",
"chars": 994,
"preview": "import './client.css'\n\nexport default function clients(){\n return(\n <div className='clientsec'>\n <d"
},
{
"path": "src/components/contact/contact.css",
"chars": 1361,
"preview": ".page{\n position: relative;\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n.pageContainer{"
},
{
"path": "src/components/contact/contact.jsx",
"chars": 3859,
"preview": "import React, { useState } from 'react';\nimport './contact.css';\nimport { initializeApp } from 'firebase/app';\nimport { "
},
{
"path": "src/components/contactSection/contactSection.component.jsx",
"chars": 2045,
"preview": "import './contactSection.css'\n\nexport default function ContactSection(){\n\n return(\n\n <div className='contactCo"
},
{
"path": "src/components/contactSection/contactSection.css",
"chars": 1050,
"preview": ".contactContainer{\n background-color:#FFBF23 ;\n display: flex;\n flex-direction: column;\n width:100%;\n hei"
},
{
"path": "src/components/creativeSection/creativeSection.component.jsx",
"chars": 1524,
"preview": "import './creativesection.css'\n\nexport default function CreativeSection(){\n\n return(\n <div className='creative"
},
{
"path": "src/components/creativeSection/creativesection.css",
"chars": 1405,
"preview": ".creative{\n display: flex;\n flex-direction: row;\n align-items:center;\n margin-top:40px;\n margin-left: 80p"
},
{
"path": "src/components/ecommerce/ecommerce.css",
"chars": 0,
"preview": ""
},
{
"path": "src/components/ecommerce/ecommerce.jsx",
"chars": 3201,
"preview": "import Section1 from '../solutionsection1/solutionsection1.component'\nimport Section2 from '../solutionsection2/solution"
},
{
"path": "src/components/features/feature.component.jsx",
"chars": 2402,
"preview": "import './feature.css' \n\nexport default function Features(){\n return(\n <div className='feature'>\n \n"
},
{
"path": "src/components/features/feature.css",
"chars": 2005,
"preview": ".feature{\n display:flex;\n width:100%;\n height: auto;\n flex-direction: column;\n}\n.imageheader{\n display: f"
},
{
"path": "src/components/footer/footer.component.jsx",
"chars": 1004,
"preview": "import './footer.css'\n\nexport default function footer(){\nreturn (\n <div className=\"footer\" >\n <div className='so"
},
{
"path": "src/components/footer/footer.css",
"chars": 200,
"preview": "/* Footer styles */\n.footer {\n display:flex;\n flex-direction: column;\n background-color: #000;\n color: #fff;"
},
{
"path": "src/components/game/game.css",
"chars": 0,
"preview": ""
},
{
"path": "src/components/game/game.jsx",
"chars": 3117,
"preview": "import Section1 from '../solutionsection1/solutionsection1.component'\nimport Section2 from '../solutionsection2/solution"
},
{
"path": "src/components/getintouch/getintouch.component.jsx",
"chars": 550,
"preview": "import './getintouch.css'\n\nexport default function getInTouch(){\n return(\n \n <div className='seclast'>\n "
},
{
"path": "src/components/getintouch/getintouch.css",
"chars": 710,
"preview": ".seclast{\n display: flex;\n /* border: 2px solid red; */\n margin: auto;\n justify-content: center;\n text-al"
},
{
"path": "src/components/hamburgermenu/hamburgerMenu.component.jsx",
"chars": 2237,
"preview": "import {Link} from 'react-router-dom'\nimport './hamburgermenu.css'\nimport React, { useState } from 'react';\n\n\nconst Hamb"
},
{
"path": "src/components/hamburgermenu/hamburgermenu.css",
"chars": 2040,
"preview": "body{\n overflow-x: hidden;\n}\n.header {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify"
},
{
"path": "src/components/home/home.css",
"chars": 0,
"preview": ""
},
{
"path": "src/components/home/home.jsx",
"chars": 1664,
"preview": "import HeroSection from '../HeroSection/hersosection.component'\nimport HomeSection1 from '../homesection1/homesection1.c"
},
{
"path": "src/components/homePage/homePage.css",
"chars": 7706,
"preview": ".effetsimg {\n width: 100%;\n}\n\n.bgvideowrap {\n position: relative;\n\n\n}\n\n.video {\n width: 100%;\n min-height: 100vh;\n "
},
{
"path": "src/components/homePage/homepage.jsx",
"chars": 8171,
"preview": "import Clients from '../clients/clients.component'\nimport Slider from '../slider/slider.component'\nimport JoinMail from "
},
{
"path": "src/components/homesection1/homesection1.component.jsx",
"chars": 461,
"preview": "import './homesection1.css'\n\nexport default function HomeSection1(){\n\n return(\n <div className='sectionBackgro"
},
{
"path": "src/components/homesection1/homesection1.css",
"chars": 769,
"preview": ".sectionBackground{\n background-color:#FFBF23 ;\n display: flex;\n flex-direction: row;\n width:100%;\n heigh"
},
{
"path": "src/components/introsection/introsection.component.jsx",
"chars": 302,
"preview": "import './introsection.css'\n\nexport default function introSection({ data })\n{\n return(\n <div className='section1'>"
},
{
"path": "src/components/introsection/introsection.css",
"chars": 718,
"preview": ".section1{\n position: relative;\n flex-direction: column;\n display:flex;\n align-items: center;\n}\n.introimage{"
},
{
"path": "src/components/joinmail/joinMail.component.jsx",
"chars": 267,
"preview": "import './joinmail.css'\n\nexport default function joinMail(){\n return(\n <section>\n <div className='mailj"
},
{
"path": "src/components/joinmail/joinmail.css",
"chars": 231,
"preview": ".mailjoin{\n margin-top: 5em;\n justify-content: center;\n text-align: center;\n }\n .mailjoin h1{\n font-size: "
},
{
"path": "src/components/meubar/menubar.component.jsx",
"chars": 1189,
"preview": "import {Link} from 'react-router-dom'\nimport './menubar.css'\n\nexport default function menuBar(){\n\n \n return (\n\n "
},
{
"path": "src/components/meubar/menubar.css",
"chars": 2238,
"preview": "/* Menu bar styles */\n\n/* Styling for the menu container */\n.menu-container {\n \n display: flex;\n align-items: center;\n"
},
{
"path": "src/components/moving-left/moving-left.component.jsx",
"chars": 1659,
"preview": "import React from 'react';\nimport './moving-left.css';\n\nexport default function movingLeft ({ data })\n{\n return (\n <"
},
{
"path": "src/components/moving-left/moving-left.css",
"chars": 3531,
"preview": ".background-image {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n \n flex-direction: column;"
},
{
"path": "src/components/nav-bar/nav-bar.component.jsx",
"chars": 1313,
"preview": "import {Link} from 'react-router-dom'\nimport React, {useState} from 'react'\nimport './nav-bar.css'\n\nexport default funct"
},
{
"path": "src/components/nav-bar/nav-bar.css",
"chars": 2568,
"preview": "/* Menu bar styles */\n\n/* Styling for the menu container */\n.menu-container {\n \n display: flex;\n align-items: cent"
},
{
"path": "src/components/overboxes/overboxes.component.jsx",
"chars": 26,
"preview": "import './overboxes.css'\n\n"
},
{
"path": "src/components/overboxes/overboxes.css",
"chars": 0,
"preview": ""
},
{
"path": "src/components/questions/questions.component.jsx",
"chars": 473,
"preview": "import './questions.css'\n\nexport default function question ({data}){\n\n return(\n <>\n <div style={{ d"
},
{
"path": "src/components/questions/questions.css",
"chars": 210,
"preview": ".expandable {\n background: #fff;\n overflow: hidden;\n color: #000; \n line-height: 50px;\n transition: all"
},
{
"path": "src/components/quote/quote.component.jsx",
"chars": 995,
"preview": "import './quote.css'\n\nexport default function quote(){\n return(\n <div className='section5Container'>\n "
},
{
"path": "src/components/quote/quote.css",
"chars": 1363,
"preview": ".section5Container{\n display:flex;\n justify-content: center;\n align-items: center;\n}\n.section5{\n display: fl"
},
{
"path": "src/components/review/review.component.jsx",
"chars": 1509,
"preview": "import './review.css'\n\nexport default function review(){\n\n return(\n <div className='reviewContainer'>\n "
},
{
"path": "src/components/review/review.css",
"chars": 1040,
"preview": ".reviewContainer{\n display:flex;\n flex-direction: column;\n}\n.reviewiconscontainer{\n display:flex;\n flex-dire"
},
{
"path": "src/components/slider/slider.component.jsx",
"chars": 1923,
"preview": "import React, { useState } from \"react\";\nimport \"./slider.css\";\n\nconst Slider = () => {\n const quotes = [\n {\n t"
},
{
"path": "src/components/slider/slider.css",
"chars": 848,
"preview": "\n.slider {\n position: relative;\n width: 100%;\n margin: 0 auto;\n background-color: #F5BB44;\n }\n \n .slides "
},
{
"path": "src/components/solutions/solution.css",
"chars": 1204,
"preview": ".section2{\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n.subse"
},
{
"path": "src/components/solutions/solutions.jsx",
"chars": 3598,
"preview": "import './solution.css'\nimport IntroSection from '../introsection/introsection.component';\nimport FAQSection from '../FA"
},
{
"path": "src/components/solutionsection1/solutionsection1.component.jsx",
"chars": 852,
"preview": "import React from 'react';\nimport './solutionsection1.css'\n\nexport default function solutionSection1 ({ data })\n{\n retu"
},
{
"path": "src/components/solutionsection1/solutionsection1.css",
"chars": 1610,
"preview": "\n.row{\n position: relative;\n content: \"\";\n clear: both;\n display: flex;\n justify-content: center;\n ali"
},
{
"path": "src/components/solutionsection2/solutionsection2.component.jsx",
"chars": 878,
"preview": "import React from 'react';\nimport './solutionsection2.css';\n\nexport default function solutionSection1 ({ data })\n{\n ret"
},
{
"path": "src/components/solutionsection2/solutionsection2.css",
"chars": 1057,
"preview": ".image-container {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n height:550px;\n align-item"
},
{
"path": "src/components/solutionsection3/solutionsection3.component.jsx",
"chars": 279,
"preview": "import React from 'react';\nimport './solutionsection3.css'\n\nexport default function solutionSection3 ({ data })\n{\n \n r"
},
{
"path": "src/components/solutionsection3/solutionsection3.css",
"chars": 83,
"preview": ".section3{\n display: flex;\n flex-direction:column;\n align-items: center;\n}"
},
{
"path": "src/components/solutionsection3content/solutionsection3content.component.jsx",
"chars": 596,
"preview": "import React from 'react';\nimport './solutionsection3content.css'\n\nexport default function solutionSection3Content ({ da"
},
{
"path": "src/components/solutionsection3content/solutionsection3content.css",
"chars": 1321,
"preview": ".content{\n position: relative;\n display:flex;\n flex-direction: row;\n align-items: center;\n justify-conten"
},
{
"path": "src/components/solutionsection3content2/solutionsection3content2.component.jsx",
"chars": 510,
"preview": "import React from 'react';\nimport './solutionsection3content2.css'\n\nexport default function solutionSection3Content ({ d"
},
{
"path": "src/components/solutionsection3content2/solutionsection3content2.css",
"chars": 1392,
"preview": ".content1{\n position: relative;\n display:flex;\n flex-direction: row;\n align-items: center;\n justify-conte"
},
{
"path": "src/components/team/team.css",
"chars": 631,
"preview": ".team{\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.colum{\n display:flex;\n flex-dire"
},
{
"path": "src/components/team/team.jsx",
"chars": 2979,
"preview": "import './team.css'\n\nexport default function team(){\n\n return(\n <div className='team'>\n <h1>Our Tea"
},
{
"path": "src/components/tech/tech.component.jsx",
"chars": 1320,
"preview": "import React,{useState} from 'react'\nimport './tech.css'\n\nexport default function Tech(){\n const [imagebox, setImageb"
},
{
"path": "src/components/tech/tech.css",
"chars": 1393,
"preview": ".techContainer{\n display: flex;\n flex-direction: row;\n margin-left: 180px;\n margin-right: 180px;\n margin-"
},
{
"path": "src/components/technologies/technologies.css",
"chars": 273,
"preview": ".section4{\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n align-items: center;\n}\n"
},
{
"path": "src/components/technologies/technologies.jsx",
"chars": 3256,
"preview": "import './technologies.css'\nimport IntroductionSection from '../introsection/introsection.component'\nimport FAQSection f"
},
{
"path": "src/firebase.js",
"chars": 736,
"preview": "import { initializeApp } from \"firebase/app\";\nimport { getFirestore } from 'firebase/firestore/lite';\nimport { Database,"
},
{
"path": "src/gloabal.css",
"chars": 52,
"preview": "body {\n font-family: 'Bahnschrift Light';\n }\n "
},
{
"path": "src/index.css",
"chars": 366,
"preview": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Can"
},
{
"path": "src/index.js",
"chars": 542,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimpor"
},
{
"path": "src/reportWebVitals.js",
"chars": 362,
"preview": "const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals'"
},
{
"path": "src/setupTests.js",
"chars": 241,
"preview": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).to"
}
]
// ... and 3 more files (download for full content)
About this extraction
This page contains the full source code of the brahmGAN/bramgan.ai GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 95 files (10.4 MB), approximately 36.7k tokens, and a symbol index with 37 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.