irongit
Sign inRegister
huncholanehuncholane/twenchPublic

basic video section

huncholanehuncholaneauthored
parent d975ce8commit b7cec4aef90232506b319a1a2088244a0079bad1Browse files

6 files changed, +34 -15

+1-0twench_landing_page/app/globals.css
@@ -5,6 +5,7 @@
55 :root {
66 --background: black;
77 --foreground: white;
8+ --primary: #688c65;
89 --ts-small: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
910 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
1011 --ts-medium: 4px 4px 0 #000, -4px -4px 0 #000, 4px -4px 0 #000,
+12-0twench_landing_page/components/VideoSection/VideoSection.css
@@ -1,3 +1,15 @@
11 .VideoSection {
22 @apply w-full h-0 relative;
33 }
4+
5+.VideoSection .Preview {
6+ @apply w-[300px] h-[180px] bg-black border-4 border-primary rounded-md left-1/2 absolute transform -rotate-12 -translate-y-1/2 -translate-x-1/2;
7+}
8+
9+.VideoSection .Preview button {
10+ background: url("/svgs/play.svg") no-repeat center center;
11+ background-size: cover;
12+ @apply w-12 h-12 left-1/2 top-1/2 absolute transform -translate-x-1/2 -translate-y-1/2;
13+ filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%)
14+ contrast(100%);
15+}
+3-9twench_landing_page/components/VideoSection/VideoSection.tsx
@@ -3,16 +3,10 @@ import "./VideoSection.css";
33
44 const VideoSection: React.FC = () => {
55 return (
6- <div className="VideoSection relative w-full">
7- <div className="Preview absolute left-1/2 transform -translate-x-1/2 -rotate-[20] w-96 h-32">
8- <div className="PlayButton absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-white rounded-full flex justify-center items-center">
9- <div className="Triangle w-6 h-6 border-t-2 border-r-2 border-black transform rotate-45"></div>
10- </div>
6+ <div className="VideoSection">
7+ <div className="Preview">
8+ <button></button>
119 </div>
12- <video className="hidden" controls>
13- <source src="/videos/v2.mp4" type="video/mp4" />
14- Your browser does not support the video tag.
15- </video>
1610 </div>
1711 );
1812 };
+11-0twench_landing_page/package-lock.json
@@ -13,6 +13,7 @@
1313 "react-dom": "^18"
1414 },
1515 "devDependencies": {
16+ "@tailwindcss/aspect-ratio": "^0.4.2",
1617 "@types/node": "^20",
1718 "@types/react": "^18",
1819 "@types/react-dom": "^18",
@@ -483,6 +484,16 @@
483484 "tslib": "^2.4.0"
484485 }
485486 },
487+ "node_modules/@tailwindcss/aspect-ratio": {
488+ "version": "0.4.2",
489+ "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
490+ "integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==",
491+ "dev": true,
492+ "license": "MIT",
493+ "peerDependencies": {
494+ "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
495+ }
496+ },
486497 "node_modules/@types/json5": {
487498 "version": "0.0.29",
488499 "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+6-5twench_landing_page/package.json
@@ -9,18 +9,19 @@
99 "lint": "next lint"
1010 },
1111 "dependencies": {
12+ "next": "14.2.15",
1213 "react": "^18",
13- "react-dom": "^18",
14- "next": "14.2.15"
14+ "react-dom": "^18"
1515 },
1616 "devDependencies": {
17- "typescript": "^5",
17+ "@tailwindcss/aspect-ratio": "^0.4.2",
1818 "@types/node": "^20",
1919 "@types/react": "^18",
2020 "@types/react-dom": "^18",
21+ "eslint": "^8",
22+ "eslint-config-next": "14.2.15",
2123 "postcss": "^8",
2224 "tailwindcss": "^3.4.1",
23- "eslint": "^8",
24- "eslint-config-next": "14.2.15"
25+ "typescript": "^5"
2526 }
2627 }
+1-1twench_landing_page/tailwind.config.ts
@@ -12,7 +12,7 @@ const config: Config = {
1212 colors: {
1313 background: "var(--background)",
1414 foreground: "var(--foreground)",
15- primary: "#394b37",
15+ primary: "var(--primary)",
1616 },
1717 screens: {
1818 xs: "456px",