الجمعة، 8 أغسطس 2025

import React from "react"; export default function HomePage() { return (

{/* Header */}

Tawasae | توسّع

{/* Hero Section */}

منصة توسّع

منصة مغربية تفاعلية تحوّل التفاعل الرقمي إلى قيمة اقتصادية من خلال نظام النقاط والمكافآت والدعم المجتمعي.

{/* Services */}

خدمات المنصة

نظام التفاعل

اجمع النقاط من الإعجابات، التعليقات والمشاركات.

تداول النقاط

حوّل نقاطك إلى خدمات رقمية أو دعم مشاريع.

دعم المشاريع

شارك في تمويل المبادرات المجتمعية باستخدام النقاط.

مكافآت الأداء

احصل على جوائز وتحفيزات بناءً على نشاطك.

{/* Footer */}

); }

الأحد، 3 أغسطس 2025

import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"; const dummyStats = [ { name: "Mon", points: 240 }, { name: "Tue", points: 320 }, { name: "Wed", points: 180 }, { name: "Thu", points: 450 }, { name: "Fri", points: 280 }, { name: "Sat", points: 500 }, { name: "Sun", points: 300 }, ]; export default function TawasaeMemberPage() { return (

{/* Profile Card */} U

محمد حيسوس

@mohamedhaissous

المتابعين: 2,350

المتابَعين: 180

{/* Tabs Section */} إحصائيات المنشورات الأرباح {/* Stats Tab */}

إجمالي النقاط

12,540

منها 8,400 من التفاعل، 3,000 من الإحالات، 1,140 من تقييمات الجودة

الرصيد المتاح

75٪ من النقاط قابلة للسحب أو التداول

تطور النقاط هذا الأسبوع

الأربعاء، 30 يوليو 2025

import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; export default function TawasaeHome() { return (

{/* Hero Section */}

Tawasae | توسّع

منصة الاقتصاد التفاعلي الرقمي المعزز بنظام النقاط، تمكّن الأفراد من خلق دخل مستدام عبر التفاعل والمساهمة في المحتوى الرقمي.

{/* Sign Up / Login */}

إنشاء حساب / تسجيل الدخول

البريد الإلكتروني كلمة المرور

ليس لديك حساب؟ أنشئ حسابًا

{/* Vision */}

الرؤية المستقبلية

أن تصبح "Tawasae" أكبر منصة تفاعلية عربية إفريقية تولّد قيمة اقتصادية رقمية قابلة للقياس، مع تأهيل النقاط لتصبح عملة رقمية قابلة للتداول في البورصات.

{/* How It Works */}

آلية النظام

نقاط مقابل تسجيل الدخول اليومي.
نقاط مقابل الإعجابات، التعليقات، والمشاركات.
مضاعفة النقاط حسب جودة التفاعل ومصداقية المستخدم.
توزيع عادل للنقاط لتشجيع المساهمة المجتمعية.

{/* Features */}

مميزات المنصة

{[ "نظام نقاط دقيق وقابل للتطوير", "تحويل النقاط إلى أرباح حقيقية", "إمكانية ترويج حسابات الأعضاء كخدمة", "نظام إحالات متقدم", "دعم كامل للغة العربية", "بيئة تفاعلية خالية من الإعلانات المزعجة", "أدوات تحليل ومتابعة الأداء الشخصي", "نظام تصنيف المستخدمين حسب التفاعل والمصداقية", "واجهة استخدام سهلة ومحفّزة", ].map((feature, i) => ( {feature} ))}

{/* Rewards Tabs */}

نظام النقاط والمكافآت

تسجيل الدخول اليومي التفاعل الإحالات السحب والربح يحصل المستخدم على نقاط بشكل يومي عند الدخول، مع زيادة تدريجية للانتظام. نقاط مقابل الإعجابات، التعليقات، المشاركات، ومشاركة المحتوى الخارجي. كل مستخدم يمكنه دعوة الآخرين، ويكسب نسبة من نقاطهم دون التأثير على أرباحهم. يمكن تحويل النقاط إلى أرباح مالية وسحبها عبر المحافظ الرقمية أو التحويل البنكي.

{/* Digital Services */}

الخدمات الرقمية التي تقدمها المنصة

خدمة الترويج للحسابات الشخصية والصفحات.
منصة مصغرة للوظائف الرقمية.
مساحة لعرض المشاريع والمبادرات الفردية.
مشاركة المحتوى المرئي والمقروء بطريقة مؤمنة.

{/* Dashboard Section */}

لوحة التحكم

نقاطك: 2,450 مرات الدخول: 34 الإحالات: 12 الأرباح: 125 درهم

{/* Chart Placeholder */}

رسم بياني للنقاط

(الرسم البياني سيتم إضافته لاحقًا باستخدام مكتبة Recharts أو Chart.js)

{/* FAQ */}

الأسئلة الشائعة

هل المشاركة مجانية؟ نعم، التسجيل والمشاركة مجانية 100%.
كيف يتم تحويل النقاط إلى أرباح؟ يمكنك طلب سحب عبر لوحة التحكم بعد بلوغ الحد الأدنى.
هل يمكن كسب المال فعلاً؟ نعم، يعتمد على جودة ونشاط مساهماتك.
هل النظام قانوني؟ المنصة مسجلة وتخضع للضوابط التقنية والمالية الرسمية بالمغرب.

{/* Call to Action */}

ابدأ رحلتك الرقمية اليوم

الفرصة بين يديك لخلق دخل مستدام وتوسيع أثرك الرقمي.

); }

Tawasae

الرؤية المستقبلية

آلية النظام

نقاط مقابل تسجيل الدخول، الإعجابات، التعليقات، المشاركات، رفع المحتوى، دعوة الأعضاء.
إمكانية استبدال النقاط بأموال أو خدمات أو مزايا رقمية.
نظام صرف آمن يخضع للعرض والطلب.

البنية التقنية

واجهة متعددة اللغات.
نظام إدارة محتوى مرن.
خوارزميات نقاط قائمة على معايير دولية.
أمان عالي للبيانات وتوافق قانوني.

الإطار القانوني والتنظيمي

تسجيل المشروع كشركة مغربية ذات طابع رقمي اجتماعي.
عقود شراكة، سياسة خصوصية، واستشارات قانونية ومحاسبية.

إطلاق النسخة الأولية (MVP)

إطلاق نسخة مبسطة بواجهة أساسية تسمح برفع المحتوى، تسجيل المستخدمين، واحتساب النقاط، مع لوحة تحكم مبدئية.

الأثر الاقتصادي المحتمل

خلق أكثر من 300 وظيفة مباشرة وغير مباشرة سنويًا.
تحقيق دخل دائم للمستخدمين من خلال الخدمات الرقمية.
جذب المعلنين والشركات عبر نموذج تسويق مبتكر.

كن شريكًا في التأسيس

نحن نبحث عن مستثمرين، رواد أعمال، تقنيين، ومؤسسات داعمة للانضمام إلى منصة مغربية برؤية عالمية.

); }

import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; export default function AdminDashboard() { return (

Admin Dashboard

User Management Point Oversight Reports Settings

Manage Users

Monitor Points

Total points in system: 27,000,000

Active points in use: 12,540,000

Content Reports

</CardContent>
          </Card>
        </TabsContent>

<TabsContent value="settings">
          <Card>
            <CardContent className="space-y-4 p-6">
              <h3 className="text-lg font-semibold">Platform Settings</h3>
              <Label>Exchange rate (MAD per point):</Label>
              <Input defaultValue="0.0527" type="number" />
              <Button className="mt-2">Update</Button>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}

✅ تم الآن إضافة لوحة تحكم إدارية للمشرفين، وتشمل:

إدارة المستخدمين (بحث، إشراف).

تتبع حالة النقاط في النظام.

عرض تقارير المحتوى.

ضبط إعدادات المنصة مثل سعر النقطة.

📦 الآن أصبح لديك تصميم متكامل لمنصة "Tawasae" يشمل:

1. تسجيل/دخول.

2. عرض وتداول النقاط.

3. دعم اللغات (AR | EN | FR).

4. نسخة HTML قابلة للنشر.

5. لوحة تحكم إدارية.

هل ترغب الآن بإخراج الملفات النهائية (HTML + كود React جاهز للدمج)؟ أم إضافة ميزات جديدة؟

<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
</span>
<span class='post-timestamp'>
في
<meta content='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card_30.html' itemprop='url'/>
<a class='timestamp-link' href='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card_30.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2025-07-30T01:10:00-07:00'>يوليو 30, 2025</abbr></a>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card_30.html#comment-form' onclick=''>
ليست هناك تعليقات:
  </a>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-2074873709'>
<a href='https://www.blogger.com/post-edit.g?blogID=3005819615747763590&postID=846046501131804500&from=pencil' title='تعديل الرسالة'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=email' target='_blank' title='إرسال بالبريد الإلكتروني'><span class='share-button-link-text'>إرسال بالبريد الإلكتروني</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='كتابة مدونة حول هذه المشاركة'><span class='share-button-link-text'>كتابة مدونة حول هذه المشاركة</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=twitter' target='_blank' title='‏المشاركة على X'><span class='share-button-link-text'>‏المشاركة على X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='‏المشاركة في Facebook'><span class='share-button-link-text'>‏المشاركة في Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=846046501131804500&target=pinterest' target='_blank' title='‏المشاركة على Pinterest'><span class='share-button-link-text'>‏المشاركة على Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
</div>
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='3005819615747763590' itemprop='blogId'/>
<meta content='8423291292703504743' itemprop='postId'/>
<a name='8423291292703504743'></a>
<div class='post-header'>
<div class='post-header-line-1'></div>
</div>
<div class='post-body entry-content' id='post-body-8423291292703504743' itemprop='description articleBody'>
import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export default function TawasaeInterface() { return ( <main className="p-6 bg-gray-100 min-h-screen"> <h1 className="text-3xl font-bold text-center mb-8">Tawasae Platform</h1>

<Tabs defaultValue="ads" className="max-w-4xl mx-auto">
    <TabsList className="grid w-full grid-cols-2">
      <TabsTrigger value="ads">📢 Ads Feed</TabsTrigger>
      <TabsTrigger value="rewards">🎁 Rewards</TabsTrigger>
    </TabsList>

<TabsContent value="ads">
      <section className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
        {[...Array(4)].map((_, i) => (
          <Card key={i} className="hover:shadow-lg transition">
            <CardContent className="p-4">
              <h2 className="text-xl font-semibold mb-2">Ad Title #{i + 1}</h2>
              <p className="text-gray-600 mb-3">
                This is a sample advertisement content. No rewards are granted for interactions here.
              </p>
              <Button variant="outline">Learn More</Button>
            </CardContent>
          </Card>
        ))}
      </section>
    </TabsContent>

<TabsContent value="rewards">
      <section className="mt-6">
        <Card className="bg-white">
          <CardContent className="p-4">
            <h2 className="text-2xl font-semibold mb-4">Your Rewards Dashboard</h2>
            <p className="text-gray-700 mb-2">Total Points: <span className="font-bold">1,420</span></p>
            <p className="text-gray-700 mb-4">You’ve earned 210 points this week.</p>
            <Button className="bg-green-600 hover:bg-green-700 text-white">Redeem Rewards</Button>
          </CardContent>
        </Card>
      </section>
    </TabsContent>
  </Tabs>
</main>

); }

<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
</span>
<span class='post-timestamp'>
في
<meta content='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card.html' itemprop='url'/>
<a class='timestamp-link' href='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2025-07-30T01:10:00-07:00'>يوليو 30, 2025</abbr></a>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card.html#comment-form' onclick=''>
ليست هناك تعليقات:
  </a>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-2074873709'>
<a href='https://www.blogger.com/post-edit.g?blogID=3005819615747763590&postID=8423291292703504743&from=pencil' title='تعديل الرسالة'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=8423291292703504743&target=email' target='_blank' title='إرسال بالبريد الإلكتروني'><span class='share-button-link-text'>إرسال بالبريد الإلكتروني</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=8423291292703504743&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='كتابة مدونة حول هذه المشاركة'><span class='share-button-link-text'>كتابة مدونة حول هذه المشاركة</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=8423291292703504743&target=twitter' target='_blank' title='‏المشاركة على X'><span class='share-button-link-text'>‏المشاركة على X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=8423291292703504743&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='‏المشاركة في Facebook'><span class='share-button-link-text'>‏المشاركة في Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=8423291292703504743&target=pinterest' target='_blank' title='‏المشاركة على Pinterest'><span class='share-button-link-text'>‏المشاركة على Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
</div>

</div></div>

<div class="date-outer">
        
<h2 class='date-header'><span>الثلاثاء، 29 يوليو 2025</span></h2>

<div class="date-posts">
        
<div class='post-outer'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta content='3005819615747763590' itemprop='blogId'/>
<meta content='1395236586085494323' itemprop='postId'/>
<a name='1395236586085494323'></a>
<div class='post-header'>
<div class='post-header-line-1'></div>
</div>
<div class='post-body entry-content' id='post-body-1395236586085494323' itemprop='description articleBody'>
// Full Professional Platform Design for "Tawasae" // Language: English

import React from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { BarChart2, Star, Users, Settings, Coins } from 'lucide-react'; import { motion } from 'framer-motion';

export default function TawasaePlatform() { return ( <div className="min-h-screen bg-gradient-to-br from-white to-gray-100 p-6"> {/* Header */} <header className="flex justify-between items-center mb-10"> <h1 className="text-4xl font-bold text-red-700">Tawasae</h1> <nav className="space-x-4"> <Button variant="outline">Home</Button> <Button variant="outline">Features</Button> <Button variant="outline">Rewards</Button> <Button variant="outline">Dashboard</Button> <Button>Login</Button> </nav> </header>

{/* Hero Section */}
  <motion.section
    initial={{ opacity: 0, y: -40 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.7 }}
    className="text-center mb-16"
  >
    <h2 className="text-5xl font-extrabold mb-4">Empowering Your Digital Engagement</h2>
    <p className="text-lg text-gray-600 max-w-2xl mx-auto">
      Tawasae is Morocco's first interactive reward-based platform enabling users to earn points through content engagement, sharing, and meaningful interaction.
    </p>
    <div className="mt-6">
      <Button size="lg">Get Started</Button>
    </div>
  </motion.section>

{/* Features Section */}
  <section className="grid md:grid-cols-3 gap-6 mb-16">
    <Card>
      <CardContent className="p-6 text-center">
        <Users className="mx-auto mb-4 text-red-700" size={40} />
        <h3 className="font-bold text-xl mb-2">Community Interaction</h3>
        <p>Earn points by reacting, commenting, and contributing to a vibrant digital community.</p>
      </CardContent>
    </Card>
    <Card>
      <CardContent className="p-6 text-center">
        <Coins className="mx-auto mb-4 text-red-700" size={40} />
        <h3 className="font-bold text-xl mb-2">Reward System</h3>
        <p>Convert your digital activity into points redeemable for valuable rewards or services.</p>
      </CardContent>
    </Card>
    <Card>
      <CardContent className="p-6 text-center">
        <BarChart2 className="mx-auto mb-4 text-red-700" size={40} />
        <h3 className="font-bold text-xl mb-2">Real-Time Analytics</h3>
        <p>Track your engagement, points, and performance metrics in real-time.</p>
      </CardContent>
    </Card>
  </section>

{/* Dashboard Preview */}
  <section className="mb-16">
    <h3 className="text-2xl font-bold mb-4">User Dashboard Preview</h3>
    <Tabs defaultValue="overview" className="w-full">
      <TabsList className="flex space-x-2">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="earnings">Earnings</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="p-4 bg-white rounded-xl shadow">
        <p>Welcome to your dashboard. Here, you can monitor your activity and recent interactions.</p>
      </TabsContent>
      <TabsContent value="earnings" className="p-4 bg-white rounded-xl shadow">
        <p>Total Points Earned: <strong>3,200</strong><br />Total Value: <strong>168 MAD</strong></p>
      </TabsContent>
      <TabsContent value="settings" className="p-4 bg-white rounded-xl shadow">
        <Input placeholder="Change display name" className="mb-2" />
        <Button>Save</Button>
      </TabsContent>
    </Tabs>
  </section>

{/* Call to Action */}
  <motion.section
    initial={{ opacity: 0 }}
    whileInView={{ opacity: 1 }}
    viewport={{ once: true }}
    transition={{ duration: 1 }}
    className="text-center bg-red-700 text-white p-10 rounded-xl"
  >
    <h3 className="text-3xl font-bold mb-2">Start Expanding with Tawasae Today</h3>
    <p className="mb-4">Your engagement is valuable. Make it count.</p>
    <Button variant="secondary">Join Now</Button>
  </motion.section>
</div>

); }

<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
</span>
<span class='post-timestamp'>
في
<meta content='https://earn4read.blogspot.com/2025/07/full-professional-platform-design-for.html' itemprop='url'/>
<a class='timestamp-link' href='https://earn4read.blogspot.com/2025/07/full-professional-platform-design-for.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2025-07-29T00:54:00-07:00'>يوليو 29, 2025</abbr></a>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='https://earn4read.blogspot.com/2025/07/full-professional-platform-design-for.html#comment-form' onclick=''>
ليست هناك تعليقات:
  </a>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-2074873709'>
<a href='https://www.blogger.com/post-edit.g?blogID=3005819615747763590&postID=1395236586085494323&from=pencil' title='تعديل الرسالة'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=1395236586085494323&target=email' target='_blank' title='إرسال بالبريد الإلكتروني'><span class='share-button-link-text'>إرسال بالبريد الإلكتروني</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=1395236586085494323&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='كتابة مدونة حول هذه المشاركة'><span class='share-button-link-text'>كتابة مدونة حول هذه المشاركة</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=1395236586085494323&target=twitter' target='_blank' title='‏المشاركة على X'><span class='share-button-link-text'>‏المشاركة على X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=1395236586085494323&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='‏المشاركة في Facebook'><span class='share-button-link-text'>‏المشاركة في Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=3005819615747763590&postID=1395236586085494323&target=pinterest' target='_blank' title='‏المشاركة على Pinterest'><span class='share-button-link-text'>‏المشاركة على Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
</div>

</div></div>
      
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://earn4read.blogspot.com/search?updated-max=2025-07-29T00:54:00-07:00&max-results=7' id='Blog1_blog-pager-older-link' title='رسائل أقدم'>رسائل أقدم</a>
</span>
<a class='home-link' href='https://earn4read.blogspot.com/'>الصفحة الرئيسية</a>
</div>
<div class='clear'></div>
<div class='blog-feeds'>
<div class='feed-links'>
الاشتراك في:
<a class='feed-link' href='https://earn4read.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>الرسائل (Atom)</a>
</div>
</div>
</div><div class='widget FeaturedPost' data-version='1' id='FeaturedPost1'>
<div class='post-summary'>
<p>
import React from "react";  export default function HomePage() { return (  {/* Header */}  Tawasae | توسّع   العربية  Français  En...
</p>
</div>
<style type='text/css'>
    .image {
      width: 100%;
    }
  </style>
<div class='clear'></div>
</div><div class='widget PopularPosts' data-version='1' id='PopularPosts1'>
<div class='widget-content popular-posts'>
<ul>
<li>
<div class='item-content'>
<div class='item-title'><a href='https://earn4read.blogspot.com/2025/07/full-professional-platform-design-for.html'>(بلا عنوان)</a></div>
<div class='item-snippet'>// Full Professional Platform Design for "Tawasae" // Language: English  import React from 'react'; import { Card, CardCon...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-title'><a href='https://earn4read.blogspot.com/2025/08/import-react-from-react-export-default.html'>(بلا عنوان)</a></div>
<div class='item-snippet'>import React from "react";  export default function HomePage() { return (  {/* Header */}  Tawasae | توسّع   العربية  Français  En...</div>
</div>
<div style='clear: both;'></div>
</li>
<li>
<div class='item-content'>
<div class='item-title'><a href='https://earn4read.blogspot.com/2025/07/import-react-from-react-import-card_30.html'>(بلا عنوان)</a></div>
<div class='item-snippet'>import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/comp...</div>
</div>
<div style='clear: both;'></div>
</li>
</ul>
<div class='clear'></div>
</div>
</div></div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>

</div>

</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot section' id='footer-1'><div class='widget HTML' data-version='1' id='HTML1'>
<div class='widget-content'>
// Full Professional Platform Design for "Tawasae" // Language: English

export default function TawasaePlatform() { return ( <div classname="min-h-screen bg-gradient-to-br from-white to-gray-100 p-6"> {/* Header */} <header classname="flex justify-between items-center mb-10"> <h1 classname="text-4xl font-bold text-red-700">Tawasae</h1> <nav classname="space-x-4"> <button variant="outline">Home</button> <button variant="outline">Features</button> <button variant="outline">Rewards</button> <button variant="outline">Dashboard</button> <button>Login</button> </nav> </header>

{/* Hero Section */}
  <motion.section
    initial={{ opacity: 0, y: -40 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.7 }}
    classname="text-center mb-16"
  >
    <h2 classname="text-5xl font-extrabold mb-4">Empowering Your Digital Engagement</h2>
    <p classname="text-lg text-gray-600 max-w-2xl mx-auto">
      Tawasae is Morocco's first interactive reward-based platform enabling users to earn points through content engagement, sharing, and meaningful interaction.
    </p>
    <div classname="mt-6">
      <button size="lg">Get Started</button>
    </div>

{/* Features Section */}
  <section classname="grid md:grid-cols-3 gap-6 mb-16">
    <card>
      <cardcontent classname="p-6 text-center">
        <users classname="mx-auto mb-4 text-red-700" size={40} />
        <h3 classname="font-bold text-xl mb-2">Community Interaction</h3>
        <p>Earn points by reacting, commenting, and contributing to a vibrant digital community.</p>
      </users></cardcontent>
    </card>
    <card>
      <cardcontent classname="p-6 text-center">
        <coins classname="mx-auto mb-4 text-red-700" size={40} />
        <h3 classname="font-bold text-xl mb-2">Reward System</h3>
        <p>Convert your digital activity into points redeemable for valuable rewards or services.</p>
      </coins></cardcontent>
    </card>
    <card>
      <cardcontent classname="p-6 text-center">
        <barchart2 classname="mx-auto mb-4 text-red-700" size={40} />
        <h3 classname="font-bold text-xl mb-2">Real-Time Analytics</h3>
        <p>Track your engagement, points, and performance metrics in real-time.</p>
      </barchart2></cardcontent>
    </card>
  </section>

{/* Dashboard Preview */}
  <section classname="mb-16">
    <h3 classname="text-2xl font-bold mb-4">User Dashboard Preview</h3>
    <tabs defaultvalue="overview" classname="w-full">
      <tabslist classname="flex space-x-2">
        <tabstrigger value="overview">Overview</tabstrigger>
        <tabstrigger value="earnings">Earnings</tabstrigger>
        <tabstrigger value="settings">Settings</tabstrigger>
      </tabslist>
      <tabscontent value="overview" classname="p-4 bg-white rounded-xl shadow">
        <p>Welcome to your dashboard. Here, you can monitor your activity and recent interactions.</p>
      </tabscontent>
      <tabscontent value="earnings" classname="p-4 bg-white rounded-xl shadow">
        <p>Total Points Earned: <strong>3,200</strong><br />Total Value: <strong>168 MAD</strong></p>
      </tabscontent>
      <tabscontent value="settings" classname="p-4 bg-white rounded-xl shadow">
        <input placeholder="Change display name" classname="mb-2" />
        <button>Save</button>
      </tabscontent>
    </tabs>
  </section>

{/* Call to Action */}
  <motion.section
    initial={{ opacity: 0 }}
    whileinview={{ opacity: 1 }}
    viewport={{ once: true }}
    transition={{ duration: 1 }}
    classname="text-center bg-red-700 text-white p-10 rounded-xl"
  >
    <h3 classname="text-3xl font-bold mb-2">Start Expanding with Tawasae Today</h3>
    <p classname="mb-4">Your engagement is valuable. Make it count.</p>
    <button variant="secondary">Join Now</button>
  
</motion.section
></motion.section
></div>

); }
</div>
<div class='clear'></div>
</div><div class='widget Followers' data-version='1' id='Followers1'>
<h2 class='title'>المتابعون</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<div><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
    window.followersIframe = null;
    function followersIframeOpen(url) {
      gapi.load("gapi.iframes", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          window.followersIframe = gapi.iframes.getContext().openChild({
            url: url,
            where: document.getElementById("followers-iframe-container"),
            messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
            messageHandlers: {
              '_ready': function(obj) {
                window.followersIframe.getIframeEl().height = obj.height;
              },
              'reset': function() {
                window.followersIframe.close();
                followersIframeOpen("https://www.blogger.com/followers/frame/3005819615747763590?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMzMzMzMzMiByMzMzY2OTkqC3RyYW5zcGFyZW50MgcjODg4ODg4OgcjMzMzMzMzQgcjMzM2Njk5SgcjMDAwMDAwUgcjMzM2Njk5Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26hl\x3dar\x26origin\x3dhttps://earn4read.blogspot.com");
              },
              'open': function(url) {
                window.followersIframe.close();
                followersIframeOpen(url);
              }
            }
          });
        }
      });
    }
    followersIframeOpen("https://www.blogger.com/followers/frame/3005819615747763590?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByMzMzMzMzMiByMzMzY2OTkqC3RyYW5zcGFyZW50MgcjODg4ODg4OgcjMzMzMzMzQgcjMzM2Njk5SgcjMDAwMDAwUgcjMzM2Njk5Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26hl\x3dar\x26origin\x3dhttps://earn4read.blogspot.com");
  </script></div>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>من أنا</h2>
<div class='widget-content'>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/17392399131636971396' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
Haisouss 
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/17392399131636971396' rel='author'>عرض الملف الشخصي الكامل الخاص بي</a>
<div class='clear'></div>
</div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>أرشيف المدونة الإلكترونية</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='flat'>
<li class='archivedate'>
<a href='https://earn4read.blogspot.com/2025/08/'>أغسطس 2025</a> (2)
      </li>
<li class='archivedate'>
<a href='https://earn4read.blogspot.com/2025/07/'>يوليو 2025</a> (8)
      </li>
<li class='archivedate'>
<a href='https://earn4read.blogspot.com/2025/04/'>أبريل 2025</a> (3)
      </li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div>
<div class='widget ReportAbuse' data-version='1' id='ReportAbuse1'>
<h3 class='title'>
<a class='report_abuse' href='https://www.blogger.com/go/report-abuse' rel='noopener nofollow' target='_blank'>
الإبلاغ عن إساءة الاستخدام
</a>
</h3>
</div>
<div class='widget PageList' data-version='1' id='PageList1'>
<div class='widget-content'>
<ul>
<li>
<a href='http://earn4read.blogspot.com/'>Accueil</a>
</li>
<li>
<a href='https://earn4read.blogspot.com/p/blog-page.html'>اقرأ و اربح </a>
</li>
</ul>
<div class='clear'></div>
</div>
</div><div class='widget BlogSearch' data-version='1' id='BlogSearch1'>
<h2 class='title'>بحث هذه المدونة الإلكترونية</h2>
<div class='widget-content'>
<div id='BlogSearch1_form'>
<form action='https://earn4read.blogspot.com/search' class='gsc-search-box' target='_top'>
<table cellpadding='0' cellspacing='0' class='gsc-search-box'>
<tbody>
<tr>
<td class='gsc-input'>
<input autocomplete='off' class='gsc-input' name='q' size='10' title='search' type='text' value=''/>
</td>
<td class='gsc-search-button'>
<input class='gsc-search-button' title='search' type='submit' value='البحث'/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class='clear'></div>
</div>
</div>

<div class='foot section' id='footer-3' name='التذييل'><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
المظهر: نافذة الصورة. يتم التشغيل بواسطة <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>

</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace('loading', '');
      }, 10);
  </script>