diff --git a/package-lock.json b/package-lock.json index 6a96d35..7b39e1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,11 @@ "name": "socialsphere", "version": "0.1.0", "dependencies": { + "@next/font": "^14.2.15", "next": "15.1.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-icons": "^5.4.0" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -688,6 +690,15 @@ "fast-glob": "3.3.1" } }, + "node_modules/@next/font": { + "version": "14.2.15", + "resolved": "https://registry.npmjs.org/@next/font/-/font-14.2.15.tgz", + "integrity": "sha512-QopYhBmCDDrNDynbi+ZD1hDZXmQXVFo7TmAFp4DQgO/kogz1OLbQ92hPigJbj572eZ3GaaVxNIyYVn3/eAsehg==", + "license": "MIT", + "peerDependencies": { + "next": "*" + } + }, "node_modules/@next/swc-darwin-arm64": { "version": "15.1.0", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.0.tgz", @@ -4543,6 +4554,15 @@ "react": "^19.0.0" } }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 64bb2f6..a8b260d 100644 --- a/package.json +++ b/package.json @@ -9,19 +9,21 @@ "lint": "next lint" }, "dependencies": { + "@next/font": "^14.2.15", + "next": "15.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", - "next": "15.1.0" + "react-icons": "^5.4.0" }, "devDependencies": { - "typescript": "^5", + "@eslint/eslintrc": "^3", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", - "postcss": "^8", - "tailwindcss": "^3.4.1", "eslint": "^9", "eslint-config-next": "15.1.0", - "@eslint/eslintrc": "^3" + "postcss": "^8", + "tailwindcss": "^3.4.1", + "typescript": "^5" } } diff --git a/public/Frame 11.svg b/public/Frame 11.svg new file mode 100644 index 0000000..fe5d098 --- /dev/null +++ b/public/Frame 11.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/Line 5.svg b/public/Line 5.svg new file mode 100644 index 0000000..c143376 --- /dev/null +++ b/public/Line 5.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Line 6.svg b/public/Line 6.svg new file mode 100644 index 0000000..9982af8 --- /dev/null +++ b/public/Line 6.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Line 7.svg b/public/Line 7.svg new file mode 100644 index 0000000..4b07874 --- /dev/null +++ b/public/Line 7.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Line 8.svg b/public/Line 8.svg new file mode 100644 index 0000000..0741ce1 --- /dev/null +++ b/public/Line 8.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Line 9.svg b/public/Line 9.svg new file mode 100644 index 0000000..4b07874 --- /dev/null +++ b/public/Line 9.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/Logo.svg b/public/Logo.svg new file mode 100644 index 0000000..42f4c46 --- /dev/null +++ b/public/Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/MainLogo.svg b/public/MainLogo.svg new file mode 100644 index 0000000..a0a69ef --- /dev/null +++ b/public/MainLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/Stars 2.svg b/public/Stars 2.svg new file mode 100644 index 0000000..efb1416 --- /dev/null +++ b/public/Stars 2.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/governance-tools.svg b/public/governance-tools.svg new file mode 100644 index 0000000..7194c35 --- /dev/null +++ b/public/governance-tools.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/q1.svg b/public/q1.svg new file mode 100644 index 0000000..404af40 --- /dev/null +++ b/public/q1.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/simplify.png b/public/simplify.png new file mode 100644 index 0000000..c8c38b8 Binary files /dev/null and b/public/simplify.png differ diff --git a/public/star 1.svg b/public/star 1.svg new file mode 100644 index 0000000..27ae86e --- /dev/null +++ b/public/star 1.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/globals.css b/src/app/globals.css index 6b717ad..ad428af 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -9,8 +9,8 @@ @media (prefers-color-scheme: dark) { :root { - --background: #0a0a0a; - --foreground: #ededed; + --background: #EEEEEE; + --foreground: #232931; } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..b97f84f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Geist, Geist_Mono, Space_Grotesk, Inter } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ @@ -12,6 +12,16 @@ const geistMono = Geist_Mono({ subsets: ["latin"], }); +const spaceGrotesk = Space_Grotesk({ + variable: "--font-space-grotesk", + subsets: ["latin"], +}); + +const inter = Inter({ + variable: "--font-inter", + subsets: ["latin"], +}); + export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", @@ -25,7 +35,7 @@ export default function RootLayout({ return ( {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 3eee014..4f34d7b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,101 +1,14 @@ -import Image from "next/image"; +// pages/index.js +import Header from "@/component/Header"; +import Head from "next/head"; +import LandingPage from "./pages/LandingPage/LandingPage"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+ <> +
+ +
+ ); } diff --git a/src/app/pages/LandingPage/LandingPage.tsx b/src/app/pages/LandingPage/LandingPage.tsx new file mode 100644 index 0000000..7a1e48e --- /dev/null +++ b/src/app/pages/LandingPage/LandingPage.tsx @@ -0,0 +1,247 @@ +import Header from '@/component/Header'; +import Head from "next/head"; +import React from 'react' +import { BiArrowBack } from 'react-icons/bi'; +import { FaArrowRight } from 'react-icons/fa'; + +const LandingPage = () => { + return ( + <> + + SocialSphere + + + +
+ {/* Navbar */} +
+ + {/* Hero Section */} +
+
+
+
+ Empowering +
+ +

+ Communities +

+
+ Through +
+
+ Decentralization +
+
+
+

+ Are you new here? +

+ +
+ + {/* Features */} +
+ {[ + { + text: "Seamless DAO templates with voting and secure fund management for communities.", + image: "/Frame 11.svg", + id: 1, + }, + { + text: "Empower groups with roles, proposal boards, and financial tools for clear governance.", + image: "/governance-tools.svg", + id: 2, + }, + { + text: "Simplify decisions and funds with stablecoins, multi-sig wallets, and user-friendly tools.", + image: "/simplify.png", + id: 3, + }, + ].map((feature, index) => ( +
+

+ {feature.text} +

+ {`Feature +
+ ))} +
+ + {/* about us */} +
+

+ About +

+

+ Team of product and brand designers that are really passionate about + blockchain technology and good design. We are not just UI freaks! We + advocate users for better product experience and common sense. +

+

+ More About us + +

+
+ + {/* Roadmap */} +
+

+ Roadmap +

+

+ Our roadmap outlines a clear path to enhance SocialSphere, focusing + on user-friendly features, global accessibility, and community + growth. Together, we'll revolutionize how communities collaborate, + govern, and thrive. +

+ +
+ {[ + { + quarter: "Q1", + quarterImage: "/q1.svg", + text: "Q1: Launch MVP and onboard users.", + id: 1, + image: "/line 5.svg", + }, + { + quarter: "Q2", + quarterImage: "/star 1.svg", + + text: "Q2: Add features and enhance accessibility.", + id: 2, + image: "/line 6.svg", + }, + { + quarter: "Q3", + quarterImage: "/star 1.svg", + + text: "Q3: Grow partnerships and user engagement.", + id: 3, + image: "/line 7.svg", + }, + { + quarter: "Q4", + quarterImage: "/star 1.svg", + + text: "Q4: Optimize tools and expand capabilities.", + id: 4, + image: "/line 8.svg", + }, + { + quarter: "Q5", + quarterImage: "/star 1.svg", + + text: "Q5: Scale globally and integrate feedback.", + id: 5, + image: "/line 9.svg", + }, + { + quarter: "Q6", + quarterImage: "/stars 2.svg", + + text: "Q6: Innovate advanced features for communities.", + id: 6, + }, + ].map((step, index) => ( +
+ {/* Curved SVG Line */} + {index < 5 && ( +
+ + + +
+ )} + + {/* Step Quarter */} +
+ {`Quarter +
+ {`Feature + + {/* Step Description */} +
+

+ {step.text} +

+
+
+ ))} +
+
+
+ + ); +} + +export default LandingPage \ No newline at end of file diff --git a/src/component/Header.tsx b/src/component/Header.tsx new file mode 100644 index 0000000..8b36d97 --- /dev/null +++ b/src/component/Header.tsx @@ -0,0 +1,35 @@ +// components/Header.js +import React from "react"; + +const Header = () => { + return ( +
+
+ Logo +

+ SocialSphere +

+
+ + + +
+ ); +}; + +export default Header; diff --git a/tailwind.config.ts b/tailwind.config.ts index 109807b..326057d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -12,6 +12,58 @@ export default { background: "var(--background)", foreground: "var(--foreground)", }, + fontFamily: { + sans: [ + "var(--font-geist-sans)", + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "Segoe UI", + "Roboto", + "Helvetica Neue", + "Arial", + "Noto Sans", + "sans-serif", + ], + mono: [ + "var(--font-geist-mono)", + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "Liberation Mono", + "Courier New", + "monospace", + ], + space: [ + "var(--font-space-grotesk)", + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "Segoe UI", + "Roboto", + "Helvetica Neue", + "Arial", + "Noto Sans", + "sans-serif", + ], + inter: [ + "var(--font-inter)", + "ui-sans-serif", + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + "Segoe UI", + "Roboto", + "Helvetica Neue", + "Arial", + "Noto Sans", + "sans-serif", + ], + }, }, }, plugins: [],