├── public ├── favicon.ico ├── img │ ├── AI.jpg │ ├── IT.jpg │ ├── AI agent.jpg │ ├── chat gpt.jpg │ ├── grid-img1.jpg │ ├── grid-img2.jpg │ ├── grid-img3.jpg │ ├── our team.jpg │ ├── our culture.jpg │ ├── our vision.jpg │ ├── Shadow Thorn.jpg │ └── dicover magic.jpg ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json └── index.html ├── src ├── images │ ├── AI.jpg │ ├── IT.jpg │ ├── AI agent.jpg │ ├── chat gpt.jpg │ ├── grid-img1.jpg │ ├── grid-img2.jpg │ ├── grid-img3.jpg │ ├── our team.jpg │ ├── landscape1.jpg │ ├── landscape2.jpg │ ├── landscape3.jpg │ ├── landscape4.jpg │ ├── landscape5.jpg │ ├── landscape6.jpg │ ├── our culture.jpg │ ├── our vision.jpg │ ├── Shadow Thorn.jpg │ ├── dicover magic.jpg │ └── slider-background.jpg ├── setupTests.js ├── App.test.js ├── App.js ├── reportWebVitals.js ├── index.css ├── pages │ ├── Video.js │ ├── Footer.js │ ├── PlayGame.js │ ├── Subscribe.js │ ├── SocialLinks.js │ ├── Carousel.js │ ├── Contact.js │ ├── Header.js │ ├── Landing.js │ └── GameStory.js ├── index.js ├── App.css └── logo.svg ├── postcss.config.js ├── tailwind.config.js ├── .gitignore ├── package.json └── README.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/img/AI.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/AI.jpg -------------------------------------------------------------------------------- /public/img/IT.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/IT.jpg -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/images/AI.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/AI.jpg -------------------------------------------------------------------------------- /src/images/IT.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/IT.jpg -------------------------------------------------------------------------------- /public/img/AI agent.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/AI agent.jpg -------------------------------------------------------------------------------- /public/img/chat gpt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/chat gpt.jpg -------------------------------------------------------------------------------- /public/img/grid-img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/grid-img1.jpg -------------------------------------------------------------------------------- /public/img/grid-img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/grid-img2.jpg -------------------------------------------------------------------------------- /public/img/grid-img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/grid-img3.jpg -------------------------------------------------------------------------------- /public/img/our team.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/our team.jpg -------------------------------------------------------------------------------- /src/images/AI agent.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/AI agent.jpg -------------------------------------------------------------------------------- /src/images/chat gpt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/chat gpt.jpg -------------------------------------------------------------------------------- /src/images/grid-img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/grid-img1.jpg -------------------------------------------------------------------------------- /src/images/grid-img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/grid-img2.jpg -------------------------------------------------------------------------------- /src/images/grid-img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/grid-img3.jpg -------------------------------------------------------------------------------- /src/images/our team.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/our team.jpg -------------------------------------------------------------------------------- /public/img/our culture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/our culture.jpg -------------------------------------------------------------------------------- /public/img/our vision.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/our vision.jpg -------------------------------------------------------------------------------- /src/images/landscape1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/landscape1.jpg -------------------------------------------------------------------------------- /src/images/landscape2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/landscape2.jpg -------------------------------------------------------------------------------- /src/images/landscape3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/landscape3.jpg -------------------------------------------------------------------------------- /src/images/landscape4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/landscape4.jpg -------------------------------------------------------------------------------- /src/images/landscape5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/landscape5.jpg -------------------------------------------------------------------------------- /src/images/landscape6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/landscape6.jpg -------------------------------------------------------------------------------- /src/images/our culture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/our culture.jpg -------------------------------------------------------------------------------- /src/images/our vision.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/our vision.jpg -------------------------------------------------------------------------------- /public/img/Shadow Thorn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/Shadow Thorn.jpg -------------------------------------------------------------------------------- /public/img/dicover magic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/public/img/dicover magic.jpg -------------------------------------------------------------------------------- /src/images/Shadow Thorn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/Shadow Thorn.jpg -------------------------------------------------------------------------------- /src/images/dicover magic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/dicover magic.jpg -------------------------------------------------------------------------------- /src/images/slider-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinydev618/shadow-thorn/HEAD/src/images/slider-background.jpg -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('tailwindcss'), 4 | require('autoprefixer'), 5 | ], 6 | } -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{js,jsx,ts,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 2 | import Landing from './pages/Landing'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 | 10 | } /> 11 | 12 | 13 |
14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | @import "tailwindcss/base"; 15 | @import "tailwindcss/components"; 16 | @import "tailwindcss/utilities"; -------------------------------------------------------------------------------- /src/pages/Video.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import YouTube from "react-youtube"; 3 | 4 | const Video = () => { 5 | const opts = { 6 | height: "390", 7 | width: "640", 8 | playerVars: { 9 | // https://developers.google.com/youtube/player_parameters 10 | // autoplay: 1, 11 | }, 12 | }; 13 | 14 | // const handleOnReady = (e) => { 15 | // e.target.pauseVideo(); 16 | // }; 17 | 18 | return ( 19 |
20 | 21 |
22 | ); 23 | }; 24 | 25 | export default Video; 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shadowthorn", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "autoprefixer": "^10.4.20", 10 | "lucide-react": "^0.453.0", 11 | "postcss": "^8.4.47", 12 | "react": "^18.3.1", 13 | "react-dom": "^18.3.1", 14 | "react-router-dom": "^6.27.0", 15 | "react-scripts": "5.0.1", 16 | "react-slick": "^0.30.2", 17 | "react-youtube": "^10.1.0", 18 | "slick-carousel": "^1.8.1", 19 | "styled-components": "^6.1.13", 20 | "web-vitals": "^2.1.4" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | }, 46 | "devDependencies": { 47 | "tailwindcss": "^3.4.14" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/pages/Footer.js: -------------------------------------------------------------------------------- 1 | const Footer = () => { 2 | const navLinks = [ 3 | { title: 'SHADOWTHORN STUDIOS HOME', href: '#' }, 4 | { title: 'THE BEST GAMES IN CHATGPT', href: '#' }, 5 | { title: 'RE:MONSTER INSPIRED GAME', href: '#' }, 6 | { title: 'SWORD ART ONLINE RPG GAME', href: '#' }, 7 | { title: 'MASTER SOLO LEVELING GAME', href: '#' }, 8 | { title: 'SHANGRI-LA FRONTIER GAME', href: '#' }, 9 | { title: 'BEST ALTERED CARBON GAME', href: '#' }, 10 | { title: 'THE BEST SHIELD HERO GAME', href: '#' }, 11 | { title: 'A SEVEN DEADLY SINS GAME', href: '#' } 12 | ]; 13 | 14 | return ( 15 | 47 | ); 48 | }; 49 | 50 | export default Footer; -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .righteous-regular { 2 | font-family: "Righteous", serif; 3 | font-weight: 400; 4 | font-style: normal; 5 | font-size: 42px; 6 | line-height: 50.4px; 7 | letter-spacing: 4px; 8 | } 9 | .josefin-font { 10 | font-family: "Josefin Sans", sans-serif; 11 | font-weight: 400; 12 | font-style: normal; 13 | font-size: 24px; 14 | line-height: 36px; 15 | /* color: #A9A9A9; */ 16 | } 17 | 18 | .josefin-font-36 { 19 | font-family: "Josefin Sans", sans-serif; 20 | font-weight: 400; 21 | font-style: normal; 22 | font-size: 36px; 23 | line-height: 45px; 24 | /* color: #A9A9A9; */ 25 | } 26 | 27 | .josefin-AI { 28 | font-family: "Josefin Sans", sans-serif; 29 | font-weight: 400; 30 | font-style: normal; 31 | font-size: 24px; 32 | line-height: 30px; 33 | color: #1B1B1B; 34 | } 35 | 36 | .josefin-AI-Content { 37 | font-family: "Josefin Sans", sans-serif; 38 | font-weight: 400; 39 | font-style: normal; 40 | font-size: 18px; 41 | line-height: 27px; 42 | color: #5E5E5E; 43 | } 44 | 45 | .josefin-font-18 { 46 | font-family: "Josefin Sans", sans-serif; 47 | font-weight: 600; 48 | font-style: normal; 49 | font-size: 18px; 50 | line-height: 27px; 51 | } 52 | 53 | .josefin-button { 54 | font-family: "Josefin Sans", sans-serif; 55 | font-weight: 600; 56 | font-style: normal; 57 | font-size: 18px; 58 | line-height: 27px; 59 | letter-spacing: 1.008px; 60 | padding: 8px 32px; 61 | } 62 | 63 | .righteous-42 { 64 | font-family: "Righteous", serif; 65 | font-weight: 400; 66 | font-style: normal; 67 | font-size: 42px; 68 | line-height: 58.8px; 69 | letter-spacing: 4px; 70 | /* color: #725346; */ 71 | } 72 | 73 | .mb-minu-2 { 74 | margin-bottom: -30px; 75 | } 76 | .translate-min-y { 77 | transform: translateY(-20px); 78 | } 79 | /* 80 | .video-container { 81 | width: 100%; 82 | height: 60vh; 83 | display: flex; 84 | align-items: center; 85 | justify-content: center; 86 | overflow: hidden; 87 | margin: 0; 88 | padding: 0; 89 | } 90 | 91 | .video-container iframe { 92 | width: 100%; 93 | height: 100%; 94 | border: none; 95 | } */ -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 24 | 28 | 37 | React App 38 | 39 | 40 | 41 |
42 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /src/pages/PlayGame.js: -------------------------------------------------------------------------------- 1 | import image1 from "../images/landscape1.jpg"; 2 | import image2 from "../images/landscape2.jpg"; 3 | import image3 from "../images/landscape3.jpg"; 4 | import image4 from "../images/landscape4.jpg"; 5 | import image5 from "../images/landscape5.jpg"; 6 | import image6 from "../images/landscape6.jpg"; 7 | 8 | const PlayGame = () => { 9 | const Games = [ 10 | { 11 | title1: "RISING OF THE SHIELD HERO GAME", 12 | title2: "Inspired by Rising of the Shield Hero - Isekai", 13 | image: image1, 14 | }, 15 | { 16 | title1: "Play Overlord Tomb of Nazarick", 17 | title2: "Inspired by Overlord the Isekai anime with Ainz", 18 | image: image2, 19 | }, 20 | { 21 | title1: "Echoverse 2077 - Cybernetic AI", 22 | title2: "Inspired by Cyberpunk 2077 an Isekai anime show", 23 | image: image3, 24 | }, 25 | { 26 | title1: "Play Eragon - Rise of Dragons", 27 | title2: "Inspired by the book Eragon by Christopher Paolini", 28 | image: image4, 29 | }, 30 | { 31 | title1: "Play ShadowMon Monster Catcher", 32 | title2: "Inspired by Pokemon and other Monster Catcher RPGs", 33 | image: image5, 34 | }, 35 | { 36 | title1: "Play Echoverse Online Now", 37 | title2: "CInspired by 15+ Animes, planets based on each.", 38 | image: image6, 39 | }, 40 | ]; 41 | return ( 42 |
43 | {Games.map((game, index) => ( 44 |
45 |
46 |
50 |

51 | {game.title1.toUpperCase()} 52 |

53 |

54 | {game.title2} 55 |

56 |
57 |
58 | ))} 59 |
60 | ); 61 | }; 62 | 63 | export default PlayGame; 64 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/Subscribe.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | const Subscribe = () => { 4 | const [email, setEmail] = useState(''); 5 | const [isValid, setIsValid] = useState(true); 6 | 7 | const validateEmail = (email) => { 8 | const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 9 | return regex.test(email); 10 | }; 11 | 12 | const handleSubmit = (e) => { 13 | e.preventDefault(); 14 | if (validateEmail(email)) { 15 | // Handle subscription logic here 16 | console.log('Subscribing email:', email); 17 | setEmail(''); 18 | setIsValid(true); 19 | } else { 20 | setIsValid(false); 21 | } 22 | }; 23 | 24 | return ( 25 |
26 |
27 |
28 |

29 | Subscribe 30 |

31 | 32 |
36 |
37 | { 41 | setEmail(e.target.value); 42 | setIsValid(true); 43 | }} 44 | placeholder="Enter your Email" 45 | className={`w-full px-4 py-3 bg-stone-100 border ${ 46 | isValid ? 'border-stone-200' : 'border-red-500' 47 | } focus:outline-none focus:ring-2 focus:ring-stone-300`} 48 | /> 49 | {!isValid && ( 50 |

51 | Please enter a valid email address 52 |

53 | )} 54 |
55 | 56 | 62 |
63 |
64 | 65 |

66 | Get 10% off your first purchase when you sign up for our newsletter! 67 |

68 |
69 |
70 | ); 71 | }; 72 | 73 | export default Subscribe; -------------------------------------------------------------------------------- /src/pages/SocialLinks.js: -------------------------------------------------------------------------------- 1 | const SocialLinks = () => { 2 | const socialLinks = [ 3 | { 4 | name: "TikTok", 5 | url: "#", 6 | icon: ( 7 | 13 | 14 | 15 | ), 16 | }, 17 | { 18 | name: "X (Twitter)", 19 | url: "#", 20 | icon: ( 21 | 27 | 28 | 29 | ), 30 | }, 31 | { 32 | name: "YouTube", 33 | url: "#", 34 | icon: ( 35 | 41 | 42 | 43 | ), 44 | }, 45 | ]; 46 | 47 | return ( 48 |
49 | {socialLinks.map((social) => ( 50 | 56 |
57 | {social.name === "TikTok" && ( 58 |
59 | {social.icon} 60 |
61 | )} 62 | {social.name === "X (Twitter)" && ( 63 |
64 | {social.icon} 65 |
66 | )} 67 | {social.name === "YouTube" && ( 68 |
69 | {social.icon} 70 |
71 | )} 72 |
73 |
74 | ))} 75 |
76 | ); 77 | }; 78 | 79 | export default SocialLinks; 80 | -------------------------------------------------------------------------------- /src/pages/Carousel.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Slider from "react-slick"; 3 | import "slick-carousel/slick/slick.css"; 4 | import "slick-carousel/slick/slick-theme.css"; 5 | import image1 from "../images/AI.jpg"; 6 | import image2 from "../images/chat gpt.jpg"; 7 | import image3 from "../images/IT.jpg"; 8 | import image4 from "../images/our culture.jpg"; 9 | import image5 from "../images/our team.jpg"; 10 | 11 | const Carousel = () => { 12 | const settings = { 13 | dots: false, 14 | infinite: true, 15 | speed: 500, 16 | slidesToShow: 4, 17 | slidesToScroll: 1, 18 | arrows: true, 19 | responsive: [ 20 | { 21 | breakpoint: 1450, 22 | settings: { 23 | slidesToShow: 3, 24 | slidesToScroll: 1, 25 | infinite: true, 26 | }, 27 | }, 28 | { 29 | breakpoint: 1024, 30 | settings: { 31 | slidesToShow: 2, 32 | slidesToScroll: 1, 33 | infinite: true, 34 | }, 35 | }, 36 | { 37 | breakpoint: 640, 38 | settings: { 39 | slidesToShow: 1, 40 | slidesToScroll: 1, 41 | }, 42 | }, 43 | ], 44 | }; 45 | 46 | const articles = [ 47 | { 48 | date: "October 26, 2024", 49 | title: "The Ticker Is Eth: Reviving Blockchain Spirit", 50 | image: image1, 51 | }, 52 | { 53 | date: "October 25, 2024", 54 | title: "How to Play Black Ops 6 a Day Early on Xbox and", 55 | image: image2, 56 | }, 57 | { 58 | date: "October 3, 2024", 59 | title: "Gacha Genie: Revolutionizing Gacha Game", 60 | image: image3, 61 | }, 62 | { 63 | date: "September 2, 2024", 64 | title: "Advancing Game Design with AI - The Future of Text-", 65 | image: image4, 66 | }, 67 | { 68 | date: "August 31, 2024", 69 | title: "Can you play games in ChatGPT? Yes", 70 | image: image5, 71 | }, 72 | ]; 73 | 74 | return ( 75 |
76 |
77 |

78 | {`Shadowthorn Studios Game News and Information for ChatGPT`.toUpperCase()} 79 |

80 |
81 | 82 | {articles.map((article, index) => ( 83 |
84 |
85 | {article.title} 90 |
91 |

{article.date}

92 |

93 | {article.title} 94 |

95 | 99 | Continue Reading 100 | 101 |
102 |
103 |
104 | ))} 105 |
106 |
107 | ); 108 | }; 109 | 110 | export default Carousel; 111 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | 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. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | 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) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | 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) 55 | 56 | ### Making a Progressive Web App 57 | 58 | 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) 59 | 60 | ### Advanced Configuration 61 | 62 | 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) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | 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) 71 | -------------------------------------------------------------------------------- /src/pages/Contact.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Send, Paperclip } from 'lucide-react'; 3 | 4 | const Contact = () => { 5 | const [showForm, setShowForm] = useState(false); 6 | const [email, setEmail] = useState(''); 7 | const [isEmailValid, setIsEmailValid] = useState(true); 8 | const [attachments, setAttachments] = useState(0); 9 | 10 | const validateEmail = (email) => { 11 | const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 12 | return regex.test(email); 13 | }; 14 | 15 | const handleEmailChange = (e) => { 16 | const value = e.target.value; 17 | setEmail(value); 18 | setIsEmailValid(validateEmail(value) || value === ''); 19 | }; 20 | 21 | return ( 22 |
23 |

CONTACT US

24 | 25 | {!showForm ? ( 26 |
27 |

Are You curious about ShadowThorn Studios?

28 |

Have a question or a story to share? Send us a message and we'll get back to you soon.

29 | 30 |
31 |

ShadowThorn Studios Games

32 |

Tripwireonfire@gmail.com

33 | 34 |
35 |

Hours

36 |

Open today 12:00 am - 12:00 am

37 |

Open 24/7/365 our games never sleep and neither do we!

38 |
39 |
40 | 41 | 47 |
48 | ) : ( 49 |
50 |

Drop us a line!

51 | 52 |
53 |
54 | 59 |
60 | 61 |
62 | 69 | {!isEmailValid && ( 70 |

Please enter a valid email address.

71 | )} 72 |
73 | 74 |
75 |